@checkstack/maintenance-frontend 0.0.4 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,170 @@
 # @checkstack/maintenance-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/maintenance-common@0.2.0
+  - @checkstack/ui@0.2.0
+  - @checkstack/signal-frontend@0.0.6
+
+## 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/maintenance-common@0.1.0
+  - @checkstack/frontend-api@0.0.4
+  - @checkstack/signal-frontend@0.0.5
+
 ## 0.0.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/maintenance-frontend",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -9,6 +9,7 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@checkstack/auth-frontend": "workspace:*",
     "@checkstack/catalog-common": "workspace:*",
     "@checkstack/common": "workspace:*",
     "@checkstack/frontend-api": "workspace:*",

package/src/components/MaintenanceEditor.tsx

@@ -9,6 +9,7 @@ import type { System } from "@checkstack/catalog-common";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -24,6 +25,7 @@ import {
 import { Plus, MessageSquare, Loader2, AlertCircle } from "lucide-react";
 import { MaintenanceUpdateForm } from "./MaintenanceUpdateForm";
 import { getMaintenanceStatusBadge } from "../utils/badges";
+import { TeamAccessEditor } from "@checkstack/auth-frontend";
 
 interface Props {
   open: boolean;
@@ -173,6 +175,11 @@ export const MaintenanceEditor: React.FC<Props> = ({
           <DialogTitle>
             {maintenance ? "Edit Maintenance" : "Create Maintenance"}
           </DialogTitle>
+          <DialogDescription className="sr-only">
+            {maintenance
+              ? "Modify the settings for this scheduled maintenance"
+              : "Schedule a new maintenance window for your systems"}
+          </DialogDescription>
         </DialogHeader>
 
         <div className="grid gap-6 py-4 max-h-[70vh] overflow-y-auto">
@@ -301,6 +308,16 @@ export const MaintenanceEditor: React.FC<Props> = ({
               )}
             </div>
           )}
+
+          {/* Team Access Editor - only shown when editing existing maintenance */}
+          {maintenance?.id && (
+            <TeamAccessEditor
+              resourceType="maintenance.maintenance"
+              resourceId={maintenance.id}
+              compact
+              expanded
+            />
+          )}
         </div>
 
         <DialogFooter>

package/src/components/MaintenanceMenuItems.tsx

@@ -3,20 +3,17 @@ import { Link } from "react-router-dom";
 import { Wrench } 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 {
   maintenanceRoutes,
-  permissions,
+  maintenanceAccess,
   pluginMetadata,
 } from "@checkstack/maintenance-common";
 
 export const MaintenanceMenuItems = ({
-  permissions: userPerms,
+  accessRules: userPerms,
 }: UserMenuItemsContext) => {
-  const qualifiedId = qualifyPermissionId(
-    pluginMetadata,
-    permissions.maintenanceManage
-  );
+  const qualifiedId = `${pluginMetadata.pluginId}.${maintenanceAccess.maintenance.manage.id}`;
   const canManage = userPerms.includes("*") || userPerms.includes(qualifiedId);
 
   if (!canManage) {

package/src/index.tsx

@@ -10,7 +10,7 @@ import {
   maintenanceRoutes,
   MaintenanceApi,
   pluginMetadata,
-  permissions,
+  maintenanceAccess,
 } from "@checkstack/maintenance-common";
 import {
   SystemDetailsTopSlot,
@@ -30,7 +30,7 @@ export default createFrontendPlugin({
       route: maintenanceRoutes.routes.config,
       element: <MaintenanceConfigPage />,
       title: "Maintenances",
-      permission: permissions.maintenanceManage,
+      accessRule: maintenanceAccess.maintenance.manage,
     },
     {
       route: maintenanceRoutes.routes.systemHistory,

package/src/pages/MaintenanceConfigPage.tsx

@@ -3,7 +3,7 @@ import { useSearchParams } from "react-router-dom";
 import {
   useApi,
   rpcApiRef,
-  permissionApiRef,
+  accessApiRef,
   wrapInSuspense,
 } from "@checkstack/frontend-api";
 import { maintenanceApiRef } from "../api";
@@ -11,6 +11,7 @@ import type {
   MaintenanceWithSystems,
   MaintenanceStatus,
 } from "@checkstack/maintenance-common";
+import { maintenanceAccess } from "@checkstack/maintenance-common";
 import { CatalogApi, type System } from "@checkstack/catalog-common";
 import {
   Card,
@@ -51,14 +52,14 @@ import { getMaintenanceStatusBadge } from "../utils/badges";
 const MaintenanceConfigPageContent: React.FC = () => {
   const api = useApi(maintenanceApiRef);
   const rpcApi = useApi(rpcApiRef);
-  const permissionApi = useApi(permissionApiRef);
+  const accessApi = useApi(accessApiRef);
   const [searchParams, setSearchParams] = useSearchParams();
 
   const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
   const toast = useToast();
 
-  const { allowed: canManage, loading: permissionLoading } =
-    permissionApi.useResourcePermission("maintenance", "manage");
+  const { allowed: canManage, loading: accessLoading } =
+    accessApi.useAccess(maintenanceAccess.maintenance.manage);
 
   const [maintenances, setMaintenances] = useState<MaintenanceWithSystems[]>(
     []
@@ -86,12 +87,13 @@ const MaintenanceConfigPageContent: React.FC = () => {
   const loadData = async () => {
     setLoading(true);
     try {
-      const [maintenanceList, systemList] = await Promise.all([
-        api.listMaintenances(
-          statusFilter === "all" ? undefined : { status: statusFilter }
-        ),
-        catalogApi.getSystems(),
-      ]);
+      const [{ maintenances: maintenanceList }, { systems: systemList }] =
+        await Promise.all([
+          api.listMaintenances(
+            statusFilter === "all" ? undefined : { status: statusFilter }
+          ),
+          catalogApi.getSystems(),
+        ]);
       setMaintenances(maintenanceList);
       setSystems(systemList);
     } catch (error) {
@@ -185,7 +187,7 @@ const MaintenanceConfigPageContent: React.FC = () => {
     <PageLayout
       title="Planned Maintenances"
       subtitle="Manage scheduled maintenance windows for systems"
-      loading={permissionLoading}
+      loading={accessLoading}
       allowed={canManage}
       actions={
         <Button onClick={handleCreate}>

package/src/pages/MaintenanceDetailPage.tsx

@@ -9,11 +9,14 @@ import {
   useApi,
   rpcApiRef,
   wrapInSuspense,
-  permissionApiRef,
+  accessApiRef,
 } from "@checkstack/frontend-api";
 import { resolveRoute } from "@checkstack/common";
 import { maintenanceApiRef } from "../api";
-import { maintenanceRoutes } from "@checkstack/maintenance-common";
+import {
+  maintenanceRoutes,
+  maintenanceAccess,
+} from "@checkstack/maintenance-common";
 import type { MaintenanceDetail } from "@checkstack/maintenance-common";
 import {
   catalogRoutes,
@@ -53,14 +56,13 @@ const MaintenanceDetailPageContent: React.FC = () => {
   const [searchParams] = useSearchParams();
   const api = useApi(maintenanceApiRef);
   const rpcApi = useApi(rpcApiRef);
-  const permissionApi = useApi(permissionApiRef);
+  const accessApi = useApi(accessApiRef);
   const toast = useToast();
 
   const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
 
-  const { allowed: canManage } = permissionApi.useResourcePermission(
-    "maintenance",
-    "manage"
+  const { allowed: canManage } = accessApi.useAccess(
+    maintenanceAccess.maintenance.manage
   );
 
   const [maintenance, setMaintenance] = useState<MaintenanceDetail>();
@@ -73,7 +75,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
 
     setLoading(true);
     try {
-      const [maintenanceData, systemList] = await Promise.all([
+      const [maintenanceData, { systems: systemList }] = await Promise.all([
         api.getMaintenance({ id: maintenanceId }),
         catalogApi.getSystems(),
       ]);

package/src/pages/SystemMaintenanceHistoryPage.tsx

@@ -1,10 +1,6 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import {
-  useApi,
-  rpcApiRef,
-  wrapInSuspense,
-} from "@checkstack/frontend-api";
+import { useApi, rpcApiRef, wrapInSuspense } from "@checkstack/frontend-api";
 import { resolveRoute } from "@checkstack/common";
 import { maintenanceApiRef } from "../api";
 import { maintenanceRoutes } from "@checkstack/maintenance-common";
@@ -53,10 +49,11 @@ const SystemMaintenanceHistoryPageContent: React.FC = () => {
     const loadData = async () => {
       setLoading(true);
       try {
-        const [maintenanceList, systemList] = await Promise.all([
-          api.listMaintenances({ systemId }),
-          catalogApi.getSystems(),
-        ]);
+        const [{ maintenances: maintenanceList }, { systems: systemList }] =
+          await Promise.all([
+            api.listMaintenances({ systemId }),
+            catalogApi.getSystems(),
+          ]);
         setMaintenances(maintenanceList);
         const system = systemList.find((s) => s.id === systemId);
         setSystemName(system?.name ?? "Unknown System");