@nocobase/app-template-default 1.0.0-beta.83 → 1.0.0-beta.84

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

@@ -126,68 +126,64 @@ export function permissionSections(
               actionKey: action.name,
               enabled: Boolean(granted),
             };
-            // Scope selectors belong to the action and do not inflate permission counts.
+            // Keep scope metadata stable for layout and search; only enabled actions render controls.
             return {
               ...row,
-              scopes: granted
-                ? (resource.dataScopes?.[action.name] ?? [])
-                    .filter((scope) =>
-                      showScope(resource, action.name, scope.key),
-                    )
-                    .map((scope) => {
-                      const value = scopeSelectionKey(
-                        granted.policy?.scopes &&
-                          typeof granted.policy.scopes === 'object'
-                          ? Reflect.get(granted.policy.scopes, scope.key)
-                          : undefined,
-                      );
-                      const preserved =
-                        value !== '' && !scope.recordAccess.includes(value);
-                      return {
-                        id: JSON.stringify([
-                          resource.type,
-                          resource.id,
-                          action.name,
-                          scope.key,
-                        ]),
+              scopes: (resource.dataScopes?.[action.name] ?? [])
+                .filter((scope) => showScope(resource, action.name, scope.key))
+                .map((scope) => {
+                  const value = scopeSelectionKey(
+                    granted?.policy?.scopes &&
+                      typeof granted.policy.scopes === 'object'
+                      ? Reflect.get(granted.policy.scopes, scope.key)
+                      : undefined,
+                  );
+                  const preserved =
+                    value !== '' && !scope.recordAccess.includes(value);
+                  return {
+                    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: [
+                      ...(preserved
+                        ? [
+                            {
+                              value,
+                              label: text({
+                                key: 'settings.preservedRecordScope',
+                              }),
+                            },
+                          ]
+                        : []),
+                      {
+                        value: '',
+                        label: text({ key: 'settings.noRecordScope' }),
+                      },
+                      ...scope.recordAccess.map((key) => ({
+                        value: key,
                         label: text(
-                          typeof scope.title === 'string' &&
-                            scope.title === scope.collection
-                            ? { key: 'settings.recordScope' }
-                            : scope.title,
+                          catalog.recordAccess.find(
+                            (entry) => entry.key === key,
+                          )?.title ?? key,
                         ),
-                        levels: [
-                          ...(preserved
-                            ? [
-                                {
-                                  value,
-                                  label: text({
-                                    key: 'settings.preservedRecordScope',
-                                  }),
-                                },
-                              ]
-                            : []),
-                          {
-                            value: '',
-                            label: text({ key: 'settings.noRecordScope' }),
-                          },
-                          ...scope.recordAccess.map((key) => ({
-                            value: key,
-                            label: text(
-                              catalog.recordAccess.find(
-                                (entry) => entry.key === key,
-                              )?.title ?? key,
-                            ),
-                          })),
-                        ],
-                        level: value,
-                        hint:
-                          value === ''
-                            ? text({ key: 'settings.noAdditionalScopeHint' })
-                            : undefined,
-                      };
-                    })
-                : [],
+                      })),
+                    ],
+                    level: value,
+                    hint:
+                      value === ''
+                        ? text({ key: 'settings.noAdditionalScopeHint' })
+                        : undefined,
+                  };
+                }),
             };
           }),
         })),

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

@@ -1,3 +1,6 @@
+import { FeedbackForm } from '#components/feedback-form';
+import { useAuthentication } from '@nocobase/app-plugin-authentication/client';
+import { useSubmission } from '@nocobase/app-client';
 import {
   useSettingsLeave,
   useSettingsData,
@@ -87,7 +90,12 @@ function RoleEditor(): ReactElement {
   const [grantsDraft, setGrantsDraft] = useState<readonly PermissionGrant[]>();
   const [dirty, setDirty] = useState(false);
   const [editingScope, setEditingScope] = useState<string>();
-  const [busy, setBusy] = useState(false);
+  const { session } = useAuthentication();
+  const submission = useSubmission({
+    scope: `${session?.user.id}:settings:role:${key}`,
+  });
+  const [requestBusy, setRequestBusy] = useState(false);
+  const busy = requestBusy || submission.submitting;
   const leave = useSettingsLeave(dirty, busy);
   const [error, setError] = useState<unknown>();
 
@@ -127,57 +135,67 @@ function RoleEditor(): ReactElement {
     pathname: useResolvedPath('..').pathname,
     search: location.search,
   };
-  const save = async (event: React.FormEvent<HTMLFormElement>) => {
+  const originalRevisionRef = useRef<string | undefined>(undefined);
+  const save = (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, { replace: true });
-    } 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 form = event.currentTarget;
+    return (async () => {
+      event.preventDefault();
+      if (options.error || !catalog || (!creating && request.error)) return;
+      setSubmitted(true);
+      if (!name.trim() || !roleKey.trim()) {
+        form.querySelector<HTMLInputElement>('input:invalid')?.focus();
+        return;
+      }
+      const incomplete = unconfiguredFilter(grants);
+      if (incomplete) {
+        setEditingScope(incomplete);
+        return;
+      }
+      setEditingScope(undefined);
+      setRequestBusy(true);
+      setError(undefined);
+      setKeyConflict(false);
+      try {
+        originalRevisionRef.current ??= request.data?.data.revision;
+        const input = {
+          key: roleKey,
+          title:
+            !creating && initial && nameDraft === undefined
+              ? initial.title
+              : name.trim(),
+          grants,
+          ...(!creating && request.data?.data.revision
+            ? { expectedRevision: originalRevisionRef.current }
+            : {}),
+        };
+        const saved = await submission.run(
+          { key, creating, input },
+          (idempotencyKey) =>
+            creating
+              ? authz.createPermissionSet(input, idempotencyKey)
+              : authz.updatePermissionSet(key, input, idempotencyKey),
+        );
+        if (!saved) return;
+        setDirty(false);
+        parent.reload();
+        toaster.show({ type: 'success', title: t('settings.saved', { name }) });
+        leave.allow();
+        void navigate(closeTo, { replace: true });
+      } catch (next) {
+        if (
+          creating &&
+          next instanceof Error &&
+          'status' in next &&
+          next.status === 409
+        ) {
+          setKeyConflict(true);
+          document.getElementById('role-key')?.focus();
+        } else setError(next);
+      } finally {
+        setRequestBusy(false);
+      }
+    })();
   };
   const sections = catalog
     ? configurePermissionScopes(
@@ -215,7 +233,6 @@ function RoleEditor(): ReactElement {
         />
         <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 && (
@@ -228,7 +245,10 @@ function RoleEditor(): ReactElement {
         ) : (
           !request.error &&
           !options.error && (
-            <form
+            <FeedbackForm
+              submitting={busy}
+              error={error}
+              errorContent={<SettingsError error={error} inline />}
               onSubmit={(event) => void save(event)}
               noValidate
               className='flex flex-col gap-6'
@@ -238,10 +258,16 @@ function RoleEditor(): ReactElement {
                   <Label htmlFor='role-key'>{t('settings.key')} *</Label>
                   <Input
                     id='role-key'
+                    name='key'
                     required
                     value={roleKey}
                     disabled={!creating || !allowed || busy}
                     aria-invalid={keyConflict || (submitted && !roleKey.trim())}
+                    aria-errormessage={
+                      keyConflict || (submitted && !roleKey.trim())
+                        ? 'role-key-error'
+                        : undefined
+                    }
                     onChange={(event) => {
                       setKeyConflict(false);
                       setKeyDraft(event.target.value);
@@ -249,7 +275,7 @@ function RoleEditor(): ReactElement {
                     }}
                   />
                   {(keyConflict || (submitted && !roleKey.trim())) && (
-                    <p className='text-xs text-destructive'>
+                    <p id='role-key-error' className='text-xs text-destructive'>
                       {t(
                         keyConflict
                           ? 'settings.keyConflict'
@@ -262,17 +288,24 @@ function RoleEditor(): ReactElement {
                   <Label htmlFor='role-name'>{t('settings.roleName')} *</Label>
                   <Input
                     id='role-name'
+                    name='title'
                     required
                     value={name}
                     disabled={!allowed || busy}
                     aria-invalid={submitted && !name.trim()}
+                    aria-errormessage={
+                      submitted && !name.trim() ? 'role-name-error' : undefined
+                    }
                     onChange={(event) => {
                       setNameDraft(event.target.value);
                       setDirty(true);
                     }}
                   />
                   {submitted && !name.trim() && (
-                    <p className='text-xs text-destructive'>
+                    <p
+                      id='role-name-error'
+                      className='text-xs text-destructive'
+                    >
                       {t('settings.required')}
                     </p>
                   )}
@@ -296,6 +329,15 @@ function RoleEditor(): ReactElement {
                   levelFor: (name) => t('settings.levelFor', { name }),
                   search: t('settings.permissionSearch'),
                   enabledOnly: t('settings.enabledOnly'),
+                  granted: t('settings.permissionGranted'),
+                  ungranted: t('settings.permissionUngranted'),
+                  selectAll: t('settings.permissionAll'),
+                  authorizationStatus: t('settings.permissionStatus'),
+                  clearSearch: t('settings.permissionClearSearch'),
+                  collapseAll: t('settings.permissionCollapseAll'),
+                  expandAll: t('settings.permissionExpandAll'),
+                  summary: (enabled, total) =>
+                    t('settings.permissionSummary', { enabled, total }),
                   clear: t('settings.clear'),
                   empty: t('settings.noPermissions'),
                   emptyDescription: t('settings.permissionEmptyHint'),
@@ -342,7 +384,7 @@ function RoleEditor(): ReactElement {
                   </Button>
                 )}
               </div>
-            </form>
+            </FeedbackForm>
           )
         )}
         {leave.dialog}

package/client/pages/settings/roles.tsx

@@ -1,3 +1,4 @@
+import { useListLocation } from '#hooks/use-list-location';
 import { useSettingsData, useRolePermission } from './hooks.js';
 import { useTranslation } from '@nocobase/i18n/client';
 import type {
@@ -5,7 +6,7 @@ import type {
   LocalizedText,
 } from '@nocobase/app-plugin-authorization/client';
 import { type ReactElement } from 'react';
-import { Link, Outlet, useLocation, useSearchParams } from 'react-router';
+import { Link, Outlet, useLocation } from 'react-router';
 import { ShieldCheckIcon, PlusIcon } from 'lucide-react';
 import { PermissionManagementPage } from './permission-management-page.js';
 import { Input } from '#components/ui/input';
@@ -23,11 +24,12 @@ import { SettingsError, SettingsLoading } from './shared.js';
 
 export default function RolesPage(): ReactElement {
   const { t, i18n } = useTranslation();
-  const [params, setParams] = useSearchParams();
+  const { params, setParams, active } = useListLocation();
   const location = useLocation();
   const search = params.get('q') ?? '';
   const request = useSettingsData<{ data: readonly PermissionSet[] }>(
     'authorization/permissionSets',
+    { active },
   );
   const canCreate = useRolePermission('create');
   const text = (value: LocalizedText): string =>
@@ -50,6 +52,8 @@ export default function RolesPage(): ReactElement {
       ),
     );
   const tableState = useTableUrlState({
+    active,
+    revision: request.revision,
     sortColumns: ['title', 'key'],
     rowCount:
       request.data && !request.loading && !request.error
@@ -109,10 +113,14 @@ export default function RolesPage(): ReactElement {
             </Button>
           )}
         </div>
-        <SettingsError error={request.error} retry={request.reload} />
+        <SettingsError
+          error={tableState.error ?? request.error}
+          retry={request.reload}
+        />
         {request.loading && !request.data ? (
           <SettingsLoading />
         ) : (
+          !tableState.error &&
           !request.error &&
           (rows.length ? (
             <RoleList

package/client/pages/settings/shared.tsx

@@ -1,3 +1,4 @@
+import { ListRecoveryError } from '#hooks/use-table-url-state';
 import { ApiClientError } from '@nocobase/app-client';
 import { Link } from 'react-router';
 import { useTranslation } from '@nocobase/i18n/client';
@@ -18,9 +19,11 @@ import {
 export function SettingsError({
   error,
   retry,
+  inline = false,
 }: {
   readonly error: unknown;
   readonly retry?: () => void;
+  readonly inline?: boolean;
 }): ReactElement | null {
   const { t } = useTranslation();
   if (!error) return null;
@@ -28,40 +31,47 @@ export function SettingsError({
     typeof error === 'object' && error !== null
       ? Reflect.get(error, 'status')
       : undefined;
-  return (
+  const content = (
+    <>
+      {error instanceof ListRecoveryError
+        ? error.message
+        : t(
+            status === 400
+              ? 'settings.invalidRequest'
+              : status === 401
+                ? 'settings.sessionEnded'
+                : status === 403
+                  ? 'settings.denied'
+                  : status === 404
+                    ? 'settings.missing'
+                    : status === 409
+                      ? error instanceof ApiClientError &&
+                        error.reason === 'USER_IDENTITY_CONFLICT'
+                        ? 'settings.identityConflict'
+                        : 'settings.conflict'
+                      : 'settings.failed',
+          )}
+      {status === 401 && (
+        <Button
+          variant='outline'
+          nativeButton={false}
+          render={<Link to='/login' />}
+        >
+          {t('settings.signInAgain')}
+        </Button>
+      )}
+      {retry && ![400, 401, 403, 404, 409].includes(Number(status)) && (
+        <Button variant='outline' size='sm' onClick={retry}>
+          {t('settings.retry')}
+        </Button>
+      )}
+    </>
+  );
+  return inline ? (
+    content
+  ) : (
     <Alert variant='destructive'>
-      <AlertDescription>
-        {t(
-          status === 400
-            ? 'settings.invalidRequest'
-            : status === 401
-              ? 'settings.sessionEnded'
-              : status === 403
-                ? 'settings.denied'
-                : status === 404
-                  ? 'settings.missing'
-                  : status === 409
-                    ? error instanceof ApiClientError &&
-                      error.reason === 'USER_IDENTITY_CONFLICT'
-                      ? 'settings.identityConflict'
-                      : 'settings.conflict'
-                    : 'settings.failed',
-        )}
-        {status === 401 && (
-          <Button
-            variant='outline'
-            nativeButton={false}
-            render={<Link to='/login' />}
-          >
-            {t('settings.signInAgain')}
-          </Button>
-        )}
-        {retry && ![400, 401, 403, 404, 409].includes(Number(status)) && (
-          <Button variant='outline' size='sm' onClick={retry}>
-            {t('settings.retry')}
-          </Button>
-        )}
-      </AlertDescription>
+      <AlertDescription>{content}</AlertDescription>
     </Alert>
   );
 }

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

@@ -1,3 +1,6 @@
+import { FeedbackForm } from '#components/feedback-form';
+import { useAuthentication } from '@nocobase/app-plugin-authentication/client';
+import { useSubmission } from '@nocobase/app-client';
 import {
   useSettingsLeave,
   useSettingsData,
@@ -267,7 +270,12 @@ function UserEditor(): ReactElement {
   const [confirmRoles, setConfirmRoles] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
   const [dirty, setDirty] = useState(false);
-  const [busy, setBusy] = useState(false);
+  const { session } = useAuthentication();
+  const submission = useSubmission({
+    scope: `${session?.user.id}:settings:user:${userId}`,
+  });
+  const [requestBusy, setRequestBusy] = useState(false);
+  const busy = requestBusy || submission.submitting;
   const leave = useSettingsLeave(dirty, busy);
   const [error, setError] = useState<unknown>();
   const [serverErrors, setServerErrors] = useState<Record<string, string>>({});
@@ -332,34 +340,43 @@ function UserEditor(): ReactElement {
       setConfirmRoles(true);
       return;
     }
-    setBusy(true);
+    setRequestBusy(true);
     setError(undefined);
     setServerErrors({});
     try {
-      let updated: ManagedUser;
-      if (creating)
-        updated = await client.create({
-          ...fields,
-          name: fields.name.trim(),
-          email: fields.email.trim(),
-          ...(fields.username.trim()
-            ? { username: fields.username.trim() }
-            : { username: undefined }),
-          roleScopes: roles,
-        });
-      else
-        updated = await client.update(userId, {
-          ...(canUpdate
-            ? {
-                name: fields.name.trim(),
-                email: fields.email.trim(),
-                username: fields.username.trim() || null,
-              }
-            : {}),
-          ...(canAssign && Object.keys(changedRoles).length
-            ? { roleScopes: changedRoles }
-            : {}),
-        });
+      const input = creating
+        ? {
+            ...fields,
+            name: fields.name.trim(),
+            email: fields.email.trim(),
+            ...(fields.username.trim()
+              ? { username: fields.username.trim() }
+              : { username: undefined }),
+            roleScopes: roles,
+          }
+        : {
+            ...(canUpdate
+              ? {
+                  name: fields.name.trim(),
+                  email: fields.email.trim(),
+                  username: fields.username.trim() || null,
+                }
+              : {}),
+            ...(canAssign && Object.keys(changedRoles).length
+              ? { roleScopes: changedRoles }
+              : {}),
+          };
+      const updated = await submission.run(
+        { userId, creating, input },
+        (idempotencyKey) =>
+          creating
+            ? client.create(
+                input as Parameters<typeof client.create>[0],
+                idempotencyKey,
+              )
+            : client.update(userId, input, idempotencyKey),
+      );
+      if (!updated) return;
       setDirty(false);
       parent.reload(updated);
       toaster.show({
@@ -395,7 +412,7 @@ function UserEditor(): ReactElement {
         setError(next);
       }
     } finally {
-      setBusy(false);
+      setRequestBusy(false);
     }
   };
   const allowed = creating ? canCreate && canAssign : canUpdate || canAssign;
@@ -453,12 +470,14 @@ function UserEditor(): ReactElement {
     <>
       <SettingsError error={data.error} retry={data.reload} />
       <SettingsError error={options.error} retry={options.reload} />
-      <SettingsError error={error} />
       {!creating && data.loading ? (
         <SettingsLoading />
       ) : (
         !data.error && (
-          <form
+          <FeedbackForm
+            submitting={busy}
+            error={error}
+            errorContent={<SettingsError error={error} inline />}
             id={formId}
             ref={formRef}
             onSubmit={(event) => {
@@ -510,6 +529,7 @@ function UserEditor(): ReactElement {
                 />
                 {fieldError(name) && (
                   <p
+                    data-feedback-field-error
                     id={`${formId}-${name}-error`}
                     className='text-xs text-destructive'
                   >
@@ -536,6 +556,7 @@ function UserEditor(): ReactElement {
                 />
                 {serverErrors[scope.key] && (
                   <p
+                    data-feedback-field-error
                     id={`${formId}-roles-${encodeURIComponent(scope.key)}-error`}
                     className='text-xs text-destructive'
                   >
@@ -544,7 +565,7 @@ function UserEditor(): ReactElement {
                 )}
               </div>
             ))}
-          </form>
+          </FeedbackForm>
         )
       )}
       {leave.dialog}