Fix teams context on manage hosts and manage teams pages (#8605)

.gitignore

@@ -55,6 +55,7 @@ package-lock.json
 .terraform
 .terraform.tfstate*
 terraform.tfstate*
+*.lock.hcl
 
 # generated orbit installers and artifacts
 fleet-osquery*

frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx

@@ -3,6 +3,7 @@ import { useQuery } from "react-query";
 import { useErrorHandler } from "react-error-boundary";
 
 import { NotificationContext } from "context/notification";
+import { AppContext } from "context/app";
 import { ITeam } from "interfaces/team";
 import { IApiError } from "interfaces/errors";
 import teamsAPI, {
@@ -25,6 +26,7 @@ const noTeamsClass = "no-teams";
 
 const TeamManagementPage = (): JSX.Element => {
   const { renderFlash } = useContext(NotificationContext);
+  const { currentTeam, setCurrentTeam } = useContext(AppContext);
   const [isUpdatingTeams, setIsUpdatingTeams] = useState(false);
   const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
   const [showDeleteTeamModal, setShowDeleteTeamModal] = useState(false);
@@ -127,6 +129,9 @@ const TeamManagementPage = (): JSX.Element => {
         .destroy(teamEditing.id)
         .then(() => {
           renderFlash("success", `Successfully deleted ${teamEditing.name}.`);
+          if (currentTeam?.id === teamEditing.id) {
+            setCurrentTeam(undefined);
+          }
         })
         .catch(() => {
           renderFlash(

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -40,7 +40,7 @@ import {
 } from "interfaces/operating_system";
 import { IPolicy } from "interfaces/policy";
 import { ISoftware } from "interfaces/software";
-import { ITeam } from "interfaces/team";
+import team, { ITeam } from "interfaces/team";
 import sortUtils from "utilities/sort";
 import {
   HOSTS_SEARCH_BOX_PLACEHOLDER,
@@ -139,6 +139,7 @@ const ManageHostsPage = ({
     isPremiumTier,
     isFreeTier,
     isSandboxMode,
+    setAvailableTeams,
     setCurrentTeam,
   } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
@@ -149,7 +150,9 @@ const ManageHostsPage = ({
       isNaN(teamIdParam) ||
       (teamIdParam &&
         availableTeams &&
-        !availableTeams.find((team) => team.id === teamIdParam))
+        !availableTeams.find(
+          (availableTeam) => availableTeam.id === teamIdParam
+        ))
     ) {
       router.replace({
         pathname: location.pathname,
@@ -333,6 +336,14 @@ const ManageHostsPage = ({
       select: (data: ILoadTeamsResponse) =>
         data.teams.sort((a, b) => sortUtils.caseInsensitiveAsc(a.name, b.name)),
       onSuccess: (responseTeams: ITeam[]) => {
+        setAvailableTeams(responseTeams);
+        if (
+          responseTeams.filter(
+            (responseTeam) => responseTeam.id === currentTeam?.id
+          )
+        ) {
+          setCurrentTeam(undefined);
+        }
         if (!currentTeam && !isOnGlobalTeam && responseTeams.length) {
           setCurrentTeam(responseTeams[0]);
         }
@@ -958,10 +969,10 @@ const ManageHostsPage = ({
     setSelectedHostIds(hostIds);
   };
 
-  const onTransferHostSubmit = async (team: ITeam) => {
+  const onTransferHostSubmit = async (transferTeam: ITeam) => {
     setIsUpdatingHosts(true);
 
-    const teamId = typeof team.id === "number" ? team.id : null;
+    const teamId = typeof transferTeam.id === "number" ? transferTeam.id : null;
     let action = hostsAPI.transferToTeam(teamId, selectedHostIds);
 
     if (isAllMatchingHostsSelected) {
@@ -981,7 +992,7 @@ const ManageHostsPage = ({
       const successMessage =
         teamId === null
           ? `Hosts successfully removed from teams.`
-          : `Hosts successfully transferred to  ${team.name}.`;
+          : `Hosts successfully transferred to  ${transferTeam.name}.`;
 
       renderFlash("success", successMessage);
       setResetSelectedRows(true);