From 9f3331ef940092932b254cc2a62ae49241831b31 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Thu, 29 Jun 2023 17:04:25 +0100
Subject: [PATCH] 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
---
 ...ue-12473-fix-tooltip-line-breaking-on-table-cell |  1 +
 .../TruncatedTextCell/TruncatedTextCell.tsx         | 13 ++++++++++++-
 .../DataTable/TruncatedTextCell/_styles.scss        |  7 +++++++
 .../details/HostDetailsPage/HostDetailsPage.tsx     |  2 --
 .../MacSettingsTable/MacSettingsTableConfig.tsx     |  1 +
 5 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 changes/issue-12473-fix-tooltip-line-breaking-on-table-cell

diff --git a/changes/issue-12473-fix-tooltip-line-breaking-on-table-cell b/changes/issue-12473-fix-tooltip-line-breaking-on-table-cell
new file mode 100644
index 0000000000..55781d4974
--- /dev/null
+++ b/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
diff --git a/frontend/components/TableContainer/DataTable/TruncatedTextCell/TruncatedTextCell.tsx b/frontend/components/TableContainer/DataTable/TruncatedTextCell/TruncatedTextCell.tsx
index 3d1abae71a..4782a0d41e 100644
--- a/frontend/components/TableContainer/DataTable/TruncatedTextCell/TruncatedTextCell.tsx
+++ b/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
diff --git a/frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss b/frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss
index 9d9a8655e6..a33061b394 100644
--- a/frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss
+++ b/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;
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index d33df1e40b..f67a3f13d7 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/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";
diff --git a/frontend/pages/hosts/details/MacSettingsModal/MacSettingsTable/MacSettingsTableConfig.tsx b/frontend/pages/hosts/details/MacSettingsModal/MacSettingsTable/MacSettingsTableConfig.tsx
index edeea56dbc..39bd021222 100644
--- a/frontend/pages/hosts/details/MacSettingsModal/MacSettingsTable/MacSettingsTableConfig.tsx
+++ b/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