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 ( ); },