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

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

@@ -1,6 +1,13 @@
+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,
+  resolveListState,
+  useApiClient,
+  useSubmission,
+  useToaster,
+} from '@nocobase/app-client';
 import {
   useCan,
   type AuthorizationOptionsResponse,
@@ -8,13 +15,14 @@ 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 { ListFilterIcon, MoreHorizontalIcon, PlusIcon } from 'lucide-react';
+import { Link, Outlet, useLocation } from 'react-router';
+import { 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 { Spinner } from '#components/ui/spinner';
 import { Input } from '#components/ui/input';
 import {
   DropdownMenu,
@@ -23,14 +31,7 @@ import {
   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 { ConfirmAction, SettingsError } from './shared.js';
 import { useSettingsData } from './hooks.js';
 import {
   actionKey,
@@ -45,19 +46,21 @@ 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',
   );
-  const canCreate = useCan({
+  const createPermission = useCan({
     resource: { type: 'settings', id: 'authorization.default-access' },
     action: 'create',
-  }).can;
+  });
+  const canCreate = createPermission.can && !createPermission.isPending;
   const canDelete = useCan({
     resource: { type: 'settings', id: 'authorization.default-access' },
     action: 'delete',
@@ -212,6 +215,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:
@@ -224,6 +229,30 @@ export default function DefaultAccessPage(): ReactElement {
         ? rows.length
         : undefined,
   });
+  const listError =
+    [rules.error, catalog.error].find(
+      (error) =>
+        error instanceof ApiClientError && [401, 403].includes(error.status),
+    ) ??
+    tableState.error ??
+    rules.error ??
+    catalog.error;
+  const listData = rules.data && catalog.data ? rows : undefined;
+  const listState = resolveListState(
+    {
+      data: listData,
+      error: listError,
+      isPending: !listData && (rules.loading || catalog.loading),
+    },
+    rows.length,
+    Boolean(search.trim()),
+  );
+  const canShowCreate =
+    canCreate &&
+    (listState === 'empty' ||
+      listState === 'ready' ||
+      listState === 'no-results' ||
+      listState === 'refresh-failed');
   const clearSearch = () =>
     setParams(
       (old) => {
@@ -262,43 +291,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);
     }
@@ -307,9 +351,7 @@ export default function DefaultAccessPage(): ReactElement {
     <>
       <PermissionManagementPage
         tab='default-access'
-        actions={
-          rules.data && (rules.data.data.length || search) ? create : undefined
-        }
+        actions={canShowCreate ? create : undefined}
       >
         <div className='flex flex-wrap items-center gap-2'>
           <Input
@@ -331,11 +373,16 @@ export default function DefaultAccessPage(): ReactElement {
               )
             }
           />
-          {search && (
+          {search && listState !== 'no-results' && (
             <Button variant='ghost' onClick={clearSearch}>
               {t('settings.clear')}
             </Button>
           )}
+          {active &&
+          (rules.loading || catalog.loading) &&
+          (rules.data || catalog.data) ? (
+            <Spinner className='text-muted-foreground' />
+          ) : null}
         </div>
         {conflict && (
           <Alert variant='destructive'>
@@ -344,62 +391,22 @@ export default function DefaultAccessPage(): ReactElement {
             </AlertDescription>
           </Alert>
         )}
-        <SettingsError
-          error={rules.error || catalog.error || (!removing && error)}
-          retry={() => {
+        <SettingsError error={!removing && error} />
+        <DataTable
+          {...tableState}
+          columns={columns}
+          data={rows}
+          getRowId={(rule) => rule.key}
+          showSelectedCount={false}
+          pageSize={20}
+          loading={rules.loading || catalog.loading}
+          listState={listState}
+          onRetry={() => {
             rules.reload();
             catalog.reload();
-            setError(undefined);
           }}
+          onClearFilters={clearSearch}
         />
-        {(rules.loading && !rules.data) ||
-        (catalog.loading && !catalog.data) ? (
-          <SettingsLoading />
-        ) : (
-          !rules.error &&
-          !catalog.error &&
-          (rows.length ? (
-            <DataTable
-              {...tableState}
-              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={clearSearch}>
-                    {t('settings.clear')}
-                  </Button>
-                ) : (
-                  create
-                )}
-              </EmptyContent>
-            </Empty>
-          ))
-        )}
         <ConfirmAction
           error={<SettingsError error={error} />}
           open={Boolean(removing)}

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,

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

@@ -61,7 +61,6 @@ export function setPermission(
 }
 
 const sectionDescriptions: Readonly<Record<string, string>> = {
-  pages: 'pageAccessHint',
   business: 'businessOperationsHint',
   users: 'userAccountsHint',
   configuration: 'configurationPermissionsHint',
@@ -126,68 +125,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,
+                  };
+                }),
             };
           }),
         })),