@checkstack/integration-frontend 0.4.4 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,223 @@
 # @checkstack/integration-frontend
 
+## 0.5.0
+
+### Minor Changes
+
+- e2d6f25: feat(automation): connection picker for integration actions + restore Integrations menu
+
+  Connection-backed automation actions (Jira, Teams, Webex) now render a
+  working connection picker plus cascading provider dropdowns in the
+  visual editor, and the Integrations entry is back in the user menu.
+
+  **Contract.** `ActionDefinition` gained an optional
+  `connectionProviderId` (and it is surfaced on `ActionInfoSchema` and
+  mapped in the `listActions` router). It carries the integration
+  provider's fully-qualified id, derived from the provider plugin's own
+  `pluginMetadata.pluginId` (never a hardcoded string), so the editor
+  knows which provider backs an action's dropdowns and it matches the
+  `qualifiedId` the integration provider registry assigns.
+
+  **Providers.** Jira, Teams and Webex each export
+  `*_PROVIDER_LOCAL_ID` / `*_PROVIDER_QUALIFIED_ID`, register their
+  provider with the local id, and add a `CONNECTION_OPTIONS`
+  (`"connectionOptions"`) resolver name. Their `post_message` /
+  issue actions set `connectionProviderId` and expose `connectionId`
+  as an `x-options-resolver` dropdown instead of a hidden field.
+
+  **Frontend bridge.** A new `useConnectionOptionResolvers` hook
+  (`@checkstack/automation-frontend`, which now depends on
+  `@checkstack/integration-common`) turns an action's
+  `x-options-resolver` schema fields into live data: the
+  `connectionOptions` resolver lists the provider's connections via
+  `listConnections`, and every other resolver name is forwarded to
+  `getConnectionOptions` for the selected `connectionId`, passing the
+  live form values as `context` for dependent fields. `ProviderActionBody`
+  now passes this map to `DynamicForm` (it was previously missing
+  entirely, so connection-backed actions had no working dropdowns).
+
+  **frontend-api.** `usePluginClient` procedures now also expose a typed
+  imperative `.call(input)` alongside `.useQuery` / `.useMutation`, for
+  async callbacks that cannot host a hook (such as a `DynamicForm`
+  options resolver). Additive, non-breaking.
+
+  **Integrations menu.** Re-added `IntegrationMenuItem` and a new
+  `IntegrationsLandingPage`, wired into `integration-frontend` as a list
+  route and a `UserMenuItemsSlot` entry under the "Configuration" group.
+
+  **Action card polish.** The action editor's secondary metadata (id,
+  description, failure behaviour) is now grouped into one quiet settings
+  panel with consistent small uppercase "eyebrow" labels, so the action's
+  own configuration stays the focal point. The raw failure checkbox was
+  replaced with the standard `Checkbox` control, and the provider action
+  picker / configuration sections gained consistent section headers and a
+  divider. The per-step "type" dropdown was removed: an action's kind is
+  fixed at creation, so changing it now means adding a new step and
+  deleting the old one (avoids the surprising full-config reset that
+  switching kinds used to trigger).
+
+  **Add-step picker.** Adding a step now opens a Home-Assistant-style
+  dialog where the operator decides the step type up front: an "Actions"
+  tab lists the registered provider actions grouped by category
+  (searchable; picking one presets the step's `action`), and a "Blocks"
+  tab lists the structural building blocks (choose / parallel / repeat /
+  etc.). Because the concrete action is chosen here, the in-card action
+  switcher was removed - a step's action is fixed once created. Composite
+  blocks now start with an empty child list (filled via the nested
+  add-step picker) instead of seeding an unconfigurable empty action.
+
+- 41c77f4: feat(automation): one-time migration of webhook subscriptions + remove legacy integration backend
+
+  **BREAKING CHANGES** (platform is in BETA — no major bump):
+
+  - `IntegrationProvider` no longer carries `config` (subscription
+    config) or `deliver`. The interface now models a connection provider
+    only: connection schema + `getConnectionOptions` + `testConnection`.
+  - The legacy subscription / delivery-log / event endpoints
+    (`listSubscriptions`, `createSubscription`, `getDeliveryLogs`,
+    `listEventTypes`, …) are removed from `integrationContract`.
+  - `delivery-coordinator`, `hook-subscriber`, `event-registry`, and the
+    `integrationEventExtensionPoint` are deleted. Plugins that
+    previously called `integrationEvents.registerEvent(...)` now
+    register their hooks as automation triggers via
+    `automationTriggerExtensionPoint.registerTrigger(...)`.
+  - Frontend pages `IntegrationsPage` and `DeliveryLogsPage` are gone;
+    the integration plugin's only remaining UI is connection
+    management. Subscription management lives under `/automation/...`.
+  - `webhook_subscriptions` and `delivery_logs` tables stay in the
+    database for one release as a safety net (no code reads or writes
+    them), and will be dropped in a follow-up migration.
+
+  **New**:
+
+  - `jira.create_issue`, `teams.post_message`, `webex.post_message`,
+    `webhook.send`, `integration-script.run_shell`, and
+    `integration-script.run_script` actions registered against the
+    Automation Platform with matching `*.message`, `*.delivery`,
+    `shell.result`, and `script.result` artifact types. The script
+    plugin exposes **two** actions — `run_shell` runs bash via the
+    shared `ShellScriptRunner` (Monaco `shell` editor), `run_script`
+    runs an ESM module in a Bun subprocess via `EsmScriptRunner`
+    (Monaco `typescript` editor + `defineIntegration` helper) — to
+    preserve the legacy provider split. `jira.create_issue` keeps the
+    dynamic field-mapping dropdown (driven by
+    `JIRA_RESOLVERS.FIELD_OPTIONS`).
+  - One-time data migration runs on boot in
+    `automation-backend.afterPluginsReady`. It reads
+    `webhook_subscriptions` via a new service RPC
+    `IntegrationApi.listLegacySubscriptions`, translates each row into
+    a single-trigger / single-action automation (marked with
+    `managed_by = "migrated-subscription:<id>"`), and is idempotent
+    across restarts.
+  - Failed translations are recorded in a new
+    `automation_migration_failures` table and surfaced via
+    `AutomationApi.listMigrationFailures` /
+    `acknowledgeMigrationFailure` so admins can review and re-create
+    failed entries by hand.
+
+### Patch Changes
+
+- Updated dependencies [e2d6f25]
+- Updated dependencies [41c77f4]
+- Updated dependencies [41c77f4]
+- Updated dependencies [41c77f4]
+- Updated dependencies [41c77f4]
+- Updated dependencies [41c77f4]
+- Updated dependencies [4832e33]
+- Updated dependencies [6d52276]
+- Updated dependencies [35bc682]
+- Updated dependencies [c39ee69]
+  - @checkstack/frontend-api@0.6.0
+  - @checkstack/ui@1.11.0
+  - @checkstack/integration-common@0.6.0
+  - @checkstack/common@0.12.0
+  - @checkstack/tips-frontend@0.2.6
+  - @checkstack/signal-frontend@0.1.5
+
+## 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.5.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,12 +13,12 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/common": "0.10.0",
-    "@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/common": "0.11.0",
+    "@checkstack/frontend-api": "0.5.2",
+    "@checkstack/integration-common": "0.5.0",
+    "@checkstack/signal-frontend": "0.1.4",
+    "@checkstack/tips-frontend": "0.2.5",
+    "@checkstack/ui": "1.10.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0"
@@ -27,6 +27,6 @@
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.3.2"
+    "@checkstack/scripts": "0.3.3"
   }
 }

package/src/components/IntegrationMenuItem.tsx

@@ -1,4 +1,5 @@
-import { useNavigate } from "react-router-dom";
+import React from "react";
+import { Link } from "react-router-dom";
 import { Webhook } from "lucide-react";
 import { DropdownMenuItem } from "@checkstack/ui";
 import type { UserMenuItemsContext } from "@checkstack/frontend-api";
@@ -8,12 +9,17 @@ import {
   integrationAccess,
   pluginMetadata,
 } from "@checkstack/integration-common";
-import React from "react";
 
+/**
+ * "Integrations" entry in the user menu. Links to the integrations landing
+ * page (provider list); each provider links on to its connection-management
+ * page. Gated on `integration.manage` — mirrors the access check the routes
+ * themselves enforce, but hiding the link is the cleaner UX for users who
+ * can't manage connections.
+ */
 export const IntegrationMenuItem = ({
   accessRules: userPerms,
 }: UserMenuItemsContext) => {
-  const navigate = useNavigate();
   const qualifiedId = `${pluginMetadata.pluginId}.${integrationAccess.manage.id}`;
   const allowed = userPerms.includes("*") || userPerms.includes(qualifiedId);
 
@@ -22,11 +28,10 @@ export const IntegrationMenuItem = ({
   }
 
   return (
-    <DropdownMenuItem
-      onClick={() => navigate(resolveRoute(integrationRoutes.routes.list))}
-      icon={<Webhook className="h-4 w-4" />}
-    >
-      Integrations
-    </DropdownMenuItem>
+    <Link to={resolveRoute(integrationRoutes.routes.list)}>
+      <DropdownMenuItem icon={<Webhook className="h-4 w-4" />}>
+        Integrations
+      </DropdownMenuItem>
+    </Link>
   );
 };

package/src/index.tsx

@@ -8,27 +8,23 @@ import {
   pluginMetadata,
   integrationAccess,
 } from "@checkstack/integration-common";
-import { IntegrationsPage } from "./pages/IntegrationsPage";
-import { DeliveryLogsPage } from "./pages/DeliveryLogsPage";
+import { IntegrationsLandingPage } from "./pages/IntegrationsLandingPage";
 import { ProviderConnectionsPage } from "./pages/ProviderConnectionsPage";
 import { IntegrationMenuItem } from "./components/IntegrationMenuItem";
 
+/**
+ * Integration frontend — now scoped to connection management. The
+ * legacy subscription / delivery-log pages were removed when the
+ * platform moved to the Automation Platform model; operators manage
+ * automations in `/automation/...` instead. The landing page lists
+ * providers and links each to its connection-management page.
+ */
 export const integrationPlugin = createFrontendPlugin({
   metadata: pluginMetadata,
   routes: [
     {
       route: integrationRoutes.routes.list,
-      element: <IntegrationsPage />,
-      accessRule: integrationAccess.manage,
-    },
-    {
-      route: integrationRoutes.routes.logs,
-      element: <DeliveryLogsPage />,
-      accessRule: integrationAccess.manage,
-    },
-    {
-      route: integrationRoutes.routes.deliveryLogs,
-      element: <DeliveryLogsPage />,
+      element: <IntegrationsLandingPage />,
       accessRule: integrationAccess.manage,
     },
     {
@@ -48,7 +44,6 @@ export const integrationPlugin = createFrontendPlugin({
 
 export default integrationPlugin;
 
-// Re-export registry and types for providers to register custom config components
 export {
   registerProviderConfigExtension,
   getProviderConfigExtension,

package/src/pages/IntegrationsLandingPage.tsx

@@ -0,0 +1,116 @@
+import { Link } from "react-router-dom";
+import {
+  PageLayout,
+  Card,
+  CardContent,
+  EmptyState,
+  LoadingSpinner,
+  DynamicIcon,
+  Badge,
+  type LucideIconName,
+} from "@checkstack/ui";
+import { Webhook, ArrowRight } from "lucide-react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { resolveRoute } from "@checkstack/common";
+import { IntegrationApi, integrationRoutes } from "@checkstack/integration-common";
+
+/**
+ * Integrations landing page — lists every registered integration provider
+ * and links each to its connection-management page. This is the entry
+ * point reached from the "Integrations" user-menu item; the per-provider
+ * `ProviderConnectionsPage` lives at `/connections/:providerId`.
+ *
+ * Only providers that declare a `connectionSchema` (i.e. need site-wide
+ * credentials) are actionable here; others are shown disabled so operators
+ * understand why there's nothing to configure.
+ */
+export const IntegrationsLandingPage = () => {
+  const client = usePluginClient(IntegrationApi);
+  const { data: providers = [], isLoading } = client.listProviders.useQuery({});
+
+  if (isLoading) {
+    return (
+      <PageLayout title="Integrations" icon={Webhook}>
+        <div className="flex items-center justify-center py-12">
+          <LoadingSpinner />
+        </div>
+      </PageLayout>
+    );
+  }
+
+  if (providers.length === 0) {
+    return (
+      <PageLayout title="Integrations" icon={Webhook}>
+        <EmptyState
+          icon={<Webhook className="h-12 w-12" />}
+          title="No integration providers"
+          description="Install an integration plugin (e.g. Jira, Teams, Webex) to manage its connections here."
+        />
+      </PageLayout>
+    );
+  }
+
+  return (
+    <PageLayout
+      title="Integrations"
+      subtitle="Manage site-wide connections for your integration providers"
+      icon={Webhook}
+    >
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {providers.map((provider) => {
+          const card = (
+            <Card
+              className={
+                provider.hasConnectionSchema
+                  ? "transition-colors hover:border-primary/50"
+                  : "opacity-60"
+              }
+            >
+              <CardContent className="flex items-start gap-3 p-4">
+                <DynamicIcon
+                  name={(provider.icon as LucideIconName) ?? "Webhook"}
+                  className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground"
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate text-sm font-semibold">
+                      {provider.displayName}
+                    </span>
+                    {!provider.hasConnectionSchema && (
+                      <Badge variant="outline" className="shrink-0 text-[10px]">
+                        No connections
+                      </Badge>
+                    )}
+                  </div>
+                  {provider.description && (
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                      {provider.description}
+                    </p>
+                  )}
+                </div>
+                {provider.hasConnectionSchema && (
+                  <ArrowRight className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                )}
+              </CardContent>
+            </Card>
+          );
+
+          if (!provider.hasConnectionSchema) {
+            return <div key={provider.qualifiedId}>{card}</div>;
+          }
+
+          return (
+            <Link
+              key={provider.qualifiedId}
+              to={resolveRoute(integrationRoutes.routes.connections, {
+                providerId: provider.qualifiedId,
+              })}
+            >
+              {card}
+            </Link>
+          );
+        })}
+      </div>
+    </PageLayout>
+  );
+};

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);
     },
   });