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

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

@@ -54,6 +54,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',

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…',
@@ -207,6 +208,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: '正在检查当前配置…',
@@ -190,6 +191,13 @@ const settings = {
   configurationPermissionsHint:
     '统一设置系统设置、用户管理和业务配置项的访问与操作权限，仅显示应用实际开放的功能。',
   permissionSearch: '搜索分类、分组或权限',
+  permissionAll: '全部',
+  permissionGranted: '已授权',
+  permissionUngranted: '未授权',
+  permissionStatus: '授权状态',
+  permissionClearSearch: '清空搜索',
+  permissionCollapseAll: '全部收起',
+  permissionExpandAll: '全部展开',
   enabledOnly: '仅显示已授权',
   noPermissions: '暂无可配置权限',
   permissionEmptyHint: '请联系应用开发者，开放此角色需要配置的权限。',

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

@@ -50,6 +50,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}} 项待处理',

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

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

@@ -1,6 +1,12 @@
+import { useListLocation } from '#hooks/use-list-location';
 import { RecordLink } from '#components/record-link';
 import { useTableUrlState } from '#hooks/use-table-url-state';
-import { useApiClient, useToaster } from '@nocobase/app-client';
+import {
+  ApiClientError,
+  useApiClient,
+  useSubmission,
+  useToaster,
+} from '@nocobase/app-client';
 import {
   useCan,
   type AuthorizationOptionsResponse,
@@ -8,7 +14,7 @@ import {
 } 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 { Link, Outlet, useLocation } from 'react-router';
 import { ListFilterIcon, MoreHorizontalIcon, PlusIcon } from 'lucide-react';
 import type { ColumnDef } from '@tanstack/react-table';
 import { Alert, AlertDescription } from '#components/ui/alert';
@@ -45,11 +51,12 @@ export default function DefaultAccessPage(): ReactElement {
   const api = useApiClient();
   const toaster = useToaster();
   const location = useLocation();
-  const [params, setParams] = useSearchParams();
+  const { params, setParams, active } = useListLocation();
   const search = params.get('q') ?? '';
   const searchRef = useRef<HTMLInputElement>(null);
   const rules = useSettingsData<{ data: readonly DefaultAccessRule[] }>(
     'authorization/defaultAccess',
+    { active },
   );
   const catalog = useSettingsData<{ data: AuthorizationOptionsResponse }>(
     'authorization/defaultAccess/options',
@@ -212,6 +219,8 @@ export default function DefaultAccessPage(): ReactElement {
     )
     .sort((a, b) => name(a).localeCompare(name(b), i18n.language));
   const tableState = useTableUrlState({
+    active,
+    revision: rules.revision,
     defaultPageSize: 20,
     sortColumns: ['resource'],
     rowCount:
@@ -262,43 +271,58 @@ export default function DefaultAccessPage(): ReactElement {
         </div>
       )
     ) : null;
+  const submission = useSubmission();
   const remove = async () => {
     if (!removing || busy || !canDelete) return;
     setBusy(true);
     setError(undefined);
+    let submitted = false;
     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',
-      });
+      const outcome = await submission.run(
+        { key: removing.key },
+        async (idempotencyKey, _signal, _snapshot, recovering) => {
+          if (!recovering) {
+            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 undefined;
+            }
+          }
+          submitted = true;
+          await api.request({
+            path: `authorization/defaultAccess/${encodeURIComponent(removing.key)}`,
+            method: 'DELETE',
+            headers: { 'Idempotency-Key': idempotencyKey },
+          });
+          return true;
+        },
+      );
+      if (!outcome) return;
       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);
+      if (
+        submitted &&
+        (!(next instanceof ApiClientError) || next.status >= 500)
+      ) {
+        // The write may have committed before the response was lost. Verify without replaying it.
+        rules.reload();
+      }
     } finally {
       setBusy(false);
     }
@@ -345,7 +369,11 @@ export default function DefaultAccessPage(): ReactElement {
           </Alert>
         )}
         <SettingsError
-          error={rules.error || catalog.error || (!removing && error)}
+          error={
+            (tableState.error ?? rules.error) ||
+            catalog.error ||
+            (!removing && error)
+          }
           retry={() => {
             rules.reload();
             catalog.reload();
@@ -356,6 +384,7 @@ export default function DefaultAccessPage(): ReactElement {
         (catalog.loading && !catalog.data) ? (
           <SettingsLoading />
         ) : (
+          !tableState.error &&
           !rules.error &&
           !catalog.error &&
           (rows.length ? (

package/client/pages/settings/hooks.tsx

@@ -1,67 +1,12 @@
-import {
-  ApiClientError,
-  useApiClient,
-  useNavigationGuard,
-} from '@nocobase/app-client';
+import { 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 { 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],
-    ),
-  };
-}
+/** Compatibility entry for prepared settings pages and application-owned consumers. */
+export { useListData as useSettingsData } from '#hooks/use-list-data';
 
 export function useUserPermission(action: string, id = '*') {
   return useCan({ resource: { type: 'user', id }, action }).can;

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

@@ -101,6 +101,21 @@ export function pagePermissionNavigation(
     ({ type, id }) => !configuration.has(JSON.stringify([type, id])),
   );
   const resources = new Map(pages.map((page) => [page.id, page]));
+  const paths = new Map<string, string>();
+  const collectPaths = (items: readonly AppClientRegisteredRoute[]): void => {
+    for (const route of items) {
+      if (
+        route.componentLoader &&
+        typeof route.authz === 'object' &&
+        route.authz.resource.type === 'page' &&
+        !paths.has(route.authz.resource.id)
+      ) {
+        paths.set(route.authz.resource.id, route.path);
+      }
+      collectPaths(route.children ?? []);
+    }
+  };
+  collectPaths(routes);
   const seen = new Set<string>();
   const visit = (
     items: readonly RouteNavigationItem[],
@@ -130,6 +145,7 @@ export function pagePermissionNavigation(
                 : unnamed(route.path),
           ),
           rowId,
+          path: route.path,
           children: descendants,
         },
       ];
@@ -142,6 +158,7 @@ export function pagePermissionNavigation(
       id: `page:${page.id}`,
       label: text(page.title),
       rowId: permissionRowId(page, 'access'),
+      path: paths.get(page.id),
     }));
   return [
     ...navigation,