@growth-operations/ui-shared 1.6.8 → 1.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.6.8",
+  "version": "1.6.10",
   "description": "Shared HubSpot UI-extension modules (Home, Billing) for Growth Operations apps.",
   "license": "MIT",
   "private": false,

package/src/alerts/AlertsTab.jsx

@@ -64,6 +64,7 @@ function DefaultAlertRow({
   context,
   alert,
   refresh,
+  onDismissed,
   fetchOptions,
   renderRowActions,
 }) {
@@ -73,7 +74,9 @@ function DefaultAlertRow({
     setDismissing(true);
     try {
       await dismissAlert(context, alert.id, fetchOptions);
-      await refresh();
+      // Optimistically drop just this row from local state — no full re-fetch
+      // of the whole alert list on every dismiss.
+      onDismissed(alert.id);
     } finally {
       setDismissing(false);
     }
@@ -161,6 +164,29 @@ export function AlertsTab({
     }
   };
 
+  // Optimistically remove a dismissed alert from local state instead of
+  // re-fetching the whole list. Keeps the dismiss interaction to a single API
+  // call (the dismiss itself) in the common case. But if removing the row empties
+  // the current page while other pages still have alerts, fall back to a fetch so
+  // the user isn't stranded on a falsely-empty "No alerts" view: backfill this
+  // page, or step back a page if we just cleared the last one.
+  const removeAlertLocally = (id) => {
+    const remainingHere = alerts.filter((a) => a.id !== id);
+    const newTotal = Math.max(0, total - 1);
+
+    if (remainingHere.length === 0 && newTotal > 0) {
+      // Page emptied but more remain — reload. If this was the last page and it's
+      // now gone, step back one; otherwise reload the same page to pull the next
+      // page's rows up into it.
+      const lastPage = Math.max(1, Math.ceil(newTotal / PAGE_SIZE));
+      load(Math.min(page, lastPage), level);
+      return;
+    }
+
+    setAlerts(remainingHere);
+    setTotal(newTotal);
+  };
+
   useEffect(() => {
     load(1, level);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -212,8 +238,12 @@ export function AlertsTab({
               const refresh = () => load(page, level);
               // Full-row override escape hatch: the app owns the cells.
               if (renderRow) {
+                // Optimistic dismiss (drop the row locally); refresh stays
+                // available for apps that want a full reload.
                 const dismiss = () =>
-                  dismissAlert(context, alert.id, fetchOptions).then(refresh);
+                  dismissAlert(context, alert.id, fetchOptions).then(() =>
+                    removeAlertLocally(alert.id)
+                  );
                 return (
                   <React.Fragment key={alert.id}>
                     {renderRow(alert, {
@@ -232,6 +262,7 @@ export function AlertsTab({
                   alert={alert}
                   fetchOptions={fetchOptions}
                   refresh={refresh}
+                  onDismissed={removeAlertLocally}
                   renderRowActions={renderRowActions}
                 />
               );