From f0cb1017b66b987bd8d2554a930bada786275651 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Thu, 8 Feb 2024 16:28:26 +0000
Subject: [PATCH] Feat UI improve troubleshooting profile messaging (#16590)

related to #16417

Improve the error messages for windows mdm profile errors.

This will now format the errors in the UI tooltip


![image](https://github.com/fleetdm/fleet/assets/1153709/a3f69d84-639f-47e9-b361-1cd7be238235)
---
 ...6417-improve-windows-profile-error-tooltip |  1 +
 .../TooltipTruncatedTextCell.tsx              |  8 ++-
 frontend/interfaces/mdm.ts                    |  2 +-
 .../OSSettingsTable/OSSettingsTableConfig.tsx | 61 +++++++++++++++++--
 4 files changed, 65 insertions(+), 7 deletions(-)
 create mode 100644 changes/issue-16417-improve-windows-profile-error-tooltip

diff --git a/changes/issue-16417-improve-windows-profile-error-tooltip b/changes/issue-16417-improve-windows-profile-error-tooltip
new file mode 100644
index 000000000..390aae231
--- /dev/null
+++ b/changes/issue-16417-improve-windows-profile-error-tooltip
@@ -0,0 +1 @@
+- improve windows mdm profile error tooltip messages.
diff --git a/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx b/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx
index 4405a6fa0..e52223405 100644
--- a/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx
+++ b/frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx
@@ -7,7 +7,10 @@ import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 import { COLORS } from "styles/var/colors";
 
 interface ITooltipTruncatedTextCellProps {
-  value: string | number | boolean;
+  value: React.ReactNode;
+  /** Tooltip to dispay. If this is provided then this will be rendered as the tooltip content. If
+   * not the value will be displayed as the tooltip content. Defaults to `undefined` */
+  tooltip?: React.ReactNode;
   /** 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`.
@@ -20,6 +23,7 @@ const baseClass = "tooltip-truncated-cell";
 
 const TooltipTruncatedTextCell = ({
   value,
+  tooltip,
   tooltipBreakOnWord = false,
   classes = "w250",
 }: ITooltipTruncatedTextCellProps): JSX.Element => {
@@ -56,7 +60,7 @@ const TooltipTruncatedTextCell = ({
         delayHide={200} // need delay set to hover using clickable
       >
         <>
-          {value}
+          {tooltip ?? value}
           <div className="safari-hack">&nbsp;</div>
           {/* Fixes triple click selecting next element in Safari */}
         </>
diff --git a/frontend/interfaces/mdm.ts b/frontend/interfaces/mdm.ts
index 118157a85..316295eae 100644
--- a/frontend/interfaces/mdm.ts
+++ b/frontend/interfaces/mdm.ts
@@ -55,7 +55,7 @@ export interface IMdmSummaryResponse {
   mobile_device_management_solution: IMdmSolution[] | null;
 }
 
-type ProfilePlatform = "darwin" | "windows";
+export type ProfilePlatform = "darwin" | "windows";
 
 export interface IProfileLabel {
   name: string;
diff --git a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx
index dfeeb5a52..e3beb3d62 100644
--- a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx
+++ b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx
@@ -7,6 +7,7 @@ import {
   // FLEET_FILEVAULT_PROFILE_IDENTIFIER,
   IHostMdmProfile,
   MdmProfileStatus,
+  ProfilePlatform,
   isWindowsDiskEncryptionStatus,
 } from "interfaces/mdm";
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
@@ -53,6 +54,46 @@ interface IDataColumn {
   sortType?: string;
 }
 
+/**
+ * generates the formatted tooltip for the error column.
+ * the expected format of the error string is:
+ * "key1: value1, key2: value2, key3: value3"
+ */
+const generateFormattedTooltip = (detail: string) => {
+  const keyValuePairs = detail.split(/, */);
+  const formattedElements = keyValuePairs.map((pair, index) => {
+    const [key, value] = pair.split(/: */);
+    return (
+      <span key={key}>
+        <b>{key.trim()}:</b> {value.trim()}
+        {/* dont add the trailing comma for the last element */}
+        {index !== keyValuePairs.length - 1 && (
+          <>
+            ,<br />
+          </>
+        )}
+      </span>
+    );
+  });
+
+  return <>{formattedElements}</>;
+};
+
+/**
+ * generates the error tooltip for the error column. This will be formatted or
+ * unformatted.
+ */
+const generateErrorTooltip = (
+  cellValue: string,
+  platform: ProfilePlatform,
+  detail: string
+) => {
+  if (platform !== "windows") {
+    return cellValue;
+  }
+  return generateFormattedTooltip(detail);
+};
+
 const tableHeaders: IDataColumn[] = [
   {
     title: "Name",
@@ -85,13 +126,25 @@ const tableHeaders: IDataColumn[] = [
     accessor: "detail",
     Cell: (cellProps: ICellProps): JSX.Element => {
       const profile = cellProps.row.original;
+
+      const value =
+        (profile.status === "failed" && profile.detail) ||
+        DEFAULT_EMPTY_CELL_VALUE;
+
+      const tooltip =
+        profile.status === "failed"
+          ? generateErrorTooltip(
+              value,
+              cellProps.row.original.platform,
+              profile.detail
+            )
+          : null;
+
       return (
         <TooltipTruncatedTextCell
           tooltipBreakOnWord
-          value={
-            (profile.status === "failed" && profile.detail) ||
-            DEFAULT_EMPTY_CELL_VALUE
-          }
+          tooltip={tooltip}
+          value={value}
         />
       );
     },