@checkstack/dashboard-frontend 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @checkstack/dashboard-frontend
 
+## 0.3.3
+
+### Patch Changes
+
+- cad3073: Fixed notification group subscription for catalog groups:
+  - Fixed group ID format using colon separator instead of dots and missing entity type prefix
+  - Fixed subscription button state not updating after subscribe/unsubscribe by using refetch instead of invalidateQueries
+
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies [f6464a2]
+  - @checkstack/ui@0.2.3
+  - @checkstack/auth-frontend@0.4.1
+  - @checkstack/catalog-frontend@0.3.3
+  - @checkstack/command-frontend@0.2.2
+  - @checkstack/queue-frontend@0.2.2
+
 ## 0.3.1
 
 ### Patch Changes

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@checkstack/dashboard-frontend",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
+    "test": "bun test",
     "typecheck": "tsc --noEmit",
     "lint": "bun run lint:code",
     "lint:code": "eslint . --max-warnings 0"

package/src/Dashboard.tsx

@@ -3,7 +3,6 @@ import { useNavigate } from "react-router-dom";
 import {
   useApi,
   usePluginClient,
-  useQueryClient,
   ExtensionSlot,
 } from "@checkstack/frontend-api";
 import {
@@ -57,10 +56,10 @@ interface GroupWithSystems extends Group {
   systems: System[];
 }
 
-const getGroupId = (groupId: string) => `${CATALOG_PLUGIN_ID}:${groupId}`;
+const getGroupId = (groupId: string) => `${CATALOG_PLUGIN_ID}.group.${groupId}`;
 
 const statusToVariant = (
-  status: string
+  status: string,
 ): "default" | "success" | "warning" | "error" => {
   switch (status) {
     case "healthy": {
@@ -87,7 +86,6 @@ export const Dashboard: React.FC = () => {
   const navigate = useNavigate();
   const toast = useToast();
   const authApi = useApi(authApiRef);
-  const queryClient = useQueryClient();
   const { data: session } = authApi.useSession();
 
   // Terminal feed entries from real healthcheck signals
@@ -112,7 +110,7 @@ export const Dashboard: React.FC = () => {
   const { data: incidentsData, isLoading: incidentsLoading } =
     incidentClient.listIncidents.useQuery(
       { includeResolved: false },
-      { staleTime: 30_000 }
+      { staleTime: 30_000 },
     );
   const incidents = incidentsData?.incidents ?? [];
 
@@ -120,15 +118,15 @@ export const Dashboard: React.FC = () => {
   const { data: maintenancesData, isLoading: maintenancesLoading } =
     maintenanceClient.listMaintenances.useQuery(
       { status: "in_progress" },
-      { staleTime: 30_000 }
+      { staleTime: 30_000 },
     );
   const maintenances = maintenancesData?.maintenances ?? [];
 
   // Fetch subscriptions (only when logged in)
-  const { data: subscriptions = [] } =
+  const { data: subscriptions = [], refetch: refetchSubscriptions } =
     notificationClient.getSubscriptions.useQuery(
       {},
-      { enabled: !!session, staleTime: 60_000 }
+      { enabled: !!session, staleTime: 60_000 },
     );
 
   // Combined loading state
@@ -141,8 +139,7 @@ export const Dashboard: React.FC = () => {
   const subscribeMutation = notificationClient.subscribe.useMutation({
     onSuccess: () => {
       toast.success("Subscribed to group notifications");
-      // Invalidate subscriptions query to refetch
-      queryClient.invalidateQueries({ queryKey: ["notification"] });
+      void refetchSubscriptions();
     },
     onError: (error: Error) => {
       toast.error(error.message || "Failed to subscribe");
@@ -152,7 +149,7 @@ export const Dashboard: React.FC = () => {
   const unsubscribeMutation = notificationClient.unsubscribe.useMutation({
     onSuccess: () => {
       toast.success("Unsubscribed from group notifications");
-      queryClient.invalidateQueries({ queryKey: ["notification"] });
+      void refetchSubscriptions();
     },
     onError: (error: Error) => {
       toast.error(error.message || "Failed to unsubscribe");
@@ -195,9 +192,9 @@ export const Dashboard: React.FC = () => {
       };
 
       setTerminalEntries((prev) =>
-        [newEntry, ...prev].slice(0, MAX_TERMINAL_ENTRIES)
+        [newEntry, ...prev].slice(0, MAX_TERMINAL_ENTRIES),
       );
-    }
+    },
   );
 
   // -------------------------------------------------------------------------
@@ -211,7 +208,7 @@ export const Dashboard: React.FC = () => {
   const isSubscribed = (groupId: string) => {
     const fullId = getGroupId(groupId);
     return subscriptions.some(
-      (s: EnrichedSubscription) => s.groupId === fullId
+      (s: EnrichedSubscription) => s.groupId === fullId,
     );
   };
 
@@ -224,7 +221,7 @@ export const Dashboard: React.FC = () => {
         onSettled: () => {
           setSubscriptionLoading((prev) => ({ ...prev, [groupId]: false }));
         },
-      }
+      },
     );
   };
 
@@ -237,7 +234,7 @@ export const Dashboard: React.FC = () => {
         onSettled: () => {
           setSubscriptionLoading((prev) => ({ ...prev, [groupId]: false }));
         },
-      }
+      },
     );
   };
 
@@ -262,7 +259,7 @@ export const Dashboard: React.FC = () => {
 
     // Collect all system IDs for bulk data fetching
     const allSystemIds = groupsWithSystems.flatMap((g) =>
-      g.systems.map((s) => s.id)
+      g.systems.map((s) => s.id),
     );
 
     return (

package/src/notification-group-ids.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, test } from "bun:test";
+
+/**
+ * Notification Group ID Format Tests
+ *
+ * These tests ensure the correct format for notification group IDs.
+ * The format must match what the backend creates:
+ * - Format: `{pluginId}.{entityType}.{entityId}`
+ * - Example: `catalog.group.855f7a1f-7287-4650-abf3-f91117e3bde1`
+ *
+ * Regression test for: Dashboard subscription failures due to incorrect
+ * group ID format (was using colon separator and missing entity type prefix).
+ */
+
+const CATALOG_PLUGIN_ID = "catalog";
+
+/**
+ * Constructs the full notification group ID for a catalog group.
+ * Must match the format created by catalog-backend notification group creation.
+ */
+export const getCatalogGroupNotificationId = (groupId: string) =>
+  `${CATALOG_PLUGIN_ID}.group.${groupId}`;
+
+/**
+ * Constructs the full notification group ID for a catalog system.
+ * Must match the format created by catalog-backend notification group creation.
+ */
+export const getCatalogSystemNotificationId = (systemId: string) =>
+  `${CATALOG_PLUGIN_ID}.system.${systemId}`;
+
+describe("Notification Group ID Format", () => {
+  describe("getCatalogGroupNotificationId", () => {
+    test("uses dot separators, not colons", () => {
+      const groupId = "test-uuid";
+      const result = getCatalogGroupNotificationId(groupId);
+
+      // Must use dots, not colons
+      expect(result).not.toContain(":");
+      expect(result).toBe("catalog.group.test-uuid");
+    });
+
+    test("includes 'group' type prefix", () => {
+      const groupId = "855f7a1f-7287-4650-abf3-f91117e3bde1";
+      const result = getCatalogGroupNotificationId(groupId);
+
+      // Must include the entity type
+      expect(result).toContain(".group.");
+      expect(result).toBe("catalog.group.855f7a1f-7287-4650-abf3-f91117e3bde1");
+    });
+
+    test("follows {pluginId}.{entityType}.{entityId} format", () => {
+      const groupId = "my-group-id";
+      const result = getCatalogGroupNotificationId(groupId);
+
+      const parts = result.split(".");
+      expect(parts).toHaveLength(3);
+      expect(parts[0]).toBe("catalog"); // pluginId
+      expect(parts[1]).toBe("group"); // entityType
+      expect(parts[2]).toBe("my-group-id"); // entityId
+    });
+  });
+
+  describe("getCatalogSystemNotificationId", () => {
+    test("uses dot separators, not colons", () => {
+      const systemId = "test-uuid";
+      const result = getCatalogSystemNotificationId(systemId);
+
+      // Must use dots, not colons
+      expect(result).not.toContain(":");
+      expect(result).toBe("catalog.system.test-uuid");
+    });
+
+    test("includes 'system' type prefix", () => {
+      const systemId = "855f7a1f-7287-4650-abf3-f91117e3bde1";
+      const result = getCatalogSystemNotificationId(systemId);
+
+      // Must include the entity type
+      expect(result).toContain(".system.");
+      expect(result).toBe(
+        "catalog.system.855f7a1f-7287-4650-abf3-f91117e3bde1",
+      );
+    });
+
+    test("follows {pluginId}.{entityType}.{entityId} format", () => {
+      const systemId = "my-system-id";
+      const result = getCatalogSystemNotificationId(systemId);
+
+      const parts = result.split(".");
+      expect(parts).toHaveLength(3);
+      expect(parts[0]).toBe("catalog"); // pluginId
+      expect(parts[1]).toBe("system"); // entityType
+      expect(parts[2]).toBe("my-system-id"); // entityId
+    });
+  });
+
+  describe("Format consistency between group and system", () => {
+    test("both use same separator and structure", () => {
+      const id = "test-id";
+      const groupResult = getCatalogGroupNotificationId(id);
+      const systemResult = getCatalogSystemNotificationId(id);
+
+      // Same plugin prefix
+      expect(groupResult.startsWith("catalog.")).toBe(true);
+      expect(systemResult.startsWith("catalog.")).toBe(true);
+
+      // Same structure (3 parts)
+      expect(groupResult.split(".")).toHaveLength(3);
+      expect(systemResult.split(".")).toHaveLength(3);
+
+      // Different entity types
+      expect(groupResult).toContain(".group.");
+      expect(systemResult).toContain(".system.");
+    });
+  });
+});