@percepta/create 3.3.0 → 3.4.1

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

@@ -0,0 +1,598 @@
+import type {
+  AccessRoleDefinition,
+  ApplicationGrant,
+  SubjectRef,
+} from "@percepta/access-control";
+import { groupSubjectRef } from "@percepta/access-control";
+import {
+  PrincipalMultiInput,
+  type PrincipalOption,
+} from "@percepta/access-control/react";
+import { listPrincipals } from "@__REPO_NAME__/auth/principals";
+import {
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@percepta/design";
+import type { Metadata } from "next";
+import { revalidatePath } from "next/cache";
+import { notFound } from "next/navigation";
+import {
+  accessManifest,
+  accessRoleDefinitions,
+} from "../../../access/access.manifest";
+import {
+  getAccessControl,
+  getCustomerAccessControl,
+  toUserSubject,
+} from "../../../services/access/AppAccessControl";
+import {
+  type AccessAppRole,
+  type AdminPermissions,
+  assignableRoles,
+  readAssignableRole,
+  requireAnyAdminPermission,
+} from "./_lib/accessAdmin";
+import { AdminTabs, type AdminTab } from "./_components/AdminTabs";
+
+export const metadata: Metadata = {
+  title: "RBAC - __APP_TITLE__",
+  description: "RBAC - __APP_TITLE__",
+};
+
+type ApplicationAccessRole = ApplicationGrant["relation"];
+
+interface AdminPageProps {
+  readonly searchParams?: Promise<{
+    readonly tab?: string | string[];
+  }>;
+}
+
+interface RoleDefinition extends AccessRoleDefinition {
+  readonly source: "Application access" | "App RBAC";
+}
+
+interface PrincipalAssignmentOption extends PrincipalOption {
+  readonly effectiveAccess: boolean;
+  readonly subject: SubjectRef;
+}
+
+interface RbacRoleAssignmentRow {
+  readonly definition: RoleDefinition;
+  readonly disabled: boolean;
+  readonly disabledReason?: string;
+  readonly hiddenFields?: readonly {
+    readonly name: string;
+    readonly value: string;
+  }[];
+  readonly options: readonly PrincipalAssignmentOption[];
+  readonly selectedSubjects: readonly SubjectRef[];
+  readonly updateAction: (formData: FormData) => Promise<void>;
+}
+
+interface PrincipalAccessRow {
+  readonly detail: string;
+  readonly displayName: string;
+  readonly effectiveAccess: boolean;
+  readonly isAdmin: boolean;
+  readonly isUser: boolean;
+  readonly principalType: "Group" | "User";
+  readonly roles: readonly AccessAppRole[];
+  readonly subject: SubjectRef;
+}
+
+const roleDefinitions = [
+  {
+    description: "Can sign in to this application.",
+    label: "User",
+    permissions: [
+      {
+        description: "Enter the application.",
+        permission: accessManifest.application.accessPermission,
+      },
+    ],
+    role: "user",
+    source: "Application access",
+  },
+  {
+    description: "Can sign in and manage application-specific roles.",
+    label: "Admin",
+    permissions: [
+      {
+        description: "Enter the application.",
+        permission: accessManifest.application.accessPermission,
+      },
+      {
+        description: "Assign and revoke app-defined roles.",
+        permission: accessManifest.application.manageAppRolesPermission,
+      },
+    ],
+    role: "admin",
+    source: "Application access",
+  },
+  ...(
+    accessRoleDefinitions as readonly AccessRoleDefinition<AccessAppRole>[]
+  ).map(
+    (definition): RoleDefinition => ({
+      ...definition,
+      role: definition.role,
+      source: "App RBAC",
+    }),
+  ),
+] as const;
+
+const appRoleDefinitionMap = new Map<AccessAppRole, RoleDefinition>(
+  roleDefinitions
+    .filter((definition) => definition.source === "App RBAC")
+    .map((definition) => [definition.role as AccessAppRole, definition]),
+);
+
+export default async function AdminPage({ searchParams }: AdminPageProps) {
+  const permissions = await requireAnyAdminPermission();
+  const params = await searchParams;
+  const tab = readAdminTab(params?.tab);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">RBAC</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {accessManifest.application.displayName}
+          </p>
+        </div>
+        <div className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          <div className="font-medium text-foreground">
+            {accessManifest.application.displayName}
+          </div>
+          <div className="text-muted-foreground">
+            {accessManifest.appNamespace}
+          </div>
+        </div>
+      </div>
+
+      <AdminTabs activeTab={tab} />
+
+      {tab === "roles" ? (
+        <RolesTab />
+      ) : (
+        <AssignmentsTab permissions={permissions} />
+      )}
+    </div>
+  );
+}
+
+function RolesTab() {
+  return (
+    <div className="rounded-md border border-border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Role</TableHead>
+            <TableHead>Permissions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {roleDefinitions.map((role) => (
+            <TableRow
+              key={`${role.source}:${role.role}`}
+              className="align-top"
+            >
+              <TableCell className="py-4 whitespace-normal">
+                <div className="font-medium text-foreground">{role.label}</div>
+                <div className="text-muted-foreground">{role.description}</div>
+              </TableCell>
+              <TableCell className="py-4 whitespace-normal">
+                <div className="flex flex-wrap gap-2">
+                  {role.permissions.map((permission) => (
+                    <Badge
+                      key={permission.permission}
+                      title={permission.description}
+                      variant="outline"
+                    >
+                      {permission.permission}
+                    </Badge>
+                  ))}
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+async function AssignmentsTab({
+  permissions,
+}: {
+  readonly permissions: AdminPermissions;
+}) {
+  const rows = await listRbacRoleAssignmentRows(permissions);
+
+  return (
+    <div className="rounded-md border border-border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-72">Role</TableHead>
+            <TableHead>Users and Groups</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={`${row.definition.source}:${row.definition.role}`}
+              className="align-top"
+            >
+              <TableCell className="py-4 whitespace-normal">
+                <div className="font-medium text-foreground">
+                  {row.definition.label}
+                </div>
+                <div className="text-muted-foreground">
+                  {row.definition.description}
+                </div>
+              </TableCell>
+              <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("|")}
+                  options={row.options}
+                  selectedSubjects={row.selectedSubjects}
+                />
+                {row.disabledReason == null ? null : (
+                  <div className="mt-2 text-xs text-muted-foreground">
+                    {row.disabledReason}
+                  </div>
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+async function updateUserAssignments(formData: FormData) {
+  "use server";
+
+  await updateApplicationAccessAssignments(formData, "user");
+}
+
+async function updateAdminAssignments(formData: FormData) {
+  "use server";
+
+  await updateApplicationAccessAssignments(formData, "admin");
+}
+
+async function updateAssignableRoleAssignments(formData: FormData) {
+  "use server";
+
+  const permissions = await requireAnyAdminPermission();
+  const role = readAssignableRole(formData);
+
+  if (!canEditAppRole(role, permissions)) {
+    notFound();
+  }
+
+  const principals = await listPrincipalAccessRows(permissions);
+  const selectedSubjects = readPrincipalSubjects(formData);
+  validateSelectedPrincipals(selectedSubjects, principals, {
+    requireEffectiveAccess: true,
+  });
+
+  const currentSubjects = principals
+    .filter((principal) => principal.roles.includes(role))
+    .map((principal) => principal.subject);
+
+  await getAccessControl().app.setAppRoleSubjects(
+    role,
+    selectedSubjects,
+    permissions.canManageDefaultRoles ? undefined : { currentSubjects },
+  );
+
+  revalidatePath("/admin");
+}
+
+async function updateApplicationAccessAssignments(
+  formData: FormData,
+  relation: ApplicationGrant["relation"],
+) {
+  const permissions = await requireAnyAdminPermission();
+  if (!permissions.canManageDefaultRoles) {
+    notFound();
+  }
+
+  const principals = await listPrincipalAccessRows(permissions);
+  const selectedSubjects = readPrincipalSubjects(formData);
+  validateSelectedPrincipals(selectedSubjects, principals, {
+    requireEffectiveAccess: false,
+  });
+
+  const customerAccess = getCustomerAccessControl();
+  if (relation === "user") {
+    await customerAccess.setApplicationUsers(
+      accessManifest.appNamespace,
+      selectedSubjects,
+    );
+  } else {
+    await customerAccess.setApplicationAdmins(
+      accessManifest.appNamespace,
+      selectedSubjects,
+    );
+  }
+
+  revalidatePath("/admin");
+}
+
+async function listRbacRoleAssignmentRows(
+  permissions: AdminPermissions,
+): Promise<readonly RbacRoleAssignmentRow[]> {
+  const principals = await listPrincipalAccessRows(permissions);
+  const principalOptions = principals.map(toPrincipalOption);
+
+  const applicationRows: readonly RbacRoleAssignmentRow[] = [
+    {
+      definition: getApplicationAccessRoleDefinition("user"),
+      disabled: !permissions.canManageDefaultRoles,
+      disabledReason: permissions.canManageDefaultRoles
+        ? undefined
+        : "Only customer admins can edit default application roles.",
+      options: principalOptions,
+      selectedSubjects: sortSubjectsByPrincipal(
+        principals
+          .filter((principal) => principal.isUser)
+          .map((principal) => principal.subject),
+        principals,
+      ),
+      updateAction: updateUserAssignments,
+    },
+    {
+      definition: getApplicationAccessRoleDefinition("admin"),
+      disabled: !permissions.canManageDefaultRoles,
+      disabledReason: permissions.canManageDefaultRoles
+        ? undefined
+        : "Only customer admins can edit default application roles.",
+      options: principalOptions,
+      selectedSubjects: sortSubjectsByPrincipal(
+        principals
+          .filter((principal) => principal.isAdmin)
+          .map((principal) => principal.subject),
+        principals,
+      ),
+      updateAction: updateAdminAssignments,
+    },
+  ];
+
+  const appRoleRows = assignableRoles.map((role): RbacRoleAssignmentRow => {
+    const canEditRole = canEditAppRole(role, permissions);
+    const selectedSubjects = sortSubjectsByPrincipal(
+      principals
+        .filter((principal) => principal.roles.includes(role))
+        .map((principal) => principal.subject),
+      principals,
+    );
+
+    return {
+      definition: getAppRoleDefinition(role),
+      disabled: !canEditRole,
+      disabledReason: canEditRole
+        ? undefined
+        : "You do not have permission to edit this role.",
+      hiddenFields: [{ name: "role", value: role }],
+      options: principalOptions.map((option) =>
+        option.effectiveAccess
+          ? option
+          : {
+              ...option,
+              disabled: true,
+              disabledReason:
+                "Grant application access before assigning app roles.",
+            },
+      ),
+      selectedSubjects,
+      updateAction: updateAssignableRoleAssignments,
+    };
+  });
+
+  return [...applicationRows, ...appRoleRows];
+}
+
+async function listPrincipalAccessRows(
+  permissions: AdminPermissions,
+): Promise<readonly PrincipalAccessRow[]> {
+  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 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,
+        resource: application,
+        subject,
+      });
+
+      return {
+        detail: principal.detail,
+        displayName: principal.displayName,
+        effectiveAccess,
+        isAdmin: grantState?.has("admin") === true,
+        isUser: grantState?.has("user") === true,
+        principalType: principal.type,
+        roles: assignableRoles.filter(
+          (role) => roleSubjects.get(role)?.has(subject) === true,
+        ),
+        subject,
+      };
+    }),
+  );
+
+  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"]>> {
+  const grantMap = new Map<SubjectRef, Set<ApplicationGrant["relation"]>>();
+
+  for (const grant of grants) {
+    const subjectGrants = grantMap.get(grant.subject) ?? new Set();
+    subjectGrants.add(grant.relation);
+    grantMap.set(grant.subject, subjectGrants);
+  }
+
+  return grantMap;
+}
+
+function canEditAppRole(
+  role: AccessAppRole,
+  permissions: AdminPermissions,
+): boolean {
+  return (
+    appRoleDefinitionMap.has(role) === true && permissions.canManageAppRoles
+  );
+}
+
+function getApplicationAccessRoleDefinition(
+  role: ApplicationAccessRole,
+): RoleDefinition {
+  const definition = roleDefinitions.find(
+    (candidate) =>
+      candidate.source === "Application access" && candidate.role === role,
+  );
+  if (definition == null) {
+    throw new Error(`Missing application access role definition: ${role}`);
+  }
+
+  return definition;
+}
+
+function getAppRoleDefinition(role: AccessAppRole): RoleDefinition {
+  const definition = appRoleDefinitionMap.get(role);
+  if (definition == null) {
+    throw new Error(`Missing app role definition: ${role}`);
+  }
+
+  return definition;
+}
+
+function toPrincipalOption(
+  principal: PrincipalAccessRow,
+): PrincipalAssignmentOption {
+  return {
+    detail: principal.detail,
+    effectiveAccess: principal.effectiveAccess,
+    label: principal.displayName,
+    subject: principal.subject,
+    type: principal.principalType,
+  };
+}
+
+function readPrincipalSubjects(formData: FormData): readonly SubjectRef[] {
+  const subjects: SubjectRef[] = [];
+  const seenSubjects = new Set<string>();
+
+  for (const value of formData.getAll("subjects")) {
+    if (typeof value !== "string" || !isPrincipalSubject(value)) {
+      throw new Error("Invalid principal subject.");
+    }
+
+    if (!seenSubjects.has(value)) {
+      subjects.push(value);
+      seenSubjects.add(value);
+    }
+  }
+
+  return subjects;
+}
+
+function isPrincipalSubject(subject: string): subject is SubjectRef {
+  return (
+    subject.startsWith("core/user:") ||
+    /^core\/group:[^#]+#member$/.test(subject)
+  );
+}
+
+function validateSelectedPrincipals(
+  selectedSubjects: readonly SubjectRef[],
+  principals: readonly PrincipalAccessRow[],
+  {
+    requireEffectiveAccess,
+  }: {
+    readonly requireEffectiveAccess: boolean;
+  },
+) {
+  const principalBySubject = new Map(
+    principals.map((principal) => [principal.subject, principal]),
+  );
+
+  for (const subject of selectedSubjects) {
+    const principal = principalBySubject.get(subject);
+    if (principal == null) {
+      throw new Error("Unknown principal subject.");
+    }
+
+    if (requireEffectiveAccess && !principal.effectiveAccess) {
+      throw new Error("Principal must have application access.");
+    }
+  }
+}
+
+function sortSubjectsByPrincipal(
+  subjects: readonly SubjectRef[],
+  principals: readonly PrincipalAccessRow[],
+): readonly SubjectRef[] {
+  const sortKeyBySubject = new Map(
+    principals.map((principal) => [
+      principal.subject,
+      `${principal.principalType}:${principal.displayName}:${principal.detail}`,
+    ]),
+  );
+
+  return [...subjects].sort((a, b) =>
+    (sortKeyBySubject.get(a) ?? a).localeCompare(sortKeyBySubject.get(b) ?? b),
+  );
+}
+
+function readAdminTab(tab: string | string[] | undefined): AdminTab {
+  const value = Array.isArray(tab) ? tab[0] : tab;
+  return value === "assignments" ? "assignments" : "roles";
+}

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

@@ -0,0 +1,43 @@
+import { notFound, redirect } from "next/navigation";
+import type { ReactNode } from "react";
+import Header from "../../components/Header";
+import { getServerSession } from "../../lib/auth";
+import {
+  canManageAppRoles,
+  canManageDefaultRoles,
+} from "../../services/access/AppAccessControl";
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const session = await getServerSession();
+
+  if (session?.user == null) {
+    redirect("/auth/signin");
+  }
+
+  const [canManageDefaults, canManageRoles] = await Promise.all([
+    canManageDefaultRoles(session.user.id),
+    canManageAppRoles(session.user.id),
+  ]);
+  const showAdminLink = canManageDefaults || canManageRoles;
+
+  if (!showAdminLink) {
+    notFound();
+  }
+
+  return (
+    <>
+      <Header showAdminLink={showAdminLink} />
+      <main>
+        <div className="py-8">
+          <div className="mx-auto max-w-6xl">
+            <div className="rounded-lg bg-white p-8">{children}</div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

package/templates/webapp/src/app/(app)/layout.tsx

@@ -2,7 +2,11 @@ import { notFound, redirect } from "next/navigation";
 import type { ReactNode } from "react";
 import Header from "../../components/Header";
 import { getServerSession } from "../../lib/auth";
-import { canAccessApplication } from "../../services/access/AppAccessControl";
+import {
+  canAccessApplication,
+  canManageAppRoles,
+  canManageDefaultRoles,
+} from "../../services/access/AppAccessControl";
 
 export default async function AppLayout({ children }: { children: ReactNode }) {
   const session = await getServerSession();
@@ -11,14 +15,20 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
     redirect("/auth/signin");
   }
 
-  const canAccessApp = await canAccessApplication(session.user.id);
+  const [canAccessApp, canManageDefaults, canManageRoles] = await Promise.all([
+    canAccessApplication(session.user.id),
+    canManageDefaultRoles(session.user.id),
+    canManageAppRoles(session.user.id),
+  ]);
+  const showAdminLink = canManageDefaults || canManageRoles;
+
   if (!canAccessApp) {
     notFound();
   }
 
   return (
     <>
-      <Header />
+      <Header showAdminLink={showAdminLink} />
       <main>
         <div className="py-8">
           <div className="mx-auto max-w-6xl">

package/templates/webapp/src/app/(auth)/auth/signin/CredentialsSignInForm.tsx

@@ -23,7 +23,7 @@ type Credentials = z.infer<typeof CREDENTIALS_SCHEMA>;
 // credentials. In dev we prefill with the seeded user from `pnpm db:seed` so a
 // fresh scaffold is one click away from authed.
 const DEFAULTS: Credentials = IS_DEV
-  ? { email: "admin@example.com", password: "password" }
+  ? { email: "app-admin@example.com", password: "password" }
   : { email: "", password: "" };
 
 export function CredentialsSignInForm() {

package/templates/webapp/src/app/global-error.tsx

@@ -8,9 +8,8 @@ export default function GlobalError({
   reset: () => void;
 }) {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-assignment
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     const { faro } = require("@grafana/faro-web-sdk");
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     faro.api?.pushError(error);
   } catch {
     // Faro may not be initialized yet — don't let reporting break the error page