@checkstack/integration-frontend 0.0.4 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # @checkstack/integration-frontend
 
+## 0.1.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 [f533141]
+  - @checkstack/common@0.2.0
+  - @checkstack/frontend-api@0.1.0
+  - @checkstack/integration-common@0.1.0
+  - @checkstack/ui@0.2.0
+  - @checkstack/signal-frontend@0.0.6
+
+## 0.0.5
+
+### 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/common@0.1.0
+  - @checkstack/frontend-api@0.0.4
+  - @checkstack/integration-common@0.0.4
+  - @checkstack/signal-frontend@0.0.5
+
 ## 0.0.4
 
 ### Patch Changes

package/package.json

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

package/src/components/CreateSubscriptionDialog.tsx

@@ -4,6 +4,7 @@ import { Trash2, ScrollText } from "lucide-react";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -371,6 +372,13 @@ export const SubscriptionDialog = ({
                     selectedProvider?.displayName ?? "Subscription"
                   }`}
             </DialogTitle>
+            <DialogDescription className="sr-only">
+              {isEditMode
+                ? "Edit the settings for this integration subscription"
+                : step === "provider"
+                ? "Choose a provider for your integration subscription"
+                : "Configure the subscription settings"}
+            </DialogDescription>
           </DialogHeader>
 
           {step === "provider" ? (

package/src/components/IntegrationMenuItem.tsx

@@ -2,22 +2,19 @@ import { useNavigate } from "react-router-dom";
 import { Webhook } from "lucide-react";
 import { DropdownMenuItem } from "@checkstack/ui";
 import type { UserMenuItemsContext } from "@checkstack/frontend-api";
-import { qualifyPermissionId, resolveRoute } from "@checkstack/common";
+import { resolveRoute } from "@checkstack/common";
 import {
   integrationRoutes,
-  permissions,
+  integrationAccess,
   pluginMetadata,
 } from "@checkstack/integration-common";
 import React from "react";
 
 export const IntegrationMenuItem = ({
-  permissions: userPerms,
+  accessRules: userPerms,
 }: UserMenuItemsContext) => {
   const navigate = useNavigate();
-  const qualifiedId = qualifyPermissionId(
-    pluginMetadata,
-    permissions.integrationManage
-  );
+  const qualifiedId = `${pluginMetadata.pluginId}.${integrationAccess.manage.id}`;
   const allowed = userPerms.includes("*") || userPerms.includes(qualifiedId);
 
   if (!allowed) {

package/src/index.tsx

@@ -6,7 +6,7 @@ import {
 import {
   integrationRoutes,
   pluginMetadata,
-  permissions,
+  integrationAccess,
 } from "@checkstack/integration-common";
 import { IntegrationsPage } from "./pages/IntegrationsPage";
 import { DeliveryLogsPage } from "./pages/DeliveryLogsPage";
@@ -19,22 +19,22 @@ export const integrationPlugin = createFrontendPlugin({
     {
       route: integrationRoutes.routes.list,
       element: <IntegrationsPage />,
-      permission: permissions.integrationManage,
+      accessRule: integrationAccess.manage,
     },
     {
       route: integrationRoutes.routes.logs,
       element: <DeliveryLogsPage />,
-      permission: permissions.integrationManage,
+      accessRule: integrationAccess.manage,
     },
     {
       route: integrationRoutes.routes.deliveryLogs,
       element: <DeliveryLogsPage />,
-      permission: permissions.integrationManage,
+      accessRule: integrationAccess.manage,
     },
     {
       route: integrationRoutes.routes.connections,
       element: <ProviderConnectionsPage />,
-      permission: permissions.integrationManage,
+      accessRule: integrationAccess.manage,
     },
   ],
   extensions: [