@growth-operations/ui-shared 1.1.0 → 1.2.0

package/package.json

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

package/src/alerts/AlertsTab.jsx

@@ -0,0 +1,246 @@
+// AlertsTab — the shared customer alerts table, extensible per app.
+//
+// Every Growth Ops app surfaces the same base Alert shape ({ id, level, title,
+// message, created_at, dismissable, action_name, action_url }) from the same
+// serve/dismiss contract (common.alerts + the app's alerts router). This owns
+// the shared chrome — level filter, pagination, fetch, and per-row dismiss —
+// and exposes two extension points so apps with richer alert shapes (sparkfly's
+// merge / replace-email / skip; toast's connection-lost retry) keep one table
+// instead of forking it:
+//
+//   - renderRowActions(alert, { context, refresh }) -> node
+//       Extra action UI rendered in the actions cell ALONGSIDE Dismiss. Use for
+//       app-specific buttons that act on the alert then refresh the table.
+//   - renderRow(alert, { context, refresh, dismiss, fetchOptions }) -> <TableRow>
+//       Full per-row override (escape hatch) for apps whose row needs custom
+//       layout — expandable merge panels, inline inputs, extra columns. When
+//       provided it replaces the default row entirely; the app owns the cells.
+//
+// Omit both -> default rows (level tag, title/message + action link, time,
+// Dismiss). Self-hosted apps (sparkfly, toast) call with default getAlerts/
+// dismissAlert paths; base-hosted apps pass `basePath` + `portalId` so the SDK
+// targets the base alerts route.
+import React, { useState, useEffect } from "react";
+import {
+  Alert,
+  EmptyState,
+  Text,
+  Link,
+  Button,
+  Table,
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  Select,
+  Tag,
+  Flex,
+  LoadingSpinner,
+} from "@hubspot/ui-extensions";
+
+import { getAlerts, dismissAlert } from "../sdk/app/alerts";
+import { fmtDate } from "../lib/format";
+
+const PAGE_SIZE = 10;
+
+const LEVEL_OPTIONS = [
+  { label: "All Levels", value: "all" },
+  { label: "Info", value: "info" },
+  { label: "Warning", value: "warning" },
+  { label: "Error", value: "error" },
+  { label: "Critical", value: "critical" },
+];
+
+// Alert level -> HubSpot Tag variant.
+const LEVEL_VARIANT = {
+  info: "default",
+  warning: "warning",
+  error: "error",
+  critical: "error",
+};
+
+function DefaultAlertRow({
+  context,
+  alert,
+  refresh,
+  fetchOptions,
+  renderRowActions,
+}) {
+  const [dismissing, setDismissing] = useState(false);
+
+  const dismiss = async () => {
+    setDismissing(true);
+    try {
+      await dismissAlert(context, alert.id, fetchOptions);
+      await refresh();
+    } finally {
+      setDismissing(false);
+    }
+  };
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Tag variant={LEVEL_VARIANT[alert.level] || "default"}>
+          {alert.level}
+        </Tag>
+      </TableCell>
+      <TableCell>
+        <Flex direction="column" gap="extra-small">
+          <Text format={{ fontWeight: "bold" }}>{alert.title}</Text>
+          <Text>{alert.message}</Text>
+          {alert.action_url && alert.action_name && (
+            <Link href={alert.action_url}>{alert.action_name}</Link>
+          )}
+        </Flex>
+      </TableCell>
+      <TableCell>{fmtDate(alert.created_at)}</TableCell>
+      <TableCell>
+        <Flex direction="row" gap="small" align="center">
+          {/* App-specific actions render before Dismiss. */}
+          {renderRowActions && renderRowActions(alert, { context, refresh })}
+          {alert.dismissable && (
+            <Button
+              variant="secondary"
+              size="xs"
+              disabled={dismissing}
+              onClick={dismiss}
+            >
+              {dismissing ? "Dismissing…" : "Dismiss"}
+            </Button>
+          )}
+        </Flex>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+// context: extension context. basePath/portalId: forwarded to getAlerts/
+// dismissAlert (base-hosted apps pass both; self-hosted apps omit them).
+// renderRowActions / renderRow: per-app extension points (see file header).
+export function AlertsTab({
+  context,
+  basePath,
+  portalId,
+  renderRowActions,
+  renderRow,
+}) {
+  const [alerts, setAlerts] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [level, setLevel] = useState("all");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // The options the SDK needs to target the right backend (base vs self-hosted).
+  const fetchOptions = { basePath, portalId };
+
+  const load = async (pageNumber, levelValue) => {
+    setLoading(true);
+    try {
+      const response = await getAlerts(context, {
+        offset: (pageNumber - 1) * PAGE_SIZE,
+        limit: PAGE_SIZE,
+        orderBy: "created_at",
+        orderDirection: "DESCENDING",
+        filterField: levelValue !== "all" ? "level" : undefined,
+        filterValue: levelValue !== "all" ? levelValue : undefined,
+        ...fetchOptions,
+      });
+      setAlerts(response.alerts || []);
+      setTotal(response.total || 0);
+      setPage(pageNumber);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      setAlerts([]);
+      setTotal(0);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load(1, level);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [context]);
+
+  const onLevelChange = (value) => {
+    setLevel(value);
+    load(1, value);
+  };
+
+  if (error) {
+    return (
+      <Alert title="Couldn't load alerts" variant="error">
+        {error}
+      </Alert>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="medium">
+      <Select
+        label="Filter by level"
+        name="levelFilter"
+        options={LEVEL_OPTIONS}
+        value={level}
+        onChange={onLevelChange}
+      />
+      {loading ? (
+        <LoadingSpinner showLabel label="Loading alerts…" />
+      ) : !alerts.length ? (
+        <EmptyState title="No alerts" layout="vertical">
+          <Text>There are currently no alerts that need your attention.</Text>
+        </EmptyState>
+      ) : (
+        <Table
+          paginated={total > PAGE_SIZE}
+          page={page}
+          pageCount={Math.ceil(total / PAGE_SIZE)}
+          onPageChange={(p) => load(p, level)}
+        >
+          <TableHead>
+            <TableHeader width="min">Level</TableHeader>
+            <TableHeader width="max">Alert</TableHeader>
+            <TableHeader width="min">Time</TableHeader>
+            <TableHeader width="min"></TableHeader>
+          </TableHead>
+          <TableBody>
+            {alerts.map((alert) => {
+              const refresh = () => load(page, level);
+              // Full-row override escape hatch: the app owns the cells.
+              if (renderRow) {
+                const dismiss = () =>
+                  dismissAlert(context, alert.id, fetchOptions).then(refresh);
+                return (
+                  <React.Fragment key={alert.id}>
+                    {renderRow(alert, {
+                      context,
+                      refresh,
+                      dismiss,
+                      fetchOptions,
+                    })}
+                  </React.Fragment>
+                );
+              }
+              return (
+                <DefaultAlertRow
+                  key={alert.id}
+                  context={context}
+                  alert={alert}
+                  fetchOptions={fetchOptions}
+                  refresh={refresh}
+                  renderRowActions={renderRowActions}
+                />
+              );
+            })}
+          </TableBody>
+        </Table>
+      )}
+    </Flex>
+  );
+}
+
+export default AlertsTab;

package/src/index.js

@@ -18,6 +18,9 @@ export { HelpfulLinks } from "./home/HelpfulLinks";
 export { BillingTab } from "./billing/BillingTab";
 export { PlanGrid } from "./billing/PlanGrid";
 
+// Alerts — the shared customer alerts table (level filter, sort, dismiss).
+export { AlertsTab } from "./alerts/AlertsTab";
+
 // Lib helpers.
 export {
   fmtDate,

package/src/sdk/app/alerts.js

@@ -1,13 +1,24 @@
 // getAlerts / dismissAlert — generic alerts API client.
 //
-// Every Growth Ops app exposes the same /api/v1/alerts surface (paginated,
-// orderable, filterable). This is already app-agnostic, so it's ported verbatim.
+// Two backend shapes share this client:
+//   - SELF-HOSTED apps (sparkfly, toast) serve /api/v1/alerts from their OWN
+//     service and resolve portalId from the verified token. Default basePath,
+//     no portalId needed.
+//   - BASE-HOSTED credit apps (line-item, …) serve from the base service at
+//     /v1/hubspot/app_pages/{app}/alerts and require ?portalId=. Pass
+//     `basePath` + `portalId` to target that route.
+//
 // Goes through callAppApi, so it inherits the hubspot.fetch rules (object body,
-// no custom headers).
+// no custom headers). BASE_URL (the app's own service, or base for base-hosted
+// apps) comes from context.variables.
 import { callAppApi } from "./base";
 
+const DEFAULT_BASE_PATH = "/api/v1/alerts";
+
 // context: extension context. params: { offset, limit, orderBy, orderDirection,
-// filterField, filterValue }. Returns the backend's alerts response.
+// filterField, filterValue, basePath, portalId }. basePath defaults to the
+// self-hosted /api/v1/alerts; portalId is appended when set (base-hosted apps).
+// Returns the backend's alerts response.
 export async function getAlerts(context, params = {}) {
   const {
     offset = 0,
@@ -16,6 +27,8 @@ export async function getAlerts(context, params = {}) {
     orderDirection,
     filterField,
     filterValue,
+    basePath = DEFAULT_BASE_PATH,
+    portalId,
   } = params;
   const queryParams = new URLSearchParams();
   queryParams.append("offset", offset);
@@ -31,11 +44,19 @@ export async function getAlerts(context, params = {}) {
     queryParams.append("filter_field", filterField);
     queryParams.append("filter_value", filterValue);
   }
-  const path = `/api/v1/alerts?${queryParams.toString()}`;
+  if (portalId != null) {
+    queryParams.append("portalId", portalId);
+  }
+  const path = `${basePath}?${queryParams.toString()}`;
   return callAppApi(context, path, "GET");
 }
 
-export async function dismissAlert(context, alertId) {
-  const path = `/api/v1/alerts/${alertId}/dismiss`;
+// context, alertId, options: { basePath, portalId }. basePath defaults to the
+// self-hosted /api/v1/alerts; portalId is appended when set (base-hosted apps).
+export async function dismissAlert(context, alertId, options = {}) {
+  const { basePath = DEFAULT_BASE_PATH, portalId } = options;
+  const query =
+    portalId != null ? `?portalId=${encodeURIComponent(portalId)}` : "";
+  const path = `${basePath}/${alertId}/dismiss${query}`;
   return callAppApi(context, path, "POST");
 }