@nocobase/app-template-default 1.0.0-beta.73 → 1.0.0-beta.75

package/client/pages/settings/default-access.tsx

@@ -0,0 +1,407 @@
+import { useApiClient, useToaster } from '@nocobase/app-client';
+import {
+  useCan,
+  type AuthorizationOptionsResponse,
+  type LocalizedText,
+} from '@nocobase/app-plugin-authorization/client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { useRef, useState, type ReactElement } from 'react';
+import { Link, Outlet, useLocation, useSearchParams } from 'react-router';
+import { ListFilterIcon, MoreHorizontalIcon, PlusIcon } from 'lucide-react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { Alert, AlertDescription } from '#components/ui/alert';
+import { PermissionManagementPage } from './permission-management-page.js';
+import { DataTable, DataTableColumnHeader } from '#components/data-table';
+import { Button } from '#components/ui/button';
+import { Input } from '#components/ui/input';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+import {
+  Empty,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from '#components/ui/empty';
+import { ConfirmAction, SettingsError, SettingsLoading } from './shared.js';
+import { useSettingsData } from './hooks.js';
+import {
+  actionKey,
+  resourceKey,
+  ruleResources,
+  ruleScopes,
+  type DefaultAccessRule,
+} from './default-access-model.js';
+
+export default function DefaultAccessPage(): ReactElement {
+  const { t, i18n } = useTranslation();
+  const api = useApiClient();
+  const toaster = useToaster();
+  const location = useLocation();
+  const [params, setParams] = useSearchParams();
+  const search = params.get('q') ?? '';
+  const searchRef = useRef<HTMLInputElement>(null);
+  const rules = useSettingsData<{ data: readonly DefaultAccessRule[] }>(
+    'authorization/defaultAccess',
+  );
+  const catalog = useSettingsData<{ data: AuthorizationOptionsResponse }>(
+    'authorization/defaultAccess/options',
+  );
+  const canCreate = useCan({
+    resource: { type: 'settings', id: 'authorization.default-access' },
+    action: 'create',
+  }).can;
+  const canDelete = useCan({
+    resource: { type: 'settings', id: 'authorization.default-access' },
+    action: 'delete',
+  }).can;
+  const [removing, setRemoving] = useState<DefaultAccessRule>();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<unknown>();
+  const [conflict, setConflict] = useState(false);
+  const text = (value: LocalizedText): string =>
+    typeof value === 'string'
+      ? value
+      : t(value.key, {
+          ns: value.ns,
+          defaultValue: value.defaultValue ?? value.key,
+        });
+  const resources = catalog.data ? ruleResources(catalog.data.data) : [];
+  const name = (rule: DefaultAccessRule): string =>
+    text(
+      resources.find(
+        (resource) => resourceKey(resource) === resourceKey(rule.resource),
+      )?.title ?? rule.resource.id,
+    );
+  const summary = (rule: DefaultAccessRule): string => {
+    const resource = resources.find(
+      (resource) => resourceKey(resource) === resourceKey(rule.resource),
+    );
+    const scopes = catalog.data ? ruleScopes(resource, catalog.data.data) : [];
+    return (
+      rule.actions
+        .map((entry) => {
+          const scope = scopes.find((scope) => scope.id === actionKey(entry));
+          const label =
+            entry.selection.type === 'all'
+              ? t('settings.defaultAccess.all')
+              : entry.selection.type === 'records'
+                ? t('settings.defaultAccess.records', {
+                    count: entry.selection.ids.length,
+                  })
+                : text(
+                    catalog.data?.data.recordAccess.find(
+                      (item) =>
+                        entry.selection.type === 'recordAccess' &&
+                        item.key === entry.selection.key,
+                    )?.title ?? entry.selection.key,
+                  );
+          return `${text(scope?.actionTitle ?? entry.action)}${scope ? ` · ${text(scope.title)}` : entry.scopeKey ? ` · ${entry.scopeKey}` : ''}: ${label}`;
+        })
+        .join('; ') || t('settings.defaultAccess.none')
+    );
+  };
+  const columns: ColumnDef<DefaultAccessRule>[] = [
+    {
+      id: 'resource',
+      accessorFn: name,
+      sortingFn: (a, b) =>
+        name(a.original).localeCompare(name(b.original), i18n.language),
+      header: ({ column }) => (
+        <DataTableColumnHeader
+          column={column}
+          title={t('settings.defaultAccess.resource')}
+        />
+      ),
+      cell: ({ row }) => (
+        <Link
+          className='text-foreground underline-offset-4 hover:underline'
+          to={{
+            pathname: `${encodeURIComponent(row.original.key)}/edit`,
+            search: location.search,
+          }}
+        >
+          {name(row.original)}
+        </Link>
+      ),
+    },
+    {
+      accessorKey: 'key',
+      header: t('settings.key'),
+      enableSorting: false,
+      cell: ({ row }) => (
+        <span
+          className='block max-w-48 truncate text-muted-foreground'
+          title={row.original.key}
+        >
+          {row.original.key}
+        </span>
+      ),
+    },
+    {
+      id: 'scopes',
+      header: t('settings.defaultAccess.scopes'),
+      enableSorting: false,
+      cell: ({ row }) => (
+        <span className='block max-w-96 truncate' title={summary(row.original)}>
+          {summary(row.original)}
+        </span>
+      ),
+    },
+    {
+      id: 'actions',
+      enableSorting: false,
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant='ghost'
+                size='icon-sm'
+                aria-label={t('settings.actionsFor', {
+                  name: name(row.original),
+                })}
+              >
+                <MoreHorizontalIcon />
+              </Button>
+            }
+          />
+          <DropdownMenuContent align='end' className='w-auto min-w-40'>
+            <DropdownMenuItem
+              render={
+                <Link
+                  to={{
+                    pathname: `${encodeURIComponent(row.original.key)}/edit`,
+                    search: location.search,
+                  }}
+                />
+              }
+            >
+              {t('settings.defaultAccess.open')}
+            </DropdownMenuItem>
+            {canDelete && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  variant='destructive'
+                  onClick={() => {
+                    setError(undefined);
+                    setRemoving(row.original);
+                  }}
+                >
+                  {t('settings.defaultAccess.delete')}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+  const rows = (rules.data?.data ?? [])
+    .filter((rule) =>
+      `${name(rule)} ${rule.key}`
+        .toLocaleLowerCase()
+        .includes(search.toLocaleLowerCase()),
+    )
+    .sort((a, b) => name(a).localeCompare(name(b), i18n.language));
+  const eligible = resources.some(
+    (resource) =>
+      !rules.data?.data.some(
+        (rule) => resourceKey(rule.resource) === resourceKey(resource),
+      ),
+  );
+  const create =
+    canCreate && rules.data && catalog.data ? (
+      eligible ? (
+        <Button
+          nativeButton={false}
+          render={<Link to={{ pathname: 'create', search: location.search }} />}
+        >
+          <PlusIcon />
+          {t('settings.defaultAccess.new')}
+        </Button>
+      ) : (
+        <div className='flex flex-wrap items-center gap-2'>
+          <span className='text-sm text-muted-foreground'>
+            {t('settings.defaultAccess.noResourcesShort')}
+          </span>
+          <Button disabled>
+            <PlusIcon />
+            {t('settings.defaultAccess.new')}
+          </Button>
+        </div>
+      )
+    ) : null;
+  const remove = async () => {
+    if (!removing || busy || !canDelete) return;
+    setBusy(true);
+    setError(undefined);
+    try {
+      const latest = await api.request<{ data: readonly DefaultAccessRule[] }>({
+        path: 'authorization/defaultAccess',
+      });
+      if (
+        JSON.stringify(
+          latest.data.find((rule) => rule.key === removing.key),
+        ) !== JSON.stringify(removing)
+      ) {
+        rules.reload();
+        setRemoving(undefined);
+        setConflict(true);
+        requestAnimationFrame(() => searchRef.current?.focus());
+        return;
+      }
+      await api.request({
+        path: `authorization/defaultAccess/${encodeURIComponent(removing.key)}`,
+        method: 'DELETE',
+      });
+      toaster.show({
+        type: 'success',
+        title: t('settings.defaultAccess.deleted', { name: name(removing) }),
+      });
+      rules.replaceData({
+        data: (rules.data?.data ?? []).filter(
+          (rule) => rule.key !== removing.key,
+        ),
+      });
+      setRemoving(undefined);
+      rules.reload();
+      requestAnimationFrame(() => searchRef.current?.focus());
+    } catch (next) {
+      setError(next);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <>
+      <PermissionManagementPage
+        tab='default-access'
+        actions={
+          rules.data && (rules.data.data.length || search) ? create : undefined
+        }
+      >
+        <div className='flex flex-wrap items-center gap-2'>
+          <Input
+            ref={searchRef}
+            className='sm:max-w-xs'
+            value={search}
+            placeholder={t('settings.defaultAccess.search')}
+            aria-label={t('settings.defaultAccess.search')}
+            onChange={(event) =>
+              setParams(event.target.value ? { q: event.target.value } : {}, {
+                replace: true,
+              })
+            }
+          />
+          {search && (
+            <Button variant='ghost' onClick={() => setParams({})}>
+              {t('settings.clear')}
+            </Button>
+          )}
+        </div>
+        {conflict && (
+          <Alert variant='destructive'>
+            <AlertDescription>
+              {t('settings.defaultAccess.deleteChanged')}
+            </AlertDescription>
+          </Alert>
+        )}
+        <SettingsError
+          error={rules.error || catalog.error || (!removing && error)}
+          retry={() => {
+            rules.reload();
+            catalog.reload();
+            setError(undefined);
+          }}
+        />
+        {(rules.loading && !rules.data) ||
+        (catalog.loading && !catalog.data) ? (
+          <SettingsLoading />
+        ) : (
+          !rules.error &&
+          !catalog.error &&
+          (rows.length ? (
+            <DataTable
+              columns={columns}
+              data={rows}
+              getRowId={(rule) => rule.key}
+              showSelectedCount={false}
+              pageSize={20}
+            />
+          ) : (
+            <Empty className='min-h-48 border border-dashed'>
+              <EmptyMedia variant='icon'>
+                <ListFilterIcon />
+              </EmptyMedia>
+              <EmptyTitle>
+                {t(
+                  search
+                    ? 'settings.noResults'
+                    : 'settings.defaultAccess.empty',
+                )}
+              </EmptyTitle>
+              <EmptyDescription>
+                {t(
+                  search
+                    ? 'settings.clearHint'
+                    : canCreate
+                      ? 'settings.defaultAccess.emptyHint'
+                      : 'settings.defaultAccess.readOnlyEmpty',
+                )}
+              </EmptyDescription>
+              <EmptyContent>
+                {search ? (
+                  <Button variant='outline' onClick={() => setParams({})}>
+                    {t('settings.clear')}
+                  </Button>
+                ) : (
+                  create
+                )}
+              </EmptyContent>
+            </Empty>
+          ))
+        )}
+        <ConfirmAction
+          error={<SettingsError error={error} />}
+          open={Boolean(removing)}
+          title={t('settings.defaultAccess.deleteTitle', {
+            name: removing ? name(removing) : '',
+          })}
+          description={t('settings.defaultAccess.deleteHint')}
+          confirmLabel={t('settings.defaultAccess.delete')}
+          busy={busy}
+          onCancel={() => {
+            setRemoving(undefined);
+            setError(undefined);
+          }}
+          onConfirm={() => {
+            void remove();
+          }}
+        />
+      </PermissionManagementPage>
+      <Outlet
+        context={{
+          reload: rules.reload,
+          saved: (updated: DefaultAccessRule) => {
+            rules.replaceData({
+              data: [
+                ...(rules.data?.data ?? []).filter(
+                  (rule) => rule.key !== updated.key,
+                ),
+                updated,
+              ],
+            });
+            rules.reload();
+          },
+        }}
+      />
+    </>
+  );
+}

package/client/pages/settings/permission-filters.tsx

@@ -19,43 +19,7 @@ export function configurePermissionScopes(
   onApply: (id: string, value: unknown) => void,
   disabled: boolean,
 ): readonly PermissionEditorSection[] {
-  const labels: PermissionFilterLabels = {
-    limit: text('settings.permissionFilter.limit'),
-    configure: text('settings.permissionFilter.configure'),
-    title: text('settings.permissionFilter.title'),
-    description: text('settings.permissionFilter.description'),
-    all: text('settings.permissionFilter.all'),
-    any: text('settings.permissionFilter.any'),
-    field: text('settings.permissionFilter.field'),
-    operator: text('settings.permissionFilter.operator'),
-    valueType: text('settings.permissionFilter.valueType'),
-    value: text('settings.permissionFilter.value'),
-    text: text('settings.permissionFilter.text'),
-    number: text('settings.permissionFilter.number'),
-    boolean: text('settings.permissionFilter.boolean'),
-    true: text('settings.permissionFilter.true'),
-    false: text('settings.permissionFilter.false'),
-    add: text('settings.permissionFilter.add'),
-    remove: text('settings.permissionFilter.remove'),
-    cancel: text('settings.permissionFilter.cancel'),
-    apply: text('settings.permissionFilter.apply'),
-    invalid: text('settings.permissionFilter.invalid'),
-    advanced: text('settings.permissionFilter.advanced'),
-    reconfigure: text('settings.permissionFilter.reconfigure'),
-    operators: Object.fromEntries(
-      [
-        '$eq',
-        '$ne',
-        '$includes',
-        '$gt',
-        '$gte',
-        '$lt',
-        '$lte',
-        '$empty',
-        '$notEmpty',
-      ].map((key) => [key, text(`settings.permissionFilter.operators.${key}`)]),
-    ),
-  };
+  const labels = permissionFilterLabels(text);
   const resources = catalog.sections.flatMap((section) =>
     section.subsections.flatMap((sub) => sub.resources),
   );
@@ -117,3 +81,45 @@ export function configurePermissionScopes(
     })),
   }));
 }
+
+export function permissionFilterLabels(
+  text: (key: string, fallback?: string) => string,
+): PermissionFilterLabels {
+  return {
+    limit: text('settings.permissionFilter.limit'),
+    configure: text('settings.permissionFilter.configure'),
+    title: text('settings.permissionFilter.title'),
+    description: text('settings.permissionFilter.description'),
+    all: text('settings.permissionFilter.all'),
+    any: text('settings.permissionFilter.any'),
+    field: text('settings.permissionFilter.field'),
+    operator: text('settings.permissionFilter.operator'),
+    valueType: text('settings.permissionFilter.valueType'),
+    value: text('settings.permissionFilter.value'),
+    text: text('settings.permissionFilter.text'),
+    number: text('settings.permissionFilter.number'),
+    boolean: text('settings.permissionFilter.boolean'),
+    true: text('settings.permissionFilter.true'),
+    false: text('settings.permissionFilter.false'),
+    add: text('settings.permissionFilter.add'),
+    remove: text('settings.permissionFilter.remove'),
+    cancel: text('settings.permissionFilter.cancel'),
+    apply: text('settings.permissionFilter.apply'),
+    invalid: text('settings.permissionFilter.invalid'),
+    advanced: text('settings.permissionFilter.advanced'),
+    reconfigure: text('settings.permissionFilter.reconfigure'),
+    operators: Object.fromEntries(
+      [
+        '$eq',
+        '$ne',
+        '$includes',
+        '$gt',
+        '$gte',
+        '$lt',
+        '$lte',
+        '$empty',
+        '$notEmpty',
+      ].map((key) => [key, text(`settings.permissionFilter.operators.${key}`)]),
+    ),
+  };
+}

package/client/pages/settings/permission-management-page.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useRef, type ReactElement, type ReactNode } from 'react';
+import { useNavigate, useResolvedPath, useLocation } from 'react-router';
+import { useCan } from '@nocobase/app-plugin-authorization/client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { PageContainer } from '#components/page-container';
+import { PageHeader } from '#components/page-header';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '#components/ui/tabs';
+
+export function PermissionManagementPage({
+  tab,
+  actions,
+  children,
+}: {
+  tab: 'roles' | 'default-access';
+  actions?: ReactNode;
+  children: ReactNode;
+}): ReactElement {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const activeRef = useRef<HTMLButtonElement>(null);
+  const focusedRef = useRef(false);
+  const current = useResolvedPath('.').pathname;
+  const prefix = current.slice(0, current.lastIndexOf('/'));
+  const roles = useCan({
+    resource: { type: 'settings', id: 'authorization.permission-sets' },
+    action: 'read',
+  }).can;
+  const defaults = useCan({
+    resource: { type: 'settings', id: 'authorization.default-access' },
+    action: 'read',
+  }).can;
+  // Route changes remount each existing page; keep keyboard focus on the selected tab.
+  useEffect(() => {
+    if (
+      !focusedRef.current &&
+      location.state &&
+      typeof location.state === 'object' &&
+      Reflect.get(location.state, 'permissionTabNavigation') === true &&
+      activeRef.current
+    ) {
+      const frame = requestAnimationFrame(() => {
+        if (activeRef.current) {
+          const selected = activeRef.current;
+          if (
+            !selected
+              .closest('[role="tablist"]')
+              ?.contains(selected.ownerDocument.activeElement)
+          )
+            selected.focus();
+          focusedRef.current = true;
+        }
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [location.state, roles, defaults]);
+  return (
+    <PageContainer>
+      <PageHeader
+        title={t('settings.permissionManagement')}
+        description={t(
+          tab === 'roles'
+            ? 'settings.rolesDescription'
+            : 'settings.defaultAccess.description',
+        )}
+        actions={actions}
+      />
+      <Tabs
+        className='gap-6'
+        value={tab}
+        onValueChange={(value) => {
+          if (value === 'roles' || value === 'default-access')
+            void navigate(`${prefix}/${value}`, {
+              state: { permissionTabNavigation: true },
+            });
+        }}
+      >
+        <TabsList
+          variant='line'
+          aria-label={t('settings.permissionManagement')}
+        >
+          {roles && (
+            <TabsTrigger
+              ref={tab === 'roles' ? activeRef : undefined}
+              value='roles'
+            >
+              {t('settings.roles')}
+            </TabsTrigger>
+          )}
+          {defaults && (
+            <TabsTrigger
+              ref={tab === 'default-access' ? activeRef : undefined}
+              value='default-access'
+            >
+              {t('settings.defaultAccess.title')}
+            </TabsTrigger>
+          )}
+        </TabsList>
+        <TabsContent value={tab} className='space-y-6'>
+          {children}
+        </TabsContent>
+      </Tabs>
+    </PageContainer>
+  );
+}

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

@@ -60,19 +60,43 @@ export function setPermission(
   return next.filter((item) => item.actions.length);
 }
 
+const sectionDescriptions: Readonly<Record<string, string>> = {
+  pages: 'pageAccessHint',
+  business: 'businessOperationsHint',
+  users: 'userAccountsHint',
+  administration: 'systemToolsHint',
+};
+
 export function permissionSections(
   catalog: AuthorizationOptionsResponse,
   grants: readonly PermissionGrant[],
   text: (value: LocalizedText) => string,
 ): readonly PermissionEditorSection[] {
+  const sharedActionHint = (resource: CatalogResource): string | undefined => {
+    const first = resource.actions[0]?.description;
+    if (!first) return undefined;
+    const hint = text(first);
+    return resource.actions.every(
+      (action) => action.description && text(action.description) === hint,
+    )
+      ? hint
+      : undefined;
+  };
   return catalog.sections
     .map((section) => ({
       id: section.name,
       title: text(section.title),
+      description: sectionDescriptions[section.name]
+        ? text({ key: `settings.${sectionDescriptions[section.name]}` })
+        : undefined,
       groups: section.subsections.flatMap((subsection) =>
         subsection.resources.map((resource) => ({
           id: JSON.stringify([subsection.name, resource.type, resource.id]),
           title: text(resource.title),
+          actionHint:
+            resource.actions.length > 1
+              ? sharedActionHint(resource)
+              : undefined,
           accessOnly:
             resource.type === 'page' &&
             resource.actions.length === 1 &&
@@ -89,6 +113,11 @@ export function permissionSections(
             const row = {
               id: permissionRowId(resource, action.name),
               label: text(action.title),
+              hint:
+                action.description &&
+                !(resource.actions.length > 1 && sharedActionHint(resource))
+                  ? text(action.description)
+                  : undefined,
               actionKey: action.name,
               enabled: Boolean(granted),
             };
@@ -143,6 +172,10 @@ export function permissionSections(
                         })),
                       ],
                       level: value,
+                      hint:
+                        value === ''
+                          ? text({ key: 'settings.noAdditionalScopeHint' })
+                          : undefined,
                     };
                   })
                 : [],
@@ -203,7 +236,10 @@ export function setPermissions(
     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,
+      (item) =>
+        item.type === type &&
+        item.id === resourceId &&
+        item.actions.some((entry) => entry.name === action),
     );
     if (
       !resource ||