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

package/client/hooks/use-list-data.ts

@@ -0,0 +1,76 @@
+import { ApiClientError, useApiClient } from '@nocobase/app-client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+/** A successful result belongs to one query and refresh generation only. */
+export function useListData<T>(
+  path: string,
+  options: boolean | { keepPreviousData?: boolean; active?: boolean } = false,
+) {
+  const { keepPreviousData = false, active = true } =
+    typeof options === 'boolean' ? { keepPreviousData: options } : options;
+  const api = useApiClient();
+  const [revision, setRevision] = useState(0);
+  const key = useMemo(
+    () => ({ path, revision, active }),
+    [path, revision, active],
+  );
+  const generationRef = useRef(0);
+  const controllerRef = useRef<AbortController | undefined>(undefined);
+  const [result, setResult] = useState<{
+    path: string;
+    key?: typeof key;
+    data?: T;
+    error?: unknown;
+  }>({ path });
+  useEffect(() => {
+    if (!active) return;
+    const request = new AbortController();
+    controllerRef.current = request;
+    const ticket = generationRef.current;
+    void api.request<T>({ path, signal: request.signal }).then(
+      (data) => {
+        if (!request.signal.aborted && ticket === generationRef.current)
+          setResult({ path, key, data });
+      },
+      (error: unknown) => {
+        if (request.signal.aborted || ticket !== generationRef.current) return;
+        setResult((old) => ({
+          ...(old.path === path &&
+          !(
+            error instanceof ApiClientError &&
+            [401, 403, 404].includes(error.status)
+          )
+            ? old
+            : {}),
+          path,
+          key,
+          error,
+        }));
+      },
+    );
+    return () => request.abort();
+  }, [api, path, key, active]);
+  const invalidate = useCallback(() => {
+    // Invalidate synchronously, before React commits the next request effect.
+    generationRef.current += 1;
+    controllerRef.current?.abort();
+  }, []);
+  return {
+    path: result.path,
+    data: result.path === path || keepPreviousData ? result.data : undefined,
+    loading: !active || result.path !== path || result.key !== key,
+    error: result.path === path ? result.error : undefined,
+    revision,
+    reload: useCallback(() => {
+      invalidate();
+      setRevision((value) => value + 1);
+    }, [invalidate]),
+    replaceData: useCallback(
+      (data: T) => {
+        invalidate();
+        setResult({ path, key, data });
+      },
+      [path, key, invalidate],
+    ),
+  };
+}

package/client/hooks/use-list-location.ts

@@ -0,0 +1,23 @@
+import {
+  useLocation,
+  useOutlet,
+  useResolvedPath,
+  useSearchParams,
+} from 'react-router';
+import { useRouteSearches } from '../routing/route-context.js';
+
+/** Covered lists keep their own query; returning activates a fresh read. */
+export function useListLocation() {
+  const location = useLocation();
+  const listPath = useResolvedPath('.').pathname;
+  const child = useOutlet();
+  const searches = useRouteSearches();
+  const [current, setParams] = useSearchParams();
+  const active =
+    (listPath === '/' && child === null) ||
+    location.pathname.replace(/\/$/u, '') === listPath.replace(/\/$/u, '');
+  const params = active
+    ? current
+    : new URLSearchParams(searches.get(listPath) ?? '');
+  return { params, setParams, active };
+}

package/client/hooks/use-list-tabs.ts

@@ -0,0 +1,42 @@
+import { useLocation, useResolvedPath } from 'react-router';
+import { useRouteSearches } from '../routing/route-context.js';
+
+export interface ListTab {
+  readonly path: string;
+  readonly label: string;
+  /** Tabs sharing a dataset may retain its filters, sorting and pagination. */
+  readonly dataset: string;
+}
+
+/** Tabs are routes; only a list's own parameters are discarded on a dataset change. */
+export function useListTabs({
+  tabs,
+  parameterKeys,
+  pending = false,
+}: {
+  tabs: readonly ListTab[];
+  parameterKeys: readonly string[];
+  pending?: boolean;
+}) {
+  const location = useLocation();
+  const parent = useResolvedPath('.').pathname.replace(/\/+$/u, '');
+  const searches = useRouteSearches();
+  const segment = location.pathname.slice(parent.length + 1).split('/')[0];
+  const active = tabs.find((tab) => tab.path === segment);
+  const destination = (tab: ListTab) => {
+    const params = new URLSearchParams(location.search);
+    if (!active || tab.dataset !== active.dataset) {
+      for (const key of parameterKeys) params.delete(key);
+    }
+    return { pathname: `${parent}/${tab.path}`, search: params.toString() };
+  };
+  const activePath = active ? `${parent}/${active.path}` : undefined;
+  return {
+    active,
+    source: activePath
+      ? { pathname: activePath, search: searches.get(activePath) ?? '' }
+      : undefined,
+    destination,
+    fallback: !pending && !active && tabs[0] ? destination(tabs[0]) : undefined,
+  };
+}

package/client/hooks/use-table-url-state.ts

@@ -1,50 +1,128 @@
-import { useEffect } from 'react';
-import { useSearchParams } from 'react-router';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from '@nocobase/i18n/client';
+import { useLocation, useSearchParams } from 'react-router';
 import type {
   OnChangeFn,
   PaginationState,
   SortingState,
 } from '@tanstack/react-table';
 
+/** A bounded recovery failed because concurrent writes kept moving the final page. */
+export class ListRecoveryError extends Error {}
+
 const sizes = [10, 20, 50, 100] as const;
 
+interface TableUrlOptions {
+  defaultPageSize?: number;
+  pageSizeOptions?: readonly number[];
+  sortColumns: readonly string[];
+  defaultSorting?: SortingState;
+  /** Match the existing endpoint contract; do not translate URLs on upgrade. */
+  sortFormat?: 'sort-order' | 'orderBy';
+  rowCount?: number;
+  active?: boolean;
+  revision?: number;
+}
+
+/** One parser for both the visible controls and the request. */
+export function readTableUrlState(
+  params: URLSearchParams,
+  {
+    defaultPageSize = 10,
+    pageSizeOptions = sizes,
+    sortColumns,
+    defaultSorting = [],
+    sortFormat = 'sort-order',
+  }: TableUrlOptions,
+) {
+  const page = Number(params.get('page'));
+  const size = Number(params.get('pageSize'));
+  const fallback = defaultSorting.filter((sort) =>
+    sortColumns.includes(sort.id),
+  );
+  const fields =
+    sortFormat === 'orderBy'
+      ? (params.get('orderBy') ?? '').split(',').map((part) => {
+          const [id, direction = 'asc', ...rest] = part.trim().split(/\s+/u);
+          return { id, direction: rest.length ? '' : direction };
+        })
+      : [
+          {
+            id: params.get('sort') ?? sortColumns[0],
+            direction: params.get('order'),
+          },
+        ];
+  const valid = fields.every(
+    ({ id, direction }) =>
+      id &&
+      sortColumns.includes(id) &&
+      (direction === 'asc' || direction === 'desc'),
+  );
+  const sortingState: SortingState = valid
+    ? fields
+        .filter(
+          (field, index) =>
+            fields.findIndex((other) => other.id === field.id) === index,
+        )
+        .map(({ id, direction }) => ({ id, desc: direction === 'desc' }))
+    : fallback;
+  return {
+    paginationState: {
+      pageIndex: Number.isSafeInteger(page) && page > 0 ? page - 1 : 0,
+      pageSize: pageSizeOptions.includes(size) ? size : defaultPageSize,
+    },
+    sortingState,
+  };
+}
+
 /** Keep list position shareable across overlays, refresh and browser history. */
 export function useTableUrlState({
   defaultPageSize = 10,
   pageSizeOptions = sizes,
   sortColumns,
   rowCount,
-}: {
-  defaultPageSize?: number;
-  pageSizeOptions?: readonly number[];
-  sortColumns: readonly string[];
-  rowCount?: number;
-}) {
+  active = true,
+  revision = 0,
+  defaultSorting = [],
+  sortFormat = 'sort-order',
+}: TableUrlOptions) {
   const [params, setParams] = useSearchParams();
-  const requestedPage = Number(params.get('page'));
-  const pageIndex =
-    Number.isSafeInteger(requestedPage) && requestedPage > 0
-      ? requestedPage - 1
-      : 0;
-  const requestedSize = Number(params.get('pageSize'));
-  const pageSize = pageSizeOptions.includes(requestedSize)
-    ? requestedSize
-    : defaultPageSize;
-  const paginationState = { pageIndex, pageSize };
-  const sort = params.get('sort') ?? sortColumns[0];
-  const order = params.get('order');
-  const sortingState: SortingState =
-    sort && sortColumns.includes(sort) && (order === 'asc' || order === 'desc')
-      ? [{ id: sort, desc: order === 'desc' }]
-      : [];
+  const { paginationState, sortingState } = readTableUrlState(params, {
+    defaultPageSize,
+    pageSizeOptions,
+    sortColumns,
+    defaultSorting,
+    sortFormat,
+  });
+  const { pageIndex, pageSize } = paginationState;
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
+  const contextParams = new URLSearchParams(params);
+  contextParams.delete('page');
+  const context = JSON.stringify([
+    pathname,
+    contextParams.toString(),
+    revision,
+  ]);
+  const correctionsRef = useRef({ context, attempts: 0, expectedPage: -1 });
+  const [blocked, setBlocked] = useState<string>();
   const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
     const next =
       typeof updater === 'function' ? updater(paginationState) : updater;
     setParams(
       (old) => {
         const result = new URLSearchParams(old);
-        result.set('page', String(next.pageIndex + 1));
-        result.set('pageSize', String(next.pageSize));
+        const size = pageSizeOptions.includes(next.pageSize)
+          ? next.pageSize
+          : defaultPageSize;
+        const index =
+          size !== pageSize ||
+          !Number.isSafeInteger(next.pageIndex) ||
+          next.pageIndex < 0
+            ? 0
+            : next.pageIndex;
+        result.set('page', String(index + 1));
+        result.set('pageSize', String(size));
         return result;
       },
       { replace: false },
@@ -57,7 +135,17 @@ export function useTableUrlState({
       (old) => {
         const result = new URLSearchParams(old);
         result.delete('page');
-        if (next[0] && sortColumns.includes(next[0].id)) {
+        if (sortFormat === 'orderBy') {
+          const valid = next.filter((sort) => sortColumns.includes(sort.id));
+          if (valid.length)
+            result.set(
+              'orderBy',
+              valid
+                .map((sort) => `${sort.id}${sort.desc ? ' desc' : ''}`)
+                .join(','),
+            );
+          else result.delete('orderBy');
+        } else if (next[0] && sortColumns.includes(next[0].id)) {
           result.set('sort', next[0].id);
           result.set('order', next[0].desc ? 'desc' : 'asc');
         } else {
@@ -71,9 +159,30 @@ export function useTableUrlState({
   };
   // Only pass a count for the current, successfully loaded query.
   useEffect(() => {
-    if (rowCount === undefined) return;
+    if (
+      !active ||
+      rowCount === undefined ||
+      !Number.isSafeInteger(rowCount) ||
+      rowCount < 0
+    )
+      return;
+    if (
+      correctionsRef.current.context !== context ||
+      (correctionsRef.current.expectedPage !== -1 &&
+        correctionsRef.current.expectedPage !== pageIndex)
+    )
+      correctionsRef.current = { context, attempts: 0, expectedPage: -1 };
     const lastPage = Math.max(0, Math.ceil(rowCount / pageSize) - 1);
-    if (pageIndex <= lastPage) return;
+    if (pageIndex <= lastPage) {
+      correctionsRef.current.attempts = 0;
+      return;
+    }
+    if (correctionsRef.current.attempts >= 2) {
+      setBlocked(`${context}:${pageIndex}`);
+      return;
+    }
+    correctionsRef.current.attempts += 1;
+    correctionsRef.current.expectedPage = lastPage;
     setParams(
       (old) => {
         const result = new URLSearchParams(old);
@@ -82,8 +191,12 @@ export function useTableUrlState({
       },
       { replace: true },
     );
-  }, [rowCount, pageSize, pageIndex, setParams]);
+  }, [rowCount, pageSize, pageIndex, setParams, active, context]);
   return {
+    error:
+      blocked === `${context}:${pageIndex}`
+        ? new ListRecoveryError(t('settings.listChanged'))
+        : undefined,
     paginationState,
     onPaginationChange,
     sortingState,

package/client/locales/system/en-US.ts

@@ -8,6 +8,19 @@ import inboxEnUS from '#extensions/nocobase-inbox/locales/en-US';
  * upgrade replaces this file, so put the application's own copy in `../en-US.ts` rather than here.
  */
 const systemEnUS = {
+  listFeedback: {
+    loading: 'Loading',
+    empty: 'No data yet',
+    noResults: 'No results',
+    forbidden: 'Access denied',
+    unauthenticated: 'Session expired',
+    failed: 'Unable to load list',
+    refreshFailed: 'Refresh failed; showing previous data',
+    retry: 'Retry',
+    retrying: 'Retrying…',
+    clear: 'Clear filters',
+    signIn: 'Sign in',
+  },
   flowDiagram: {
     controls: 'Diagram controls',
     fitView: 'Fit to view',
@@ -54,6 +67,16 @@ const systemEnUS = {
   ...deviceApprovalEnUS,
   // The UI Library block of the `/inbox` page; the keys below may reword it.
   ...inboxEnUS,
+  // Shared form wording overrides the defaults included by composed blocks.
+  formFeedback: {
+    field: 'This value was rejected. Check it and try again.',
+    invalid: 'Check the highlighted fields and try again.',
+    failed: 'Unable to save. Your input has been kept. Try again.',
+    network:
+      'Unable to connect. Check your connection and try again. Your input has been kept.',
+    denied:
+      'You cannot submit this form with your current access. Your input has been kept.',
+  },
   // The UI Library component of the header's inbox button.
   'inboxButton.title': 'Inbox',
   'inboxButton.pending': 'Inbox, {{count}} waiting',
@@ -389,7 +412,7 @@ const systemEnUS = {
     back: 'Back',
   },
   dataTable: {
-    noResults: 'No results.',
+    noResults: 'No results',
     sortAscending: 'Asc',
     sortDescending: 'Desc',
     hideColumn: 'Hide',

package/client/locales/system/settings-en-US.ts

@@ -1,4 +1,5 @@
 const settings = {
+  listChanged: 'The list has changed. Please retry.',
   setup: {
     title: 'Feature prerequisites',
     checking: 'Checking current configuration…',
@@ -49,10 +50,6 @@ const settings = {
     records: 'Selected records ({{count}})',
     retained: 'Retain existing configuration',
     search: 'Search business objects or keys',
-    empty: 'No default data scopes',
-    emptyHint:
-      'Create a rule to configure baseline access for a business object.',
-    readOnlyEmpty: 'Ask an administrator to configure baseline data access.',
     noResources:
       'Every available business object already has a default rule, or no configurable objects are registered.',
     unsupported:
@@ -85,8 +82,6 @@ const settings = {
     'Manage user information, account security and role assignments. Review each permission separately.',
   businessOperationsHint:
     'Choose the operations this role can perform and the data each operation can use.',
-  pageAccessHint:
-    'Choose the business pages this role can open. All system settings, including user management and business configuration, are controlled under Configuration permissions. Data and business actions require separate permissions.',
   roleAssignment: 'Role assignment',
   accountSecurity: 'Account security',
   userInformation: 'User information',
@@ -144,10 +139,6 @@ const settings = {
   noResults: 'No matching results',
   clearHint: 'Try a different search or clear the filters.',
   noUsers: 'No users yet',
-  usersReadOnlyEmpty:
-    'Contact an administrator to add users or grant the permissions needed to create users and assign roles.',
-  rolesReadOnlyEmpty:
-    'Contact an administrator to create a role or grant you permission to create roles.',
   noRoleAccess:
     'This user can still sign in and use account basics. No business access is granted by roles.',
   noAssignedRoles: 'No assigned roles',
@@ -207,6 +198,13 @@ const settings = {
   configurationPermissionsHint:
     'Control access and actions for system settings, user management and business configuration. Only actual application features are shown.',
   permissionSearch: 'Search categories, groups or permissions',
+  permissionAll: 'All',
+  permissionGranted: 'Granted',
+  permissionUngranted: 'Ungranted',
+  permissionStatus: 'Authorization status',
+  permissionClearSearch: 'Clear search',
+  permissionCollapseAll: 'Collapse all',
+  permissionExpandAll: 'Expand all',
   enabledOnly: 'Enabled only',
   noPermissions: 'No permissions to configure',
   permissionEmptyHint:

package/client/locales/system/settings-zh-CN.ts

@@ -1,4 +1,5 @@
 const settings = {
+  listChanged: '列表已变化，请重试。',
   setup: {
     title: '功能前置配置',
     checking: '正在检查当前配置…',
@@ -43,9 +44,6 @@ const settings = {
     records: '指定记录（{{count}} 条）',
     retained: '保留现有配置',
     search: '搜索业务对象或标识',
-    empty: '暂无默认数据范围',
-    emptyHint: '新建规则，为业务对象配置基础数据访问范围。',
-    readOnlyEmpty: '请联系管理员配置基础数据访问范围。',
     noResources: '可用业务对象均已配置默认规则，或当前没有可配置的业务对象。',
     unsupported:
       '此规则包含当前插件目录中不存在的配置，已保留原值并以只读方式展示。',
@@ -74,8 +72,6 @@ const settings = {
     '管理用户资料、账号安全和角色分配，请逐项确认需要授予的权限。',
   businessOperationsHint:
     '设置此角色可以执行的业务操作，以及每项操作可使用的数据范围。',
-  pageAccessHint:
-    '设置此角色可访问的业务页面。系统设置（包括用户管理、业务配置项）统一在“配置项权限”中控制。页面内的数据和业务操作仍需单独授权。',
   roleAssignment: '角色分配',
   accountSecurity: '账号安全',
   userInformation: '用户资料',
@@ -133,9 +129,6 @@ const settings = {
   noResults: '没有匹配的结果',
   clearHint: '请更换搜索条件或清除筛选。',
   noUsers: '暂无用户',
-  usersReadOnlyEmpty:
-    '请联系管理员添加用户，或授予创建用户和分配角色所需的权限。',
-  rolesReadOnlyEmpty: '请联系管理员创建角色，或授予你创建角色的权限。',
   noRoleAccess: '此用户仍可登录并使用账号基础功能，角色未授予业务访问。',
   noAssignedRoles: '未分配角色',
   noRoles: '暂无角色',
@@ -190,6 +183,13 @@ const settings = {
   configurationPermissionsHint:
     '统一设置系统设置、用户管理和业务配置项的访问与操作权限，仅显示应用实际开放的功能。',
   permissionSearch: '搜索分类、分组或权限',
+  permissionAll: '全部',
+  permissionGranted: '已授权',
+  permissionUngranted: '未授权',
+  permissionStatus: '授权状态',
+  permissionClearSearch: '清空搜索',
+  permissionCollapseAll: '全部收起',
+  permissionExpandAll: '全部展开',
   enabledOnly: '仅显示已授权',
   noPermissions: '暂无可配置权限',
   permissionEmptyHint: '请联系应用开发者，开放此角色需要配置的权限。',

package/client/locales/system/zh-CN.ts

@@ -5,6 +5,19 @@ import inboxZhCN from '#extensions/nocobase-inbox/locales/zh-CN';
 
 /** The Chinese copy of what the template ships; see `./en-US.ts`. */
 const systemZhCN: SystemResource = {
+  listFeedback: {
+    loading: '加载中',
+    empty: '暂无数据',
+    noResults: '无结果',
+    forbidden: '无权访问',
+    unauthenticated: '会话已过期',
+    failed: '列表加载失败',
+    refreshFailed: '刷新失败，仍显示旧数据',
+    retry: '重试',
+    retrying: '正在重试…',
+    clear: '清空筛选',
+    signIn: '登录',
+  },
   flowDiagram: {
     controls: '流程图控制',
     fitView: '适应画布',
@@ -50,6 +63,14 @@ const systemZhCN: SystemResource = {
   ...deviceApprovalZhCN,
   // The UI Library block of the `/inbox` page; the keys below may reword it.
   ...inboxZhCN,
+  // Shared form wording overrides the defaults included by composed blocks.
+  formFeedback: {
+    field: '此字段的值未通过校验，请检查并修改后重试。',
+    invalid: '请检查标记的字段后重试。',
+    failed: '保存失败，已保留您的输入，请重试。',
+    network: '无法连接，请检查网络后重试。已保留您的输入。',
+    denied: '当前权限无法提交此表单。已保留您的输入。',
+  },
   // The UI Library component of the header's inbox button.
   'inboxButton.title': '收件箱',
   'inboxButton.pending': '收件箱，{{count}} 项待处理',
@@ -366,7 +387,7 @@ const systemZhCN: SystemResource = {
     back: '返回',
   },
   dataTable: {
-    noResults: '暂无数据。',
+    noResults: '无结果',
     sortAscending: '升序',
     sortDescending: '降序',
     hideColumn: '隐藏',

package/client/pages/settings/default-access-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 { ApiClientError, useApiClient, useToaster } from '@nocobase/app-client';
 import {
   useCan,
@@ -60,7 +63,12 @@ function DefaultAccessFormBody(): ReactElement {
     action: creating ? 'create' : 'update',
   }).can;
   const [draft, setDraft] = useState<DefaultAccessRule>();
-  const [busy, setBusy] = useState(false);
+  const { session } = useAuthentication();
+  const submission = useSubmission({
+    scope: `${session?.user.id}:settings:default-access:${key}`,
+  });
+  const [requestBusy, setRequestBusy] = useState(false);
+  const busy = requestBusy || submission.submitting;
   const [error, setError] = useState<unknown>();
   const [message, setMessage] = useState<string>();
   const [submitted, setSubmitted] = useState(false);
@@ -245,28 +253,36 @@ function DefaultAccessFormBody(): ReactElement {
       );
       return;
     }
-    setBusy(true);
+    setRequestBusy(true);
     try {
-      const latest = await api.request<{ data: readonly DefaultAccessRule[] }>({
-        path: 'authorization/defaultAccess',
-      });
-      if (
-        !creating &&
-        JSON.stringify(latest.data.find((rule) => rule.key === key)) !==
-          JSON.stringify(initial)
-      ) {
-        setMessage(t('settings.defaultAccess.changed'));
-        return;
-      }
-      const saved = await api.request<{ data: DefaultAccessRule }>({
-        path: creating
-          ? 'authorization/defaultAccess'
-          : `authorization/defaultAccess/${encodeURIComponent(key ?? '')}`,
-        method: creating ? 'POST' : 'PATCH',
-        json: creating
-          ? { ...value, key: value.key.trim() }
-          : { actions: value.actions },
-      });
+      const saved = await submission.run(
+        { creating, key, value },
+        async (idempotencyKey, _signal, _snapshot, recovering) => {
+          if (!creating && !recovering) {
+            const latest = await api.request<{
+              data: readonly DefaultAccessRule[];
+            }>({ path: 'authorization/defaultAccess' });
+            if (
+              JSON.stringify(latest.data.find((rule) => rule.key === key)) !==
+              JSON.stringify(initial)
+            ) {
+              setMessage(t('settings.defaultAccess.changed'));
+              return undefined;
+            }
+          }
+          return api.request<{ data: DefaultAccessRule }>({
+            path: creating
+              ? 'authorization/defaultAccess'
+              : `authorization/defaultAccess/${encodeURIComponent(key ?? '')}`,
+            headers: { 'Idempotency-Key': idempotencyKey },
+            method: creating ? 'POST' : 'PATCH',
+            json: creating
+              ? { ...value, key: value.key.trim() }
+              : { actions: value.actions },
+          });
+        },
+      );
+      if (!saved) return;
       toaster.show({
         type: 'success',
         title: t('settings.defaultAccess.saved', { name: value.key }),
@@ -331,7 +347,7 @@ function DefaultAccessFormBody(): ReactElement {
         setMessage(t('settings.defaultAccess.invalid'));
       else setError(next);
     } finally {
-      setBusy(false);
+      setRequestBusy(false);
     }
   };
   return (
@@ -360,7 +376,10 @@ function DefaultAccessFormBody(): ReactElement {
             {!creating && !initial ? (
               <p role='status'>{t('settings.missing')}</p>
             ) : (
-              <form
+              <FeedbackForm
+                submitting={busy}
+                error={error}
+                errorContent={<SettingsError error={error} inline />}
                 ref={formRef}
                 noValidate
                 className='flex flex-col gap-6'
@@ -369,7 +388,6 @@ function DefaultAccessFormBody(): ReactElement {
                   void save();
                 }}
               >
-                <SettingsError error={error} />
                 {message && (
                   <Alert variant='destructive'>
                     <AlertDescription>
@@ -487,7 +505,7 @@ function DefaultAccessFormBody(): ReactElement {
                     </Button>
                   )}
                 </div>
-              </form>
+              </FeedbackForm>
             )}
             {!creating && !initial && (
               <Button variant='outline' onClick={close}>