@checkstack/catalog-frontend 0.8.6 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,201 @@
 # @checkstack/catalog-frontend
 
+## 0.9.0
+
+### Minor Changes
+
+- 32d52c6: feat: unified notification-subscription manager dialog driven by spec registry
+
+  Replaces the bell-toggle UX (which only managed a single legacy
+  catalog group) with a modal that lists every notification type
+  registered against a target — system or group — and exposes both
+  per-type toggles and a bulk "Subscribe to all / Unsubscribe from all"
+  action. Both surfaces (system detail page header bell, dashboard group
+  header bell) now open the same `NotificationSubscriptionsManager`
+  component.
+
+  **Key change vs. the prior slot-based approach**: rows are now driven
+  by `notificationClient.listSubscriptionSpecs` — the backend's spec
+  registry is the single source of truth. Previously, a row only
+  appeared if a frontend plugin had remembered to register a
+  `createNotificationSubscriptionExtension`; this caused silent drift
+  (healthcheck and dependency registered backend specs without frontend
+  extensions, so the dialog counted them but never rendered rows). Now,
+  every spec the platform knows about renders a row using the spec's
+  `display` metadata (title, description, iconName resolved via
+  `DynamicIcon`).
+
+  **Sub-controls registry** (`@checkstack/notification-frontend`):
+  plugins that want sub-granularity (anomaly's per-field mute list,
+  future severity / channel filters) call
+  `registerSubscriptionSubControls(spec, Component)` at module load —
+  the manager looks the component up by `specId` when expanding a row.
+
+  **Removed (no compat)**:
+
+  - `createNotificationSubscriptionExtension` (replaced by the
+    spec-driven manager + the SubControls registry)
+  - `target.slot` field on `NotificationTarget` and the
+    `NotificationTargetInput.slot` parameter on
+    `defineNotificationTarget`
+  - `SystemNotificationSubscriptionsSlot` and
+    `GroupNotificationSubscriptionsSlot` from `@checkstack/catalog-common`
+  - `SystemNotificationsCard` from the system detail page's main column
+  - `SubscribeButton` wiring on dashboard group cards and the system
+    detail page header
+
+  **Migrated frontends**: anomaly (now registers `AnomalyFieldMuteList`
+  via the SubControls registry), incident, maintenance — all dropped
+  their `createNotificationSubscriptionExtension` calls. healthcheck and
+  dependency now show up automatically via the spec registry — no
+  frontend changes needed for them to render.
+
+  The trigger button reflects aggregate state — filled bell when at
+  least one spec is subscribed for the resource, ghost bell when none.
+
+- 32d52c6: feat: notification target pattern + per-spec subscriptions
+
+  Replaces the all-or-nothing catalog system/group notification model with a
+  platform-level target pattern. Each notification-emitting plugin declares
+  _subscription specs_ against typed _target_ objects exported from the
+  target's owning plugin (catalog ships `catalogSystemTarget` and
+  `catalogGroupTarget`). Notification-backend handles every per-resource
+  group lifecycle, parent-edge inheritance, and legacy-subscription seeding
+  — plugins never author groupId helpers, lifecycle hooks, or migration
+  code again.
+
+  **Plugin-author surface area is now ~12 lines per emitter:**
+
+  ```ts
+  // <plugin>-common
+  const { defineSubscription } = createSubscriptionFactory(pluginMetadata);
+  export const fooSystemSubscription = defineSubscription({
+    localId: "system",
+    target: catalogSystemTarget,
+    display: { title: "Foo Alerts", description: "...", iconName: "Bell" },
+  });
+
+  // <plugin>-backend register()
+  env.registerSubscriptionSpecs([fooSystemSubscription]);
+  //   ^ feeds the plugin loader's dependency sorter — each spec's
+  //     target.ownerPlugin becomes an implicit init-order dep, so this
+  //     plugin automatically waits for catalog (the target owner) to
+  //     finish init + afterPluginsReady before its own runs.
+
+  // <plugin>-backend afterPluginsReady
+  await notificationClient.registerSubscriptionSpec(
+    specToRegistration(fooSystemSubscription)
+  );
+  // dispatch
+  await notificationClient.notifyForSubscription({
+    specId: fooSystemSubscription.specId,
+    resourceKeys: [systemId],
+    title,
+    body,
+    importance,
+    action,
+    collapseKey,
+    subjects,
+  });
+
+  // <plugin>-frontend
+  createNotificationSubscriptionExtension({ spec: fooSystemSubscription });
+  ```
+
+  **Migrated plugins**: anomaly, incident, maintenance, healthcheck,
+  dependency. Each lost its bespoke `notification-groups.ts`,
+  `bootstrap*NotificationGroups`, `ensure*Group`, and inheritance walk —
+  all of that is now centralized in notification-backend's
+  `subscription-engine`.
+
+  **Plugin loader change** (`@checkstack/backend-api`,
+  `@checkstack/backend`): the register-time API gains
+  `env.registerSubscriptionSpecs([...specs])`. The dependency sorter
+  walks `spec.target.ownerPlugin` for every declared spec and adds the
+  target owner as an init-order dependency of the emitting plugin. This
+  guarantees that catalog (the owner of the platform's `system` and
+  `group` targets) completes init + afterPluginsReady before any
+  emitting plugin tries to register its specs against the notification
+  service — no string-prefix heuristics, no manual `dependsOnPlugins`
+  list, no stub rows. Plugins that fail to declare their specs at
+  register time get a clear `Target type X is not registered. Did the
+emitting plugin declare this spec via env.registerSubscriptionSpecs?`
+  error from the dispatcher.
+
+  **Removed** (no backwards compat):
+
+  - `catalogClient.notifySystemSubscribers` and
+    `catalogClient.notifyManySystemSubscribers`
+  - `notificationClient.notifyUsers` and `notificationClient.notifyGroups`
+    as direct dispatch primitives — replaced by spec-bound
+    `notifyForSubscription`
+  - catalog's `bootstrapNotificationGroups` (replaced by
+    `bootstrapNotificationTargets`)
+
+  **Enforcement**: the dispatcher rejects calls referencing unregistered
+  specIds, specs owned by other plugins, or resourceKeys that haven't been
+  pushed via `upsertNotificationResource`. Display metadata for any
+  groupId is recoverable via the spec registry, so audit lists render
+  correct labels even when an emitter's frontend isn't loaded.
+
+  **Per-field anomaly mute** keeps working — it now lives inside the
+  generic SubscriptionRow's optional `SubControls` panel
+  (`AnomalyFieldMuteList`), exposed through the catalog system detail
+  page's notifications card.
+
+  The catalog system detail page renders a "Notifications" card hosting
+  `SystemNotificationSubscriptionsSlot`. The matching group surface is
+  not yet rendered — group-level subscriptions are wired end-to-end on
+  the backend; a follow-up will add the host UI.
+
+  **Migration of existing subscribers**: target types declare a
+  `legacyGroupIdTemplate`; on first registration of each spec,
+  notification-backend reads subscribers from the legacy
+  `catalog.system.<id>` / `catalog.group.<id>` groups and seeds the new
+  spec groups exactly once per (spec × resource) pair, tracked in
+  `subscription_migrations`. Anomaly stays opt-in (its target also
+  declares the template, but the user-explicit nature of the original
+  opt-in flow means the seeding produces the same set of subscribers
+  they already had).
+
+### Patch Changes
+
+- 32d52c6: Bulk notifications affecting multiple systems and collapse lifecycle events into a single card.
+
+  Notifications now carry an optional `subjects` array (the entities they affect) and an optional `collapseKey` (so related notifications collapse into one row per recipient). Incidents, maintenances, anomalies, healthchecks, and dependency-impact events route through these new fields, so an incident affecting three systems produces one in-app notification + one external send per subscriber instead of three. Lifecycle updates for the same entity (created → updated → resolved) also collapse, with an expandable "+N updates" timeline.
+
+  Subject kinds are namespaced as `<pluginId>.<localKind>` and built via type-safe helpers exported from each domain's common package (`createSystemSubject`, `incidentCollapseKey`, etc.). The frontend kind registry (`registerSubjectKind`) lets plugins bind icon + label for their kinds; unknown kinds fall back to a generic chip.
+
+  All notification strategies (SMTP, Slack, Discord, Teams, Telegram, Pushover, Gotify, Webex, Backstage) render the affected subjects natively in their format (HTML cards, Slack blocks, Discord embed fields, adaptive cards, markdown lists, etc.).
+
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+  - @checkstack/notification-common@1.0.0
+  - @checkstack/notification-frontend@0.3.0
+  - @checkstack/catalog-common@2.0.0
+  - @checkstack/frontend-api@0.4.1
+  - @checkstack/auth-common@0.6.4
+  - @checkstack/auth-frontend@0.5.32
+  - @checkstack/ui@1.7.0
+  - @checkstack/gitops-frontend@0.3.7
+
+## 0.8.7
+
+### Patch Changes
+
+- Updated dependencies [208ad71]
+  - @checkstack/frontend-api@0.4.0
+  - @checkstack/notification-common@0.3.0
+  - @checkstack/auth-frontend@0.5.31
+  - @checkstack/catalog-common@1.5.3
+  - @checkstack/gitops-frontend@0.3.6
+  - @checkstack/ui@1.6.1
+
 ## 0.8.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/catalog-frontend",
-  "version": "0.8.6",
+  "version": "0.9.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,14 +12,15 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-common": "0.6.2",
-    "@checkstack/auth-frontend": "0.5.29",
-    "@checkstack/catalog-common": "1.5.1",
-    "@checkstack/common": "0.6.5",
-    "@checkstack/frontend-api": "0.3.10",
-    "@checkstack/gitops-frontend": "0.3.4",
-    "@checkstack/notification-common": "0.2.8",
-    "@checkstack/ui": "1.5.1",
+    "@checkstack/auth-common": "0.6.3",
+    "@checkstack/auth-frontend": "0.5.31",
+    "@checkstack/catalog-common": "1.5.3",
+    "@checkstack/common": "0.7.0",
+    "@checkstack/frontend-api": "0.4.0",
+    "@checkstack/gitops-frontend": "0.3.6",
+    "@checkstack/notification-common": "0.3.0",
+    "@checkstack/notification-frontend": "0.2.36",
+    "@checkstack/ui": "1.6.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
     "lucide-react": "^0.344.0",

package/src/components/SystemDetailPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import {
   usePluginClient,
@@ -10,46 +10,31 @@ import {
   SystemDetailsSlot,
   SystemDetailsTopSlot,
   SystemStateBadgesSlot,
+  catalogSystemTarget,
 } from "@checkstack/catalog-common";
-import { NotificationApi } from "@checkstack/notification-common";
+import { NotificationSubscriptionsManager } from "@checkstack/notification-frontend";
 import {
   Card,
   CardContent,
   Page,
   PageContent,
   PageLayout,
-  SubscribeButton,
-  useToast,
   LoadingSpinner,
   AccessDenied,
 } from "@checkstack/ui";
 import { authApiRef } from "@checkstack/auth-frontend/api";
 
 import { Activity, Calendar, Mail, User } from "lucide-react";
-import { extractErrorMessage } from "@checkstack/common";
-
-const CATALOG_PLUGIN_ID = "catalog";
 
 export const SystemDetailPage: React.FC = () => {
   const { systemId } = useParams<{ systemId: string }>();
   const catalogClient = usePluginClient(CatalogApi);
-  const notificationClient = usePluginClient(NotificationApi);
-  const toast = useToast();
   const authApi = useApi(authApiRef);
   const { data: session } = authApi.useSession();
 
   const [groups, setGroups] = useState<Group[]>([]);
   const [notFound, setNotFound] = useState(false);
 
-  // Subscription state
-  const [isSubscribed, setIsSubscribed] = useState(false);
-  const [subscriptionLoading, setSubscriptionLoading] = useState(true);
-
-  // Construct the full group ID for this system
-  const getSystemGroupId = useCallback(() => {
-    return `${CATALOG_PLUGIN_ID}.system.${systemId}`;
-  }, [systemId]);
-
   // Fetch system data with useQuery
   const { data: systemsData, isLoading: systemsLoading } =
     catalogClient.getSystems.useQuery({});
@@ -68,33 +53,6 @@ export const SystemDetailPage: React.FC = () => {
   const system = systemsData?.systems.find((s) => s.id === systemId);
   const loading = systemsLoading || groupsLoading;
 
-  // Fetch subscriptions with useQuery
-  const { data: subscriptions, refetch: refetchSubscriptions } =
-    notificationClient.getSubscriptions.useQuery({});
-
-  // Subscribe/unsubscribe mutations
-  const subscribeMutation = notificationClient.subscribe.useMutation({
-    onSuccess: () => {
-      setIsSubscribed(true);
-      toast.success("Subscribed to system notifications");
-      void refetchSubscriptions();
-    },
-    onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to subscribe"));
-    },
-  });
-
-  const unsubscribeMutation = notificationClient.unsubscribe.useMutation({
-    onSuccess: () => {
-      setIsSubscribed(false);
-      toast.success("Unsubscribed from system notifications");
-      void refetchSubscriptions();
-    },
-    onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to unsubscribe"));
-    },
-  });
-
   // Update not found state
   useEffect(() => {
     if (!systemsLoading && !system && systemId) {
@@ -112,26 +70,6 @@ export const SystemDetailPage: React.FC = () => {
     }
   }, [groupsData, systemId]);
 
-  // Update subscription status from query
-  useEffect(() => {
-    if (subscriptions && systemId) {
-      const groupId = getSystemGroupId();
-      const hasSubscription = subscriptions.some((s) => s.groupId === groupId);
-      setIsSubscribed(hasSubscription);
-      setSubscriptionLoading(false);
-    }
-  }, [subscriptions, systemId, getSystemGroupId]);
-
-  const handleSubscribe = () => {
-    setSubscriptionLoading(true);
-    subscribeMutation.mutate({ groupId: getSystemGroupId() });
-  };
-
-  const handleUnsubscribe = () => {
-    setSubscriptionLoading(true);
-    unsubscribeMutation.mutate({ groupId: getSystemGroupId() });
-  };
-
   if (loading) {
     return (
       <Page>
@@ -165,15 +103,9 @@ export const SystemDetailPage: React.FC = () => {
     <div className="flex items-center gap-2">
       <ExtensionSlot slot={SystemStateBadgesSlot} context={{ system }} />
       {session && (
-        <SubscribeButton
-          isSubscribed={isSubscribed}
-          onSubscribe={handleSubscribe}
-          onUnsubscribe={handleUnsubscribe}
-          loading={
-            subscriptionLoading ||
-            subscribeMutation.isPending ||
-            unsubscribeMutation.isPending
-          }
+        <NotificationSubscriptionsManager
+          target={catalogSystemTarget}
+          resource={{ systemId: system.id, systemName: system.name }}
         />
       )}
     </div>

package/src/index.tsx

@@ -9,11 +9,26 @@ import {
   catalogAccess,
 } from "@checkstack/catalog-common";
 
+import { Server, FolderTree } from "lucide-react";
+import { registerSubjectKind } from "@checkstack/notification-frontend";
+
 import { CatalogPage } from "./components/CatalogPage";
 import { CatalogConfigPage } from "./components/CatalogConfigPage";
 import { CatalogUserMenuItems } from "./components/UserMenuItems";
 import { SystemDetailPage } from "./components/SystemDetailPage";
 
+// Notification subject kinds emitted by catalog (see catalog-common's
+// `createSystemSubject` / `createGroupSubject`). Registered at module load
+// so the notification bell + page render kind-appropriate icons.
+registerSubjectKind(`${pluginMetadata.pluginId}.system`, {
+  label: "System",
+  icon: Server,
+});
+registerSubjectKind(`${pluginMetadata.pluginId}.group`, {
+  label: "Group",
+  icon: FolderTree,
+});
+
 export const catalogPlugin = createFrontendPlugin({
   metadata: pluginMetadata,
   // No APIs needed - components use usePluginClient() directly