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

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

@@ -0,0 +1,426 @@
+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 type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+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,
+  type CatalogResource,
+} 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: CatalogResource[] = [];
+    const collect = (routes: readonly AppClientRegisteredRoute[]) => {
+      for (const route of routes) {
+        const pageTitle = route.navigation?.title ?? route.breadcrumb?.title;
+        if (
+          route.componentLoader &&
+          typeof route.authz === 'object' &&
+          route.authz.resource.type === 'page'
+        )
+          pages.push({
+            type: 'page',
+            id: route.authz.resource.id,
+            title: pageTitle
+              ? { key: pageTitle, ns: route.packageName }
+              : route.id,
+            actions: [
+              {
+                name: 'access',
+                title: { key: 'settings.access' },
+              },
+            ],
+          });
+        collect(route.children ?? []);
+      }
+    };
+    collect(app.runtime.routes);
+    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]);
+  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'} />;
+}

package/client/pages/settings/roles.tsx

@@ -0,0 +1,163 @@
+import { useSettingsData, useRolePermission } from './hooks.js';
+import { useTranslation } from '@nocobase/i18n/client';
+import type {
+  PermissionSet,
+  LocalizedText,
+} from '@nocobase/app-plugin-authorization/client';
+import { type ReactElement } from 'react';
+import { Link, Outlet, useLocation, useSearchParams } from 'react-router';
+import { ShieldCheckIcon, PlusIcon } from 'lucide-react';
+import { PageContainer } from '#components/page-container';
+import { PageHeader } from '#components/page-header';
+import { Input } from '#components/ui/input';
+import { Button } from '#components/ui/button';
+import { Badge } from '#components/ui/badge';
+import {
+  Empty,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+} from '#components/ui/empty';
+import { SettingsError, SettingsLoading } from './shared.js';
+
+export default function RolesPage(): ReactElement {
+  const { t, i18n } = useTranslation();
+  const [params, setParams] = useSearchParams();
+  const location = useLocation();
+  const search = params.get('q') ?? '';
+  const request = useSettingsData<{ data: readonly PermissionSet[] }>(
+    'authorization/permissionSets',
+  );
+  const canCreate = useRolePermission('create');
+  const text = (value: LocalizedText): string =>
+    typeof value === 'string'
+      ? value
+      : t(value.key, {
+          ns: value.ns,
+          defaultValue: value.defaultValue ?? value.key,
+        });
+  const rows = (request.data?.data ?? [])
+    .filter((role) =>
+      text(role.title ?? role.key)
+        .toLocaleLowerCase()
+        .includes(search.toLocaleLowerCase()),
+    )
+    .sort((a, b) =>
+      text(a.title ?? a.key).localeCompare(
+        text(b.title ?? b.key),
+        i18n.language,
+      ),
+    );
+  const create = canCreate ? (
+    <Button
+      nativeButton={false}
+      render={<Link to={{ pathname: 'create', search: location.search }} />}
+    >
+      <PlusIcon />
+      {t('settings.newRole')}
+    </Button>
+  ) : null;
+  return (
+    <>
+      <PageContainer>
+        <PageHeader
+          title={t('settings.roles')}
+          description={t('settings.rolesDescription')}
+          actions={rows.length || search ? create : undefined}
+        />
+        <div className='flex items-center gap-3'>
+          <Input
+            className='sm:max-w-xs'
+            value={search}
+            placeholder={t('settings.roleSearch')}
+            aria-label={t('settings.roleSearch')}
+            onChange={(event) => {
+              setParams(event.target.value ? { q: event.target.value } : {}, {
+                replace: true,
+              });
+            }}
+          />
+          {search && (
+            <Button
+              variant='ghost'
+              onClick={() => {
+                setParams({});
+              }}
+            >
+              {t('settings.clear')}
+            </Button>
+          )}
+        </div>
+        <SettingsError error={request.error} retry={request.reload} />
+        {request.loading && !request.data ? (
+          <SettingsLoading />
+        ) : (
+          !request.error &&
+          (rows.length ? (
+            <div className='divide-y overflow-hidden rounded-xl border bg-card'>
+              {rows.map((role) => (
+                <Link
+                  key={role.key}
+                  to={{
+                    pathname: `${encodeURIComponent(role.key)}/edit`,
+                    search: location.search,
+                  }}
+                  className='flex items-center justify-between gap-4 p-4 transition-colors hover:bg-muted/30 focus-visible:ring-2 focus-visible:ring-ring'
+                >
+                  <div className='flex min-w-0 items-center gap-3'>
+                    <div className='rounded-lg bg-primary/10 p-2 text-primary'>
+                      <ShieldCheckIcon className='size-4' />
+                    </div>
+                    <div className='min-w-0'>
+                      <p className='font-medium'>
+                        {text(role.title ?? role.key)}
+                      </p>
+                      <p className='text-xs text-muted-foreground'>
+                        {role.key}
+                      </p>
+                    </div>
+                  </div>
+                  <Badge variant='secondary'>
+                    {t(
+                      role.protection
+                        ? 'settings.protected'
+                        : 'settings.custom',
+                    )}
+                  </Badge>
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <Empty className='min-h-48 border border-dashed'>
+              <EmptyMedia variant='icon'>
+                <ShieldCheckIcon />
+              </EmptyMedia>
+              <EmptyTitle>
+                {t(search ? 'settings.noResults' : 'settings.noRoles')}
+              </EmptyTitle>
+              <EmptyDescription>
+                {t(search ? 'settings.clearHint' : 'settings.rolesDescription')}
+              </EmptyDescription>
+              <EmptyContent>
+                {search ? (
+                  <Button
+                    variant='outline'
+                    onClick={() => {
+                      setParams({});
+                    }}
+                  >
+                    {t('settings.clear')}
+                  </Button>
+                ) : (
+                  create
+                )}
+              </EmptyContent>
+            </Empty>
+          ))
+        )}
+      </PageContainer>
+      <Outlet context={{ reload: request.reload }} />
+    </>
+  );
+}

package/client/pages/settings/routes.ts

@@ -0,0 +1,79 @@
+import { Settings, Users, ShieldCheck } from 'lucide-react';
+import {
+  defineAppRoutes,
+  type AppClientRouteContribution,
+} from '@nocobase/app-client/plugins';
+
+/** Register this contribution as business capabilities are developed; keep a bare Home-only application free of settings. */
+const systemSettingsRoutes: AppClientRouteContribution = defineAppRoutes([
+  {
+    name: 'settings',
+    path: '/settings',
+    navigation: { title: 'settings.title', icon: Settings, order: 100 },
+    children: [
+      {
+        name: 'settingsUsers',
+        path: '/users',
+        auth: 'required',
+        authz: { resource: { type: 'user', id: '*' }, action: 'read' },
+        navigation: { title: 'settings.users', icon: Users },
+        breadcrumb: { title: 'settings.users' },
+        componentLoader: () => import('./users.js'),
+        children: [
+          {
+            name: 'settingsUserCreate',
+            path: 'create',
+            authz: { resource: { type: 'user', id: '*' }, action: 'create' },
+            componentLoader: () => import('./user-form.js'),
+          },
+          {
+            name: 'settingsUser',
+            path: ':userId',
+            componentLoader: () => import('./user-detail.js'),
+            children: [
+              {
+                name: 'settingsUserEdit',
+                path: 'edit',
+                componentLoader: () => import('./user-form.js'),
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: 'settingsRoles',
+        path: '/roles',
+        auth: 'required',
+        authz: {
+          resource: { type: 'settings', id: 'authorization.permission-sets' },
+          action: 'read',
+        },
+        navigation: { title: 'settings.roles', icon: ShieldCheck },
+        breadcrumb: { title: 'settings.roles' },
+        componentLoader: () => import('./roles.js'),
+        children: [
+          {
+            name: 'settingsRoleCreate',
+            path: 'create',
+            authz: {
+              resource: {
+                type: 'settings',
+                id: 'authorization.permission-sets',
+              },
+              action: 'create',
+            },
+            breadcrumb: { title: 'settings.newRole' },
+            componentLoader: () => import('./role-form.js'),
+          },
+          {
+            name: 'settingsRoleEdit',
+            path: ':key/edit',
+            breadcrumb: { title: 'settings.editRole' },
+            componentLoader: () => import('./role-form.js'),
+          },
+        ],
+      },
+    ],
+  },
+]);
+export default systemSettingsRoutes;