@percepta/create 3.3.0 → 3.4.0

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

@@ -0,0 +1,683 @@
+import type { 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 {
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  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";
+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 {
+  PrincipalMultiInput,
+  type PrincipalOption,
+} from "./_components/PrincipalMultiInput";
+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 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;
+  readonly source: "Application access" | "App RBAC";
+}
+
+type AppRoleDefinition = Omit<RoleDefinition, "source">;
+
+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.",
+    editableBy: "customer_admin",
+    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.",
+    editableBy: "customer_admin",
+    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 AppRoleDefinition[]).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}
+                  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 syncAppRoleAssignments(role, currentSubjects, selectedSubjects);
+
+  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 currentSubjects = principals
+    .filter((principal) =>
+      relation === "user" ? principal.isUser : principal.isAdmin,
+    )
+    .map((principal) => principal.subject);
+
+  await syncApplicationAccessAssignments(
+    relation,
+    currentSubjects,
+    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 [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),
+    getCustomerAccessControl().listApplicationGrants(
+      accessManifest.appNamespace,
+    ),
+  ]);
+
+  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 grantState = grantMap.get(subject);
+      const effectiveAccess = await access.permissions.can({
+        permission: accessManifest.application.accessPermission,
+        resource: application,
+        subject,
+      });
+
+      return {
+        detail: `${group.source} group`,
+        displayName: group.name,
+        effectiveAccess,
+        isAdmin: grantState?.has("admin") === true,
+        isUser: grantState?.has("user") === true,
+        principalType: "Group" as const,
+        roles: await access.app.listAppRoles(subject),
+        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);
+}
+
+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 {
+  const roleDefinition = appRoleDefinitionMap.get(role);
+  if (roleDefinition == null) {
+    return false;
+  }
+
+  return roleDefinition.editableBy === "customer_admin"
+    ? permissions.canManageDefaultRoles
+    : 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.");
+    }
+  }
+}
+
+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[],
+): 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";
+}