Hide delete button from team observers on host details (#2709)

changes/fix-2707-team-observer-delete-host

@@ -0,0 +1 @@
+* Bug fix: Team Observer can no longer see delete button on host details

frontend/context/app.tsx

@@ -24,6 +24,7 @@ type InitialStateType = {
   isOnGlobalTeam: boolean | undefined;
   isAnyTeamMaintainer: boolean | undefined;
   isAnyTeamMaintainerOrTeamAdmin: boolean | undefined;
+  isTeamObserver: boolean | undefined;
   isTeamMaintainer: boolean | undefined;
   isAnyTeamAdmin: boolean | undefined;
   isTeamAdmin: boolean | undefined;
@@ -48,6 +49,7 @@ const initialState = {
   isOnGlobalTeam: undefined,
   isAnyTeamMaintainer: undefined,
   isAnyTeamMaintainerOrTeamAdmin: undefined,
+  isTeamObserver: undefined,
   isTeamMaintainer: undefined,
   isAnyTeamAdmin: undefined,
   isTeamAdmin: undefined,
@@ -88,6 +90,7 @@ const setPermissions = (user: IUser, config: IConfig, teamId = 0) => {
       user
     ),
     isAnyTeamAdmin: permissions.isAnyTeamAdmin(user),
+    isTeamObserver: permissions.isTeamObserver(user, teamId),
     isTeamMaintainer: permissions.isTeamMaintainer(user, teamId),
     isTeamAdmin: permissions.isTeamAdmin(user, teamId),
     isOnlyObserver: permissions.isOnlyObserver(user),
@@ -147,6 +150,7 @@ const AppProvider = ({ children }: Props) => {
     isOnGlobalTeam: state.isOnGlobalTeam,
     isAnyTeamMaintainer: state.isAnyTeamMaintainer,
     isAnyTeamMaintainerOrTeamAdmin: state.isAnyTeamMaintainerOrTeamAdmin,
+    isTeamObserver: state.isTeamObserver,
     isTeamMaintainer: state.isTeamMaintainer,
     isTeamAdmin: state.isTeamAdmin,
     isAnyTeamAdmin: state.isAnyTeamAdmin,

frontend/pages/hosts/HostDetailsPage/HostDetailsPage.tsx

@@ -16,14 +16,17 @@ import { ISoftware } from "interfaces/software";
 import { IHostPolicy } from "interfaces/host_policy";
 import { ILabel } from "interfaces/label";
 import { ITeam } from "interfaces/team";
-import { IQuery } from "interfaces/query"; // @ts-ignore
-import { renderFlash } from "redux/nodes/notifications/actions"; // @ts-ignore
+import { IQuery } from "interfaces/query";
+import { IUser } from "interfaces/user";
+// @ts-ignore
+import { renderFlash } from "redux/nodes/notifications/actions";
+import permissionUtils from "utilities/permissions";
 
 import ReactTooltip from "react-tooltip";
 import Spinner from "components/loaders/Spinner";
 import Button from "components/buttons/Button";
-import Modal from "components/modals/Modal"; // @ts-ignore
-import SoftwareVulnerabilities from "pages/hosts/HostDetailsPage/SoftwareVulnCount"; // @ts-ignore
+import Modal from "components/modals/Modal";
+import SoftwareVulnerabilities from "pages/hosts/HostDetailsPage/SoftwareVulnCount";
 import TableContainer from "components/TableContainer";
 import InfoBanner from "components/InfoBanner";
 
@@ -42,7 +45,8 @@ import {
   humanHostMemory,
   humanHostDetailUpdated,
   secondsToHms,
-} from "fleet/helpers"; // @ts-ignore
+} from "fleet/helpers";
+// @ts-ignore
 import SelectQueryModal from "./SelectQueryModal";
 import TransferHostModal from "./TransferHostModal";
 import PolicyDetailsModal from "./HostPoliciesTable/PolicyDetailsModal";
@@ -97,10 +101,23 @@ const HostDetailsPage = ({
     isPremiumTier,
     isOnlyObserver,
     isGlobalMaintainer,
+    currentUser,
   } = useContext(AppContext);
   const canTransferTeam =
     isPremiumTier && (isGlobalAdmin || isGlobalMaintainer);
 
+  const canDeleteHost = (user: IUser, host: IHost) => {
+    if (
+      isGlobalAdmin ||
+      isGlobalMaintainer ||
+      permissionUtils.isTeamAdmin(user, host.team_id) ||
+      permissionUtils.isTeamMaintainer(user, host.team_id)
+    ) {
+      return true;
+    }
+    return false;
+  };
+
   const [showDeleteHostModal, setShowDeleteHostModal] = useState<boolean>(
     false
   );
@@ -155,7 +172,7 @@ const HostDetailsPage = ({
     Error,
     ITeam[]
   >("teams", () => teamAPI.loadAll(), {
-    enabled: !!hostIdFromURL && canTransferTeam,
+    enabled: !!hostIdFromURL && isPremiumTier,
     refetchOnMount: false,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
@@ -474,7 +491,7 @@ const HostDetailsPage = ({
             You can’t query <br /> an offline host.
           </span>
         </ReactTooltip>
-        {!isOnlyObserver && (
+        {currentUser && host && canDeleteHost(currentUser, host) && (
           <Button
             onClick={() => setShowDeleteHostModal(true)}
             variant="text-icon"

frontend/utilities/permissions/permissions.ts

@@ -25,12 +25,12 @@ export const isOnGlobalTeam = (user: IUser): boolean => {
   return user.global_role !== null;
 };
 
+// This checks against a specific team
 const isTeamObserver = (user: IUser, teamId: number): boolean => {
   const userTeamRole = user.teams.find((team) => team.id === teamId)?.role;
   return userTeamRole === "observer";
 };
 
-// This checks against a specific team
 const isTeamMaintainer = (
   user: IUser | null,
   teamId: number | null