Use new MDM status on hosts page and show tooltip; show "Not supported" for Linux (#46377)

**Related issue:** Resolves #46066

# Checklist for submitter

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.


## Testing

- [x] QA'd all new/changed functionality manually

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Corrected MDM status label in the hosts table so enrollment states
display accurately.
* Fixed platform handling so "Not supported" appears appropriately for
Chrome and Linux hosts.

* **New Features**
* Added a hover tooltip on the MDM status in the hosts table to show
additional context.

* **Style**
* Improved tooltip text wrapping to keep status names on a single line.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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.

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(
+    <HostMdmStatusCell row={{ original: host }} cell={{ value } as any} />
+  );
+};
+
+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();
+  });
+});

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 <span className={`${baseClass}`}>{DEFAULT_EMPTY_CELL_VALUE}</span>;
   }
 
+  const displayValue =
+    MDM_ENROLLMENT_STATUS_UI_MAP[value]?.displayName ?? value;
+
   return (
     <span className={`${baseClass}`}>
-      {value}
+      {!MDM_STATUS_TOOLTIP[value] ? (
+        displayValue
+      ) : (
+        <TooltipWrapper
+          className={`${baseClass}__tooltip`}
+          tipContent={MDM_STATUS_TOOLTIP[value]}
+        >
+          {displayValue}
+        </TooltipWrapper>
+      )}
       {mdm?.dep_profile_error && (
         <TooltipWrapper
           tipContent={

frontend/components/TableContainer/DataTable/HostMdmStatusCell/_styles.scss

@@ -5,3 +5,8 @@
   gap: $gap-icon-text;
   align-items: center;
 }
+
+.host-mdm-status-cell .component__tooltip-wrapper.host-mdm-status-cell__tooltip .component__tooltip-wrapper__element {
+  // prevent status name from wrapping to multiple lines
+  white-space: nowrap;
+}