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

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/list-recovery.test.tsx

@@ -0,0 +1,373 @@
+import {
+  answerApi,
+  renderWithApp,
+  type ApiCall,
+} from '@nocobase/app-testing/client';
+import { useApiClient } from '@nocobase/app-client';
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Link,
+  Outlet,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+  useOutletContext,
+} from 'react-router';
+import { useState } from 'react';
+import { expect, it, vi } from 'vitest';
+import { useListData } from '../../client/hooks/use-list-data.js';
+import { useListLocation } from '../../client/hooks/use-list-location.js';
+import { useTableUrlState } from '../../client/hooks/use-table-url-state.js';
+import enUS from '../../client/locales/en-US.js';
+
+interface Page {
+  data: string[];
+  meta: { total: number };
+}
+function List() {
+  const api = useApiClient();
+  const { params, active } = useListLocation();
+  const request = useListData<Page>(`items?${params}`, {
+    active,
+    keepPreviousData: true,
+  });
+  const state = useTableUrlState({
+    sortColumns: ['name'],
+    active,
+    revision: request.revision,
+    rowCount:
+      !request.loading && !request.error ? request.data?.meta.total : undefined,
+  });
+  const [failed, setFailed] = useState(0);
+  const remove = async (ids: string[]) => {
+    const results = await Promise.allSettled(
+      ids.map((id) => api.request({ path: `items/${id}`, method: 'DELETE' })),
+    );
+    setFailed(results.filter((result) => result.status === 'rejected').length);
+    if (results.some((result) => result.status === 'fulfilled'))
+      request.reload();
+  };
+  return (
+    <>
+      <output data-testid='rows'>{request.data?.data.join(',')}</output>
+      <output data-testid='total'>{request.data?.meta.total}</output>
+      <output data-testid='failed'>{failed}</output>
+      <output data-testid='error'>
+        {state.error?.message ?? (request.error ? 'Read failed' : '')}
+      </output>
+      <button onClick={request.reload}>Refresh</button>
+      <button onClick={() => void remove(['last'])}>Delete one</button>
+      <button onClick={() => void remove(['last', 'protected'])}>
+        Delete batch
+      </button>
+      <Link to={{ pathname: 'last', search: `?${params}` }}>Detail</Link>
+      <Link to='?page=2&pageSize=10&q=new'>Change query</Link>
+      <Outlet context={{ reload: request.reload }} />
+    </>
+  );
+}
+function Detail() {
+  const api = useApiClient();
+  const { reload } = useOutletContext<{ reload: () => void }>();
+  const navigate = useNavigate();
+  const location = useLocation();
+  return (
+    <button
+      onClick={() =>
+        void api.request({ path: 'items/last', method: 'DELETE' }).then(() => {
+          reload();
+          navigate({ pathname: '..', search: location.search });
+        })
+      }
+    >
+      Delete in detail
+    </button>
+  );
+}
+function Location() {
+  const location = useLocation();
+  return (
+    <output data-testid='url'>
+      {location.pathname}
+      {location.search}
+    </output>
+  );
+}
+async function mount(
+  answer: (call: ApiCall) => unknown,
+  route = '/items?page=3&pageSize=10&q=loan&status=open&sort=name&order=desc&tab=active',
+) {
+  return renderWithApp(
+    <>
+      <Routes>
+        <Route path='/items' element={<List />}>
+          <Route path=':id' element={<Detail />} />
+        </Route>
+      </Routes>
+      <Location />
+    </>,
+    {
+      route,
+      namespace: 'list-test',
+      namespaces: { 'list-test': { 'en-US': async () => ({ default: enUS }) } },
+      fetch: answerApi(answer),
+    },
+  );
+}
+it.each([
+  { total: 20, target: 2 },
+  { total: 0, target: 1 },
+  { total: 21, target: 3 },
+])(
+  'uses the latest matching total $total after deletion',
+  async ({ total, target }) => {
+    let deleted = false;
+    const calls = vi.fn(({ method }: ApiCall) => {
+      if (method === 'DELETE') {
+        deleted = true;
+        return { data: null };
+      }
+      return {
+        data: deleted ? (total ? ['remaining'] : []) : ['last'],
+        meta: { total: deleted ? total : 21 },
+      };
+    });
+    await mount(calls);
+    await screen.findByText('last');
+    await userEvent.click(screen.getByText('Delete one'));
+    await waitFor(() =>
+      expect(screen.getByTestId('url')).toHaveTextContent(
+        `page=${target}&pageSize=10&q=loan&status=open&sort=name&order=desc&tab=active`,
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId('total')).toHaveTextContent(String(total)),
+    );
+    expect(
+      calls.mock.calls.filter(([call]) => call.method === 'GET'),
+    ).toHaveLength(target === 3 ? 2 : 3);
+  },
+);
+it('refills a still valid first page and retains failed batch records', async () => {
+  let deleted = false;
+  await mount(({ method, path }) => {
+    if (method === 'DELETE') {
+      if (path.endsWith('protected'))
+        return Response.json(
+          { error: { code: 'FORBIDDEN', message: 'Protected' } },
+          { status: 403 },
+        );
+      deleted = true;
+      return { data: null };
+    }
+    return {
+      data: deleted ? ['protected', 'next'] : ['last', 'protected'],
+      meta: { total: deleted ? 20 : 21 },
+    };
+  }, '/items?page=1&pageSize=10&q=loan');
+  await screen.findByText('last,protected');
+  await userEvent.click(screen.getByText('Delete batch'));
+  await waitFor(() =>
+    expect(screen.getByTestId('rows')).toHaveTextContent('protected,next'),
+  );
+  expect(screen.getByTestId('failed')).toHaveTextContent('1');
+  expect(screen.getByTestId('url')).toHaveTextContent(
+    'page=1&pageSize=10&q=loan',
+  );
+});
+it('keeps rows, count and URL on a failed deletion', async () => {
+  const calls = vi.fn(({ method }: ApiCall) =>
+    method === 'DELETE'
+      ? Response.json(
+          { error: { code: 'FORBIDDEN', message: 'Protected' } },
+          { status: 403 },
+        )
+      : { data: ['last'], meta: { total: 21 } },
+  );
+  await mount(calls);
+  await screen.findByText('last');
+  await userEvent.click(screen.getByText('Delete one'));
+  await waitFor(() =>
+    expect(screen.getByTestId('failed')).toHaveTextContent('1'),
+  );
+  expect(screen.getByTestId('rows')).toHaveTextContent('last');
+  expect(screen.getByTestId('total')).toHaveTextContent('21');
+  expect(screen.getByTestId('url')).toHaveTextContent('page=3');
+  expect(
+    calls.mock.calls.filter(([call]) => call.method === 'GET'),
+  ).toHaveLength(1);
+});
+it('defers detail refresh until returning, then replaces the invalid source page', async () => {
+  let deleted = false;
+  const calls = vi.fn(({ method }: ApiCall) => {
+    if (method === 'DELETE') {
+      deleted = true;
+      return { data: null };
+    }
+    return {
+      data: deleted ? ['remaining'] : ['last'],
+      meta: { total: deleted ? 20 : 21 },
+    };
+  });
+  await mount(calls);
+  await screen.findByText('last');
+  await userEvent.click(screen.getByText('Detail'));
+  expect(screen.getByTestId('url')).toHaveTextContent('/items/last?page=3');
+  expect(
+    calls.mock.calls.filter(([call]) => call.method === 'GET'),
+  ).toHaveLength(1);
+  await userEvent.click(screen.getByText('Delete in detail'));
+  await waitFor(() =>
+    expect(screen.getByTestId('url')).toHaveTextContent('/items?page=2'),
+  );
+  expect(screen.getByTestId('url')).toHaveTextContent(
+    'q=loan&status=open&sort=name&order=desc&tab=active',
+  );
+  await waitFor(() =>
+    expect(screen.getByTestId('rows')).toHaveTextContent('remaining'),
+  );
+  expect(
+    calls.mock.calls.filter(([call]) => call.method === 'GET'),
+  ).toHaveLength(3);
+});
+it('stops after two corrective reads and allows an explicit retry', async () => {
+  let stable = false;
+  const calls = vi.fn(({ query }: ApiCall) => ({
+    data: stable ? ['valid'] : [],
+    meta: { total: stable ? 1000 : (Number(query.page) - 2) * 10 },
+  }));
+  await mount(calls, '/items?page=100&pageSize=10');
+  await screen.findByText(enUS.settings.listChanged);
+  expect(calls).toHaveBeenCalledTimes(3);
+  expect(screen.getByTestId('url')).toHaveTextContent('page=96');
+  stable = true;
+  await userEvent.click(screen.getByText('Refresh'));
+  await waitFor(() =>
+    expect(screen.getByTestId('rows')).toHaveTextContent('valid'),
+  );
+  expect(screen.getByTestId('error')).toBeEmptyDOMElement();
+});
+it('ignores a pre-delete response even when its transport finishes after reload', async () => {
+  let finish!: (value: unknown) => void;
+  let reads = 0;
+  await mount(({ method }) => {
+    if (method === 'DELETE') return { data: null };
+    reads++;
+    if (reads === 1)
+      return new Promise((resolve) => {
+        finish = resolve;
+      });
+    return { data: ['remaining'], meta: { total: 20 } };
+  });
+  await waitFor(() => expect(reads).toBe(1));
+  await userEvent.click(screen.getByText('Delete one'));
+  await waitFor(() =>
+    expect(screen.getByTestId('url')).toHaveTextContent('page=2'),
+  );
+  await act(async () => {
+    finish({ data: ['deleted-old'], meta: { total: 21 } });
+  });
+  expect(screen.getByTestId('rows')).toHaveTextContent('remaining');
+  expect(screen.getByTestId('rows')).not.toHaveTextContent('deleted-old');
+  expect(screen.getByTestId('url')).toHaveTextContent('page=2');
+});
+
+it('keeps the valid source on a failed refresh and corrects only after a successful retry', async () => {
+  let reads = 0;
+  await mount(() => {
+    reads++;
+    if (reads === 2)
+      return Response.json(
+        { error: { code: 'INTERNAL_SERVER_ERROR', message: 'Read failed' } },
+        { status: 500 },
+      );
+    return {
+      data: [reads === 1 ? 'last' : 'remaining'],
+      meta: { total: reads === 1 ? 21 : 20 },
+    };
+  });
+  await screen.findByText('last');
+  await userEvent.click(screen.getByText('Refresh'));
+  await screen.findByText('Read failed');
+  expect(screen.getByTestId('url')).toHaveTextContent('page=3');
+  expect(screen.getByTestId('rows')).toHaveTextContent('last');
+  await userEvent.click(screen.getByText('Refresh'));
+  await waitFor(() =>
+    expect(screen.getByTestId('url')).toHaveTextContent('page=2'),
+  );
+  await waitFor(() =>
+    expect(screen.getByTestId('rows')).toHaveTextContent('remaining'),
+  );
+});
+
+it('refreshes once after a wholly successful batch, then corrects the last page', async () => {
+  let deleted = false;
+  const calls = vi.fn(({ method }: ApiCall) => {
+    if (method === 'DELETE') {
+      deleted = true;
+      return { data: null };
+    }
+    return {
+      data: deleted ? ['remaining'] : ['last', 'protected'],
+      meta: { total: deleted ? 19 : 22 },
+    };
+  });
+  await mount(calls);
+  await screen.findByText('last,protected');
+  await userEvent.click(screen.getByText('Delete batch'));
+  await waitFor(() =>
+    expect(screen.getByTestId('url')).toHaveTextContent('page=2'),
+  );
+  await waitFor(() =>
+    expect(screen.getByTestId('rows')).toHaveTextContent('remaining'),
+  );
+  expect(
+    calls.mock.calls.filter(([call]) => call.method === 'GET'),
+  ).toHaveLength(3);
+  expect(screen.getByTestId('failed')).toHaveTextContent('0');
+});
+
+it('does not let an old filtered response correct a newer query', async () => {
+  let finish!: (value: unknown) => void;
+  await mount(({ query }) =>
+    query.q === 'new'
+      ? { data: ['fresh-query'], meta: { total: 21 } }
+      : new Promise((resolve) => {
+          finish = resolve;
+        }),
+  );
+  await waitFor(() => expect(finish).toBeDefined());
+  await userEvent.click(screen.getByText('Change query'));
+  await screen.findByText('fresh-query');
+  await act(async () => finish({ data: [], meta: { total: 0 } }));
+  expect(screen.getByTestId('url')).toHaveTextContent(
+    'page=2&pageSize=10&q=new',
+  );
+  expect(screen.getByTestId('rows')).toHaveTextContent('fresh-query');
+});
+
+it('suspends a root list while its child covers it', async () => {
+  const calls = vi.fn(() => ({ data: ['last'], meta: { total: 21 } }));
+  await renderWithApp(
+    <>
+      <Routes>
+        <Route path='/' element={<List />}>
+          <Route path='last' element={<Detail />} />
+        </Route>
+      </Routes>
+      <Location />
+    </>,
+    {
+      route: '/?page=3&pageSize=10',
+      namespace: 'list-test',
+      namespaces: { 'list-test': { 'en-US': async () => ({ default: enUS }) } },
+      fetch: answerApi(calls),
+    },
+  );
+  await screen.findByText('last');
+  await userEvent.click(screen.getByText('Detail'));
+  expect(screen.getByTestId('url')).toHaveTextContent('/last?page=3');
+  expect(calls).toHaveBeenCalledTimes(1);
+});