@checkstack/integration-frontend 0.4.4 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # @checkstack/integration-frontend
 
+## 0.4.5
+
+### Patch Changes
+
+- f23f3c9: Retrofit the highest-traffic configuration list tables
+  (`HealthCheckList`, `SloConfigPage`, and the integration
+  `DeliveryLogsPage`) onto the `ResponsiveTable` + `MobileCardList`
+  primitives from `@checkstack/ui`. On `sm` and up each page still
+  renders the unchanged 5- to 7-column table; below that breakpoint a
+  sibling stacked-card layout surfaces the same data with the resource
+  name + status badge at the top, secondary columns in a muted line, and
+  the existing action buttons in a right-aligned footer. The
+  `HealthCheckListSkeleton` placeholder mirrors both branches so the page
+  no longer jumps when data resolves. No business logic, column order,
+  or query inputs changed.
+- f23f3c9: Sweep every paginated `*-common` contract onto the canonical
+  `PaginationInput` / `PaginatedResult` from `@checkstack/common` and
+  remove the now-unused legacy exports.
+
+  **BREAKING CHANGE** - `@checkstack/common` drops the deprecated
+  `PaginationInputSchema`, `paginatedOutput`, and `PaginatedResponse`
+  symbols. Callers must consume `PaginationInput` (input) and
+  `PaginatedResult(itemSchema)` (output) instead. The canonical input is
+  `{ limit (1-100, default 20), offset (>= 0, default 0) }`; the
+  canonical output envelope is
+  `{ items, total, limit, offset }`.
+
+  **BREAKING CHANGE** - `@checkstack/notification-common` migrates
+  `getNotifications` off the legacy `PaginationInputSchema`
+  (`{ limit, offset, unreadOnly }` with output `{ notifications, total }`)
+  onto `ListNotificationsInputSchema =
+PaginationInput.extend({ unreadOnly })` and
+  `PaginatedResult(NotificationSchema)`. The output key changes from
+  `notifications` to `items`, and `limit` / `offset` are now echoed on
+  the response. The `PaginationInput` type alias previously exported
+  from `notification-common` is removed - use `ListNotificationsInput`
+  or the canonical `PaginationInput` from `@checkstack/common`.
+
+  **BREAKING CHANGE** - `@checkstack/integration-common` migrates
+  `listSubscriptions` (inline `{ page, pageSize, ... }` -> output
+  `{ subscriptions, total }`) and `getDeliveryLogs` (via
+  `DeliveryLogQueryInputSchema` `{ subscriptionId?, eventType?, status?,
+page, pageSize }` -> output `{ logs, total }`) onto the canonical
+  `PaginationInput.extend({...})` input and
+  `PaginatedResult(itemSchema)` output. External callers must switch
+  from `{ page, pageSize }` to `{ limit, offset }` and read response
+  items from `data.items` (no more `data.subscriptions` / `data.logs`).
+
+  The matching `*-backend` handlers were updated to consume the new
+  input shape (`offset` arithmetic in lieu of `(page - 1) * pageSize`)
+  and to echo `limit` / `offset` on the response. The `*-frontend` call
+  sites in `NotificationsPage`, `NotificationBell`, `IntegrationsPage`,
+  and `DeliveryLogsPage` were updated to send the new input shape and
+  read `data.items`.
+
+- f23f3c9: Gate decorative motion and blur effects behind
+  `usePerformance().isLowPower` on a focused set of high-traffic plugin
+  pages (Dashboard, Dependency map, System node, Notification bell,
+  Announcement banner / cards, Anomaly field overrides editor, SLO
+  attribution chart, Catalog droppable group). Hover scales, backdrop
+  blurs, `animate-pulse`/`animate-ping` accents, and entry transitions
+  now drop to static states on low-power devices; functional UX
+  transitions (Drawer/Dialog open-close, colour transitions) are left
+  alone.
+
+  Standardise the post-mutation error-toast voice on plugin pages by
+  migrating multi-clause `toast.error(extractErrorMessage(error, "Failed
+to X"))` call sites onto the `toastError(toast, "Failed to X", error)`
+  helper from `@checkstack/ui`. The helper applies the canonical
+  `"action: message"` prefix and 100-character truncation in one place,
+  and the now-orphaned `extractErrorMessage` imports are dropped from
+  the affected files. No business logic or component APIs changed.
+
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+  - @checkstack/common@0.11.0
+  - @checkstack/frontend-api@0.5.2
+  - @checkstack/integration-common@0.5.0
+  - @checkstack/ui@1.10.0
+  - @checkstack/tips-frontend@0.2.5
+  - @checkstack/signal-frontend@0.1.4
+
 ## 0.4.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/integration-frontend",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -17,8 +17,8 @@
     "@checkstack/frontend-api": "0.5.1",
     "@checkstack/integration-common": "0.4.0",
     "@checkstack/signal-frontend": "0.1.3",
-    "@checkstack/tips-frontend": "0.2.3",
-    "@checkstack/ui": "1.8.3",
+    "@checkstack/tips-frontend": "0.2.4",
+    "@checkstack/ui": "1.9.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0"

package/src/components/CreateSubscriptionDialog.tsx

@@ -23,10 +23,11 @@ import {
   SelectValue,
   Label,
   ConfirmationModal,
+  toastError,
   type LucideIconName,
 } from "@checkstack/ui";
 import { usePluginClient } from "@checkstack/frontend-api";
-import { resolveRoute, extractErrorMessage } from "@checkstack/common";
+import { resolveRoute } from "@checkstack/common";
 import {
   IntegrationApi,
   integrationRoutes,
@@ -128,7 +129,7 @@ export const SubscriptionDialog = ({
       setSaving(false);
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to create subscription"));
+      toastError(toast, "Failed to create subscription", error);
       setSaving(false);
     },
   });
@@ -141,7 +142,7 @@ export const SubscriptionDialog = ({
       setSaving(false);
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to update subscription"));
+      toastError(toast, "Failed to update subscription", error);
       setSaving(false);
     },
   });
@@ -153,7 +154,7 @@ export const SubscriptionDialog = ({
       onOpenChange(false);
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to delete subscription"));
+      toastError(toast, "Failed to delete subscription", error);
     },
   });
 

package/src/pages/DeliveryLogsPage.tsx

@@ -24,6 +24,8 @@ import {
   usePagination,
   usePaginationSync,
   BackLink,
+  ResponsiveTable,
+  MobileCardList,
 } from "@checkstack/ui";
 import { usePluginClient } from "@checkstack/frontend-api";
 import { resolveRoute } from "@checkstack/common";
@@ -70,17 +72,16 @@ export const DeliveryLogsPage = () => {
   const pagination = usePagination({ defaultLimit: 20 });
 
   // Fetch data with useQuery
-  const page = Math.floor(pagination.offset / pagination.limit) + 1;
   const { data, isLoading, refetch } =
     integrationClient.getDeliveryLogs.useQuery({
-      page,
-      pageSize: pagination.limit,
+      limit: pagination.limit,
+      offset: pagination.offset,
     });
 
   // Sync total from response
   usePaginationSync(pagination, data?.total);
 
-  const logs = data?.logs ?? [];
+  const logs = data?.items ?? [];
 
   // Retry mutation
   const retryMutation = integrationClient.retryDelivery.useMutation({
@@ -132,81 +133,141 @@ export const DeliveryLogsPage = () => {
               </div>
             </Card>
           ) : (
-            <Card>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Subscription</TableHead>
-                    <TableHead>Event</TableHead>
-                    <TableHead>Attempts</TableHead>
-                    <TableHead>Created</TableHead>
-                    <TableHead>Error</TableHead>
-                    <TableHead></TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {logs.map((log: DeliveryLog) => {
-                    const config = statusConfig[log.status];
-                    return (
-                      <TableRow key={log.id}>
-                        <TableCell>
-                          <Badge
-                            variant={config.variant}
-                            className="flex items-center gap-1 w-fit"
-                          >
-                            {config.icon}
-                            {log.status}
-                          </Badge>
-                        </TableCell>
-                        <TableCell>
-                          <div className="font-medium">
-                            {log.subscriptionName ?? "Unknown"}
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <div className="text-sm font-mono">
-                            {log.eventType}
-                          </div>
-                        </TableCell>
-                        <TableCell>{log.attempts}</TableCell>
-                        <TableCell>
-                          <div className="text-sm text-muted-foreground">
-                            {new Date(log.createdAt).toLocaleString()}
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          {log.errorMessage ? (
-                            <div
-                              className="text-sm text-destructive max-w-[200px] truncate"
-                              title={log.errorMessage}
-                            >
-                              {log.errorMessage}
-                            </div>
-                          ) : undefined}
-                        </TableCell>
-                        <TableCell>
-                          {log.status === "failed" && (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleRetry(log.id)}
-                              disabled={retrying === log.id}
-                            >
-                              <RefreshCw
-                                className={`h-4 w-4 mr-1 ${
-                                  retrying === log.id ? "animate-spin" : ""
-                                }`}
-                              />
-                              Retry
-                            </Button>
-                          )}
-                        </TableCell>
+            <>
+              <ResponsiveTable>
+                <Card>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Status</TableHead>
+                        <TableHead>Subscription</TableHead>
+                        <TableHead>Event</TableHead>
+                        <TableHead>Attempts</TableHead>
+                        <TableHead>Created</TableHead>
+                        <TableHead>Error</TableHead>
+                        <TableHead></TableHead>
                       </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
+                    </TableHeader>
+                    <TableBody>
+                      {logs.map((log: DeliveryLog) => {
+                        const config = statusConfig[log.status];
+                        return (
+                          <TableRow key={log.id}>
+                            <TableCell>
+                              <Badge
+                                variant={config.variant}
+                                className="flex items-center gap-1 w-fit"
+                              >
+                                {config.icon}
+                                {log.status}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <div className="font-medium">
+                                {log.subscriptionName ?? "Unknown"}
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <div className="text-sm font-mono">
+                                {log.eventType}
+                              </div>
+                            </TableCell>
+                            <TableCell>{log.attempts}</TableCell>
+                            <TableCell>
+                              <div className="text-sm text-muted-foreground">
+                                {new Date(log.createdAt).toLocaleString()}
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              {log.errorMessage ? (
+                                <div
+                                  className="text-sm text-destructive max-w-[200px] truncate"
+                                  title={log.errorMessage}
+                                >
+                                  {log.errorMessage}
+                                </div>
+                              ) : undefined}
+                            </TableCell>
+                            <TableCell>
+                              {log.status === "failed" && (
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => handleRetry(log.id)}
+                                  disabled={retrying === log.id}
+                                >
+                                  <RefreshCw
+                                    className={`h-4 w-4 mr-1 ${
+                                      retrying === log.id ? "animate-spin" : ""
+                                    }`}
+                                  />
+                                  Retry
+                                </Button>
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </Card>
+              </ResponsiveTable>
+
+              <MobileCardList>
+                {logs.map((log: DeliveryLog) => {
+                  const config = statusConfig[log.status];
+                  return (
+                    <Card key={log.id} className="p-3">
+                      <div className="flex items-start justify-between gap-2">
+                        <span className="font-medium truncate">
+                          {log.subscriptionName ?? "Unknown"}
+                        </span>
+                        <Badge
+                          variant={config.variant}
+                          className="flex items-center gap-1 w-fit shrink-0"
+                        >
+                          {config.icon}
+                          {log.status}
+                        </Badge>
+                      </div>
+                      <div className="mt-1 text-xs text-muted-foreground font-mono break-all">
+                        {log.eventType}
+                      </div>
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {log.attempts} attempt
+                        {log.attempts === 1 ? "" : "s"} &middot;{" "}
+                        {new Date(log.createdAt).toLocaleString()}
+                      </div>
+                      {log.errorMessage && (
+                        <div
+                          className="mt-2 text-xs text-destructive line-clamp-2"
+                          title={log.errorMessage}
+                        >
+                          {log.errorMessage}
+                        </div>
+                      )}
+                      {log.status === "failed" && (
+                        <div className="mt-3 flex justify-end">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleRetry(log.id)}
+                            disabled={retrying === log.id}
+                          >
+                            <RefreshCw
+                              className={`h-4 w-4 mr-1 ${
+                                retrying === log.id ? "animate-spin" : ""
+                              }`}
+                            />
+                            Retry
+                          </Button>
+                        </div>
+                      )}
+                    </Card>
+                  );
+                })}
+              </MobileCardList>
+
               {pagination.totalPages > 1 && (
                 <div className="p-4 border-t flex justify-center gap-2">
                   <Button
@@ -230,7 +291,7 @@ export const DeliveryLogsPage = () => {
                   </Button>
                 </div>
               )}
-            </Card>
+            </>
           )}
         </section>
       </div>

package/src/pages/IntegrationsPage.tsx

@@ -51,7 +51,7 @@ export const IntegrationsPage = () => {
     data: subscriptionsData,
     isLoading: subsLoading,
     refetch: refetchSubs,
-  } = client.listSubscriptions.useQuery({ page: 1, pageSize: 100 });
+  } = client.listSubscriptions.useQuery({ limit: 100, offset: 0 });
 
   const { data: providers = [], isLoading: providersLoading } =
     client.listProviders.useQuery({});
@@ -74,7 +74,7 @@ export const IntegrationsPage = () => {
     },
   });
 
-  const subscriptions = subscriptionsData?.subscriptions ?? [];
+  const subscriptions = subscriptionsData?.items ?? [];
   const loading = subsLoading || providersLoading || statsLoading;
 
   // Handle ?action=create URL parameter (from command palette)

package/src/pages/ProviderConnectionsPage.tsx

@@ -42,10 +42,11 @@ import {
   useToast,
   ConfirmationModal,
   BackLink,
+  toastError,
   type LucideIconName,
 } from "@checkstack/ui";
 import { usePluginClient } from "@checkstack/frontend-api";
-import { resolveRoute, extractErrorMessage } from "@checkstack/common";
+import { resolveRoute } from "@checkstack/common";
 import {
   IntegrationApi,
   integrationRoutes,
@@ -108,7 +109,7 @@ export const ProviderConnectionsPage = () => {
       setSaving(false);
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to create connection"));
+      toastError(toast, "Failed to create connection", error);
       setSaving(false);
     },
   });
@@ -122,7 +123,7 @@ export const ProviderConnectionsPage = () => {
       setSaving(false);
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to update connection"));
+      toastError(toast, "Failed to update connection", error);
       setSaving(false);
     },
   });
@@ -135,7 +136,7 @@ export const ProviderConnectionsPage = () => {
       toast.success("Connection deleted");
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to delete connection"));
+      toastError(toast, "Failed to delete connection", error);
     },
   });
 
@@ -157,7 +158,7 @@ export const ProviderConnectionsPage = () => {
         ...prev,
         [variables.connectionId]: { success: false, message: "Test failed" },
       }));
-      toast.error(extractErrorMessage(error, "Connection test failed"));
+      toastError(toast, "Connection test failed", error);
       setTestingId(undefined);
     },
   });