Implemented a tooltip on the SR to display the Internal SR

src/features/opportunities/activity-filters.js

@@ -13,7 +13,7 @@ function createActivityFilters({ allowsCrmActivities, getSrSummary, getActionSum
     container.className = "opportunities-extension-badge-filters";
     for (const [kind, title, options] of [
       ["sr", "Service Request", ["matched", "under4", "missing"]],
-      ["actions", "Action", ["matched", "missing"]]
+      ["actions", "WL Action", ["matched", "missing"]]
     ]) {
       const section = environment.document.createElement("section");
       section.className = "opportunities-extension-activity-filter";

src/features/opportunities/crm-sr-popover.js

@@ -1,4 +1,4 @@
-function createCrmSrPopover({ MODAL_ID, createCopyButton, createCloseIcon, environment }) {
+function createCrmSrPopover({ MODAL_ID, createCopyButton, createCloseIcon, requestDetails, environment }) {
   const { document, window, setTimeout, clearTimeout } = environment;
   let active = null;
   let sequence = 0;
@@ -74,6 +74,7 @@ function createCrmSrPopover({ MODAL_ID, createCopyButton, createCloseIcon, envir
       dismiss.append(createCloseIcon());
       dismiss.addEventListener("click", () => close(true));
       panel.append(dismiss);
+      const detailLoads = [];
       items.forEach((item, index) => {
         const section = document.createElement("section");
         const heading = document.createElement("div");
@@ -94,6 +95,52 @@ function createCrmSrPopover({ MODAL_ID, createCopyButton, createCloseIcon, envir
         details.className = "opportunities-extension-sr-details";
         details.textContent = descriptions[index];
         section.append(heading, details);
+        const children = document.createElement("div");
+        children.className = "opportunities-extension-sr-children";
+        children.setAttribute("aria-busy", "true");
+        children.setAttribute("role", "status");
+        children.textContent = "Loading SR details...";
+        section.append(children);
+        detailLoads.push(async () => {
+          try {
+            const records = await requestDetails(item.SrId);
+            if (active !== entry || entry.panel !== panel) return;
+            children.textContent = "";
+            if (!records.length) children.textContent = "No further details.";
+            for (const record of records) {
+              const child = document.createElement("section");
+              const row = document.createElement("div");
+              row.className = "opportunities-extension-sr-number";
+              const label = document.createElement("span");
+              label.textContent = "Internal SR Number:";
+              const link = document.createElement(record.SrNumber ? "a" : "span");
+              link.textContent = record.SrNumber ? String(record.SrNumber) : "N/D";
+              if (record.SrNumber) {
+                link.href = `https://eeho.fa.us2.oraclecloud.com/fscmUI/redwood/service/ec/container/sr/edit?srNumber=${encodeURIComponent(String(record.SrNumber))}&srId=${encodeURIComponent(String(record.SrId ?? ""))}`;
+                link.target = "_blank";
+                link.rel = "noopener noreferrer";
+              }
+              row.append(label, link);
+              if (record.SrNumber) row.append(createCopyButton(String(record.SrNumber), "SR number", "SR Number"));
+              const body = document.createElement("div");
+              body.className = "opportunities-extension-sr-details";
+              body.textContent = ["Title", "OpportunityName_c", "StatusCd", "ServiceNew_c", "AccountPartyName",
+                "LastUpdateDate", "SvcHealth_c", "AssigneePersonName", "OpenDate"].map(key =>
+                `${key === "ServiceNew_c" ? "Service Queue" : key}: ${record[key] == null || record[key] === "" ? "N/D" : String(record[key])}`).join("\n");
+              child.append(row, body);
+              children.append(child);
+            }
+          } catch (error) {
+            if (active !== entry || entry.panel !== panel) return;
+            children.setAttribute("role", "alert");
+            children.textContent = error.message || "Unable to load SR details.";
+          } finally {
+            if (active === entry && entry.panel === panel) {
+              children.setAttribute("aria-busy", "false");
+              entry.position();
+            }
+          }
+        });
         panel.append(section);
       });
       panel.addEventListener("pointerenter", () => clearTimeout(entry.timer));
@@ -101,6 +148,7 @@ function createCrmSrPopover({ MODAL_ID, createCopyButton, createCloseIcon, envir
       panel.addEventListener("focusout", focusOut);
       host.append(panel);
       active = entry;
+      detailLoads.forEach(load => load());
       button.setAttribute("aria-expanded", "true");
       entry.position();
       document.addEventListener("pointerdown", entry.outside, true);

src/features/opportunities/styles.css

@@ -533,6 +533,11 @@
 .opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }
 .opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }
 .opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }
+.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }
+.opportunities-extension-sr-children[aria-busy="true"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }
+.opportunities-extension-sr-children[role="alert"] { color: #a12d27; }
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-sr-children[role="alert"] { color: #ffd9d5; }
+@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy="true"] { animation: none; } }
 .opportunities-extension-sr-dismiss {
   position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
   display: grid; place-items: center; padding: 4px; border: 0;