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

package/tests/client/list-feedback.test.tsx

@@ -0,0 +1,301 @@
+import { useState } from 'react';
+import { renderWithApp } from '@nocobase/app-testing/client';
+import type { ColumnDef } from '@tanstack/react-table';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  ListFeedback,
+  ListFeedbackActions,
+} from '../../client/components/list-feedback.js';
+import { DataTable } from '../../client/components/data-table/index.js';
+import enUS from '../../client/locales/en-US.js';
+import zhCN from '../../client/locales/zh-CN.js';
+
+const namespace = '@nocobase/list-feedback-test';
+const namespaces = {
+  [namespace]: {
+    'en-US': async () => ({ default: enUS }),
+    'zh-CN': async () => ({ default: zhCN }),
+  },
+};
+const options = { namespace, namespaces };
+
+function RetainedEditor() {
+  const [value, setValue] = useState(0);
+  return <button onClick={() => setValue(value + 1)}>Edited {value}</button>;
+}
+
+describe('shared table and card feedback', () => {
+  it('keeps mounted business content and local edits through a refresh failure and recovery', async () => {
+    const view = await renderWithApp(
+      <ListFeedback state='ready'>
+        <RetainedEditor />
+      </ListFeedback>,
+      options,
+    );
+    await userEvent
+      .setup()
+      .click(screen.getByRole('button', { name: 'Edited 0' }));
+    view.rerender(
+      <ListFeedback state='refresh-failed'>
+        <RetainedEditor />
+      </ListFeedback>,
+    );
+    expect(screen.getByRole('button', { name: 'Edited 1' })).toBeVisible();
+    expect(screen.getByRole('alert').textContent).toBe(
+      enUS.listFeedback.refreshFailed,
+    );
+    view.rerender(
+      <ListFeedback state='ready'>
+        <RetainedEditor />
+      </ListFeedback>,
+    );
+    expect(screen.getByRole('button', { name: 'Edited 1' })).toBeVisible();
+  });
+
+  it('clears local column filters through the table toolbar and resets its input', async () => {
+    const user = userEvent.setup();
+    await renderWithApp(
+      <DataTable
+        data={[{ id: 'Camera' }]}
+        columns={[{ accessorKey: 'id', header: 'ID' }]}
+        listState='ready'
+        rowCount={1}
+        toolbar={(table) => (
+          <input
+            aria-label='Camera filter'
+            value={String(table.getColumn('id')?.getFilterValue() ?? '')}
+            onChange={(event) =>
+              table.getColumn('id')?.setFilterValue(event.target.value)
+            }
+          />
+        )}
+      />,
+      options,
+    );
+    await user.type(screen.getByLabelText('Camera filter'), 'missing');
+    const status = screen.getByRole('status');
+    expect(status.textContent).toBe(enUS.listFeedback.noResults);
+    expect(status.closest('td')).not.toBeNull();
+    expect(within(status).queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.getByRole('table')).toBeVisible();
+    expect(screen.getByRole('columnheader', { name: 'ID' })).toBeVisible();
+    await user.click(screen.getByRole('button', { name: 'Clear filters' }));
+    expect(screen.getByLabelText('Camera filter')).toHaveValue('');
+    expect(screen.getByRole('cell', { name: 'Camera' })).toBeVisible();
+  });
+
+  it('keeps loading and denied states distinct and hides cached rows on denial', async () => {
+    const view = await renderWithApp(
+      <DataTable
+        data={[]}
+        columns={[{ accessorKey: 'id', header: 'ID' }]}
+        loading
+        emptyMessage='Business empty'
+        emptyAction={<button>Create record</button>}
+      />,
+      options,
+    );
+    expect(screen.getByRole('status').textContent).toBe(
+      enUS.listFeedback.loading,
+    );
+    expect(screen.getByRole('columnheader', { name: 'ID' })).toBeVisible();
+    expect(screen.queryByText('Business empty')).not.toBeInTheDocument();
+    expect(screen.queryByText('Create record')).not.toBeInTheDocument();
+    view.rerender(
+      <DataTable
+        data={[{ id: 'Private row' }]}
+        columns={[{ accessorKey: 'id', header: 'ID' }]}
+        listState='forbidden'
+        emptyMessage='Business empty'
+      />,
+    );
+    expect(screen.getByRole('alert').textContent).toBe(
+      enUS.listFeedback.forbidden,
+    );
+    expect(screen.getByRole('columnheader', { name: 'ID' })).toBeVisible();
+    expect(screen.queryByText('Private row')).not.toBeInTheDocument();
+  });
+
+  it('keeps table structure and places each non-ready state in its body', async () => {
+    const user = userEvent.setup();
+    const columns: ColumnDef<{ id: string }>[] = [
+      { accessorKey: 'id', header: 'ID' },
+    ];
+    const toolbar = () => <button type='button'>Search tools</button>;
+    const view = await renderWithApp(
+      <DataTable
+        columns={columns}
+        data={[]}
+        listState='loading'
+        toolbar={toolbar}
+        onClearFilters={() => undefined}
+        onRetry={() => undefined}
+      />,
+      options,
+    );
+    const states = [
+      ['loading', 'status'],
+      ['empty', 'status'],
+      ['no-results', 'status'],
+      ['forbidden', 'alert'],
+      ['unauthenticated', 'alert'],
+      ['failed', 'alert'],
+    ] as const;
+    for (const [state, role] of states) {
+      view.rerender(
+        <DataTable
+          columns={columns}
+          data={[]}
+          listState={state}
+          toolbar={toolbar}
+          onClearFilters={() => undefined}
+          onRetry={() => undefined}
+        />,
+      );
+      expect(screen.getByRole('table')).toBeVisible();
+      expect(screen.getByRole('columnheader', { name: 'ID' })).toBeVisible();
+      expect(
+        screen.getByRole('button', { name: 'Search tools' }),
+      ).toBeVisible();
+      expect(screen.getByRole(role).closest('td')).not.toBeNull();
+    }
+
+    view.rerender(
+      <DataTable
+        columns={columns}
+        data={[{ id: 'Previous result' }]}
+        listState='refresh-failed'
+        toolbar={toolbar}
+        onRetry={() => undefined}
+      />,
+    );
+    expect(screen.getByRole('alert').closest('td')).not.toBeNull();
+    expect(screen.getByText('Previous result')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Search tools' })).toBeVisible();
+    await user.click(screen.getByRole('button', { name: 'Retry' }));
+  });
+
+  it('renders each built-in state as one icon and one short line without inline actions', async () => {
+    const view = await renderWithApp(<ListFeedback state='loading' />, options);
+    const states = [
+      ['loading', 'status'],
+      ['empty', 'status'],
+      ['no-results', 'status'],
+      ['forbidden', 'alert'],
+      ['unauthenticated', 'alert'],
+      ['failed', 'alert'],
+    ] as const;
+    for (const [state, role] of states) {
+      view.rerender(<ListFeedback state={state} />);
+      const status = screen.getByRole(role);
+      expect(status.textContent).toBe(
+        enUS.listFeedback[state === 'no-results' ? 'noResults' : state],
+      );
+      expect(status.querySelector('svg')).toHaveAttribute(
+        'aria-hidden',
+        'true',
+      );
+      expect(within(status).queryByRole('button')).not.toBeInTheDocument();
+    }
+  });
+
+  it('preserves custom empty content and its intentional business action', async () => {
+    await renderWithApp(
+      <ListFeedback
+        state='empty'
+        empty='Business empty'
+        emptyAction={<button>Create record</button>}
+      />,
+      options,
+    );
+    expect(screen.getByText(enUS.listFeedback.empty)).toBeVisible();
+    expect(screen.getByText('Business empty')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Create record' })).toBeVisible();
+  });
+
+  it('clears filtered results from the host toolbar with keyboard access', async () => {
+    const clear = vi.fn();
+    await renderWithApp(
+      <>
+        <div>
+          <ListFeedbackActions state='no-results' onClear={clear} />
+        </div>
+        <ListFeedback state='no-results' />
+      </>,
+      { ...options, locale: 'zh-CN' },
+    );
+    const status = screen.getByRole('status');
+    expect(status.textContent).toBe(zhCN.listFeedback.noResults);
+    expect(within(status).queryByRole('button')).not.toBeInTheDocument();
+    const button = screen.getByRole('button', {
+      name: zhCN.listFeedback.clear,
+    });
+    button.focus();
+    await userEvent.setup().keyboard('{Enter}');
+    expect(clear).toHaveBeenCalledOnce();
+  });
+
+  it('keeps one stale-data line while showing old content and places retry outside it', async () => {
+    const retry = vi.fn();
+    await renderWithApp(
+      <>
+        <div>
+          <ListFeedbackActions state='refresh-failed' onRetry={retry} />
+        </div>
+        <ListFeedback state='refresh-failed'>
+          <p>Retained equipment record</p>
+        </ListFeedback>
+      </>,
+      options,
+    );
+    const alert = screen.getByRole('alert');
+    expect(alert.textContent).toBe(enUS.listFeedback.refreshFailed);
+    expect(within(alert).queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.getByText('Retained equipment record')).toBeVisible();
+    await userEvent
+      .setup()
+      .click(screen.getByRole('button', { name: 'Retry' }));
+    expect(retry).toHaveBeenCalledOnce();
+  });
+
+  it('keeps retry busy feedback in the toolbar', async () => {
+    await renderWithApp(
+      <>
+        <div>
+          <ListFeedbackActions state='failed' onRetry={vi.fn()} busy />
+        </div>
+        <ListFeedback state='failed' />
+      </>,
+      options,
+    );
+    expect(screen.getByRole('alert').textContent).toBe(
+      enUS.listFeedback.failed,
+    );
+    expect(
+      screen.getByRole('button', { name: enUS.listFeedback.retrying }),
+    ).toBeDisabled();
+  });
+
+  it('uses the existing login route outside the session status', async () => {
+    await renderWithApp(
+      <>
+        <div>
+          <ListFeedbackActions state='unauthenticated' />
+        </div>
+        <ListFeedback state='unauthenticated'>
+          <p>Private record</p>
+        </ListFeedback>
+      </>,
+      options,
+    );
+    expect(screen.getByRole('alert').textContent).toBe(
+      enUS.listFeedback.unauthenticated,
+    );
+    expect(screen.queryByText('Private record')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: enUS.listFeedback.signIn }),
+    ).toHaveAttribute('href', '/login');
+  });
+});

package/tests/client/manual-list-retry.test.tsx

@@ -0,0 +1,190 @@
+import { useState } from 'react';
+import { answerApi, renderWithApp } from '@nocobase/app-testing/client';
+import { resolveListState } from '@nocobase/app-client';
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { useSettingsData } from '../../client/pages/settings/hooks.js';
+
+import {
+  ListFeedback,
+  ListFeedbackActions,
+} from '../../client/components/list-feedback.js';
+import enUS from '../../client/locales/en-US.js';
+
+type Rows = { data: string[] };
+const options = {
+  namespace: '@nocobase/manual-list-test',
+  namespaces: {
+    '@nocobase/manual-list-test': {
+      'en-US': async () => ({ default: enUS }),
+    },
+  },
+};
+function deferred() {
+  let resolve!: (value: Rows | Response) => void;
+  const promise = new Promise<Rows | Response>((done) => {
+    resolve = done;
+  });
+  return { promise, resolve };
+}
+function failure(status = 500) {
+  return new Response(JSON.stringify({ error: { message: 'Unavailable' } }), {
+    status,
+    headers: { 'content-type': 'application/json' },
+  });
+}
+const adapters = {
+  useSettings: (query: string) =>
+    useSettingsData<Rows>(`manual-list?q=${query}&page=3&orderBy=title`),
+};
+function Harness({ kind }: { readonly kind: keyof typeof adapters }) {
+  const [query, setQuery] = useState('first');
+  const useData = adapters[kind];
+  const request = useData(query);
+  const state = resolveListState(request, request.data?.data.length ?? 0);
+  const useRetryAction = state === 'failed' || state === 'refresh-failed';
+  return (
+    <>
+      <div>
+        {useRetryAction ? (
+          <ListFeedbackActions
+            state={state}
+            onRetry={request.reload}
+            busy={request.loading}
+          />
+        ) : (
+          <button onClick={request.reload}>Refresh</button>
+        )}
+        <button onClick={() => setQuery('second')}>Change query</button>
+        <ListFeedbackActions state={state} />
+      </div>
+      <ListFeedback state={state}>
+        {request.data?.data.map((row) => (
+          <p key={row}>{row}</p>
+        ))}
+      </ListFeedback>
+    </>
+  );
+}
+describe.each(Object.keys(adapters) as (keyof typeof adapters)[])(
+  '%s manual list',
+  (kind) => {
+    it.each(['success', 'failure'] as const)(
+      'retains the stale warning during retry until %s',
+      async (outcome) => {
+        let response: Rows | Response | Promise<Rows | Response> = {
+          data: ['Original row'],
+        };
+        const calls: string[] = [];
+        await renderWithApp(<Harness kind={kind} />, {
+          ...options,
+          fetch: answerApi(({ path, query }) => {
+            calls.push(JSON.stringify({ path, query }));
+            return response;
+          }),
+        });
+        await screen.findByText('Original row');
+        response = failure();
+        await userEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+        await screen.findByText(enUS.listFeedback.refreshFailed);
+        const pending = deferred();
+        response = pending.promise;
+        await userEvent.click(
+          screen.getByRole('button', { name: 'Retry', exact: true }),
+        );
+        expect(screen.getByRole('alert')).toHaveTextContent(
+          enUS.listFeedback.refreshFailed,
+        );
+        expect(screen.getByText('Original row')).toBeVisible();
+        expect(
+          screen.getByRole('button', { name: 'Retrying…' }),
+        ).toBeDisabled();
+        expect(calls).toHaveLength(3);
+        expect(new Set(calls).size).toBe(1);
+        await act(async () =>
+          pending.resolve(
+            outcome === 'success' ? { data: ['Updated row'] } : failure(),
+          ),
+        );
+        if (outcome === 'success') {
+          await screen.findByText('Updated row');
+          expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        } else {
+          await waitFor(() =>
+            expect(
+              screen.getByRole('button', { name: 'Retry', exact: true }),
+            ).toBeEnabled(),
+          );
+          expect(screen.getByRole('alert')).toHaveTextContent(
+            enUS.listFeedback.refreshFailed,
+          );
+          expect(screen.getByText('Original row')).toBeVisible();
+        }
+      },
+    );
+    it.each([401, 403])(
+      'hides cached rows through a pending retry after %s',
+      async (status) => {
+        let response: Rows | Response | Promise<Rows | Response> = {
+          data: ['Private row'],
+        };
+        await renderWithApp(<Harness kind={kind} />, {
+          ...options,
+          fetch: answerApi(() => response),
+        });
+        await screen.findByText('Private row');
+        response = failure(status);
+        await userEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+        await screen.findByText(
+          status === 401
+            ? enUS.listFeedback.unauthenticated
+            : enUS.listFeedback.forbidden,
+        );
+        expect(screen.queryByText('Private row')).not.toBeInTheDocument();
+        const pending = deferred();
+        response = pending.promise;
+        await userEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+        expect(screen.getByRole('alert')).toHaveTextContent(
+          status === 401
+            ? enUS.listFeedback.unauthenticated
+            : enUS.listFeedback.forbidden,
+        );
+        expect(screen.queryByText('Private row')).not.toBeInTheDocument();
+        await act(async () => pending.resolve({ data: ['Authorized row'] }));
+        await screen.findByText('Authorized row');
+      },
+    );
+    it('withholds the previous query and ignores its late retry completion', async () => {
+      let response: Rows | Response | Promise<Rows | Response> = {
+        data: ['First row'],
+      };
+      await renderWithApp(<Harness kind={kind} />, {
+        ...options,
+        fetch: answerApi(() => response),
+      });
+      await screen.findByText('First row');
+      response = failure();
+      await userEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+      await screen.findByText(enUS.listFeedback.refreshFailed);
+      const old = deferred();
+      response = old.promise;
+      await userEvent.click(
+        screen.getByRole('button', { name: 'Retry', exact: true }),
+      );
+      const current = deferred();
+      response = current.promise;
+      await userEvent.click(
+        screen.getByRole('button', { name: 'Change query' }),
+      );
+      expect(screen.getByRole('status')).toHaveTextContent('Loading');
+      expect(screen.queryByText('First row')).not.toBeInTheDocument();
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+      await act(async () => current.resolve({ data: ['Second row'] }));
+      await screen.findByText('Second row');
+      await act(async () => old.resolve({ data: ['Obsolete row'] }));
+      expect(screen.queryByText('Obsolete row')).not.toBeInTheDocument();
+      expect(screen.getByText('Second row')).toBeVisible();
+    });
+  },
+);

package/tests/client/permission-workspace.test.ts

@@ -117,6 +117,19 @@ const configurationRoutes = [
 ] as unknown as AppClientRegisteredRoute[];
 
 describe('application-owned permission presentation', () => {
+  it('omits the generic Page access description and retains other section descriptions', () => {
+    const sections = permissionSections(source, [], (value) =>
+      typeof value === 'string' ? value : value.key,
+    );
+
+    expect(
+      sections.find((section) => section.id === 'pages')?.description,
+    ).toBe(undefined);
+    expect(
+      sections.find((section) => section.id === 'business')?.description,
+    ).toBe('settings.businessOperationsHint');
+  });
+
   it('can hide a created-record selector while retaining a related-record selector and stored policy', () => {
     const resource = {
       type: 'composite',

package/tests/client/settings-continuity.test.tsx

@@ -5,7 +5,13 @@ import {
   AuthorizationClient,
   authorizationClientToken,
 } from '@nocobase/app-plugin-authorization/client';
-import { screen, waitFor, within } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Routes, Route, useLocation } from 'react-router';
 import { expect, it, vi } from 'vitest';
@@ -59,6 +65,79 @@ function Location() {
   );
 }
 
+it.each(['fast', 'slow'] as const)(
+  'keeps the user table on drawer close and only indicates a slow refresh (%s)',
+  async (speed) => {
+    const user = userEvent.setup();
+    let refresh = false;
+    let complete!: () => void;
+    const response = new Promise<void>((resolve) => {
+      complete = resolve;
+    });
+    await renderWithApp(
+      <Routes>
+        <Route path='/settings/users' element={<UsersPage />}>
+          <Route path=':userId' element={<UserDetail />}>
+            <Route path='edit' element={<UserForm />} />
+          </Route>
+        </Route>
+      </Routes>,
+      {
+        route: '/settings/users',
+        namespace,
+        namespaces,
+        services,
+        fetch: answerApi(async ({ path }) => {
+          if (path === 'authorization/permissions')
+            return { data: { unrestricted: true, permissions: [] } };
+          if (path === 'users/options') return options;
+          if (path === 'users/alice') return { data: row };
+          if (refresh) await response;
+          return {
+            data: [{ ...row, name: refresh ? 'Alice refreshed' : row.name }],
+            meta: { total: 1 },
+          };
+        }),
+      },
+    );
+    await user.click(await screen.findByRole('link', { name: 'Alice' }));
+    await waitFor(() =>
+      expect(screen.getByRole('textbox', { name: 'Name *' })).toHaveValue(
+        'Alice',
+      ),
+    );
+    refresh = true;
+    vi.useFakeTimers();
+    try {
+      await act(() => vi.advanceTimersByTimeAsync(1000));
+      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+      await act(async () => {
+        fireEvent.click(
+          screen.getByRole('button', { name: 'Cancel', exact: true }),
+        );
+      });
+      expect(screen.getByRole('link', { name: 'Alice' })).toBeVisible();
+      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+      if (speed === 'slow') {
+        await act(() => vi.advanceTimersByTimeAsync(1000));
+        expect(screen.getByText(enUS.settings.loading)).toBeVisible();
+        expect(screen.getByRole('link', { name: 'Alice' })).toBeVisible();
+      }
+      await act(async () => {
+        complete();
+        await response;
+      });
+      await act(() => vi.advanceTimersByTimeAsync(1000));
+      expect(
+        screen.getByRole('link', { name: 'Alice refreshed' }),
+      ).toBeVisible();
+      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  },
+);
+
 it('uses role labels and paired server filters, retaining the source and ordering when clearing filters', async () => {
   const calls = vi.fn(({ path }: { path: string }) =>
     path === 'authorization/permissions'

package/tests/client/settings-feedback.test.tsx

@@ -41,7 +41,7 @@ describe.each([
   ['zh-CN', zhCN],
 ] as const)('%s', (language, copy) => {
   it.each(['users', 'roles'] as const)(
-    'explains the next step for a read-only empty %s list',
+    'keeps the compact empty status and hides creation for a read-only %s list',
     async (kind) => {
       await renderWithApp(
         <Routes>
@@ -64,13 +64,9 @@ describe.each([
           }),
         },
       );
-      expect(
-        await screen.findByText(
-          kind === 'users'
-            ? copy.settings.usersReadOnlyEmpty
-            : copy.settings.rolesReadOnlyEmpty,
-        ),
-      ).toBeVisible();
+      expect((await screen.findByRole('status')).textContent).toBe(
+        copy.listFeedback.empty,
+      );
       expect(
         screen.queryByRole('button', {
           name:
@@ -119,13 +115,9 @@ describe.each([
             kind === 'users' ? copy.settings.newUser : copy.settings.newRole,
         }),
       ).toHaveLength(1);
-      expect(
-        screen.queryByText(
-          kind === 'users'
-            ? copy.settings.usersReadOnlyEmpty
-            : copy.settings.rolesReadOnlyEmpty,
-        ),
-      ).not.toBeInTheDocument();
+      expect(screen.getByRole('status').textContent).toBe(
+        copy.listFeedback.empty,
+      );
     },
   );
 

package/tests/fixtures/permission-alignment.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="data:," />
+    <title>Permission alignment verification</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      type="module"
+      src="/tests/fixtures/permission-alignment.tsx"
+    ></script>
+  </body>
+</html>