fix team changing in dropdown when selecting host in a team (#14822)

relates to #14418

This fixes an issue where the team dropdown would change when a host
that was on a team is selected.

We fixed this by passing the host team into the host actions dropdown
component instead of changing the global current team context attribute.

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Added/updated tests
- [x] Manual QA for all new/changed functionality

changes/issue-14418-fix-team-dropdown

@@ -0,0 +1 @@
+- fix issue where team dropdown value was changing when selecting a host that was on a team.

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

@@ -1,8 +1,11 @@
 import React from "react";
 import { noop } from "lodash";
 import { screen } from "@testing-library/react";
-
 import { createCustomRenderer } from "test/test-utils";
+
+import createMockUser from "__mocks__/userMock";
+import createMockTeam from "__mocks__/teamMock";
+
 import HostActionsDropdown from "./HostActionsDropdown";
 
 describe("Host Actions Dropdown", () => {
@@ -13,12 +16,14 @@ describe("Host Actions Dropdown", () => {
           app: {
             isPremiumTier: true,
             isGlobalAdmin: true,
+            currentUser: createMockUser(),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={null}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus={null}
@@ -36,12 +41,14 @@ describe("Host Actions Dropdown", () => {
           app: {
             isPremiumTier: true,
             isGlobalMaintainer: true,
+            currentUser: createMockUser(),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={null}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus={null}
@@ -59,12 +66,14 @@ describe("Host Actions Dropdown", () => {
       context: {
         app: {
           isPremiumTier: true,
+          currentUser: createMockUser(),
         },
       },
     });
 
     const { user } = render(
       <HostActionsDropdown
+        hostTeamId={null}
         onSelect={noop}
         hostStatus="online"
         hostMdmEnrollemntStatus={null}
@@ -84,12 +93,14 @@ describe("Host Actions Dropdown", () => {
           app: {
             isMdmEnabledAndConfigured: true,
             isGlobalAdmin: true,
+            currentUser: createMockUser(),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={null}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -108,12 +119,14 @@ describe("Host Actions Dropdown", () => {
           app: {
             isMdmEnabledAndConfigured: true,
             isGlobalMaintainer: true,
+            currentUser: createMockUser(),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={null}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -131,13 +144,16 @@ describe("Host Actions Dropdown", () => {
         context: {
           app: {
             isMdmEnabledAndConfigured: true,
-            isTeamAdmin: true,
+            currentUser: createMockUser({
+              teams: [createMockTeam({ id: 1, role: "admin" })],
+            }),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={1}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -150,18 +166,21 @@ describe("Host Actions Dropdown", () => {
       expect(screen.getByText("Turn off MDM")).toBeInTheDocument();
     });
 
-    it("renders the action when the host is enrolled in mdm and the user is a team maintainer", async () => {
+    it("renders the action when the host is enrolled in mdm and the user is at least a team maintainer", async () => {
       const render = createCustomRenderer({
         context: {
           app: {
             isMdmEnabledAndConfigured: true,
-            isTeamMaintainer: true,
+            currentUser: createMockUser({
+              teams: [createMockTeam({ id: 1, role: "maintainer" })],
+            }),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={1}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -179,13 +198,14 @@ describe("Host Actions Dropdown", () => {
         context: {
           app: {
             isMdmEnabledAndConfigured: true,
-            isTeamMaintainer: true,
+            currentUser: createMockUser(),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={null}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -203,13 +223,16 @@ describe("Host Actions Dropdown", () => {
         context: {
           app: {
             isMdmEnabledAndConfigured: true,
-            isTeamMaintainer: true,
+            currentUser: createMockUser({
+              teams: [createMockTeam({ id: 1, role: "maintainer" })],
+            }),
           },
         },
       });
 
       const { user, debug } = render(
         <HostActionsDropdown
+          hostTeamId={1}
           onSelect={noop}
           hostStatus="offline"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -233,12 +256,14 @@ describe("Host Actions Dropdown", () => {
         context: {
           app: {
             isGlobalAdmin: true,
+            currentUser: createMockUser(),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={null}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -255,12 +280,14 @@ describe("Host Actions Dropdown", () => {
         context: {
           app: {
             isGlobalMaintainer: true,
+            currentUser: createMockUser(),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={null}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -276,13 +303,16 @@ describe("Host Actions Dropdown", () => {
       const render = createCustomRenderer({
         context: {
           app: {
-            isTeamAdmin: true,
+            currentUser: createMockUser({
+              teams: [createMockTeam({ id: 1, role: "admin" })],
+            }),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={1}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"
@@ -298,13 +328,16 @@ describe("Host Actions Dropdown", () => {
       const render = createCustomRenderer({
         context: {
           app: {
-            isTeamMaintainer: true,
+            currentUser: createMockUser({
+              teams: [createMockTeam({ id: 1, role: "maintainer" })],
+            }),
           },
         },
       });
 
       const { user } = render(
         <HostActionsDropdown
+          hostTeamId={1}
           onSelect={noop}
           hostStatus="online"
           hostMdmEnrollemntStatus="On (automatic)"

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

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 
 import { MdmEnrollmentStatus } from "interfaces/mdm";
+import permissions from "utilities/permissions";
 import { AppContext } from "context/app";
 
 // @ts-ignore
@@ -10,6 +11,7 @@ import { generateHostActionOptions } from "./helpers";
 const baseClass = "host-actions-dropdown";
 
 interface IHostActionsDropdownProps {
+  hostTeamId: number | null;
   hostStatus: string;
   hostMdmEnrollemntStatus: MdmEnrollmentStatus | null;
   doesStoreEncryptionKey?: boolean;
@@ -18,22 +20,30 @@ interface IHostActionsDropdownProps {
 }
 
 const HostActionsDropdown = ({
-  onSelect,
+  hostTeamId,
   hostStatus,
   hostMdmEnrollemntStatus,
   doesStoreEncryptionKey,
   mdmName,
+  onSelect,
 }: IHostActionsDropdownProps) => {
   const {
     isPremiumTier = false,
     isGlobalAdmin = false,
     isGlobalMaintainer = false,
     isMdmEnabledAndConfigured = false,
-    isTeamAdmin = false,
-    isTeamMaintainer = false,
     isSandboxMode = false,
+    currentUser,
   } = useContext(AppContext);
 
+  if (!currentUser) return null;
+
+  const isTeamAdmin = permissions.isTeamAdmin(currentUser, hostTeamId);
+  const isTeamMaintainer = permissions.isTeamMaintainer(
+    currentUser,
+    hostTeamId
+  );
+
   const options = generateHostActionOptions({
     isPremiumTier,
     isGlobalAdmin,

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

@@ -51,7 +51,6 @@ import {
   TAGGED_TEMPLATES,
 } from "utilities/helpers";
 import permissions from "utilities/permissions";
-import { DEFAULT_QUERY } from "utilities/constants";
 import ScriptDetailsModal from "pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal";
 
 import HostSummaryCard from "../cards/HostSummary";
@@ -371,16 +370,6 @@ const HostDetailsPage = ({
     setPathname(location.pathname + location.search);
   }, [location]);
 
-  // Used to set host's team in AppContext for RBAC action dropdown
-  useEffect(() => {
-    if (host?.team_id) {
-      const hostsTeam = availableTeams?.find(
-        (team) => team.id === host.team_id
-      );
-      setCurrentTeam(hostsTeam);
-    }
-  }, [host]);
-
   const titleData = normalizeEmptyValues(
     pick(host, [
       "id",
@@ -584,6 +573,7 @@ const HostDetailsPage = ({
 
     return (
       <HostActionDropdown
+        hostTeamId={host.team_id}
         onSelect={onSelectHostAction}
         hostStatus={host.status}
         hostMdmEnrollemntStatus={host.mdm.enrollment_status}