From 2504de92cd64f63273053ebf0ea2677d960715fa Mon Sep 17 00:00:00 2001 From: Gabriel Hernandez Date: Tue, 31 Oct 2023 16:03:30 +0000 Subject: [PATCH] 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 | 1 + .../HostActionsDropdown.tests.tsx | 49 ++++++++++++++++--- .../HostActionsDropdown.tsx | 16 ++++-- .../HostDetailsPage/HostDetailsPage.tsx | 12 +---- 4 files changed, 56 insertions(+), 22 deletions(-) create mode 100644 changes/issue-14418-fix-team-dropdown diff --git a/changes/issue-14418-fix-team-dropdown b/changes/issue-14418-fix-team-dropdown new file mode 100644 index 0000000000..2ab53dff3e --- /dev/null +++ b/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. diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/HostActionsDropdown.tests.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/HostActionsDropdown.tests.tsx index 3ac219c2e0..7faf173de6 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/HostActionsDropdown/HostActionsDropdown.tests.tsx +++ b/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( { app: { isPremiumTier: true, isGlobalMaintainer: true, + currentUser: createMockUser(), }, }, }); const { user } = render( { context: { app: { isPremiumTier: true, + currentUser: createMockUser(), }, }, }); const { user } = render( { app: { isMdmEnabledAndConfigured: true, isGlobalAdmin: true, + currentUser: createMockUser(), }, }, }); const { user } = render( { app: { isMdmEnabledAndConfigured: true, isGlobalMaintainer: true, + currentUser: createMockUser(), }, }, }); const { user } = render( { context: { app: { isMdmEnabledAndConfigured: true, - isTeamAdmin: true, + currentUser: createMockUser({ + teams: [createMockTeam({ id: 1, role: "admin" })], + }), }, }, }); const { user } = render( { 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( { context: { app: { isMdmEnabledAndConfigured: true, - isTeamMaintainer: true, + currentUser: createMockUser(), }, }, }); const { user } = render( { context: { app: { isMdmEnabledAndConfigured: true, - isTeamMaintainer: true, + currentUser: createMockUser({ + teams: [createMockTeam({ id: 1, role: "maintainer" })], + }), }, }, }); const { user, debug } = render( { context: { app: { isGlobalAdmin: true, + currentUser: createMockUser(), }, }, }); const { user } = render( { context: { app: { isGlobalMaintainer: true, + currentUser: createMockUser(), }, }, }); const { user } = render( { const render = createCustomRenderer({ context: { app: { - isTeamAdmin: true, + currentUser: createMockUser({ + teams: [createMockTeam({ id: 1, role: "admin" })], + }), }, }, }); const { user } = render( { const render = createCustomRenderer({ context: { app: { - isTeamMaintainer: true, + currentUser: createMockUser({ + teams: [createMockTeam({ id: 1, role: "maintainer" })], + }), }, }, }); const { user } = render( { 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, diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx index f189a49610..1fa349e2e1 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx +++ b/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 (