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

package/client/pages/settings/hooks.tsx

@@ -0,0 +1,137 @@
+import {
+  ApiClientError,
+  useApiClient,
+  useNavigationGuard,
+} from '@nocobase/app-client';
+import { useCan } from '@nocobase/app-plugin-authorization/client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLocation } from 'react-router';
+import { ConfirmAction } from './shared.js';
+
+export function useSettingsData<T>(path: string, keepPreviousData = false) {
+  const api = useApiClient();
+  const [revision, setRevision] = useState(0);
+  const [result, setResult] = useState<{
+    path: string;
+    revision: number;
+    data?: T;
+    error?: unknown;
+    loading: boolean;
+  }>({ path, revision: -1, loading: true });
+  useEffect(() => {
+    let active = true;
+    void api.request<T>({ path }).then(
+      (data) => {
+        if (active) setResult({ path, revision, data, loading: false });
+      },
+      (error: unknown) => {
+        if (active)
+          setResult((old) => ({
+            ...(old.path === path &&
+            !(
+              error instanceof ApiClientError &&
+              [401, 403, 404].includes(error.status)
+            )
+              ? old
+              : {}),
+            path,
+            revision,
+            error,
+            loading: false,
+          }));
+      },
+    );
+    return () => {
+      active = false;
+    };
+  }, [api, path, revision]);
+  return {
+    ...(result.path === path || keepPreviousData
+      ? result
+      : { path, loading: true, data: undefined, error: undefined }),
+    loading: result.path !== path || result.revision !== revision,
+    error:
+      result.path === path && result.revision === revision
+        ? result.error
+        : undefined,
+    reload: useCallback(() => setRevision((value) => value + 1), []),
+    replaceData: useCallback(
+      (data: T) => setResult({ path, revision, data, loading: false }),
+      [path, revision],
+    ),
+  };
+}
+
+export function useUserPermission(action: string, id = '*') {
+  return useCan({ resource: { type: 'user', id }, action }).can;
+}
+export function useRolePermission(action: string) {
+  return useCan({
+    resource: { type: 'settings', id: 'authorization.permission-sets' },
+    action,
+  }).can;
+}
+/** The same decision covers overlay close, sidebar links, browser history and refresh. */
+export function useSettingsLeave(
+  dirty: boolean,
+  busy: boolean,
+  onDiscard?: () => void,
+) {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const allowedRef = useRef(false);
+  useEffect(() => {
+    allowedRef.current = false;
+  }, [location.key]);
+  const pendingRef = useRef<
+    { promise: Promise<boolean>; resolve: (value: boolean) => void } | undefined
+  >(undefined);
+  const [open, setOpen] = useState(false);
+  const guard = () => {
+    if (allowedRef.current) return true;
+    if (busy) return false;
+    if (!dirty) return true;
+    if (pendingRef.current) return pendingRef.current.promise;
+    let resolve!: (value: boolean) => void;
+    const promise = new Promise<boolean>((done) => {
+      resolve = done;
+    });
+    pendingRef.current = { promise, resolve };
+    setOpen(true);
+    return promise;
+  };
+  useNavigationGuard(guard);
+  useEffect(() => {
+    if (!dirty) return;
+    const handler = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [dirty]);
+  const decide = (value: boolean) => {
+    if (value) onDiscard?.();
+    allowedRef.current = value;
+    pendingRef.current?.resolve(value);
+    pendingRef.current = undefined;
+    setOpen(false);
+  };
+  return {
+    guard,
+    allow: () => {
+      allowedRef.current = true;
+    },
+    dialog: (
+      <ConfirmAction
+        open={open}
+        title={t('settings.discardTitle')}
+        description={t('settings.discardHint')}
+        busy={false}
+        onCancel={() => decide(false)}
+        onConfirm={() => decide(true)}
+      />
+    ),
+  };
+}

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

@@ -0,0 +1,119 @@
+import type { PermissionEditorSection } from '#components/permission-editor';
+import {
+  PermissionFilter,
+  type PermissionFilterLabels,
+} from '#components/permission-filter';
+import type {
+  PermissionGrant,
+  AuthorizationOptionsResponse,
+} from '@nocobase/app-plugin-authorization/client';
+import { getScopeSelection } from './permissions-model.js';
+
+export function configurePermissionScopes(
+  sections: readonly PermissionEditorSection[],
+  catalog: AuthorizationOptionsResponse,
+  grants: readonly PermissionGrant[],
+  text: (key: string, fallback?: string) => string,
+  editing: string | undefined,
+  setEditing: (id: string | undefined) => void,
+  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 resources = catalog.sections.flatMap((section) =>
+    section.subsections.flatMap((sub) => sub.resources),
+  );
+  return sections.map((section) => ({
+    ...section,
+    groups: section.groups.map((group) => ({
+      ...group,
+      rows: group.rows.map((row) => ({
+        ...row,
+        scopes:
+          row.scopes?.map((scope) => {
+            if (scope.level !== 'customFilter' && editing !== scope.id)
+              return scope;
+            const [type, resourceId, action, key] = JSON.parse(
+              scope.id,
+            ) as string[];
+            const definition = resources
+              .find(
+                (resource) =>
+                  resource.type === type && resource.id === resourceId,
+              )
+              ?.dataScopes?.[action ?? '']?.find((item) => item.key === key);
+            const value = getScopeSelection(grants, scope.id);
+            const params: unknown =
+              value && typeof value === 'object'
+                ? Reflect.get(value, 'params')
+                : undefined;
+            const filter: unknown =
+              params && typeof params === 'object'
+                ? Reflect.get(params, 'filter')
+                : undefined;
+            return {
+              ...scope,
+              configuration: (
+                <PermissionFilter
+                  open={editing === scope.id}
+                  onOpenChange={(open) =>
+                    setEditing(open ? scope.id : undefined)
+                  }
+                  value={filter}
+                  fields={(definition?.fields ?? []).map((field) => ({
+                    value: field,
+                    label: text(`settings.permissionFields.${field}`, field),
+                  }))}
+                  labels={labels}
+                  disabled={disabled}
+                  onApply={(filter) =>
+                    onApply(scope.id, {
+                      type: 'recordAccess',
+                      key: 'customFilter',
+                      params: { filter },
+                    })
+                  }
+                />
+              ),
+            };
+          }) ?? [],
+      })),
+    })),
+  }));
+}

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;
+}