fix issue with stacking banners after VPP banner was added (#20938)

relates to #20939

fix an issue with stacking banners on the host details page after VPP
warning banner was added.

This also moves up the banner states into the app config to cut down on
code duplication on the host details page and the main content
component.

- [x] Manual QA for all new/changed functionality

frontend/components/MainContent/MainContent.tsx

@@ -37,9 +37,12 @@ const MainContent = ({
     config,
     isPremiumTier,
     noSandboxHosts,
-    apnsExpiry = "",
-    abmExpiry = "",
-    vppExpiry = "",
+    isApplePnsExpired,
+    isAppleBmExpired,
+    isVppExpired,
+    willAppleBmExpire,
+    willApplePnsExpire,
+    willVppExpire,
   } = useContext(AppContext);
 
   const sandboxExpiryTime =
@@ -49,29 +52,22 @@ const MainContent = ({
 
   const renderAppWideBanner = () => {
     const isAppleBmTermsExpired = config?.mdm?.apple_bm_terms_expired;
-    const isApplePnsExpired = hasLicenseExpired(apnsExpiry);
-    const willApplePnsExpireIn30Days = willExpireWithinXDays(apnsExpiry, 30);
-    const isAppleBmExpired = hasLicenseExpired(abmExpiry); // NOTE: See Rachel's related FIXME added to App.tsx in https://github.com/fleetdm/fleet/pull/19571
-    const willAppleBmExpireIn30Days = willExpireWithinXDays(abmExpiry, 30);
     const isFleetLicenseExpired = hasLicenseExpired(
       config?.license.expiration || ""
     );
 
-    const isVppExpired = hasLicenseExpired(vppExpiry);
-    const willVppExpireIn30Days = willExpireWithinXDays(vppExpiry, 30);
-
     let banner: JSX.Element | null = null;
 
     if (isPremiumTier) {
-      if (isApplePnsExpired || willApplePnsExpireIn30Days) {
+      if (isApplePnsExpired || willApplePnsExpire) {
         banner = <ApplePNCertRenewalMessage expired={isApplePnsExpired} />;
-      } else if (isAppleBmExpired || willAppleBmExpireIn30Days) {
+      } else if (isAppleBmExpired || willAppleBmExpire) {
         banner = <AppleBMRenewalMessage expired={isAppleBmExpired} />;
       } else if (isAppleBmTermsExpired) {
         banner = <AppleBMTermsMessage />;
       } else if (isFleetLicenseExpired) {
         banner = <LicenseExpirationBanner />;
-      } else if (isVppExpired || willVppExpireIn30Days) {
+      } else if (isVppExpired || willVppExpire) {
         banner = <VppRenewalMessage expired={isVppExpired} />;
       }
     }

frontend/context/app.tsx

@@ -11,6 +11,7 @@ import {
 import { IUser } from "interfaces/user";
 import permissions from "utilities/permissions";
 import sort from "utilities/sort";
+import { hasLicenseExpired, willExpireWithinXDays } from "utilities/helpers";
 
 enum ACTIONS {
   SET_AVAILABLE_TEAMS = "SET_AVAILABLE_TEAMS",
@@ -144,6 +145,12 @@ type InitialStateType = {
   isOnlyObserver?: boolean;
   isObserverPlus?: boolean;
   isNoAccess?: boolean;
+  isAppleBmExpired: boolean;
+  isApplePnsExpired: boolean;
+  isVppExpired: boolean;
+  willAppleBmExpire: boolean;
+  willApplePnsExpire: boolean;
+  willVppExpire: boolean;
   abmExpiry?: string;
   apnsExpiry?: string;
   vppExpiry?: string;
@@ -206,6 +213,12 @@ export const initialState = {
   filteredSoftwarePath: undefined,
   filteredQueriesPath: undefined,
   filteredPoliciesPath: undefined,
+  isAppleBmExpired: false,
+  isApplePnsExpired: false,
+  isVppExpired: false,
+  willAppleBmExpire: false,
+  willApplePnsExpire: false,
+  willVppExpire: false,
   setAvailableTeams: () => null,
   setCurrentUser: () => null,
   setCurrentTeam: () => null,
@@ -339,6 +352,8 @@ const reducer = (state: InitialStateType, action: IAction) => {
       return {
         ...state,
         abmExpiry,
+        isAppleBmExpired: hasLicenseExpired(abmExpiry),
+        willAppleBmExpire: willExpireWithinXDays(abmExpiry, 30),
       };
     }
     case ACTIONS.SET_APNS_EXPIRY: {
@@ -346,6 +361,8 @@ const reducer = (state: InitialStateType, action: IAction) => {
       return {
         ...state,
         apnsExpiry,
+        isApplePnsExpired: hasLicenseExpired(apnsExpiry),
+        willApplePnsExpire: willExpireWithinXDays(apnsExpiry, 30),
       };
     }
     case ACTIONS.SET_VPP_EXPIRY: {
@@ -353,6 +370,8 @@ const reducer = (state: InitialStateType, action: IAction) => {
       return {
         ...state,
         vppExpiry,
+        isVppExpired: hasLicenseExpired(vppExpiry),
+        willVppExpire: willExpireWithinXDays(vppExpiry, 30),
       };
     }
     case ACTIONS.SET_SANDBOX_EXPIRY: {
@@ -418,6 +437,12 @@ const AppProvider = ({ children }: Props): JSX.Element => {
     abmExpiry: state.abmExpiry,
     apnsExpiry: state.apnsExpiry,
     vppExpiry: state.vppExpiry,
+    isAppleBmExpired: state.isAppleBmExpired,
+    isApplePnsExpired: state.isApplePnsExpired,
+    isVppExpired: state.isVppExpired,
+    willAppleBmExpire: state.willAppleBmExpire,
+    willApplePnsExpire: state.willApplePnsExpire,
+    willVppExpire: state.willVppExpire,
     noSandboxHosts: state.noSandboxHosts,
     filteredHostsPath: state.filteredHostsPath,
     filteredSoftwarePath: state.filteredSoftwarePath,

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

@@ -23,21 +23,21 @@ const HostDetailsBanners = ({
   connectedToFleetMdm,
   diskEncryptionStatus,
 }: IHostDetailsBannersProps) => {
-  const { config, isPremiumTier, apnsExpiry, abmExpiry } = useContext(
-    AppContext
-  );
+  const {
+    config,
+    isPremiumTier,
+    isAppleBmExpired,
+    isApplePnsExpired,
+    isVppExpired,
+    willAppleBmExpire,
+    willApplePnsExpire,
+    willVppExpire,
+  } = useContext(AppContext);
 
   // Checks to see if an app-wide banner is being shown (the ABM terms, ABM expiry,
   // or APNs expiry banner) in a parent component. App-wide banners found in parent
   // component take priority over host details page-level banners.
   const isAppleBmTermsExpired = config?.mdm?.apple_bm_terms_expired;
-  const isApplePnsExpired = hasLicenseExpired(apnsExpiry || "");
-  const willApplePnsExpireIn30Days = willExpireWithinXDays(
-    apnsExpiry || "",
-    30
-  );
-  const isAppleBmExpired = hasLicenseExpired(abmExpiry || "");
-  const willAppleBmExpireIn30Days = willExpireWithinXDays(abmExpiry || "", 30);
   const isFleetLicenseExpired = hasLicenseExpired(
     config?.license.expiration || ""
   );
@@ -46,9 +46,11 @@ const HostDetailsBanners = ({
     isPremiumTier &&
     (isAppleBmTermsExpired ||
       isApplePnsExpired ||
-      willApplePnsExpireIn30Days ||
+      willApplePnsExpire ||
       isAppleBmExpired ||
-      willAppleBmExpireIn30Days ||
+      willAppleBmExpire ||
+      isVppExpired ||
+      willVppExpire ||
       isFleetLicenseExpired);
 
   const isMdmUnenrolled =