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

package/client/pages/settings/default-access-model.ts

@@ -0,0 +1,154 @@
+import type {
+  AuthorizationOptionsResponse,
+  LocalizedText,
+} from '@nocobase/app-plugin-authorization/client';
+import type { CatalogResource } from './permissions-model.js';
+
+export type ScopeSelection =
+  | { readonly type: 'all' }
+  | { readonly type: 'records'; readonly ids: readonly string[] }
+  | {
+      readonly type: 'recordAccess';
+      readonly key: string;
+      readonly params?: unknown;
+    };
+export interface DefaultAccessAction {
+  readonly action: string;
+  readonly scopeKey?: string;
+  readonly selection: ScopeSelection;
+}
+export interface DefaultAccessRule {
+  readonly key: string;
+  readonly resource: { readonly type: string; readonly id: string };
+  readonly actions: readonly DefaultAccessAction[];
+}
+export interface RuleScope {
+  readonly id: string;
+  readonly action: string;
+  readonly scopeKey?: string;
+  readonly title: LocalizedText;
+  readonly actionTitle: LocalizedText;
+  readonly collection: string;
+  readonly fields: readonly string[];
+  readonly recordAccess: readonly string[];
+}
+export const resourceKey = (resource: DefaultAccessRule['resource']): string =>
+  JSON.stringify([resource.type, resource.id]);
+export const actionKey = (
+  entry: Pick<DefaultAccessAction, 'action' | 'scopeKey'>,
+): string => JSON.stringify([entry.action, entry.scopeKey ?? null]);
+export function ruleResources(
+  catalog: AuthorizationOptionsResponse,
+): readonly CatalogResource[] {
+  const resources = catalog.sections
+    .flatMap((section) => section.subsections.flatMap((sub) => sub.resources))
+    .filter((resource) =>
+      Object.values(resource.dataScopes ?? {}).some((scopes) => scopes.length),
+    );
+  const seen = new Set<string>();
+  return [
+    ...resources,
+    ...catalog.collections.map((collection) => ({
+      type: 'database.collection',
+      id: collection.name,
+      title: collection.name,
+      actions: ['read', 'update', 'delete'].map((name) => ({
+        name,
+        title: {
+          key: `options.actions.${name}`,
+          ns: '@nocobase/app-plugin-authorization',
+        },
+      })),
+    })),
+  ].filter((resource) => {
+    const key = resourceKey(resource);
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+export function ruleScopes(
+  resource: CatalogResource | undefined,
+  catalog: AuthorizationOptionsResponse,
+): readonly RuleScope[] {
+  if (!resource) return [];
+  return resource.actions.flatMap<RuleScope>((action) =>
+    resource.type === 'database.collection'
+      ? [
+          {
+            id: actionKey({ action: action.name }),
+            action: action.name,
+            actionTitle: action.title,
+            title: resource.title,
+            collection: resource.id,
+            fields:
+              catalog.collections.find((entry) => entry.name === resource.id)
+                ?.fields ?? [],
+            recordAccess: catalog.recordAccess
+              .filter(
+                (entry) =>
+                  entry.collections.includes('*') ||
+                  entry.collections.includes(resource.id),
+              )
+              .map((entry) => entry.key),
+          },
+        ]
+      : (resource.dataScopes?.[action.name] ?? []).map((scope) => ({
+          id: actionKey({ action: action.name, scopeKey: scope.key }),
+          action: action.name,
+          scopeKey: scope.key,
+          actionTitle: action.title,
+          title: scope.title,
+          collection: scope.collection,
+          fields: scope.fields,
+          recordAccess: scope.recordAccess,
+        })),
+  );
+}
+export function replaceRuleScope(
+  rule: DefaultAccessRule,
+  scope: RuleScope,
+  selection: ScopeSelection | undefined,
+): DefaultAccessRule {
+  const existing = rule.actions.find((entry) => actionKey(entry) === scope.id);
+  if (JSON.stringify(existing?.selection) === JSON.stringify(selection))
+    return rule;
+  const replacement = selection
+    ? {
+        action: scope.action,
+        ...(scope.scopeKey === undefined ? {} : { scopeKey: scope.scopeKey }),
+        selection,
+      }
+    : undefined;
+  const actions = rule.actions.flatMap((entry) =>
+    actionKey(entry) === scope.id
+      ? replacement
+        ? [replacement]
+        : []
+      : [entry],
+  );
+  if (!existing && replacement) actions.push(replacement);
+  return { ...rule, actions };
+}
+/** Unknown catalog entries must not be silently rewritten by a whole-actions PATCH. */
+export function editableRule(
+  rule: DefaultAccessRule,
+  scopes: readonly RuleScope[],
+  catalog: AuthorizationOptionsResponse,
+): boolean {
+  return (
+    scopes.length > 0 &&
+    rule.actions.every((entry) => {
+      const scope = scopes.find((scope) => scope.id === actionKey(entry));
+      const selection = entry.selection;
+      return (
+        scope !== undefined &&
+        (selection.type !== 'recordAccess' ||
+          (scope.recordAccess.includes(selection.key) &&
+            catalog.recordAccess.some(
+              (preset) => preset.key === selection.key,
+            )))
+      );
+    })
+  );
+}

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}`)]),
+    ),
+  };
+}