Badge indicator showing whether an opportunity has an associated Workload Workbench Action

src/content/modal.js

@@ -53,6 +53,8 @@ function createContentModal({
   requestOpportunitiesForPeriod,
   loadCrmServiceRequests,
   resetCrmServiceRequests,
+  resetWorkloadActions,
+  reopenWorkloadActions,
   requestTokenRelayOnce,
   resetCustomerAndOwnerFiltersForPeriod,
   resetOpportunitiesTable,
@@ -63,7 +65,15 @@ function createContentModal({
   toggleOwnerFilterPanel,
   environment
 }) {
-  const { document, window } = environment;
+  const { document, window, setTimeout, clearTimeout, matchMedia } = environment;
+  let authCompletion = null;
+  function resetAuthCompletion() {
+    if (!authCompletion) return;
+    clearTimeout(authCompletion.waitTimer);
+    clearTimeout(authCompletion.hideTimer);
+    authCompletion.badge.setAttribute("data-fading", "false");
+    authCompletion = null;
+  }
   function openOpportunitiesModal() {
     ensureExtensionStyles();
     debugState.debugSecretsVisible = false;
@@ -72,6 +82,7 @@ function createContentModal({
 
     if (existingModal) {
       existingModal.hidden = false;
+      reopenWorkloadActions();
       existingModal.querySelector("select").focus();
       document.documentElement.classList.add("opportunities-extension-scroll-lock");
       ensureEscapeKeyHandler();
@@ -85,6 +96,7 @@ function createContentModal({
     authSessionState.tokenRelayRequest = null;
     authSessionState.consumerTokenServiceRequest = null;
     authSessionState.accessToken = "";
+    authSessionState.principal = "";
     opportunitiesQueryState.periodRequestVersion = 0;
     authSessionState.authStatus = AUTH_STATUS.idle;
     resetOpportunitiesTable();
@@ -422,6 +434,24 @@ function createContentModal({
       ? status
       : AUTH_STATUS.pending;
 
+    if (authCompletion && (authCompletion.badge !== badge || badgeStatus !== AUTH_STATUS.authenticated)) resetAuthCompletion();
+    badge.hidden = Boolean(authCompletion?.hidden);
+    if (badgeStatus === AUTH_STATUS.authenticated && !authCompletion) {
+      const current = { badge, hidden: false, waitTimer: null, hideTimer: null };
+      authCompletion = current;
+      badge.setAttribute("data-fading", "false");
+      current.waitTimer = setTimeout(() => {
+        if (authCompletion !== current) return;
+        badge.setAttribute("data-fading", "true");
+        const reducedMotion = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+        current.hideTimer = setTimeout(() => {
+          if (authCompletion !== current) return;
+          current.hidden = true;
+          badge.hidden = true;
+        }, reducedMotion ? 0 : 300);
+      }, 5000);
+    }
+
     badge.setAttribute("data-auth-status", badgeStatus);
     badge.className = `opportunities-extension-auth-badge opportunities-extension-auth-badge-${badgeStatus}`;
     badge.textContent = badgeStatus === AUTH_STATUS.authenticated
@@ -432,6 +462,8 @@ function createContentModal({
   }
 
   function closeOpportunitiesModal() {
+    resetAuthCompletion();
+    resetWorkloadActions(false);
     resetCrmServiceRequests();
     const modal = document.getElementById(MODAL_ID);