@percepta/create 3.4.0 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percepta/create",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Scaffold a new Mosaic package",
   "keywords": [
     "cli",

package/templates/monorepo/auth/package.json

@@ -7,6 +7,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./db": "./src/drizzle/db.ts",
+    "./principals": "./src/principals.ts",
     "./schema": "./src/drizzle/schema/index.ts"
   },
   "scripts": {
@@ -17,7 +18,7 @@
     "db:setup-and-migrate": "pnpm db:setup && pnpm db:migrate"
   },
   "dependencies": {
-    "@percepta/auth": "0.1.0",
+    "@percepta/auth": "0.1.1",
     "drizzle-orm": "^0.45.2"
   },
   "devDependencies": {

package/templates/monorepo/auth/src/principals.ts

@@ -0,0 +1,11 @@
+import { listAuthPrincipals } from "@percepta/auth/drizzle";
+import { db } from "./drizzle/db";
+import { groups, users } from "./drizzle/schema";
+
+export function listPrincipals() {
+  return listAuthPrincipals({
+    db,
+    groupsTable: groups,
+    usersTable: users,
+  });
+}

package/templates/monorepo/package.json.template

@@ -28,7 +28,7 @@
     "pnpm": ">=9"
   },
   "devDependencies": {
-    "@percepta/access-control": "0.6.0",
+    "@percepta/access-control": "0.6.1",
     "@types/node": "^24.1.0",
     "eslint": "^9.18.0",
     "rimraf": "^5.0.5",

package/templates/webapp/README.md

@@ -98,6 +98,32 @@ src/
 | `pnpm db:setup-and-migrate` | Setup and migrate database |
 | `pnpm db:studio` | Setup/migrate the database, then open Drizzle Studio |
 | `pnpm db:seed` | Seed default shared-auth dev users and local access grants |
+| `pnpm test:e2e:install` | Install the Chromium browser used by Playwright |
+| `pnpm test:e2e` | Run Playwright e2e tests after local setup |
+| `pnpm test:e2e:ui` | Run Playwright e2e tests in UI mode after local setup |
+
+## End-to-End Tests
+
+This template includes focused Playwright coverage for seeded RBAC flows. Before
+the first run, install the browser binary:
+
+```bash
+pnpm test:e2e:install
+```
+
+Then run:
+
+```bash
+pnpm test:e2e
+```
+
+The e2e script runs local setup first, then starts the Next.js dev server via
+Playwright. To point the tests at an already-running app, set
+`PLAYWRIGHT_BASE_URL`, for example:
+
+```bash
+PLAYWRIGHT_BASE_URL=http://localhost:3000 pnpm test:e2e
+```
 
 ## Logging
 

package/templates/webapp/e2e/rbac.spec.ts

@@ -0,0 +1,136 @@
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+import { expect, test, type Page } from "@playwright/test";
+
+const execFileAsync = promisify(execFile);
+const password = "password";
+
+const users = {
+  appAdmin: "app-admin@example.com",
+  appUser: "app-user@example.com",
+  customerAdmin: "customer-admin@example.com",
+  nonAppUser: "non-user@example.com",
+} as const;
+
+test.describe("RBAC access", () => {
+  test("customer admin can manage role mappings but cannot enter the main app", async ({
+    page,
+  }) => {
+    test.setTimeout(60_000);
+    await signIn(page, users.customerAdmin, "/admin?tab=assignments");
+
+    await expect(page.getByRole("heading", { name: "RBAC" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Admin" })).toBeVisible();
+
+    const userAssignments = page.getByRole("button", {
+      name: "User assignments",
+    });
+    const adminAssignments = page.getByRole("button", {
+      name: "Admin assignments",
+    });
+
+    await expect(userAssignments).toHaveAttribute("aria-disabled", "false");
+    await expect(adminAssignments).toHaveAttribute("aria-disabled", "false");
+
+    await userAssignments.click();
+    await expect(page.getByPlaceholder("Search users or groups")).toBeVisible();
+
+    let shouldResetSeedData = false;
+    try {
+      await page.getByRole("option", { name: /App Non User/ }).click();
+      shouldResetSeedData = true;
+      await expect(userAssignments).toContainText("App Non User");
+      await expect(userAssignments).toHaveAttribute("aria-busy", "false");
+
+      await page.reload();
+      await expect(
+        page.getByRole("button", { name: "User assignments" }),
+      ).toContainText("App Non User");
+    } finally {
+      if (shouldResetSeedData) {
+        await resetSeedData();
+      }
+    }
+
+    await page.reload();
+    await expect(
+      page.getByRole("button", { name: "User assignments" }),
+    ).not.toContainText("App Non User");
+
+    await page.goto("/");
+    await expect(page.getByRole("heading", { name: /Welcome to/ })).toHaveCount(
+      0,
+    );
+    await expectNotFound(page);
+  });
+
+  test("app admin can see RBAC and main app but cannot edit default role mappings", async ({
+    page,
+  }) => {
+    await signIn(page, users.appAdmin, "/admin?tab=assignments");
+
+    await expect(page.getByRole("heading", { name: "RBAC" })).toBeVisible();
+    await expect(
+      page
+        .getByText("Only customer admins can edit default application roles.")
+        .first(),
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole("button", { name: "User assignments" }),
+    ).toHaveAttribute("aria-disabled", "true");
+    await expect(
+      page.getByRole("button", { name: "Admin assignments" }),
+    ).toHaveAttribute("aria-disabled", "true");
+
+    await page.goto("/");
+    await expect(
+      page.getByRole("heading", { name: /Welcome to/ }),
+    ).toBeVisible();
+  });
+
+  test("app user can enter the main app but cannot reach admin", async ({
+    page,
+  }) => {
+    await signIn(page, users.appUser, "/");
+
+    await expect(
+      page.getByRole("heading", { name: /Welcome to/ }),
+    ).toBeVisible();
+    await expect(page.getByRole("link", { name: "Admin" })).toHaveCount(0);
+
+    await page.goto("/admin");
+    await expect(page.getByRole("heading", { name: "RBAC" })).toHaveCount(0);
+    await expectNotFound(page);
+  });
+
+  test("non app user cannot enter the app", async ({ page }) => {
+    await signIn(page, users.nonAppUser, "/");
+
+    await expect(page.getByRole("heading", { name: /Welcome to/ })).toHaveCount(
+      0,
+    );
+    await expect(page.getByRole("heading", { name: "RBAC" })).toHaveCount(0);
+    await expectNotFound(page);
+  });
+});
+
+async function signIn(page: Page, email: string, callbackUrl: string) {
+  await page.goto(
+    `/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`,
+  );
+  await page.getByLabel("Email").fill(email);
+  await page.getByLabel("Password").fill(password);
+  await page.getByRole("button", { name: "Sign In" }).click();
+  await page.waitForURL((url) => url.pathname !== "/auth/signin");
+}
+
+async function expectNotFound(page: Page) {
+  await expect(
+    page.getByText(/This page could not be found|404/i).first(),
+  ).toBeVisible();
+}
+
+async function resetSeedData() {
+  await execFileAsync("pnpm", ["db:seed"], { cwd: process.cwd() });
+}

package/templates/webapp/eslint.config.mjs

@@ -91,4 +91,10 @@ export default tseslint.config(
       "n/no-process-env": "off",
     },
   },
+  {
+    files: ["playwright.config.ts"],
+    rules: {
+      "n/no-process-env": "off",
+    },
+  },
 );

package/templates/webapp/gitignore.template

@@ -12,6 +12,8 @@
 
 # testing
 /coverage
+/playwright-report
+/test-results
 
 # next.js
 /.next/

package/templates/webapp/package.json.template

@@ -27,6 +27,9 @@
     "deploy:percepta-test": "tsx ./scripts/deploy-percepta-test.ts",
     "deploy:percepta-test:pr": "tsx ./scripts/open-ryvn-deploy-pr.ts",
     "test": "vitest run",
+    "test:e2e": "pnpm run setup && playwright test",
+    "test:e2e:install": "playwright install chromium",
+    "test:e2e:ui": "pnpm run setup && playwright test --ui",
     "test:watch": "vitest"
   },
   "dependencies": {
@@ -55,7 +58,7 @@
     "@opentelemetry/exporter-trace-otlp-proto": "^0.203.0",
     "@opentelemetry/sdk-node": "^0.203.0",
     "@__REPO_NAME__/auth": "workspace:*",
-    "@percepta/access-control": "0.6.0",
+    "@percepta/access-control": "0.6.1",
     "@percepta/design": "0.3.2",
     "@percepta/logger": "0.0.6",
     "@percepta/next-utils": "0.1.0",
@@ -104,6 +107,7 @@
   "devDependencies": {
     "@eslint/js": "^9.18.0",
     "@next/eslint-plugin-next": "^15.3.5",
+    "@playwright/test": "^1.58.2",
     "@percepta/build": "0.4.0",
     "@tailwindcss/postcss": "^4.1.11",
     "@types/formidable": "^3.4.5",

package/templates/webapp/playwright.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const port = Number(process.env.PLAYWRIGHT_PORT ?? 3000);
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${port}`;
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: false,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? [["list"], ["html", { open: "never" }]] : "list",
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+  },
+  webServer: process.env.PLAYWRIGHT_BASE_URL
+    ? undefined
+    : {
+        command: `pnpm dev -- --hostname 127.0.0.1 --port ${port}`,
+        env: {
+          SKIP_INNGEST_SYNC: "true",
+        },
+        reuseExistingServer: !process.env.CI,
+        timeout: 120_000,
+        url: baseURL,
+      },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});

package/templates/webapp/src/access/access.manifest.ts

@@ -1,17 +1,11 @@
-import { defineAccessManifest } from "@percepta/access-control";
+import {
+  defineAccessManifest,
+  defineAccessRoleDefinitions,
+} from "@percepta/access-control";
 
 const appRoles = [] as const;
 
-export const accessRoleDefinitions = [] as const satisfies ReadonlyArray<{
-  readonly description: string;
-  readonly editableBy: "app_admin" | "customer_admin";
-  readonly label: string;
-  readonly permissions: ReadonlyArray<{
-    readonly description: string;
-    readonly permission: string;
-  }>;
-  readonly role: (typeof appRoles)[number];
-}>;
+export const accessRoleDefinitions = defineAccessRoleDefinitions(appRoles, []);
 
 export const accessManifest = defineAccessManifest({
   adminUI: {

package/templates/webapp/src/app/(admin)/admin/page.tsx

@@ -1,7 +1,14 @@
-import type { ApplicationGrant, SubjectRef } from "@percepta/access-control";
+import type {
+  AccessRoleDefinition,
+  ApplicationGrant,
+  SubjectRef,
+} from "@percepta/access-control";
 import { groupSubjectRef } from "@percepta/access-control";
-import { db as authDb } from "@__REPO_NAME__/auth/db";
-import { groups, users } from "@__REPO_NAME__/auth/schema";
+import {
+  PrincipalMultiInput,
+  type PrincipalOption,
+} from "@percepta/access-control/react";
+import { listPrincipals } from "@__REPO_NAME__/auth/principals";
 import {
   Badge,
   Table,
@@ -11,7 +18,6 @@ import {
   TableHeader,
   TableRow,
 } from "@percepta/design";
-import { isNull } from "drizzle-orm";
 import type { Metadata } from "next";
 import { revalidatePath } from "next/cache";
 import { notFound } from "next/navigation";
@@ -31,10 +37,6 @@ import {
   readAssignableRole,
   requireAnyAdminPermission,
 } from "./_lib/accessAdmin";
-import {
-  PrincipalMultiInput,
-  type PrincipalOption,
-} from "./_components/PrincipalMultiInput";
 import { AdminTabs, type AdminTab } from "./_components/AdminTabs";
 
 export const metadata: Metadata = {
@@ -50,22 +52,10 @@ interface AdminPageProps {
   }>;
 }
 
-interface PermissionDefinition {
-  readonly description: string;
-  readonly permission: string;
-}
-
-interface RoleDefinition {
-  readonly description: string;
-  readonly editableBy: "app_admin" | "customer_admin";
-  readonly label: string;
-  readonly permissions: readonly PermissionDefinition[];
-  readonly role: string;
+interface RoleDefinition extends AccessRoleDefinition {
   readonly source: "Application access" | "App RBAC";
 }
 
-type AppRoleDefinition = Omit<RoleDefinition, "source">;
-
 interface PrincipalAssignmentOption extends PrincipalOption {
   readonly effectiveAccess: boolean;
   readonly subject: SubjectRef;
@@ -98,7 +88,6 @@ interface PrincipalAccessRow {
 const roleDefinitions = [
   {
     description: "Can sign in to this application.",
-    editableBy: "customer_admin",
     label: "User",
     permissions: [
       {
@@ -111,7 +100,6 @@ const roleDefinitions = [
   },
   {
     description: "Can sign in and manage application-specific roles.",
-    editableBy: "customer_admin",
     label: "Admin",
     permissions: [
       {
@@ -126,7 +114,9 @@ const roleDefinitions = [
     role: "admin",
     source: "Application access",
   },
-  ...(accessRoleDefinitions as readonly AppRoleDefinition[]).map(
+  ...(
+    accessRoleDefinitions as readonly AccessRoleDefinition<AccessAppRole>[]
+  ).map(
     (definition): RoleDefinition => ({
       ...definition,
       role: definition.role,
@@ -250,6 +240,7 @@ async function AssignmentsTab({
               <TableCell className="py-4 whitespace-normal">
                 <PrincipalMultiInput
                   action={row.updateAction}
+                  ariaLabel={`${row.definition.label} assignments`}
                   disabled={row.disabled}
                   hiddenFields={row.hiddenFields}
                   key={row.selectedSubjects.join("|")}
@@ -302,7 +293,11 @@ async function updateAssignableRoleAssignments(formData: FormData) {
     .filter((principal) => principal.roles.includes(role))
     .map((principal) => principal.subject);
 
-  await syncAppRoleAssignments(role, currentSubjects, selectedSubjects);
+  await getAccessControl().app.setAppRoleSubjects(
+    role,
+    selectedSubjects,
+    permissions.canManageDefaultRoles ? undefined : { currentSubjects },
+  );
 
   revalidatePath("/admin");
 }
@@ -322,17 +317,18 @@ async function updateApplicationAccessAssignments(
     requireEffectiveAccess: false,
   });
 
-  const currentSubjects = principals
-    .filter((principal) =>
-      relation === "user" ? principal.isUser : principal.isAdmin,
-    )
-    .map((principal) => principal.subject);
-
-  await syncApplicationAccessAssignments(
-    relation,
-    currentSubjects,
-    selectedSubjects,
-  );
+  const customerAccess = getCustomerAccessControl();
+  if (relation === "user") {
+    await customerAccess.setApplicationUsers(
+      accessManifest.appNamespace,
+      selectedSubjects,
+    );
+  } else {
+    await customerAccess.setApplicationAdmins(
+      accessManifest.appNamespace,
+      selectedSubjects,
+    );
+  }
 
   revalidatePath("/admin");
 }
@@ -413,59 +409,24 @@ async function listRbacRoleAssignmentRows(
 async function listPrincipalAccessRows(
   permissions: AdminPermissions,
 ): Promise<readonly PrincipalAccessRow[]> {
-  const [userRows, groupRows, grants] = await Promise.all([
-    authDb
-      .select({
-        email: users.email,
-        id: users.id,
-        name: users.name,
-      })
-      .from(users)
-      .orderBy(users.email),
-    authDb
-      .select({
-        id: groups.id,
-        name: groups.name,
-        source: groups.source,
-      })
-      .from(groups)
-      .where(isNull(groups.deletedAt))
-      .orderBy(groups.name),
+  const [principals, grants, roleSubjects] = await Promise.all([
+    listPrincipals(),
     getCustomerAccessControl().listApplicationGrants(
       accessManifest.appNamespace,
     ),
+    listAssignableRoleSubjects(),
   ]);
 
   const grantMap = buildGrantMap(grants);
   const access = getAccessControl();
   const application = accessManifest.application.ref();
 
-  const userAccessRows = await Promise.all(
-    userRows.map(async (user) => {
-      const subject = toUserSubject(user.id);
-      const grantState = grantMap.get(subject);
-      const effectiveAccess = await access.permissions.can({
-        permission: accessManifest.application.accessPermission,
-        resource: application,
-        subject,
-      });
-
-      return {
-        detail: user.email,
-        displayName: user.name,
-        effectiveAccess,
-        isAdmin: grantState?.has("admin") === true,
-        isUser: grantState?.has("user") === true,
-        principalType: "User" as const,
-        roles: await access.app.listAppRoles(subject),
-        subject,
-      };
-    }),
-  );
-
-  const groupAccessRows = await Promise.all(
-    groupRows.map(async (group) => {
-      const subject = groupSubjectRef(group.id);
+  const rows = await Promise.all(
+    principals.map(async (principal) => {
+      const subject =
+        principal.type === "User"
+          ? toUserSubject(principal.id)
+          : groupSubjectRef(principal.id);
       const grantState = grantMap.get(subject);
       const effectiveAccess = await access.permissions.can({
         permission: accessManifest.application.accessPermission,
@@ -474,30 +435,39 @@ async function listPrincipalAccessRows(
       });
 
       return {
-        detail: `${group.source} group`,
-        displayName: group.name,
+        detail: principal.detail,
+        displayName: principal.displayName,
         effectiveAccess,
         isAdmin: grantState?.has("admin") === true,
         isUser: grantState?.has("user") === true,
-        principalType: "Group" as const,
-        roles: await access.app.listAppRoles(subject),
+        principalType: principal.type,
+        roles: assignableRoles.filter(
+          (role) => roleSubjects.get(role)?.has(subject) === true,
+        ),
         subject,
       };
     }),
   );
 
-  const rows = [...userAccessRows, ...groupAccessRows].sort((a, b) => {
-    const typeCompare = a.principalType.localeCompare(b.principalType);
-    return typeCompare === 0
-      ? a.displayName.localeCompare(b.displayName)
-      : typeCompare;
-  });
-
   return permissions.canManageDefaultRoles
     ? rows
     : rows.filter((row) => row.effectiveAccess);
 }
 
+async function listAssignableRoleSubjects(): Promise<
+  ReadonlyMap<AccessAppRole, ReadonlySet<SubjectRef>>
+> {
+  const app = getAccessControl().app;
+  const entries = await Promise.all(
+    assignableRoles.map(async (role) => [
+      role,
+      new Set(await app.listAppRoleSubjects(role)),
+    ] as const),
+  );
+
+  return new Map(entries);
+}
+
 function buildGrantMap(
   grants: readonly ApplicationGrant[],
 ): Map<SubjectRef, Set<ApplicationGrant["relation"]>> {
@@ -516,14 +486,9 @@ function canEditAppRole(
   role: AccessAppRole,
   permissions: AdminPermissions,
 ): boolean {
-  const roleDefinition = appRoleDefinitionMap.get(role);
-  if (roleDefinition == null) {
-    return false;
-  }
-
-  return roleDefinition.editableBy === "customer_admin"
-    ? permissions.canManageDefaultRoles
-    : permissions.canManageAppRoles;
+  return (
+    appRoleDefinitionMap.has(role) === true && permissions.canManageAppRoles
+  );
 }
 
 function getApplicationAccessRoleDefinition(
@@ -611,56 +576,6 @@ function validateSelectedPrincipals(
   }
 }
 
-async function syncApplicationAccessAssignments(
-  relation: ApplicationAccessRole,
-  currentSubjects: readonly SubjectRef[],
-  selectedSubjects: readonly SubjectRef[],
-) {
-  const currentSet = new Set(currentSubjects);
-  const selectedSet = new Set(selectedSubjects);
-  const customerAccess = getCustomerAccessControl();
-  const appNamespace = accessManifest.appNamespace;
-
-  await Promise.all([
-    ...subjectsMinus(selectedSet, currentSet).map((subject) =>
-      relation === "user"
-        ? customerAccess.assignApplicationUser(appNamespace, subject)
-        : customerAccess.assignApplicationAdmin(appNamespace, subject),
-    ),
-    ...subjectsMinus(currentSet, selectedSet).map((subject) =>
-      relation === "user"
-        ? customerAccess.revokeApplicationUser(appNamespace, subject)
-        : customerAccess.revokeApplicationAdmin(appNamespace, subject),
-    ),
-  ]);
-}
-
-async function syncAppRoleAssignments(
-  role: AccessAppRole,
-  currentSubjects: readonly SubjectRef[],
-  selectedSubjects: readonly SubjectRef[],
-) {
-  const currentSet = new Set(currentSubjects);
-  const selectedSet = new Set(selectedSubjects);
-  const app = getAccessControl().app;
-
-  await Promise.all([
-    ...subjectsMinus(selectedSet, currentSet).map((subject) =>
-      app.assignAppRole(role, subject),
-    ),
-    ...subjectsMinus(currentSet, selectedSet).map((subject) =>
-      app.revokeAppRole(role, subject),
-    ),
-  ]);
-}
-
-function subjectsMinus(
-  left: ReadonlySet<SubjectRef>,
-  right: ReadonlySet<SubjectRef>,
-): SubjectRef[] {
-  return Array.from(left).filter((subject) => !right.has(subject));
-}
-
 function sortSubjectsByPrincipal(
   subjects: readonly SubjectRef[],
   principals: readonly PrincipalAccessRow[],

package/templates/webapp/src/services/access/AppAccessControl.ts

@@ -1,8 +1,6 @@
 import {
   type AppAccessRuntime,
-  applicationRef,
   createAppAccessRuntime,
-  createCustomerAccessControl,
   type CustomerAccessControl,
 } from "@percepta/access-control";
 import { accessManifest } from "../../access/access.manifest";
@@ -34,41 +32,21 @@ export function canAccessApplication(userId: string): Promise<boolean> {
 }
 
 export function canManageAppRoles(userId: string): Promise<boolean> {
-  const { permissions } = getAccessControl();
-  return permissions.can({
-    permission: accessManifest.application.manageAppRolesPermission,
-    resource: applicationRef(accessManifest.appNamespace),
-    subject: toUserSubject(userId),
-  });
+  return appAccessRuntime.canManageAppRoles(userId);
 }
 
 export function canManageAppRolesStrong(userId: string): Promise<boolean> {
-  const { permissions } = getAccessControl();
-  return permissions.canStrong({
-    permission: accessManifest.application.manageAppRolesPermission,
-    resource: applicationRef(accessManifest.appNamespace),
-    subject: toUserSubject(userId),
-  });
+  return appAccessRuntime.canManageAppRolesStrong(userId);
 }
 
 export function canManageDefaultRoles(userId: string): Promise<boolean> {
-  const { permissions } = getAccessControl();
-  return permissions.can({
-    permission: accessManifest.application.manageDefaultRolesPermission,
-    resource: applicationRef(accessManifest.appNamespace),
-    subject: toUserSubject(userId),
-  });
+  return appAccessRuntime.canManageDefaultRoles(userId);
 }
 
 export function canManageDefaultRolesStrong(
   userId: string,
 ): Promise<boolean> {
-  const { permissions } = getAccessControl();
-  return permissions.canStrong({
-    permission: accessManifest.application.manageDefaultRolesPermission,
-    resource: applicationRef(accessManifest.appNamespace),
-    subject: toUserSubject(userId),
-  });
+  return appAccessRuntime.canManageDefaultRolesStrong(userId);
 }
 
 export function getAccessControl(): AppAccessControl {
@@ -76,11 +54,7 @@ export function getAccessControl(): AppAccessControl {
 }
 
 export function getCustomerAccessControl(): CustomerAccessControl {
-  const { client } = getAccessControl();
-  return createCustomerAccessControl({
-    applications: [{ appNamespace: accessManifest.appNamespace }],
-    client,
-  });
+  return appAccessRuntime.getCustomerAccessControl();
 }
 
 export function toUserSubject(userId: string) {

package/templates/webapp/src/app/(admin)/admin/_components/PrincipalMultiInput.tsx

@@ -1,248 +0,0 @@
-"use client";
-
-import {
-  Badge,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@percepta/design";
-import { useCallback, useMemo, useState, useTransition } from "react";
-
-export interface PrincipalOption {
-  readonly detail: string;
-  readonly disabled?: boolean;
-  readonly disabledReason?: string;
-  readonly label: string;
-  readonly subject: string;
-  readonly type: "Group" | "Principal" | "User";
-}
-
-interface HiddenField {
-  readonly name: string;
-  readonly value: string;
-}
-
-interface PrincipalMultiInputProps {
-  readonly action: (formData: FormData) => Promise<void>;
-  readonly disabled: boolean;
-  readonly hiddenFields?: readonly HiddenField[];
-  readonly options: readonly PrincipalOption[];
-  readonly selectedSubjects: readonly string[];
-}
-
-export function PrincipalMultiInput({
-  action,
-  disabled,
-  hiddenFields = [],
-  options,
-  selectedSubjects,
-}: PrincipalMultiInputProps) {
-  const [isPickerOpen, setIsPickerOpen] = useState(false);
-  const [isPending, startTransition] = useTransition();
-  const [query, setQuery] = useState("");
-  const [selected, setSelected] = useState<readonly string[]>(
-    selectedSubjects,
-  );
-  const optionBySubject = useMemo(
-    () => new Map(options.map((option) => [option.subject, option])),
-    [options],
-  );
-  const selectedSet = useMemo(() => new Set(selected), [selected]);
-  const normalizedQuery = query.trim().toLowerCase();
-
-  const selectedOptions = useMemo(
-    () =>
-      selected.map(
-        (subject): PrincipalOption =>
-          optionBySubject.get(subject) ?? {
-            detail: "Unknown principal",
-            label: subject,
-            subject,
-            type: "Principal",
-          },
-      ),
-    [optionBySubject, selected],
-  );
-
-  const filteredOptions = useMemo(
-    () =>
-      options.filter((option) => {
-        if (selectedSet.has(option.subject)) {
-          return false;
-        }
-
-        if (normalizedQuery.length === 0) {
-          return true;
-        }
-
-        return `${option.label} ${option.detail} ${option.type}`
-          .toLowerCase()
-          .includes(normalizedQuery);
-      }),
-    [normalizedQuery, options, selectedSet],
-  );
-
-  const submitSelection = useCallback(
-    (nextSelected: readonly string[]) => {
-      const formData = new FormData();
-      for (const field of hiddenFields) {
-        formData.append(field.name, field.value);
-      }
-      for (const subject of nextSelected) {
-        formData.append("subjects", subject);
-      }
-
-      startTransition(async () => {
-        await action(formData);
-      });
-    },
-    [action, hiddenFields],
-  );
-
-  const isDisabled = disabled || isPending;
-
-  const handleAddOption = useCallback(
-    (subject: string) => {
-      const option = optionBySubject.get(subject);
-      if (
-        isDisabled ||
-        option?.disabled === true ||
-        selected.includes(subject)
-      ) {
-        return;
-      }
-
-      const nextSelected = [...selected, subject];
-      setSelected(nextSelected);
-      submitSelection(nextSelected);
-      setQuery("");
-      setIsPickerOpen(false);
-    },
-    [isDisabled, optionBySubject, selected, submitSelection],
-  );
-
-  const handleRemoveOption = useCallback(
-    (subject: string) => {
-      if (isDisabled) {
-        return;
-      }
-
-      const nextSelected = selected.filter(
-        (currentSubject) => currentSubject !== subject,
-      );
-      setSelected(nextSelected);
-      submitSelection(nextSelected);
-    },
-    [isDisabled, selected, submitSelection],
-  );
-
-  return (
-    <Popover
-      open={isPickerOpen}
-      onOpenChange={(open) => {
-        if (!isDisabled) {
-          setIsPickerOpen(open);
-        }
-      }}
-    >
-      <PopoverTrigger asChild={true}>
-        <div
-          aria-busy={isPending}
-          aria-disabled={isDisabled}
-          className="flex min-h-12 cursor-text flex-wrap items-center gap-2 rounded-md border border-border bg-background p-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60"
-          data-disabled={isDisabled}
-          role="button"
-          tabIndex={isDisabled ? -1 : 0}
-        >
-          {selectedOptions.map((option) => (
-            <SelectedPrincipalBadge
-              disabled={isDisabled}
-              key={option.subject}
-              onRemove={handleRemoveOption}
-              option={option}
-            />
-          ))}
-          {selectedOptions.length === 0 ? (
-            <span className="min-w-40 flex-1 text-sm text-muted-foreground">
-              {isDisabled ? "No users or groups assigned" : "Search users or groups"}
-            </span>
-          ) : (
-            <span aria-hidden={true} className="min-w-8 flex-1" />
-          )}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent align="start" className="w-96 p-0">
-        <Command shouldFilter={false}>
-          <CommandInput
-            onValueChange={setQuery}
-            placeholder="Search users or groups"
-            value={query}
-          />
-          <CommandList>
-            <CommandEmpty>No matches</CommandEmpty>
-            <CommandGroup>
-              {filteredOptions.map((option) => (
-                <CommandItem
-                  disabled={isDisabled || option.disabled === true}
-                  key={option.subject}
-                  onSelect={handleAddOption}
-                  title={option.disabledReason}
-                  value={option.subject}
-                >
-                  <span className="min-w-0 flex-1">
-                    <span className="block truncate font-medium text-foreground">
-                      {option.label}
-                    </span>
-                    <span className="block truncate text-xs text-muted-foreground">
-                      {option.detail} / {option.type}
-                    </span>
-                  </span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function SelectedPrincipalBadge({
-  disabled,
-  onRemove,
-  option,
-}: {
-  readonly disabled: boolean;
-  readonly onRemove: (subject: string) => void;
-  readonly option: PrincipalOption;
-}) {
-  const handleRemove = useCallback(() => {
-    onRemove(option.subject);
-  }, [onRemove, option.subject]);
-
-  return (
-    <span
-      className="max-w-full"
-      onClick={(event) => event.stopPropagation()}
-      onKeyDown={(event) => event.stopPropagation()}
-    >
-      <Badge
-        className="max-w-full gap-2 py-1 text-sm"
-        disabled={disabled}
-        onRemove={handleRemove}
-        variant="secondary"
-      >
-        <span className="truncate">{option.label}</span>
-        <span className="text-xs font-normal text-muted-foreground">
-          {option.type}
-        </span>
-      </Badge>
-    </span>
-  );
-}