@checkstack/incident-frontend 0.0.3 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # @checkstack/incident-frontend
 
+## 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/incident-common@0.1.0
+  - @checkstack/frontend-api@0.0.4
+  - @checkstack/signal-frontend@0.0.5
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies [f5b1f49]
+- Updated dependencies [f5b1f49]
+  - @checkstack/common@0.0.3
+  - @checkstack/ui@0.0.4
+  - @checkstack/catalog-common@0.0.3
+  - @checkstack/frontend-api@0.0.3
+  - @checkstack/incident-common@0.0.3
+  - @checkstack/signal-frontend@0.0.4
+
 ## 0.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/incident-frontend",
-  "version": "0.0.3",
+  "version": "0.1.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/IncidentEditor.tsx

@@ -10,6 +10,7 @@ import type { System } from "@checkstack/catalog-common";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -29,6 +30,7 @@ import {
 import { Plus, MessageSquare, Loader2, AlertCircle } from "lucide-react";
 import { IncidentUpdateForm } from "./IncidentUpdateForm";
 import { getIncidentStatusBadge } from "../utils/badges";
+import { TeamAccessEditor } from "@checkstack/auth-frontend";
 
 interface Props {
   open: boolean;
@@ -165,6 +167,11 @@ export const IncidentEditor: React.FC<Props> = ({
           <DialogTitle>
             {incident ? "Edit Incident" : "Create Incident"}
           </DialogTitle>
+          <DialogDescription className="sr-only">
+            {incident
+              ? "Modify the details for this incident report"
+              : "Report a new incident affecting your systems"}
+          </DialogDescription>
         </DialogHeader>
 
         <div className="grid gap-6 py-4 max-h-[70vh] overflow-y-auto">
@@ -295,6 +302,16 @@ export const IncidentEditor: React.FC<Props> = ({
               )}
             </div>
           )}
+
+          {/* Team Access Editor - only shown when editing existing incident */}
+          {incident?.id && (
+            <TeamAccessEditor
+              resourceType="incident.incident"
+              resourceId={incident.id}
+              compact
+              expanded
+            />
+          )}
         </div>
 
         <DialogFooter>

package/src/pages/IncidentConfigPage.tsx

@@ -84,14 +84,15 @@ const IncidentConfigPageContent: React.FC = () => {
   const loadData = async () => {
     setLoading(true);
     try {
-      const [incidentList, systemList] = await Promise.all([
-        api.listIncidents(
-          statusFilter === "all"
-            ? { includeResolved: showResolved }
-            : { status: statusFilter, includeResolved: showResolved }
-        ),
-        catalogApi.getSystems(),
-      ]);
+      const [{ incidents: incidentList }, { systems: systemList }] =
+        await Promise.all([
+          api.listIncidents(
+            statusFilter === "all"
+              ? { includeResolved: showResolved }
+              : { status: statusFilter, includeResolved: showResolved }
+          ),
+          catalogApi.getSystems(),
+        ]);
       setIncidents(incidentList);
       setSystems(systemList);
     } catch (error) {

package/src/pages/IncidentDetailPage.tsx

@@ -69,7 +69,7 @@ const IncidentDetailPageContent: React.FC = () => {
     if (!incidentId) return;
 
     try {
-      const [incidentData, systemList] = await Promise.all([
+      const [incidentData, { systems: systemList }] = await Promise.all([
         api.getIncident({ id: incidentId }),
         catalogApi.getSystems(),
       ]);

package/src/pages/SystemIncidentHistoryPage.tsx

@@ -1,10 +1,6 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { useParams, Link } from "react-router-dom";
-import {
-  useApi,
-  rpcApiRef,
-  wrapInSuspense,
-} from "@checkstack/frontend-api";
+import { useApi, rpcApiRef, wrapInSuspense } from "@checkstack/frontend-api";
 import { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
 import { incidentApiRef } from "../api";
@@ -48,10 +44,11 @@ const SystemIncidentHistoryPageContent: React.FC = () => {
 
     setLoading(true);
     try {
-      const [incidentList, systemList] = await Promise.all([
-        api.listIncidents({ systemId, includeResolved: true }),
-        catalogApi.getSystems(),
-      ]);
+      const [{ incidents: incidentList }, { systems: systemList }] =
+        await Promise.all([
+          api.listIncidents({ systemId, includeResolved: true }),
+          catalogApi.getSystems(),
+        ]);
       const systemData = systemList.find((s) => s.id === systemId);
       setIncidents(incidentList);
       setSystem(systemData);