Fix expired abm token banner and tooltip (#37898)

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Fixes #33291

Fix an issue where the abm terms expiry banner was not removed after the
expired token was deleted.

Also added a tooltip to the expired abm token name table cell


- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [x] QA'd all new/changed functionality manually

changes/issue-33291-fix-issues-abm-token-banner

@@ -0,0 +1 @@
+- adds a tooltip to and expired abm token and also correctly removes the banner when an expired abm token is deleted.

frontend/components/App/App.tsx

@@ -51,7 +51,7 @@ interface RecordWithRenewDate {
 const GUARANTEED_PAST_DATE = "2000-01-01T01:00:00Z";
 
 // TODO: add tests for this function
-const getEarliestExpiry = (records: RecordWithRenewDate[]): string => {
+export const getEarliestExpiry = (records: RecordWithRenewDate[]): string => {
   const earliest = records.reduce((acc, record) => {
     const renewDate = new Date(record.renew_date);
     return isBefore(acc, renewDate) ? acc : renewDate;

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/AppleBusinessManagerPage.tsx

@@ -20,6 +20,7 @@ import MainContent from "components/MainContent";
 import Spinner from "components/Spinner";
 import PremiumFeatureMessage from "components/PremiumFeatureMessage";
 import GenericMsgWithNavButton from "components/GenericMsgWithNavButton";
+import { getEarliestExpiry } from "components/App/App";
 
 import AppleBusinessManagerTable from "./components/AppleBusinessManagerTable";
 import AddAbmModal from "./components/AddAbmModal";
@@ -47,7 +48,7 @@ const AddAbmMessage = ({ onAddAbm }: IAddAbmMessageProps) => {
 };
 
 const AppleBusinessManagerPage = ({ router }: { router: InjectedRouter }) => {
-  const { config, isPremiumTier } = useContext(AppContext);
+  const { config, isPremiumTier, setABMExpiry } = useContext(AppContext);
 
   const [showRenewModal, setShowRenewModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -70,6 +71,18 @@ const AppleBusinessManagerPage = ({ router }: { router: InjectedRouter }) => {
       retry: (tries, error) =>
         error.status !== 404 && error.status !== 400 && tries <= 3,
       select: (data) => data?.abm_tokens,
+      onSuccess: (data) => {
+        // we need to call setABMExpiry here to update the expiry info so the terms banner
+        // displays correctly
+        if (data.length === 0) {
+          setABMExpiry({ earliestExpiry: "", needsAbmTermsRenewal: false });
+        } else {
+          setABMExpiry({
+            earliestExpiry: getEarliestExpiry(data),
+            needsAbmTermsRenewal: data.some((token) => token.terms_expired),
+          });
+        }
+      },
       enabled: isPremiumTier,
     }
   );

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/OrgNameCell/OrgNameCell.tsx

@@ -1,6 +1,8 @@
+import React from "react";
+
 import Icon from "components/Icon";
 import TextCell from "components/TableContainer/DataTable/TextCell";
-import React from "react";
+import TooltipWrapper from "components/TooltipWrapper";
 
 const baseClass = "org-name-cell";
 
@@ -11,9 +13,21 @@ interface IOrgNameCellProps {
 
 const OrgNameCell = ({ orgName, termsExpired }: IOrgNameCellProps) => {
   const cellContent = termsExpired ? (
-    <>
+    <TooltipWrapper
+      showArrow
+      underline={false}
+      position="top"
+      tipContent={
+        <>
+          The ABM terms have changed.
+          <br />
+          To accept terms, go to ABM.
+        </>
+      }
+      className={`${baseClass}__tooltip-wrapper`}
+    >
       <span>{orgName}</span> <Icon name="warning" />
-    </>
+    </TooltipWrapper>
   ) : (
     orgName
   );

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/OrgNameCell/_styles.scss

@@ -1,3 +1,7 @@
 .org-name-cell {
-
+  &__tooltip-wrapper {
+    // use display inline so that the tooltip will be positioned correctly
+    // above the text
+    display: inline;
+  }
 }