diff --git a/changes/46066-fix-on-automatic-mdm-status-display b/changes/46066-fix-on-automatic-mdm-status-display new file mode 100644 index 0000000000..4a72d7c275 --- /dev/null +++ b/changes/46066-fix-on-automatic-mdm-status-display @@ -0,0 +1,2 @@ +* Fixed MDM status column in the host table showing "On (automatic)" instead of "On (company-owned)". +* Added hosts page tooltip to MDM status on hover. diff --git a/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tests.tsx b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tests.tsx new file mode 100644 index 0000000000..2917951b49 --- /dev/null +++ b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tests.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; + +import createMockHost from "__mocks__/hostMock"; +import { MdmEnrollmentStatus } from "interfaces/mdm"; +import HostMdmStatusCell from "./HostMdmStatusCell"; + +const renderCell = (platform: string, value?: MdmEnrollmentStatus) => { + const host = createMockHost({ platform } as any); + return render( + + ); +}; + +describe("HostMdmStatusCell", () => { + it("renders 'Not supported' for Chrome hosts", () => { + renderCell("chrome"); + expect(screen.getByText("Not supported")).toBeInTheDocument(); + }); + + it("renders 'Not supported' for Linux hosts", () => { + renderCell("ubuntu"); + expect(screen.getByText("Not supported")).toBeInTheDocument(); + }); + + it("renders 'On (manual)' for Apple hosts with manual enrollment", () => { + renderCell("darwin", "On (manual)"); + expect(screen.getByText("On (manual)")).toBeInTheDocument(); + }); + + it("renders 'On (company-owned)' for Apple hosts with automatic enrollment", () => { + renderCell("darwin", "On (automatic)"); + expect(screen.getByText("On (company-owned)")).toBeInTheDocument(); + }); + + it("renders 'On (personal)' for iOS hosts with personal enrollment", () => { + renderCell("ios", "On (personal)"); + expect(screen.getByText("On (personal)")).toBeInTheDocument(); + }); + + it("renders 'Pending' for macOS hosts with pending enrollment", () => { + renderCell("darwin", "Pending"); + expect(screen.getByText("Pending")).toBeInTheDocument(); + }); + + it("renders the MDM status for Android hosts", () => { + renderCell("android", "On (personal)"); + expect(screen.getByText("On (personal)")).toBeInTheDocument(); + }); + + it("renders the MDM status for Windows hosts", () => { + renderCell("windows", "On (manual)"); + expect(screen.getByText("On (manual)")).toBeInTheDocument(); + }); + + it("renders 'Off' for Windows hosts with no MDM enrollment", () => { + renderCell("windows", "Off"); + expect(screen.getByText("Off")).toBeInTheDocument(); + }); +}); diff --git a/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tsx b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tsx index bbd8755825..efe9dcb2fe 100644 --- a/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tsx +++ b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tsx @@ -1,11 +1,19 @@ import React from "react"; -import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants"; +import { + DEFAULT_EMPTY_CELL_VALUE, + MDM_STATUS_TOOLTIP, +} from "utilities/constants"; import paths from "router/paths"; import Icon from "components/Icon"; import CustomLink from "components/CustomLink"; import NotSupported from "components/NotSupported"; import TooltipWrapper from "components/TooltipWrapper"; import { IHost } from "interfaces/host"; +import { + MDM_ENROLLMENT_STATUS_UI_MAP, + MdmEnrollmentStatus, +} from "interfaces/mdm"; +import { isChrome, isLinuxLike } from "interfaces/platform"; const baseClass = "host-mdm-status-cell"; @@ -16,9 +24,9 @@ const HostMdmStatusCell = ({ cell: { value }, }: { row: { original: IHost }; - cell: { value: string }; + cell: { value: MdmEnrollmentStatus }; }): JSX.Element => { - if (platform === "chrome") { + if (isChrome(platform) || isLinuxLike(platform)) { return NotSupported; } @@ -26,9 +34,21 @@ const HostMdmStatusCell = ({ return {DEFAULT_EMPTY_CELL_VALUE}; } + const displayValue = + MDM_ENROLLMENT_STATUS_UI_MAP[value]?.displayName ?? value; + return ( - {value} + {!MDM_STATUS_TOOLTIP[value] ? ( + displayValue + ) : ( + + {displayValue} + + )} {mdm?.dep_profile_error && (