Fixs multiple banners on host details page when we only want to show ABM expired banner (#14772)

relates to #13010

This fixes the issue where we only want the user to see the ABM banner
on the Host Details page.

We've pulled out the rendering logic of the banners into its own
component and suppress the other banners if the ABM expired banner is
already showing.

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality

frontend/components/MainContent/MainContent.tsx

@@ -42,11 +42,12 @@ const MainContent = ({
       ? "..."
       : formatDistanceToNow(new Date(sandboxExpiry));
 
+  const showAppleABMBanner =
+    isAppleBmTermsExpired && isPremiumTier && !isSandboxMode;
+
   return (
     <div className={classes}>
-      {isAppleBmTermsExpired && isPremiumTier && !isSandboxMode && (
-        <AppleBMTermsMessage />
-      )}
+      {showAppleABMBanner && <AppleBMTermsMessage />}
       <SandboxGate
         fallbackComponent={() => (
           <SandboxExpiryMessage

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

@@ -44,7 +44,6 @@ import {
 import Spinner from "components/Spinner";
 import TabsWrapper from "components/TabsWrapper";
 import MainContent from "components/MainContent";
-import InfoBanner from "components/InfoBanner";
 import BackLink from "components/BackLink";
 
 import {
@@ -81,6 +80,7 @@ import MacSettingsModal from "../MacSettingsModal";
 import BootstrapPackageModal from "./modals/BootstrapPackageModal";
 import SelectQueryModal from "./modals/SelectQueryModal";
 import { isSupportedPlatform } from "./modals/DiskEncryptionKeyModal/DiskEncryptionKeyModal";
+import HostDetailsBanners from "./components/HostDetailsBanners";
 
 const baseClass = "host-details";
 
@@ -162,12 +162,10 @@ const HostDetailsPage = ({
     false
   );
   const [showScriptDetailsModal, setShowScriptDetailsModal] = useState(false);
-
   const [selectedPolicy, setSelectedPolicy] = useState<IHostPolicy | null>(
     null
   );
   const [isUpdatingHost, setIsUpdatingHost] = useState(false);
-
   const [refetchStartTime, setRefetchStartTime] = useState<number | null>(null);
   const [showRefetchSpinner, setShowRefetchSpinner] = useState(false);
   const [schedule, setSchedule] = useState<IQueryStats[]>();
@@ -693,14 +691,6 @@ const HostDetailsPage = ({
     router.push(navPath);
   };
 
-  const isMdmUnenrolled =
-    host?.mdm.enrollment_status === "Off" || !host?.mdm.enrollment_status;
-
-  const showDiskEncryptionUserActionRequired =
-    config?.mdm.enabled_and_configured &&
-    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 =
@@ -729,22 +719,12 @@ const HostDetailsPage = ({
   return (
     <MainContent className={baseClass}>
       <div className={`${baseClass}__wrapper`}>
-        {host?.platform === "darwin" &&
-          isMdmUnenrolled &&
-          config?.mdm.enabled_and_configured && (
-            <InfoBanner color="yellow">
-              To change settings and install software, ask the end user to
-              follow the <strong>Turn on MDM</strong> instructions on their{" "}
-              <strong>My device</strong> page.
-            </InfoBanner>
-          )}
-        {showDiskEncryptionUserActionRequired && (
-          <InfoBanner color="yellow">
-            Disk encryption: Requires action from the end user. Ask the end user
-            to follow <b>Disk encryption</b> instructions on their{" "}
-            <b>My device</b> page.
-          </InfoBanner>
-        )}
+        <HostDetailsBanners
+          hostMdmEnrollmentStatus={host?.mdm.enrollment_status}
+          hostPlatform={host?.platform}
+          mdmName={host?.mdm.name}
+          diskEncryptionStatus={host?.mdm.macos_settings?.disk_encryption}
+        />
         <div className={`${baseClass}__header-links`}>
           <BackLink
             text="Back to all hosts"

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

@@ -0,0 +1,68 @@
+import InfoBanner from "components/InfoBanner";
+import { AppContext } from "context/app";
+import { DiskEncryptionStatus, MdmEnrollmentStatus } from "interfaces/mdm";
+import React, { useContext } from "react";
+
+const baseClass = "host-details-banners";
+
+interface IHostDetailsBannersProps {
+  hostMdmEnrollmentStatus?: MdmEnrollmentStatus | null;
+  hostPlatform?: string;
+  mdmName?: string;
+  diskEncryptionStatus: DiskEncryptionStatus | null | undefined;
+}
+
+/**
+ * Handles the displaying of banners on the host details page
+ */
+const HostDetailsBanners = ({
+  hostMdmEnrollmentStatus,
+  hostPlatform,
+  mdmName,
+  diskEncryptionStatus,
+}: IHostDetailsBannersProps) => {
+  const { config, isSandboxMode, isPremiumTier } = useContext(AppContext);
+
+  // checks to see if the ABM message is being shown in a parent component.
+  // We want this to be the only banner shown to the user so we need to know
+  // if it's already being shown so we can suppress other banners.
+  const isAppleBmTermsExpired = config?.mdm?.apple_bm_terms_expired;
+  const showingAppleABMBanner =
+    (isAppleBmTermsExpired && isPremiumTier && !isSandboxMode) ?? false;
+
+  const isMdmUnenrolled =
+    hostMdmEnrollmentStatus === "Off" || !hostMdmEnrollmentStatus;
+
+  const showTurnOnMdmInfoBanner =
+    !showingAppleABMBanner &&
+    hostPlatform === "darwin" &&
+    isMdmUnenrolled &&
+    config?.mdm.enabled_and_configured;
+
+  const showDiskEncryptionUserActionRequired =
+    !showingAppleABMBanner &&
+    config?.mdm.enabled_and_configured &&
+    mdmName === "Fleet" &&
+    diskEncryptionStatus === "action_required";
+
+  return (
+    <div className={baseClass}>
+      {showTurnOnMdmInfoBanner && (
+        <InfoBanner color="yellow">
+          To change settings and install software, ask the end user to follow
+          the <strong>Turn on MDM</strong> instructions on their{" "}
+          <strong>My device</strong> page.
+        </InfoBanner>
+      )}
+      {showDiskEncryptionUserActionRequired && (
+        <InfoBanner color="yellow">
+          Disk encryption: Requires action from the end user. Ask the end user
+          to follow <b>Disk encryption</b> instructions on their{" "}
+          <b>My device</b> page.
+        </InfoBanner>
+      )}
+    </div>
+  );
+};
+
+export default HostDetailsBanners;

frontend/pages/hosts/details/HostDetailsPage/components/HostDetailsBanners/_styles.scss

@@ -0,0 +1,5 @@
+.host-details-banners {
+  display: flex;
+  flex-direction: column;
+  gap: $pad-medium
+}

frontend/pages/hosts/details/HostDetailsPage/components/HostDetailsBanners/index.ts

@@ -0,0 +1 @@
+export { default } from "./HostDetailsBanners";