Hide "Turn off MDM" action on host details page for non-macOS hosts (#14843)

changes/14842-turn-off-mdm-action

@@ -0,0 +1,2 @@
+- Fixed UI bug where the "Turn off MDM" action on the host details page was displayed for hosts on
+  platforms where that action is not yet supported by Fleet.

frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/HostActionsDropdown.tests.tsx

@@ -105,6 +105,7 @@ describe("Host Actions Dropdown", () => {
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
           mdmName="Fleet"
+          hostPlatform="darwin"
         />
       );
 
@@ -131,6 +132,7 @@ describe("Host Actions Dropdown", () => {
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
           mdmName="Fleet"
+          hostPlatform="darwin"
         />
       );
 
@@ -158,6 +160,7 @@ describe("Host Actions Dropdown", () => {
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
           mdmName="Fleet"
+          hostPlatform="darwin"
         />
       );
 
@@ -185,6 +188,7 @@ describe("Host Actions Dropdown", () => {
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
           mdmName="Fleet"
+          hostPlatform="darwin"
         />
       );
 
@@ -210,6 +214,7 @@ describe("Host Actions Dropdown", () => {
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
           mdmName="Non Fleet MDM"
+          hostPlatform="darwin"
         />
       );
 
@@ -223,20 +228,20 @@ describe("Host Actions Dropdown", () => {
         context: {
           app: {
             isMdmEnabledAndConfigured: true,
-            currentUser: createMockUser({
-              teams: [createMockTeam({ id: 1, role: "maintainer" })],
-            }),
+            isGlobalAdmin: true,
+            currentUser: createMockUser(),
           },
         },
       });
 
       const { user, debug } = render(
         <HostActionsDropdown
-          hostTeamId={1}
+          hostTeamId={null}
           onSelect={noop}
           hostStatus="offline"
           hostMdmEnrollemntStatus="On (automatic)"
           mdmName="Fleet"
+          hostPlatform="darwin"
         />
       );
 
@@ -248,6 +253,33 @@ describe("Host Actions Dropdown", () => {
         "is-disabled"
       );
     });
+
+    it("does not render the action when the host platform is not darwin", async () => {
+      const render = createCustomRenderer({
+        context: {
+          app: {
+            isMdmEnabledAndConfigured: true,
+            isGlobalAdmin: true,
+            currentUser: createMockUser(),
+          },
+        },
+      });
+
+      const { user } = render(
+        <HostActionsDropdown
+          onSelect={noop}
+          hostTeamId={1}
+          hostStatus="online"
+          hostMdmEnrollemntStatus="On (automatic)"
+          mdmName="Fleet"
+          hostPlatform="windows"
+        />
+      );
+
+      await user.click(screen.getByText("Actions"));
+
+      expect(screen.queryByText("Turn off MDM")).not.toBeInTheDocument();
+    });
   });
 
   describe("Delete action", () => {

frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/HostActionsDropdown.tsx

@@ -16,6 +16,7 @@ interface IHostActionsDropdownProps {
   hostMdmEnrollemntStatus: MdmEnrollmentStatus | null;
   doesStoreEncryptionKey?: boolean;
   mdmName?: string;
+  hostPlatform?: string;
   onSelect: (value: string) => void;
 }
 
@@ -25,6 +26,7 @@ const HostActionsDropdown = ({
   hostMdmEnrollemntStatus,
   doesStoreEncryptionKey,
   mdmName,
+  hostPlatform = "",
   onSelect,
 }: IHostActionsDropdownProps) => {
   const {
@@ -45,6 +47,7 @@ const HostActionsDropdown = ({
   );
 
   const options = generateHostActionOptions({
+    hostPlatform,
     isPremiumTier,
     isGlobalAdmin,
     isGlobalMaintainer,

frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/helpers.tsx

@@ -3,7 +3,7 @@ import { IDropdownOption } from "interfaces/dropdownOption";
 import { cloneDeep } from "lodash";
 import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip";
 
-const DEFAULT_OPTIONS: IDropdownOption[] = [
+const DEFAULT_OPTIONS = [
   {
     label: "Transfer",
     value: "transfer",
@@ -30,10 +30,11 @@ const DEFAULT_OPTIONS: IDropdownOption[] = [
     disabled: false,
     value: "delete",
   },
-];
+] as const;
 
 // eslint-disable-next-line import/prefer-default-export
 interface IHostActionConfigOptions {
+  hostPlatform: string;
   isPremiumTier: boolean;
   isGlobalAdmin: boolean;
   isGlobalMaintainer: boolean;
@@ -63,6 +64,7 @@ const canEditMdm = (config: IHostActionConfigOptions) => {
     isMdmEnabledAndConfigured,
   } = config;
   return (
+    config.hostPlatform === "darwin" &&
     isMdmEnabledAndConfigured &&
     isEnrolledInMdm &&
     isFleetMdm &&
@@ -145,7 +147,7 @@ const setOptionsAsDisabled = (
 // eslint-disable-next-line import/prefer-default-export
 export const generateHostActionOptions = (config: IHostActionConfigOptions) => {
   // deep clone to always start with a fresh copy of the default options.
-  let options = cloneDeep(DEFAULT_OPTIONS);
+  let options: IDropdownOption[] = cloneDeep([...DEFAULT_OPTIONS]);
   options = filterOutOptions(options, config);
 
   if (options.length === 0) return options;

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -575,6 +575,7 @@ const HostDetailsPage = ({
       <HostActionDropdown
         hostTeamId={host.team_id}
         onSelect={onSelectHostAction}
+        hostPlatform={host.platform}
         hostStatus={host.status}
         hostMdmEnrollemntStatus={host.mdm.enrollment_status}
         doesStoreEncryptionKey={host.mdm.encryption_key_available}