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}
{/* 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 (
+
+ {key.trim()}: {value.trim()}
+ {/* dont add the trailing comma for the last element */}
+ {index !== keyValuePairs.length - 1 && (
+ <>
+ ,
+ >
+ )}
+
+ );
+ });
+
+ 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 (
);
},