@nocobase/app-template-default 1.0.0-beta.68 → 1.0.0-beta.70

package/client/pages/settings/permissions-model.ts

@@ -0,0 +1,260 @@
+import type {
+  AuthorizationOptionsResponse,
+  PermissionGrant,
+  LocalizedText,
+} from '@nocobase/app-plugin-authorization/client';
+import type { PermissionEditorSection } from '#components/permission-editor';
+
+export type CatalogResource =
+  AuthorizationOptionsResponse['sections'][number]['subsections'][number]['resources'][number];
+export const permissionRowId = (
+  resource: { type: string; id: string },
+  action: string,
+): string => JSON.stringify([resource.type, resource.id, action]);
+export function setPermission(
+  grants: readonly PermissionGrant[],
+  resource: CatalogResource,
+  action: string,
+  enabled: boolean,
+): readonly PermissionGrant[] {
+  const next = grants.map((grant) => ({
+    ...grant,
+    actions: [...grant.actions],
+  }));
+  let grant = next.find(
+    (item) =>
+      item.resource.type === resource.type && item.resource.id === resource.id,
+  );
+  if (!grant && enabled) {
+    grant = { resource: { type: resource.type, id: resource.id }, actions: [] };
+    next.push(grant);
+  }
+  if (grant) {
+    grant.actions = grant.actions.filter((item) => item.action !== action);
+    if (enabled) {
+      const scopes = resource.dataScopes?.[action];
+      grant.actions.push({
+        action,
+        ...(scopes?.length
+          ? {
+              policy: {
+                type: 'composite',
+                scopes: Object.fromEntries(
+                  scopes.map((scope) => [scope.key, scope.defaultValue ?? '']),
+                ),
+              },
+            }
+          : {}),
+      });
+    }
+  }
+  return next.filter((item) => item.actions.length);
+}
+
+export function permissionSections(
+  catalog: AuthorizationOptionsResponse,
+  grants: readonly PermissionGrant[],
+  text: (value: LocalizedText) => string,
+): readonly PermissionEditorSection[] {
+  return catalog.sections
+    .map((section) => ({
+      id: section.name,
+      title: text(section.title),
+      groups: section.subsections.flatMap((subsection) =>
+        subsection.resources.map((resource) => ({
+          id: JSON.stringify([subsection.name, resource.type, resource.id]),
+          title: text(resource.title),
+          accessOnly:
+            resource.type === 'page' &&
+            resource.actions.length === 1 &&
+            resource.actions[0]?.name === 'access',
+          hint: resource.description ? text(resource.description) : undefined,
+          rows: resource.actions.map((action) => {
+            const granted = grants
+              .find(
+                (grant) =>
+                  grant.resource.type === resource.type &&
+                  grant.resource.id === resource.id,
+              )
+              ?.actions.find((entry) => entry.action === action.name);
+            const row = {
+              id: permissionRowId(resource, action.name),
+              label: text(action.title),
+              actionKey: action.name,
+              enabled: Boolean(granted),
+            };
+            // Scope selectors belong to the action and do not inflate permission counts.
+            return {
+              ...row,
+              scopes: granted
+                ? (resource.dataScopes?.[action.name] ?? []).map((scope) => ({
+                    id: JSON.stringify([
+                      resource.type,
+                      resource.id,
+                      action.name,
+                      scope.key,
+                    ]),
+                    label: text(
+                      typeof scope.title === 'string' &&
+                        scope.title === scope.collection
+                        ? { key: 'settings.recordScope' }
+                        : scope.title,
+                    ),
+                    levels: [
+                      {
+                        value: '',
+                        label: text({ key: 'settings.noRecordScope' }),
+                      },
+                      ...scope.recordAccess.map((key) => ({
+                        value: key,
+                        label: text(
+                          catalog.recordAccess.find(
+                            (entry) => entry.key === key,
+                          )?.title ?? key,
+                        ),
+                      })),
+                    ],
+                    level: scopeSelectionKey(
+                      granted.policy?.scopes &&
+                        typeof granted.policy.scopes === 'object'
+                        ? Reflect.get(granted.policy.scopes, scope.key)
+                        : undefined,
+                    ),
+                  }))
+                : [],
+            };
+          }),
+        })),
+      ),
+    }))
+    .filter((section) => section.groups.length);
+}
+
+export function setScope(
+  grants: readonly PermissionGrant[],
+  rowId: string,
+  value: unknown,
+): readonly PermissionGrant[] {
+  const [type, id, action, scope] = JSON.parse(rowId) as string[];
+  return grants.map((grant) =>
+    grant.resource.type !== type || grant.resource.id !== id
+      ? grant
+      : {
+          ...grant,
+          actions: grant.actions.map((entry) =>
+            entry.action !== action
+              ? entry
+              : {
+                  ...entry,
+                  policy: {
+                    ...entry.policy,
+                    type: 'composite',
+                    scopes: {
+                      ...(entry.policy?.scopes as
+                        Record<string, unknown> | undefined),
+                      [scope]: value,
+                    },
+                  },
+                },
+          ),
+        },
+  );
+}
+
+/** Fold an explicit edit batch into one draft without replacing unrelated policies. */
+export function setPermissions(
+  grants: readonly PermissionGrant[],
+  catalog: AuthorizationOptionsResponse,
+  changes: readonly { id: string; enabled: boolean }[],
+): readonly PermissionGrant[] {
+  const resources = catalog.sections.flatMap((section) =>
+    section.subsections.flatMap((sub) => sub.resources),
+  );
+  return changes.reduce((current, { id, enabled }) => {
+    const [type, resourceId, action, scope] = JSON.parse(id) as string[];
+    if (scope) return current;
+    const resource = resources.find(
+      (item) => item.type === type && item.id === resourceId,
+    );
+    if (
+      !resource ||
+      !action ||
+      !resource.actions.some((item) => item.name === action)
+    )
+      return current;
+    const existing =
+      current
+        .find(
+          (grant) =>
+            grant.resource.type === type && grant.resource.id === resourceId,
+        )
+        ?.actions.some((item) => item.action === action) ?? false;
+    return existing === enabled
+      ? current
+      : setPermission(current, resource, action, enabled);
+  }, grants);
+}
+
+export function getScopeSelection(
+  grants: readonly PermissionGrant[],
+  rowId: string,
+): unknown {
+  const [type, id, action, scope] = JSON.parse(rowId) as string[];
+  const policy = grants
+    .find((grant) => grant.resource.type === type && grant.resource.id === id)
+    ?.actions.find((entry) => entry.action === action)?.policy;
+  return policy?.scopes && typeof policy.scopes === 'object' && scope
+    ? Reflect.get(policy.scopes, scope)
+    : undefined;
+}
+function scopeSelectionKey(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (
+    value &&
+    typeof value === 'object' &&
+    Reflect.get(value, 'type') === 'recordAccess' &&
+    typeof Reflect.get(value, 'key') === 'string'
+  )
+    return String(Reflect.get(value, 'key'));
+  return '';
+}
+
+/** Legacy bare custom-filter keys require configuration before saving. */
+export function unconfiguredFilter(
+  grants: readonly PermissionGrant[],
+): string | undefined {
+  for (const grant of grants)
+    for (const action of grant.actions) {
+      const scopes = action.policy?.scopes;
+      if (!scopes || typeof scopes !== 'object') continue;
+      for (const [key, value] of Object.entries(scopes)) {
+        if (value === 'customFilter')
+          return JSON.stringify([
+            grant.resource.type,
+            grant.resource.id,
+            action.action,
+            key,
+          ]);
+        if (
+          !value ||
+          typeof value !== 'object' ||
+          Reflect.get(value, 'type') !== 'recordAccess' ||
+          Reflect.get(value, 'key') !== 'customFilter'
+        )
+          continue;
+        const params: unknown = Reflect.get(value, 'params');
+        const filter: unknown =
+          params && typeof params === 'object'
+            ? Reflect.get(params, 'filter')
+            : undefined;
+        if (filter === null || !['object', 'boolean'].includes(typeof filter))
+          return JSON.stringify([
+            grant.resource.type,
+            grant.resource.id,
+            action.action,
+            key,
+          ]);
+      }
+    }
+  return undefined;
+}

package/client/pages/settings/role-form.tsx

@@ -0,0 +1,405 @@
+import {
+  useSettingsLeave,
+  useSettingsData,
+  useRolePermission,
+} from './hooks.js';
+import {
+  ApiClientError,
+  useClientApplication,
+  useToaster,
+} from '@nocobase/app-client';
+import { useTranslation } from '@nocobase/i18n/client';
+import {
+  useAuthorizationClient,
+  type AuthorizationOptionsResponse,
+  type LocalizedText,
+  type PermissionGrant,
+  type PermissionSet,
+} from '@nocobase/app-plugin-authorization/client';
+import { pagePermissionResources } from './page-permissions.js';
+import { pagePermissionTitles } from './page-permission-titles.js';
+import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
+import {
+  useLocation,
+  useNavigate,
+  useOutletContext,
+  useParams,
+} from 'react-router';
+import { RouteChildPage } from '#components/route-child-page';
+import { BackButton } from '#components/back-button';
+import { PageContainer } from '#components/page-container';
+import { PageHeader } from '#components/page-header';
+import { PermissionEditor } from '#components/permission-editor';
+import { Button } from '#components/ui/button';
+import { Input } from '#components/ui/input';
+import { Label } from '#components/ui/label';
+import { Badge } from '#components/ui/badge';
+import { ConfirmAction, SettingsError, SettingsLoading } from './shared.js';
+import { configurePermissionScopes } from './permission-filters.js';
+import {
+  permissionSections,
+  unconfiguredFilter,
+  setPermissions,
+  setScope,
+} from './permissions-model.js';
+
+function RoleEditor(): ReactElement {
+  const { key } = useParams();
+  const creating = !key;
+  const { t } = useTranslation();
+  const app = useClientApplication();
+  const authz = useAuthorizationClient();
+  const toaster = useToaster();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const parent = useOutletContext<{ reload: () => void }>();
+  const request = useSettingsData<{ data: PermissionSet }>(
+    key
+      ? `authorization/permissionSets/${encodeURIComponent(key)}`
+      : 'authorization/permissionSets/options',
+  );
+  const missingRef = useRef<unknown>(undefined);
+  useEffect(() => {
+    if (
+      request.error instanceof ApiClientError &&
+      request.error.status === 404 &&
+      missingRef.current !== request.error
+    ) {
+      missingRef.current = request.error;
+      parent.reload();
+    }
+  }, [request.error, parent]);
+  const options = useSettingsData<{ data: AuthorizationOptionsResponse }>(
+    'authorization/permissionSets/options',
+  );
+  const canCreate = useRolePermission('create');
+  const canUpdate = useRolePermission('update');
+  const [nameDraft, setNameDraft] = useState<string>();
+  const [keyDraft, setKeyDraft] = useState<string>();
+  const [grantsDraft, setGrantsDraft] = useState<readonly PermissionGrant[]>();
+  const [dirty, setDirty] = useState(false);
+  const [editingScope, setEditingScope] = useState<string>();
+  const [busy, setBusy] = useState(false);
+  const leave = useSettingsLeave(dirty, busy);
+  const [error, setError] = useState<unknown>();
+
+  const [reloadConfirm, setReloadConfirm] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [keyConflict, setKeyConflict] = useState(false);
+  const text = (value: LocalizedText): string =>
+    typeof value === 'string'
+      ? value
+      : t(value.key, {
+          ns: value.ns,
+          defaultValue: value.defaultValue ?? value.key,
+        });
+  const initial = !creating ? request.data?.data : undefined;
+  const name = nameDraft ?? (initial ? text(initial.title ?? initial.key) : '');
+  const roleKey = keyDraft ?? initial?.key ?? '';
+  const grants = grantsDraft ?? initial?.grants ?? [];
+  const catalog = useMemo(() => {
+    if (!options.data) return undefined;
+    const source = options.data.data;
+    const pages = pagePermissionResources(
+      app.runtime.routes,
+      pagePermissionTitles,
+      (path) => t('settings.unnamedPage', { path }),
+    );
+    return {
+      ...source,
+      sections: [
+        {
+          name: 'users',
+          title: { key: 'settings.userPermissions' },
+          order: 0,
+          subsections: [
+            {
+              name: 'users.accounts',
+              title: { key: 'settings.users' },
+              resources: [
+                {
+                  type: 'user',
+                  id: '*',
+                  title: { key: 'settings.users' },
+                  actions: [
+                    { name: 'read', title: { key: 'settings.readUsers' } },
+                    { name: 'create', title: { key: 'settings.createUsers' } },
+                    { name: 'update', title: { key: 'settings.updateUsers' } },
+                    { name: 'invite', title: { key: 'settings.inviteUsers' } },
+                    { name: 'delete', title: { key: 'settings.deleteUsers' } },
+                    {
+                      name: 'reset-password',
+                      title: { key: 'settings.resetUserPassword' },
+                    },
+                    { name: 'disable', title: { key: 'settings.disable' } },
+                    { name: 'enable', title: { key: 'settings.enable' } },
+                    {
+                      name: 'assign-role',
+                      title: { key: 'settings.assignRole' },
+                    },
+                    {
+                      name: 'revoke-sessions',
+                      title: { key: 'settings.revokeSessions' },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        ...source.sections.map((section) => ({
+          ...section,
+          subsections: section.subsections.map((sub) => ({
+            ...sub,
+            resources:
+              sub.recordType?.type === 'page'
+                ? [...sub.resources, ...pages]
+                : sub.resources,
+          })),
+        })),
+      ],
+    };
+  }, [options.data, app, t]);
+  const allowed = creating
+    ? canCreate
+    : canUpdate &&
+      (!request.data?.data.protection ||
+        request.data.data.protection.allow.includes('update'));
+  const closeTo = { pathname: '/settings/roles', search: location.search };
+  const save = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (options.error || !catalog || (!creating && request.error)) return;
+    setSubmitted(true);
+    if (!name.trim() || !roleKey.trim()) {
+      event.currentTarget
+        .querySelector<HTMLInputElement>('input:invalid')
+        ?.focus();
+      return;
+    }
+    const incomplete = unconfiguredFilter(grants);
+    if (incomplete) {
+      setEditingScope(incomplete);
+      return;
+    }
+    setEditingScope(undefined);
+    setBusy(true);
+    setError(undefined);
+    setKeyConflict(false);
+    try {
+      const input = {
+        key: roleKey,
+        title:
+          !creating && initial && nameDraft === undefined
+            ? initial.title
+            : name.trim(),
+        grants,
+        ...(!creating && request.data?.data.revision
+          ? { expectedRevision: request.data.data.revision }
+          : {}),
+      };
+      if (creating) await authz.createPermissionSet(input);
+      else await authz.updatePermissionSet(key, input);
+      setDirty(false);
+      parent.reload();
+      toaster.show({ type: 'success', title: t('settings.saved', { name }) });
+      leave.allow();
+      void navigate(closeTo);
+    } catch (next) {
+      if (
+        creating &&
+        next instanceof Error &&
+        'status' in next &&
+        next.status === 409
+      ) {
+        setKeyConflict(true);
+        document.getElementById('role-key')?.focus();
+      } else setError(next);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const sections = catalog
+    ? configurePermissionScopes(
+        permissionSections(catalog, grants, text),
+        catalog,
+        grants,
+        (key, fallback) => t(key, { defaultValue: fallback ?? key }),
+        editingScope,
+        setEditingScope,
+        (id, value) => {
+          setGrantsDraft((current) => setScope(current ?? grants, id, value));
+          setDirty(true);
+        },
+        !allowed || busy,
+      )
+    : [];
+  return (
+    <RouteChildPage>
+      <PageContainer>
+        <BackButton to={closeTo}>{t('settings.roles')}</BackButton>
+        <PageHeader
+          title={t(creating ? 'settings.newRole' : 'settings.editRole')}
+          description={t('settings.rolesDescription')}
+          actions={
+            dirty ? (
+              <Badge variant='secondary'>{t('settings.unsaved')}</Badge>
+            ) : undefined
+          }
+        />
+        <SettingsError error={request.error} retry={request.reload} />
+        <SettingsError error={options.error} retry={options.reload} />
+        <SettingsError error={error} />
+        {error instanceof Error &&
+          'status' in error &&
+          error.status === 409 && (
+            <Button variant='outline' onClick={() => setReloadConfirm(true)}>
+              {t('settings.reload')}
+            </Button>
+          )}
+        {(request.loading && !creating) || options.loading ? (
+          <SettingsLoading />
+        ) : (
+          !request.error &&
+          !options.error && (
+            <form
+              onSubmit={(event) => void save(event)}
+              noValidate
+              className='flex flex-col gap-6'
+            >
+              <div className='grid gap-4 sm:grid-cols-2'>
+                <div className='flex flex-col gap-2'>
+                  <Label htmlFor='role-key'>{t('settings.key')} *</Label>
+                  <Input
+                    id='role-key'
+                    required
+                    value={roleKey}
+                    disabled={!creating || !allowed || busy}
+                    aria-invalid={keyConflict || (submitted && !roleKey.trim())}
+                    onChange={(event) => {
+                      setKeyConflict(false);
+                      setKeyDraft(event.target.value);
+                      setDirty(true);
+                    }}
+                  />
+                  {(keyConflict || (submitted && !roleKey.trim())) && (
+                    <p className='text-xs text-destructive'>
+                      {t(
+                        keyConflict
+                          ? 'settings.keyConflict'
+                          : 'settings.required',
+                      )}
+                    </p>
+                  )}
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <Label htmlFor='role-name'>{t('settings.roleName')} *</Label>
+                  <Input
+                    id='role-name'
+                    required
+                    value={name}
+                    disabled={!allowed || busy}
+                    aria-invalid={submitted && !name.trim()}
+                    onChange={(event) => {
+                      setNameDraft(event.target.value);
+                      setDirty(true);
+                    }}
+                  />
+                  {submitted && !name.trim() && (
+                    <p className='text-xs text-destructive'>
+                      {t('settings.required')}
+                    </p>
+                  )}
+                </div>
+              </div>
+              {request.data?.data.protection && (
+                <p className='text-sm text-muted-foreground'>
+                  {t('settings.protectedHint')}
+                </p>
+              )}
+              <PermissionEditor
+                sections={sections}
+                readOnly={!allowed || busy}
+                labels={{
+                  selectAll: t('settings.selectAllPermissions'),
+                  selectVisible: (name) =>
+                    t('settings.selectVisiblePermissions', { name }),
+                  levelFor: (name) => t('settings.levelFor', { name }),
+                  search: t('settings.permissionSearch'),
+                  enabledOnly: t('settings.enabledOnly'),
+                  clear: t('settings.clear'),
+                  empty: t('settings.noPermissions'),
+                  noResults: t('settings.noResults'),
+                  navigation: t('settings.permissionCategories'),
+                  summary: (enabled, total) =>
+                    t('settings.permissionSummary', { enabled, total }),
+                }}
+                onEnabledChange={(id, enabled) => {
+                  if (!catalog) return;
+                  setGrantsDraft((current) =>
+                    setPermissions(current ?? grants, catalog, [
+                      { id, enabled },
+                    ]),
+                  );
+                  setDirty(true);
+                }}
+                onEnabledBatchChange={(changes) => {
+                  if (!catalog) return;
+                  setGrantsDraft((current) =>
+                    setPermissions(current ?? grants, catalog, changes),
+                  );
+                  setDirty(true);
+                }}
+                onLevelChange={(id, value) => {
+                  if (value === 'customFilter') {
+                    setEditingScope(id);
+                    return;
+                  }
+                  setGrantsDraft((current) =>
+                    setScope(current ?? grants, id, value),
+                  );
+                  setDirty(true);
+                }}
+              />
+              <div className='sticky bottom-0 flex justify-end gap-2 border-t bg-background py-4'>
+                <Button
+                  variant='outline'
+                  disabled={busy}
+                  onClick={() => void navigate(closeTo)}
+                >
+                  {t('settings.cancel')}
+                </Button>
+                {allowed && (
+                  <Button type='submit' disabled={busy || !dirty}>
+                    {t(busy ? 'settings.saving' : 'settings.save')}
+                  </Button>
+                )}
+              </div>
+            </form>
+          )
+        )}
+        {leave.dialog}
+        <ConfirmAction
+          open={reloadConfirm}
+          title={t('settings.discardTitle')}
+          description={t('settings.discardHint')}
+          busy={false}
+          onCancel={() => setReloadConfirm(false)}
+          onConfirm={() => {
+            setNameDraft(undefined);
+            setKeyDraft(undefined);
+            setGrantsDraft(undefined);
+            setDirty(false);
+            setError(undefined);
+            setReloadConfirm(false);
+            request.reload();
+          }}
+        />
+      </PageContainer>
+    </RouteChildPage>
+  );
+}
+
+export default function RoleForm(): ReactElement {
+  const { key } = useParams();
+  return <RoleEditor key={key ?? '$new'} />;
+}