Fix word wrapping on TruncatedTextCell tooltip (#12567)

relates to #12473

Fixes ui bug where the wrapping text on a tooltip in TruncatedTextCell
did not display properly. I fixed this by adding a prop to the component
`tooltipBreakOnWord` which allows devs to configure if the tooltip
breaks on a word, or by default on any character.

**Breaking on a word:**


![image](https://github.com/fleetdm/fleet/assets/1153709/1e3488fd-0051-4bed-8597-e4249a654da3)

**Breaking on any character (default behaviour):**


![image](https://github.com/fleetdm/fleet/assets/1153709/cbb9481f-5cab-4c9b-873a-2343721ebdfe)

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality

changes/issue-12473-fix-tooltip-line-breaking-on-table-cell

@@ -0,0 +1 @@
+- fix tooltip word wrapping on the error cell in the macOS settings table

frontend/components/TableContainer/DataTable/TruncatedTextCell/TruncatedTextCell.tsx

@@ -1,11 +1,17 @@
 import React, { useState, useRef, useLayoutEffect } from "react";
 import { uniqueId } from "lodash";
+import classnames from "classnames";
 
 import ReactTooltip from "react-tooltip";
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 interface ITruncatedTextCellProps {
   value: string | number | boolean;
+  /** If set to `true` the text inside the tooltip will break on words instead of any character.
+   * By default the tooltip text breaks on any character.
+   * Default is `false`.
+   */
+  tooltipBreakOnWord?: boolean;
   classes?: string;
 }
 
@@ -13,8 +19,13 @@ const baseClass = "truncated-cell";
 
 const TruncatedTextCell = ({
   value,
+  tooltipBreakOnWord = false,
   classes = "w250",
 }: ITruncatedTextCellProps): JSX.Element => {
+  const classNames = classnames(baseClass, classes, {
+    "tooltip-break-on-word": tooltipBreakOnWord,
+  });
+
   const ref = useRef<HTMLInputElement>(null);
 
   const [offsetWidth, setOffsetWidth] = useState(0);
@@ -31,7 +42,7 @@ const TruncatedTextCell = ({
   const tooltipDisabled = offsetWidth === scrollWidth;
   const isDefaultValue = value === DEFAULT_EMPTY_CELL_VALUE;
   return (
-    <div ref={ref} className={`${baseClass} ${classes}`}>
+    <div ref={ref} className={classNames}>
       <div
         className={"data-table__truncated-text"}
         data-tip

frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss

@@ -23,6 +23,13 @@
     }
   }
 
+  // allows for the tooltip text to break on a word instead of a character
+  &.tooltip-break-on-word {
+    .truncated-tooltip {
+      word-break: normal
+    }
+  }
+
   // Responsive design overrides react-tooltip width that overflows off screen
   .truncated-tooltip {
     max-width: 300px;

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -38,8 +38,6 @@ import BackLink from "components/BackLink";
 import { normalizeEmptyValues, wrapFleetHelper } from "utilities/helpers";
 import permissions from "utilities/permissions";
 
-import { createMockHostMacMdmProfile } from "__mocks__/hostMock";
-
 import HostSummaryCard from "../cards/HostSummary";
 import AboutCard from "../cards/About";
 import AgentOptionsCard from "../cards/AgentOptions";

frontend/pages/hosts/details/MacSettingsModal/MacSettingsTable/MacSettingsTableConfig.tsx

@@ -80,6 +80,7 @@ const tableHeaders: IDataColumn[] = [
       const profile = cellProps.row.original;
       return (
         <TruncatedTextCell
+          tooltipBreakOnWord
           value={
             (profile.status === "failed" && profile.detail) ||
             DEFAULT_EMPTY_CELL_VALUE