@checkstack/auth-frontend 0.0.4 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @checkstack/auth-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 [8e43507]
+  - @checkstack/ui@0.1.0
+  - @checkstack/auth-common@0.1.0
+  - @checkstack/common@0.1.0
+  - @checkstack/frontend-api@0.0.4
+
 ## 0.0.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "type": "module",
   "main": "src/index.tsx",
   "exports": {

package/src/components/ApplicationsTab.tsx

@@ -18,6 +18,7 @@ import {
   ConfirmationModal,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -189,8 +190,8 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
           <Alert variant="info" className="mb-4">
             <AlertDescription>
               External applications use API keys to authenticate with the
-              Checkstack API. The secret is only shown once when created—store it
-              securely.
+              Checkstack API. The secret is only shown once when created—store
+              it securely.
             </AlertDescription>
           </Alert>
 
@@ -346,6 +347,9 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
             <DialogTitle>
               Application Secret: {newSecretDialog.applicationName}
             </DialogTitle>
+            <DialogDescription className="sr-only">
+              Copy your application secret - it will only be shown once
+            </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <Alert variant="warning">
@@ -399,6 +403,9 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Create Application</DialogTitle>
+            <DialogDescription className="sr-only">
+              Create a new external application with API key access
+            </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div>

package/src/components/AuthSettingsPage.tsx

@@ -1,21 +1,18 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import {
-  useApi,
-  permissionApiRef,
-  rpcApiRef,
-} from "@checkstack/frontend-api";
+import { useApi, permissionApiRef, rpcApiRef } from "@checkstack/frontend-api";
 import { PageLayout, useToast, Tabs, TabPanel } from "@checkstack/ui";
 import { authApiRef, AuthUser, Role, AuthStrategy, Permission } from "../api";
 import {
   permissions as authPermissions,
   AuthApi,
 } from "@checkstack/auth-common";
-import { Shield, Settings2, Users, Key } from "lucide-react";
+import { Shield, Settings2, Users, Key, Users2 } from "lucide-react";
 import { UsersTab } from "./UsersTab";
 import { RolesTab } from "./RolesTab";
 import { StrategiesTab } from "./StrategiesTab";
 import { ApplicationsTab } from "./ApplicationsTab";
+import { TeamsTab } from "./TeamsTab";
 
 export const AuthSettingsPage: React.FC = () => {
   const authApi = useApi(authApiRef);
@@ -28,7 +25,7 @@ export const AuthSettingsPage: React.FC = () => {
   const session = authApi.useSession();
 
   const [activeTab, setActiveTab] = useState<
-    "users" | "roles" | "strategies" | "applications"
+    "users" | "roles" | "teams" | "strategies" | "applications"
   >("users");
   const [users, setUsers] = useState<(AuthUser & { roles: string[] })[]>([]);
   const [roles, setRoles] = useState<Role[]>([]);
@@ -44,8 +41,13 @@ export const AuthSettingsPage: React.FC = () => {
   useEffect(() => {
     const tab = searchParams.get("tab");
 
-    if (tab && ["users", "roles", "strategies", "applications"].includes(tab)) {
-      setActiveTab(tab as "users" | "roles" | "strategies" | "applications");
+    if (
+      tab &&
+      ["users", "roles", "teams", "strategies", "applications"].includes(tab)
+    ) {
+      setActiveTab(
+        tab as "users" | "roles" | "teams" | "strategies" | "applications"
+      );
     }
 
     // Clear the URL params after processing
@@ -86,20 +88,27 @@ export const AuthSettingsPage: React.FC = () => {
   const canManageApplications = permissionApi.usePermission(
     authPermissions.applicationsManage.id
   );
+  const canReadTeams = permissionApi.usePermission(
+    authPermissions.teamsRead.id
+  );
+  const canManageTeams = permissionApi.usePermission(
+    authPermissions.teamsManage.id
+  );
 
-  // Compute loading and permission states for PageLayout
   const permissionsLoading =
     loading ||
     canReadUsers.loading ||
     canReadRoles.loading ||
     canManageStrategies.loading ||
-    canManageApplications.loading;
+    canManageApplications.loading ||
+    canReadTeams.loading;
 
   const hasAnyPermission =
     canReadUsers.allowed ||
     canReadRoles.allowed ||
     canManageStrategies.allowed ||
-    canManageApplications.allowed;
+    canManageApplications.allowed ||
+    canReadTeams.allowed;
 
   // Special case: if user is not logged in, show permission denied
   const isAllowed = session.data?.user ? hasAnyPermission : false;
@@ -107,7 +116,7 @@ export const AuthSettingsPage: React.FC = () => {
   // Compute visible tabs based on permissions
   const visibleTabs = useMemo(() => {
     const tabs: Array<{
-      id: "users" | "roles" | "strategies" | "applications";
+      id: "users" | "roles" | "teams" | "strategies" | "applications";
       label: string;
       icon: React.ReactNode;
     }> = [];
@@ -123,6 +132,12 @@ export const AuthSettingsPage: React.FC = () => {
         label: "Roles & Permissions",
         icon: <Shield size={18} />,
       });
+    if (canReadTeams.allowed)
+      tabs.push({
+        id: "teams",
+        label: "Teams",
+        icon: <Users2 size={18} />,
+      });
     if (canManageStrategies.allowed)
       tabs.push({
         id: "strategies",
@@ -139,6 +154,7 @@ export const AuthSettingsPage: React.FC = () => {
   }, [
     canReadUsers.allowed,
     canReadRoles.allowed,
+    canReadTeams.allowed,
     canManageStrategies.allowed,
     canManageApplications.allowed,
   ]);
@@ -196,7 +212,7 @@ export const AuthSettingsPage: React.FC = () => {
         activeTab={activeTab}
         onTabChange={(tabId) =>
           setActiveTab(
-            tabId as "users" | "roles" | "strategies" | "applications"
+            tabId as "users" | "roles" | "teams" | "strategies" | "applications"
           )
         }
         className="mb-6"
@@ -229,6 +245,15 @@ export const AuthSettingsPage: React.FC = () => {
         />
       </TabPanel>
 
+      <TabPanel id="teams" activeTab={activeTab}>
+        <TeamsTab
+          users={users}
+          canReadTeams={canReadTeams.allowed}
+          canManageTeams={canManageTeams.allowed}
+          onDataChange={fetchData}
+        />
+      </TabPanel>
+
       <TabPanel id="strategies" activeTab={activeTab}>
         <StrategiesTab
           strategies={strategies}

package/src/components/RoleDialog.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -111,6 +112,11 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
       <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{isEditing ? "Edit Role" : "Create Role"}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {isEditing
+              ? "Modify the settings and permissions for this role"
+              : "Create a new role with specific permissions"}
+          </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4">