Fleet UI: Remove hosts pack information from observers and observer plus (#11141)

changes/11074-hide-hosts-packs-info-from-observers

@@ -0,0 +1 @@
+- UI: Remove any host's packs information for observers and observer plus

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

@@ -40,6 +40,7 @@ import {
   humanHostDiskEncryptionEnabled,
   wrapFleetHelper,
 } from "utilities/helpers";
+import permissions from "utilities/permissions";
 
 import HostSummaryCard from "../cards/HostSummary";
 import AboutCard from "../cards/About";
@@ -107,10 +108,11 @@ const HostDetailsPage = ({
   const hostIdFromURL = parseInt(host_id, 10);
   const {
     config,
+    currentUser,
     isGlobalAdmin = false,
+    isGlobalObserver,
     isPremiumTier = false,
     isOnlyObserver,
-    isObserverPlus,
     filteredHostsPath,
   } = useContext(AppContext);
   const {
@@ -606,6 +608,23 @@ const HostDetailsPage = ({
     host?.mdm.name === "Fleet" &&
     host?.mdm.macos_settings.disk_encryption === "action_required";
 
+  /*  Context team id might be different that host's team id
+  Observer plus must be checked against host's team id  */
+  const isGlobalOrHostsTeamObserverPlus =
+    currentUser && host?.team_id
+      ? permissions.isObserverPlus(currentUser, host.team_id)
+      : false;
+
+  const isHostsTeamObserver =
+    currentUser && host?.team_id
+      ? permissions.isTeamObserver(currentUser, host.team_id)
+      : false;
+
+  const canViewPacks =
+    !isGlobalObserver &&
+    !isGlobalOrHostsTeamObserverPlus &&
+    !isHostsTeamObserver;
+
   return (
     <MainContent className={baseClass}>
       <div className={`${baseClass}__wrapper`}>
@@ -704,7 +723,9 @@ const HostDetailsPage = ({
                 scheduleState={scheduleState}
                 isLoading={isLoadingHost}
               />
-              <PacksCard packsState={packsState} isLoading={isLoadingHost} />
+              {canViewPacks && (
+                <PacksCard packsState={packsState} isLoading={isLoadingHost} />
+              )}
             </TabPanel>
             <TabPanel>
               <PoliciesCard