@checkstack/catalog-frontend 0.0.4 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,168 @@
 # @checkstack/catalog-frontend
 
+## 0.2.0
+
+### Minor Changes
+
+- 9faec1f: # Unified AccessRule Terminology Refactoring
+
+  This release completes a comprehensive terminology refactoring from "permission" to "accessRule" across the entire codebase, establishing a consistent and modern access control vocabulary.
+
+  ## Changes
+
+  ### Core Infrastructure (`@checkstack/common`)
+
+  - Introduced `AccessRule` interface as the primary access control type
+  - Added `accessPair()` helper for creating read/manage access rule pairs
+  - Added `access()` builder for individual access rules
+  - Replaced `Permission` type with `AccessRule` throughout
+
+  ### API Changes
+
+  - `env.registerPermissions()` → `env.registerAccessRules()`
+  - `meta.permissions` → `meta.access` in RPC contracts
+  - `usePermission()` → `useAccess()` in frontend hooks
+  - Route `permission:` field → `accessRule:` field
+
+  ### UI Changes
+
+  - "Roles & Permissions" tab → "Roles & Access Rules"
+  - "You don't have permission..." → "You don't have access..."
+  - All permission-related UI text updated
+
+  ### Documentation & Templates
+
+  - Updated 18 documentation files with AccessRule terminology
+  - Updated 7 scaffolding templates with `accessPair()` pattern
+  - All code examples use new AccessRule API
+
+  ## Migration Guide
+
+  ### Backend Plugins
+
+  ```diff
+  - import { permissionList } from "./permissions";
+  - env.registerPermissions(permissionList);
+  + import { accessRules } from "./access";
+  + env.registerAccessRules(accessRules);
+  ```
+
+  ### RPC Contracts
+
+  ```diff
+  - .meta({ userType: "user", permissions: [permissions.read.id] })
+  + .meta({ userType: "user", access: [access.read] })
+  ```
+
+  ### Frontend Hooks
+
+  ```diff
+  - const canRead = accessApi.usePermission(permissions.read.id);
+  + const canRead = accessApi.useAccess(access.read);
+  ```
+
+  ### Routes
+
+  ```diff
+  - permission: permissions.entityRead.id,
+  + accessRule: access.read,
+  ```
+
+### Patch Changes
+
+- Updated dependencies [9faec1f]
+- Updated dependencies [95eeec7]
+- Updated dependencies [f533141]
+  - @checkstack/auth-frontend@0.2.0
+  - @checkstack/catalog-common@1.1.0
+  - @checkstack/common@0.2.0
+  - @checkstack/frontend-api@0.1.0
+  - @checkstack/notification-common@0.1.0
+  - @checkstack/ui@0.2.0
+
+## 0.1.0
+
+### Minor Changes
+
+- 8e43507: # Teams and Resource-Level Access Control
+
+  This release introduces a comprehensive Teams system for organizing users and controlling access to resources at a granular level.
+
+  ## Features
+
+  ### Team Management
+
+  - Create, update, and delete teams with name and description
+  - Add/remove users from teams
+  - Designate team managers with elevated privileges
+  - View team membership and manager status
+
+  ### Resource-Level Access Control
+
+  - Grant teams access to specific resources (systems, health checks, incidents, maintenances)
+  - Configure read-only or manage permissions per team
+  - Resource-level "Team Only" mode that restricts access exclusively to team members
+  - Separate `resourceAccessSettings` table for resource-level settings (not per-grant)
+  - Automatic cleanup of grants when teams are deleted (database cascade)
+
+  ### Middleware Integration
+
+  - Extended `autoAuthMiddleware` to support resource access checks
+  - Single-resource pre-handler validation for detail endpoints
+  - Automatic list filtering for collection endpoints
+  - S2S endpoints for access verification
+
+  ### Frontend Components
+
+  - `TeamsTab` component for managing teams in Auth Settings
+  - `TeamAccessEditor` component for assigning team access to resources
+  - Resource-level "Team Only" toggle in `TeamAccessEditor`
+  - Integration into System, Health Check, Incident, and Maintenance editors
+
+  ## Breaking Changes
+
+  ### API Response Format Changes
+
+  List endpoints now return objects with named keys instead of arrays directly:
+
+  ```typescript
+  // Before
+  const systems = await catalogApi.getSystems();
+
+  // After
+  const { systems } = await catalogApi.getSystems();
+  ```
+
+  Affected endpoints:
+
+  - `catalog.getSystems` → `{ systems: [...] }`
+  - `healthcheck.getConfigurations` → `{ configurations: [...] }`
+  - `incident.listIncidents` → `{ incidents: [...] }`
+  - `maintenance.listMaintenances` → `{ maintenances: [...] }`
+
+  ### User Identity Enrichment
+
+  `RealUser` and `ApplicationUser` types now include `teamIds: string[]` field with team memberships.
+
+  ## Documentation
+
+  See `docs/backend/teams.md` for complete API reference and integration guide.
+
+### Patch Changes
+
+- 97c5a6b: Fix Radix UI accessibility warning in dialog components by adding visually hidden DialogDescription components
+- Updated dependencies [8e43507]
+- Updated dependencies [97c5a6b]
+- Updated dependencies [97c5a6b]
+- Updated dependencies [8e43507]
+- Updated dependencies [8e43507]
+  - @checkstack/ui@0.1.0
+  - @checkstack/auth-frontend@0.1.0
+  - @checkstack/catalog-common@1.0.0
+  - @checkstack/common@0.1.0
+  - @checkstack/frontend-api@0.0.4
+  - @checkstack/notification-common@0.0.4
+
 ## 0.0.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/catalog-frontend",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/components/CatalogConfigPage.tsx

@@ -2,11 +2,14 @@ import React, { useState, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import {
   useApi,
-  permissionApiRef,
+  accessApiRef,
   ExtensionSlot,
 } from "@checkstack/frontend-api";
 import { catalogApiRef, System, Group } from "../api";
-import { CatalogSystemActionsSlot } from "@checkstack/catalog-common";
+import {
+  CatalogSystemActionsSlot,
+  catalogAccess,
+} from "@checkstack/catalog-common";
 import {
   SectionHeader,
   Card,
@@ -17,22 +20,22 @@ import {
   Label,
   LoadingSpinner,
   EmptyState,
-  PermissionDenied,
+  AccessDenied,
   EditableText,
   ConfirmationModal,
   useToast,
 } from "@checkstack/ui";
-import { Plus, Trash2, LayoutGrid, Server, Settings } from "lucide-react";
+import { Plus, Trash2, LayoutGrid, Server, Settings, Edit } from "lucide-react";
 import { SystemEditor } from "./SystemEditor";
 import { GroupEditor } from "./GroupEditor";
 
 export const CatalogConfigPage = () => {
   const catalogApi = useApi(catalogApiRef);
-  const permissionApi = useApi(permissionApiRef);
+  const accessApi = useApi(accessApiRef);
   const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { allowed: canManage, loading: permissionLoading } =
-    permissionApi.useManagePermission("catalog");
+  const { allowed: canManage, loading: accessLoading } =
+    accessApi.useAccess(catalogAccess.system.manage);
 
   const [systems, setSystems] = useState<System[]>([]);
   const [groups, setGroups] = useState<Group[]>([]);
@@ -40,6 +43,7 @@ export const CatalogConfigPage = () => {
 
   // Dialog state
   const [isSystemEditorOpen, setIsSystemEditorOpen] = useState(false);
+  const [editingSystem, setEditingSystem] = useState<System | undefined>();
   const [isGroupEditorOpen, setIsGroupEditorOpen] = useState(false);
 
   const [selectedGroupId, setSelectedGroupId] = useState("");
@@ -61,7 +65,7 @@ export const CatalogConfigPage = () => {
   const loadData = async () => {
     setLoading(true);
     try {
-      const [s, g] = await Promise.all([
+      const [{ systems: s }, g] = await Promise.all([
         catalogApi.getSystems(),
         catalogApi.getGroups(),
       ]);
@@ -94,12 +98,25 @@ export const CatalogConfigPage = () => {
     }
   }, [searchParams, canManage, setSearchParams]);
 
-  const handleCreateSystem = async (data: {
+  // Unified save handler for both create and edit
+  const handleSaveSystem = async (data: {
     name: string;
     description?: string;
   }) => {
-    await catalogApi.createSystem(data);
-    toast.success("System created successfully");
+    if (editingSystem) {
+      // Update existing system
+      await catalogApi.updateSystem({
+        id: editingSystem.id,
+        data,
+      });
+      toast.success("System updated successfully");
+      setEditingSystem(undefined);
+    } else {
+      // Create new system
+      await catalogApi.createSystem(data);
+      toast.success("System created successfully");
+    }
+    setIsSystemEditorOpen(false);
     await loadData();
   };
 
@@ -191,42 +208,6 @@ export const CatalogConfigPage = () => {
     }
   };
 
-  const handleUpdateSystemName = async (id: string, newName: string) => {
-    try {
-      await catalogApi.updateSystem({ id, data: { name: newName } });
-      toast.success("System name updated successfully");
-      loadData();
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : "Failed to update system name";
-      toast.error(message);
-      console.error("Failed to update system name:", error);
-      throw error;
-    }
-  };
-
-  const handleUpdateSystemDescription = async (
-    id: string,
-    newDescription: string
-  ) => {
-    try {
-      await catalogApi.updateSystem({
-        id,
-        data: { description: newDescription },
-      });
-      toast.success("System description updated successfully");
-      loadData();
-    } catch (error) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to update system description";
-      toast.error(message);
-      console.error("Failed to update system description:", error);
-      throw error;
-    }
-  };
-
   const handleUpdateGroupName = async (id: string, newName: string) => {
     try {
       await catalogApi.updateGroup({ id, data: { name: newName } });
@@ -241,10 +222,10 @@ export const CatalogConfigPage = () => {
     }
   };
 
-  if (loading || permissionLoading) return <LoadingSpinner />;
+  if (loading || accessLoading) return <LoadingSpinner />;
 
   if (!canManage) {
-    return <PermissionDenied />;
+    return <AccessDenied />;
   }
 
   const selectedGroup = groups.find((g) => g.id === selectedGroupId);
@@ -285,13 +266,9 @@ export const CatalogConfigPage = () => {
                   >
                     <div className="flex-1 space-y-1">
                       <div className="flex items-center justify-between">
-                        <EditableText
-                          value={system.name}
-                          onSave={(newName) =>
-                            handleUpdateSystemName(system.id, newName)
-                          }
-                          className="font-medium text-foreground"
-                        />
+                        <span className="font-medium text-foreground">
+                          {system.name}
+                        </span>
                         <ExtensionSlot
                           slot={CatalogSystemActionsSlot}
                           context={{
@@ -300,25 +277,30 @@ export const CatalogConfigPage = () => {
                           }}
                         />
                       </div>
-                      <EditableText
-                        value={system.description || "No description"}
-                        onSave={(newDescription) =>
-                          handleUpdateSystemDescription(
-                            system.id,
-                            newDescription
-                          )
-                        }
-                        className="text-xs text-muted-foreground font-mono"
-                        placeholder="Add description..."
-                      />
+                      <p className="text-xs text-muted-foreground">
+                        {system.description || "No description"}
+                      </p>
+                    </div>
+                    <div className="flex gap-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => {
+                          setEditingSystem(system);
+                          setIsSystemEditorOpen(true);
+                        }}
+                      >
+                        <Edit className="w-4 h-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 h-8 w-8 p-0"
+                        onClick={() => handleDeleteSystem(system.id)}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
                     </div>
-                    <Button
-                      variant="ghost"
-                      className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 h-8 w-8 p-0"
-                      onClick={() => handleDeleteSystem(system.id)}
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </Button>
                   </div>
                 ))}
               </div>
@@ -466,8 +448,20 @@ export const CatalogConfigPage = () => {
       {/* Dialogs */}
       <SystemEditor
         open={isSystemEditorOpen}
-        onClose={() => setIsSystemEditorOpen(false)}
-        onSave={handleCreateSystem}
+        onClose={() => {
+          setIsSystemEditorOpen(false);
+          setEditingSystem(undefined);
+        }}
+        onSave={handleSaveSystem}
+        initialData={
+          editingSystem
+            ? {
+                id: editingSystem.id,
+                name: editingSystem.name,
+                description: editingSystem.description ?? undefined,
+              }
+            : undefined
+        }
       />
 
       <GroupEditor

package/src/components/GroupEditor.tsx

@@ -5,6 +5,7 @@ import {
   Label,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -60,6 +61,11 @@ export const GroupEditor: React.FC<GroupEditorProps> = ({
             <DialogTitle>
               {initialData ? "Edit Group" : "Create Group"}
             </DialogTitle>
+            <DialogDescription className="sr-only">
+              {initialData
+                ? "Modify the settings for this group"
+                : "Create a new group to organize your systems"}
+            </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4 py-4">

package/src/components/SystemDetailPage.tsx

@@ -57,7 +57,7 @@ export const SystemDetailPage: React.FC = () => {
     }
 
     Promise.all([catalogApi.getSystems(), catalogApi.getGroups()])
-      .then(([systems, allGroups]) => {
+      .then(([{ systems }, allGroups]) => {
         const foundSystem = systems.find((s) => s.id === systemId);
 
         if (!foundSystem) {

package/src/components/SystemEditor.tsx

@@ -5,17 +5,19 @@ import {
   Label,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
   useToast,
 } from "@checkstack/ui";
+import { TeamAccessEditor } from "@checkstack/auth-frontend";
 
 interface SystemEditorProps {
   open: boolean;
   onClose: () => void;
   onSave: (data: { name: string; description?: string }) => Promise<void>;
-  initialData?: { name: string; description?: string };
+  initialData?: { id: string; name: string; description?: string };
 }
 
 export const SystemEditor: React.FC<SystemEditorProps> = ({
@@ -67,6 +69,11 @@ export const SystemEditor: React.FC<SystemEditorProps> = ({
             <DialogTitle>
               {initialData ? "Edit System" : "Create System"}
             </DialogTitle>
+            <DialogDescription className="sr-only">
+              {initialData
+                ? "Modify the settings for this system"
+                : "Create a new system to monitor"}
+            </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4 py-4">
@@ -92,6 +99,16 @@ export const SystemEditor: React.FC<SystemEditorProps> = ({
                 rows={3}
               />
             </div>
+
+            {/* Team Access Editor - only shown for existing systems */}
+            {initialData?.id && (
+              <TeamAccessEditor
+                resourceType="catalog.system"
+                resourceId={initialData.id}
+                compact
+                expanded
+              />
+            )}
           </div>
 
           <DialogFooter>

package/src/components/UserMenuItems.tsx

@@ -3,20 +3,18 @@ import { Link } from "react-router-dom";
 import { Settings } from "lucide-react";
 import type { UserMenuItemsContext } from "@checkstack/frontend-api";
 import { DropdownMenuItem } from "@checkstack/ui";
-import { qualifyPermissionId, resolveRoute } from "@checkstack/common";
+import { resolveRoute } from "@checkstack/common";
 import {
   catalogRoutes,
-  permissions,
+  catalogAccess,
   pluginMetadata,
 } from "@checkstack/catalog-common";
 
 export const CatalogUserMenuItems = ({
-  permissions: userPerms,
+  accessRules: userPerms,
 }: UserMenuItemsContext) => {
-  const qualifiedId = qualifyPermissionId(
-    pluginMetadata,
-    permissions.catalogManage
-  );
+  // Use the access rule's id directly
+  const qualifiedId = `${pluginMetadata.pluginId}.${catalogAccess.system.manage.id}`;
   const canManage = userPerms.includes("*") || userPerms.includes(qualifiedId);
 
   if (!canManage) {

package/src/index.tsx

@@ -10,7 +10,7 @@ import {
   catalogRoutes,
   CatalogApi,
   pluginMetadata,
-  permissions,
+  catalogAccess,
 } from "@checkstack/catalog-common";
 
 import { CatalogPage } from "./components/CatalogPage";
@@ -38,7 +38,7 @@ export const catalogPlugin = createFrontendPlugin({
     {
       route: catalogRoutes.routes.config,
       element: <CatalogConfigPage />,
-      permission: permissions.catalogManage,
+      accessRule: catalogAccess.system.manage,
     },
     {
       route: catalogRoutes.routes.systemDetail,