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

package/client/extensions/nocobase-workflow-management/execution-list.tsx

@@ -1,3 +1,4 @@
+import type { ListState } from '@nocobase/app-client';
 import type { ReactElement, ReactNode } from 'react';
 import type {
   CellContext,
@@ -17,12 +18,14 @@ export interface WorkflowExecutionRow {
   createdAt: ReactNode;
 }
 export interface WorkflowExecutionListProps {
+  listState?: ListState;
+  onClearFilters?: () => void;
   rows: readonly WorkflowExecutionRow[];
   loaded: boolean;
   loading: boolean;
   filters: ReactNode;
   status?: ReactNode;
-  empty: ReactNode;
+  empty?: ReactNode;
   labels: {
     refresh: string;
     record: string;
@@ -47,6 +50,8 @@ type ExecutionDateMeta = ColumnMeta<WorkflowExecutionRow, unknown> &
 
 export function WorkflowExecutionList({
   rows,
+  listState,
+  onClearFilters,
   loaded,
   loading,
   filters,
@@ -72,53 +77,61 @@ export function WorkflowExecutionList({
         </Button>
       </div>
       {status}
-      <div className='bg-card'>
-        <DataTable
-          data={rows}
-          getRowId={(row) => row.id}
-          pagination={false}
-          manualSorting
-          sortingState={[{ id: 'createdAt', desc: order === 'newest' }]}
-          loading={loading}
-          emptyMessage={
-            loaded ? (
-              <Empty>
-                <EmptyDescription>{empty}</EmptyDescription>
-              </Empty>
-            ) : (
-              ''
-            )
-          }
-          columns={[
-            {
-              id: 'record',
-              header: labels.record,
-              enableSorting: false,
-              cell: ExecutionRecordCell,
-            },
-            {
-              id: 'workflow',
-              header: labels.workflow,
-              enableSorting: false,
-              cell: ExecutionWorkflowCell,
-            },
-            {
-              id: 'state',
-              header: labels.state,
-              enableSorting: false,
-              cell: ExecutionStateCell,
-            },
-            {
-              id: 'createdAt',
-              accessorFn: (row) => row.createdAt,
-              enableSorting: true,
-              meta: activityMeta,
-              header: ExecutionDateHeader,
-              cell: ExecutionCreatedAtCell,
-            },
-          ]}
-        />
-      </div>
+      {(listState !== undefined || loaded || loading) && (
+        <div className='bg-card'>
+          <DataTable
+            data={rows}
+            listState={
+              listState ??
+              (!loaded ? 'loading' : rows.length ? 'ready' : 'empty')
+            }
+            onRetry={onRefresh}
+            onClearFilters={onClearFilters}
+            getRowId={(row) => row.id}
+            pagination={false}
+            manualSorting
+            sortingState={[{ id: 'createdAt', desc: order === 'newest' }]}
+            loading={loading}
+            emptyMessage={
+              loaded ? (
+                <Empty>
+                  <EmptyDescription>{empty}</EmptyDescription>
+                </Empty>
+              ) : (
+                ''
+              )
+            }
+            columns={[
+              {
+                id: 'record',
+                header: labels.record,
+                enableSorting: false,
+                cell: ExecutionRecordCell,
+              },
+              {
+                id: 'workflow',
+                header: labels.workflow,
+                enableSorting: false,
+                cell: ExecutionWorkflowCell,
+              },
+              {
+                id: 'state',
+                header: labels.state,
+                enableSorting: false,
+                cell: ExecutionStateCell,
+              },
+              {
+                id: 'createdAt',
+                accessorFn: (row) => row.createdAt,
+                enableSorting: true,
+                meta: activityMeta,
+                header: ExecutionDateHeader,
+                cell: ExecutionCreatedAtCell,
+              },
+            ]}
+          />
+        </div>
+      )}
       <div className='flex flex-wrap items-center justify-between gap-3 text-sm'>
         <p>{pagination}</p>
         <div className='flex gap-2'>

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

@@ -59,8 +59,7 @@ export function useListData<T>(
     path: result.path,
     data: result.path === path || keepPreviousData ? result.data : undefined,
     loading: !active || result.path !== path || result.key !== key,
-    error:
-      result.path === path && result.key === key ? result.error : undefined,
+    error: result.path === path ? result.error : undefined,
     revision,
     reload: useCallback(() => {
       invalidate();

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',
@@ -399,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

@@ -50,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:
@@ -86,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',
@@ -145,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',

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

@@ -44,9 +44,6 @@ const settings = {
     records: '指定记录（{{count}} 条）',
     retained: '保留现有配置',
     search: '搜索业务对象或标识',
-    empty: '暂无默认数据范围',
-    emptyHint: '新建规则，为业务对象配置基础数据访问范围。',
-    readOnlyEmpty: '请联系管理员配置基础数据访问范围。',
     noResources: '可用业务对象均已配置默认规则，或当前没有可配置的业务对象。',
     unsupported:
       '此规则包含当前插件目录中不存在的配置，已保留原值并以只读方式展示。',
@@ -75,8 +72,6 @@ const settings = {
     '管理用户资料、账号安全和角色分配，请逐项确认需要授予的权限。',
   businessOperationsHint:
     '设置此角色可以执行的业务操作，以及每项操作可使用的数据范围。',
-  pageAccessHint:
-    '设置此角色可访问的业务页面。系统设置（包括用户管理、业务配置项）统一在“配置项权限”中控制。页面内的数据和业务操作仍需单独授权。',
   roleAssignment: '角色分配',
   accountSecurity: '账号安全',
   userInformation: '用户资料',
@@ -134,9 +129,6 @@ const settings = {
   noResults: '没有匹配的结果',
   clearHint: '请更换搜索条件或清除筛选。',
   noUsers: '暂无用户',
-  usersReadOnlyEmpty:
-    '请联系管理员添加用户，或授予创建用户和分配角色所需的权限。',
-  rolesReadOnlyEmpty: '请联系管理员创建角色，或授予你创建角色的权限。',
   noRoleAccess: '此用户仍可登录并使用账号基础功能，角色未授予业务访问。',
   noAssignedRoles: '未分配角色',
   noRoles: '暂无角色',

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: '适应画布',
@@ -374,7 +387,7 @@ const systemZhCN: SystemResource = {
     back: '返回',
   },
   dataTable: {
-    noResults: '暂无数据。',
+    noResults: '无结果',
     sortAscending: '升序',
     sortDescending: '降序',
     hideColumn: '隐藏',

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

@@ -3,6 +3,7 @@ import { RecordLink } from '#components/record-link';
 import { useTableUrlState } from '#hooks/use-table-url-state';
 import {
   ApiClientError,
+  resolveListState,
   useApiClient,
   useSubmission,
   useToaster,
@@ -15,12 +16,13 @@ import {
 import { useTranslation } from '@nocobase/i18n/client';
 import { useRef, useState, type ReactElement } from 'react';
 import { Link, Outlet, useLocation } from 'react-router';
-import { ListFilterIcon, MoreHorizontalIcon, PlusIcon } from 'lucide-react';
+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,
@@ -29,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,
@@ -61,10 +56,11 @@ export default function DefaultAccessPage(): ReactElement {
   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',
@@ -233,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) => {
@@ -331,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
@@ -355,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'>
@@ -368,67 +391,22 @@ export default function DefaultAccessPage(): ReactElement {
             </AlertDescription>
           </Alert>
         )}
-        <SettingsError
-          error={
-            (tableState.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 />
-        ) : (
-          !tableState.error &&
-          !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/permissions-model.ts

@@ -61,7 +61,6 @@ export function setPermission(
 }
 
 const sectionDescriptions: Readonly<Record<string, string>> = {
-  pages: 'pageAccessHint',
   business: 'businessOperationsHint',
   users: 'userAccountsHint',
   configuration: 'configurationPermissionsHint',

package/client/pages/settings/roles.tsx

@@ -5,22 +5,17 @@ import type {
   PermissionSet,
   LocalizedText,
 } from '@nocobase/app-plugin-authorization/client';
+import { resolveListState } from '@nocobase/app-client';
 import { type ReactElement } from 'react';
 import { Link, Outlet, useLocation } from 'react-router';
-import { ShieldCheckIcon, PlusIcon } from 'lucide-react';
+import { PlusIcon } from 'lucide-react';
 import { PermissionManagementPage } from './permission-management-page.js';
 import { Input } from '#components/ui/input';
 import { Button } from '#components/ui/button';
+import { Spinner } from '#components/ui/spinner';
 import { useTableUrlState } from '#hooks/use-table-url-state';
 import { RoleList } from '#components/role-list';
-import {
-  Empty,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-} from '#components/ui/empty';
-import { SettingsError, SettingsLoading } from './shared.js';
+import { ListFeedback, ListFeedbackActions } from '#components/list-feedback';
 
 export default function RolesPage(): ReactElement {
   const { t, i18n } = useTranslation();
@@ -60,6 +55,31 @@ export default function RolesPage(): ReactElement {
         ? rows.length
         : undefined,
   });
+  const listState = resolveListState(
+    {
+      data: request.data,
+      error: tableState.error ?? request.error,
+      isPending: request.loading && !request.data,
+    },
+    rows.length,
+    Boolean(search.trim()),
+  );
+  const canShowCreate =
+    canCreate &&
+    (listState === 'empty' ||
+      listState === 'ready' ||
+      listState === 'no-results' ||
+      listState === 'refresh-failed');
+  const clearSearch = () =>
+    setParams(
+      (old) => {
+        const next = new URLSearchParams(old);
+        next.delete('q');
+        next.delete('page');
+        return next;
+      },
+      { replace: true },
+    );
   const create = canCreate ? (
     <Button
       nativeButton={false}
@@ -73,7 +93,7 @@ export default function RolesPage(): ReactElement {
     <>
       <PermissionManagementPage
         tab='roles'
-        actions={rows.length || search ? create : undefined}
+        actions={canShowCreate ? create : undefined}
       >
         <div className='flex items-center gap-3'>
           <Input
@@ -94,97 +114,43 @@ export default function RolesPage(): ReactElement {
               );
             }}
           />
-          {search && (
-            <Button
-              variant='ghost'
-              onClick={() => {
-                setParams(
-                  (old) => {
-                    const next = new URLSearchParams(old);
-                    next.delete('q');
-                    next.delete('page');
-                    return next;
-                  },
-                  { replace: true },
-                );
-              }}
-            >
+          {search && listState !== 'no-results' && (
+            <Button variant='ghost' onClick={clearSearch}>
               {t('settings.clear')}
             </Button>
           )}
+          <ListFeedbackActions
+            state={listState}
+            onClear={clearSearch}
+            onRetry={request.reload}
+            busy={request.loading}
+          />
+          {active && request.loading && request.data ? (
+            <Spinner className='text-muted-foreground' />
+          ) : null}
         </div>
-        <SettingsError
-          error={tableState.error ?? request.error}
-          retry={request.reload}
-        />
-        {request.loading && !request.data ? (
-          <SettingsLoading />
-        ) : (
-          !tableState.error &&
-          !request.error &&
-          (rows.length ? (
-            <RoleList
-              tableState={tableState}
-              ariaLabel={t('settings.roles')}
-              roles={rows.map((role) => ({
-                key: role.key,
-                title: text(role.title ?? role.key),
-                to: {
-                  pathname: `${encodeURIComponent(role.key)}/edit`,
-                  search: location.search,
-                },
-                protected: Boolean(role.protection),
-              }))}
-              labels={{
-                name: t('settings.roleName'),
-                key: t('settings.key'),
-                type: t('settings.roleType'),
-                protected: t('settings.protected'),
-                custom: t('settings.custom'),
-              }}
-            />
-          ) : (
-            <Empty className='min-h-48 border border-dashed'>
-              <EmptyMedia variant='icon'>
-                <ShieldCheckIcon />
-              </EmptyMedia>
-              <EmptyTitle>
-                {t(search ? 'settings.noResults' : 'settings.noRoles')}
-              </EmptyTitle>
-              <EmptyDescription>
-                {t(
-                  search
-                    ? 'settings.clearHint'
-                    : canCreate
-                      ? 'settings.rolesDescription'
-                      : 'settings.rolesReadOnlyEmpty',
-                )}
-              </EmptyDescription>
-              <EmptyContent>
-                {search ? (
-                  <Button
-                    variant='outline'
-                    onClick={() => {
-                      setParams(
-                        (old) => {
-                          const next = new URLSearchParams(old);
-                          next.delete('q');
-                          next.delete('page');
-                          return next;
-                        },
-                        { replace: true },
-                      );
-                    }}
-                  >
-                    {t('settings.clear')}
-                  </Button>
-                ) : (
-                  create
-                )}
-              </EmptyContent>
-            </Empty>
-          ))
-        )}
+        <ListFeedback state={listState}>
+          <RoleList
+            tableState={tableState}
+            ariaLabel={t('settings.roles')}
+            roles={rows.map((role) => ({
+              key: role.key,
+              title: text(role.title ?? role.key),
+              to: {
+                pathname: `${encodeURIComponent(role.key)}/edit`,
+                search: location.search,
+              },
+              protected: Boolean(role.protection),
+            }))}
+            labels={{
+              name: t('settings.roleName'),
+              key: t('settings.key'),
+              type: t('settings.roleType'),
+              protected: t('settings.protected'),
+              custom: t('settings.custom'),
+            }}
+          />
+        </ListFeedback>
       </PermissionManagementPage>
       <Outlet context={{ reload: request.reload }} />
     </>