@nocobase/app-template-default 1.0.0-beta.75 → 1.0.0-beta.76

package/tests/components/table-url-state.test.tsx

@@ -0,0 +1,95 @@
+import { renderWithApp } from '@nocobase/app-testing/client';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import { expect, it } from 'vitest';
+import { useTableUrlState } from '../../client/hooks/use-table-url-state.js';
+
+function Probe() {
+  const [count, setCount] = useState<number>();
+  const state = useTableUrlState({ sortColumns: ['name'], rowCount: count });
+  const location = useLocation();
+  const navigate = useNavigate();
+  return (
+    <>
+      <button onClick={() => void navigate(-1)}>Back in history</button>
+      <output data-testid='state'>
+        {JSON.stringify(state.paginationState)}|
+        {JSON.stringify(state.sortingState)}
+      </output>
+      <output data-testid='url'>{location.search}</output>
+      <button onClick={() => setCount(25)}>Loaded</button>
+      <button onClick={() => setCount(10)}>Removed</button>
+      <button
+        onClick={() => state.onSortingChange([{ id: 'name', desc: true }])}
+      >
+        Sort
+      </button>
+      <button
+        onClick={() =>
+          state.onPaginationChange((old) => ({ ...old, pageIndex: 1 }))
+        }
+      >
+        Next
+      </button>
+      <button
+        onClick={() =>
+          void navigate('?page=2&pageSize=20&sort=name&order=asc&q=historic')
+        }
+      >
+        History
+      </button>
+    </>
+  );
+}
+it('clamps only a successfully loaded count and retains unrelated query context', async () => {
+  await renderWithApp(<Probe />, {
+    route: '/?page=5&pageSize=10&q=kept&returnTo=%2Fworkflows',
+  });
+  expect(screen.getByTestId('state')).toHaveTextContent('"pageIndex":4');
+  await userEvent.click(screen.getByRole('button', { name: 'Loaded' }));
+  await waitFor(() =>
+    expect(screen.getByTestId('state')).toHaveTextContent('"pageIndex":2'),
+  );
+  await userEvent.click(screen.getByRole('button', { name: 'Removed' }));
+  await waitFor(() =>
+    expect(screen.getByTestId('state')).toHaveTextContent('"pageIndex":0'),
+  );
+  expect(screen.getByTestId('url')).toHaveTextContent('q=kept');
+  expect(screen.getByTestId('url')).toHaveTextContent('returnTo=%2Fworkflows');
+});
+it('restores external URL changes, resets the page on sort and retains sorting when paging', async () => {
+  await renderWithApp(<Probe />, { route: '/?page=3&pageSize=10' });
+  await userEvent.click(screen.getByRole('button', { name: 'History' }));
+  expect(screen.getByTestId('state')).toHaveTextContent(
+    '"pageIndex":1,"pageSize":20',
+  );
+  expect(screen.getByTestId('state')).toHaveTextContent('"desc":false');
+  await userEvent.click(screen.getByRole('button', { name: 'Sort' }));
+  expect(screen.getByTestId('url')).not.toHaveTextContent('page=2');
+  expect(screen.getByTestId('url')).toHaveTextContent('q=historic');
+  expect(screen.getByTestId('state')).toHaveTextContent('"desc":true');
+  await userEvent.click(screen.getByRole('button', { name: 'Next' }));
+  expect(screen.getByTestId('state')).toHaveTextContent('"pageIndex":1');
+  expect(screen.getByTestId('url')).toHaveTextContent('order=desc');
+});
+it('normalizes invalid pagination and ignores unsupported sort columns', async () => {
+  await renderWithApp(<Probe />, {
+    route: '/?page=1.5&pageSize=3&sort=unknown&order=desc',
+  });
+  expect(screen.getByTestId('state')).toHaveTextContent(
+    '{"pageIndex":0,"pageSize":10}|[]',
+  );
+});
+
+it('allows browser Back to restore the preceding page', async () => {
+  await renderWithApp(<Probe />, { route: '/?page=3&pageSize=10&q=kept' });
+  await userEvent.click(screen.getByRole('button', { name: 'Next' }));
+  expect(screen.getByTestId('state')).toHaveTextContent('"pageIndex":1');
+  await userEvent.click(
+    screen.getByRole('button', { name: 'Back in history' }),
+  );
+  expect(screen.getByTestId('state')).toHaveTextContent('"pageIndex":2');
+  expect(screen.getByTestId('url')).toHaveTextContent('q=kept');
+});

package/tests/components/user-drawer.test.tsx

@@ -0,0 +1,526 @@
+import { answerApi, renderWithApp } from '@nocobase/app-testing/client';
+import { apiClientToken, type ClientApplication } from '@nocobase/app-client';
+import {
+  AuthorizationClient,
+  authorizationClientToken,
+} from '@nocobase/app-plugin-authorization/client';
+import { 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';
+import UsersPage from '../../client/pages/settings/users.js';
+import UserDetail from '../../client/pages/settings/user-detail.js';
+import UserForm from '../../client/pages/settings/user-form.js';
+import enUS from '../../client/locales/en-US.js';
+import zhCN from '../../client/locales/zh-CN.js';
+
+const namespace = '@nocobase/user-drawer-test';
+const namespaces = {
+  [namespace]: {
+    'en-US': async () => ({ default: enUS }),
+    'zh-CN': async () => ({ default: zhCN }),
+  },
+};
+const services = (app: ClientApplication) =>
+  app.container.instance(
+    authorizationClientToken,
+    new AuthorizationClient(app.container.resolve(apiClientToken)),
+  );
+const original = {
+  id: 'alice',
+  name: 'Alice',
+  username: 'alice',
+  email: 'alice@example.test',
+  disabledAt: null,
+  roleScopes: {},
+};
+const search = '?q=Ali&status=enabled&page=2&pageSize=20&order=desc';
+function Location() {
+  const location = useLocation();
+  return (
+    <output data-testid='location'>
+      {location.pathname}
+      {location.search}
+    </output>
+  );
+}
+function Pages({ base }: { readonly base: string }) {
+  return (
+    <>
+      <Routes>
+        <Route path={base} element={<UsersPage />}>
+          <Route path='create' element={<UserForm />} />
+          <Route path=':userId' element={<UserDetail />}>
+            <Route path='edit' element={<UserForm />} />
+          </Route>
+        </Route>
+        <Route path='*' element={<h1>Fallback home</h1>} />
+      </Routes>
+      <Location />
+    </>
+  );
+}
+async function renderUsers(
+  base: string,
+  child = '',
+  unrestricted = true,
+  withRole = false,
+  actions: string[] = [],
+  initialRoles: Record<string, string[]> = {},
+  requiredRole = false,
+) {
+  let current = { ...original, roleScopes: initialRoles };
+  let roleFailure = false;
+  const calls = vi.fn(
+    ({
+      path,
+      method,
+      json,
+    }: {
+      path: string;
+      method: string;
+      json?: {
+        name?: string;
+        username?: string;
+        email?: string;
+        roleScopes?: Record<string, string[]>;
+      };
+    }) => {
+      if (path === 'authorization/permissions')
+        return {
+          data: {
+            unrestricted,
+            permissions: actions.length
+              ? [{ resource: { type: 'user', id: 'alice' }, actions }]
+              : [],
+          },
+        };
+      if (path === 'users/options')
+        return {
+          data: {
+            roleScopes: withRole
+              ? [
+                  {
+                    key: 'app',
+                    label: 'Application',
+                    selection: 'multiple',
+                    requiredOnCreate: requiredRole,
+                    options: [
+                      { value: 'sales', label: 'Sales team' },
+                      { value: 'finance', label: 'Finance team' },
+                      {
+                        value: 'root',
+                        label: 'System administrator',
+                        assignable: false,
+                        removable: false,
+                      },
+                    ],
+                  },
+                ]
+              : [],
+          },
+        };
+      if (path === 'users/alice') {
+        if (method === 'PATCH') {
+          if (roleFailure)
+            return Response.json(
+              {
+                error: {
+                  code: 'INTERNAL_SERVER_ERROR',
+                  message: 'Unavailable',
+                },
+              },
+              { status: 500 },
+            );
+          current = {
+            ...current,
+            ...json,
+            roleScopes: { ...current.roleScopes, ...json?.roleScopes },
+          };
+        }
+        return { data: current };
+      }
+      return { data: [current], meta: { total: 41 } };
+    },
+  );
+  const view = await renderWithApp(<Pages base={base} />, {
+    route: `${base}${child}${search}`,
+    namespace,
+    namespaces,
+    services,
+    fetch: answerApi(calls),
+  });
+  return {
+    ...view,
+    calls,
+    failRole: () => {
+      roleFailure = true;
+    },
+  };
+}
+
+async function selectSales(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(
+    await screen.findByRole('combobox', { name: 'Application', exact: true }),
+  );
+  await user.click(
+    await screen.findByRole('option', { name: 'Sales team', exact: true }),
+  );
+  await user.keyboard('{Escape}');
+}
+
+it.each(['/users', '/settings/users'])(
+  'opens name editing in a drawer with inline account actions and cancels to the same list at %s',
+  async (base) => {
+    const user = userEvent.setup();
+    await renderUsers(base);
+    const edit = await screen.findByRole('link', {
+      name: 'Alice',
+      exact: true,
+    });
+    expect(edit).toHaveAttribute('href', `${base}/alice/edit${search}`);
+    expect(
+      screen.getByRole('button', { name: 'Disable', exact: true }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: 'Revoke sessions', exact: true }),
+    ).toBeVisible();
+    expect(
+      screen.queryByRole('button', { name: 'Edit Alice' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Actions for Alice' }),
+    ).not.toBeInTheDocument();
+    if (base === '/users') {
+      edit.focus();
+      await user.keyboard('{Enter}');
+    } else await user.click(edit);
+    const panel = await screen.findByRole('dialog', { name: 'Edit user' });
+    expect(screen.getAllByRole('dialog')).toHaveLength(1);
+    expect(panel).toHaveAttribute('data-presentation', 'drawer');
+    const name = await within(panel).findByRole('textbox', { name: 'Name *' });
+    await waitFor(() => expect(name).toHaveFocus());
+    await user.click(
+      within(panel).getByRole('button', { name: 'Cancel', exact: true }),
+    );
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+    expect(screen.getByTestId('location')).toHaveTextContent(
+      `${base}${search}`,
+    );
+    await waitFor(() =>
+      expect(
+        screen.getByRole('textbox', { name: enUS.settings.userSearch }),
+      ).toHaveFocus(),
+    );
+    expect(screen.queryByText('Fallback home')).not.toBeInTheDocument();
+  },
+);
+
+it.each(['/users', '/settings/users'])(
+  'validates and saves profile fields from the sole fixed-footer Save at %s',
+  async (base) => {
+    const user = userEvent.setup();
+    const view = await renderUsers(base, '/alice/edit');
+    const name = await screen.findByRole('textbox', { name: 'Name *' });
+    await waitFor(() => expect(name).toHaveValue('Alice'));
+    const save = screen.getByRole('button', { name: 'Save', exact: true });
+    expect(
+      save.closest('[data-slot="route-overlay-footer"]'),
+    ).toBeInTheDocument();
+    await user.clear(name);
+    await user.click(save);
+    expect(await screen.findByText(enUS.settings.required)).toBeVisible();
+    expect(
+      view.calls.mock.calls.filter(([call]) => call.method === 'PATCH'),
+    ).toHaveLength(0);
+    await user.type(name, 'Alice updated');
+    const form = name.closest('form')!;
+    expect(save).toHaveProperty('form', form);
+    fireEvent.submit(form);
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+    expect(view.toasts()).toHaveLength(1);
+    expect(view.calls).toHaveBeenCalledWith(
+      expect.objectContaining({
+        path: 'users/alice',
+        method: 'PATCH',
+        json: {
+          name: 'Alice updated',
+          username: 'alice',
+          email: 'alice@example.test',
+        },
+      }),
+    );
+    expect(
+      await screen.findByText('Alice updated', { exact: true }),
+    ).toBeVisible();
+    expect(screen.getByTestId('location')).toHaveTextContent(
+      `${base}${search}`,
+    );
+  },
+);
+
+it('redirects legacy URLs and uses a searchable multi-select with one Save for both drafts', async () => {
+  const user = userEvent.setup();
+  const view = await renderUsers('/users', '/alice', true, true);
+  const name = await screen.findByRole('textbox', { name: 'Name *' });
+  await waitFor(() => expect(name).toHaveValue('Alice'));
+  expect(screen.getByTestId('location')).toHaveTextContent(
+    `/users/alice/edit${search}`,
+  );
+  expect(
+    screen.getAllByRole('button', { name: 'Save', exact: true }),
+  ).toHaveLength(1);
+  await user.type(name, ' updated');
+  await user.click(
+    screen.getByRole('combobox', { name: 'Application', exact: true }),
+  );
+  const searchRoles = await screen.findByRole('combobox', {
+    name: enUS.settings.searchRoles,
+  });
+  await user.type(searchRoles, 'Sales');
+  expect(
+    await screen.findByRole('option', { name: 'Sales team' }),
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('option', { name: 'Finance team' }),
+  ).not.toBeInTheDocument();
+  await user.click(screen.getByRole('option', { name: 'Sales team' }));
+  await user.keyboard('{Escape}');
+  expect(
+    screen.getByRole('combobox', { name: 'Application', exact: true }),
+  ).toHaveTextContent('Sales team');
+  await user.click(screen.getByRole('button', { name: 'Save', exact: true }));
+  await waitFor(() =>
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+  );
+  expect(view.calls).toHaveBeenCalledWith(
+    expect.objectContaining({
+      path: 'users/alice',
+      method: 'PATCH',
+      json: {
+        name: 'Alice updated',
+        username: 'alice',
+        email: 'alice@example.test',
+        roleScopes: { app: ['sales'] },
+      },
+    }),
+  );
+  expect(
+    view.calls.mock.calls.filter(([call]) =>
+      ['PATCH', 'PUT'].includes(call.method),
+    ),
+  ).toHaveLength(1);
+});
+
+it('retains both drafts on failed unified save and keeps one discard guard', async () => {
+  const user = userEvent.setup();
+  const view = await renderUsers('/users', '/alice/edit', true, true);
+  view.failRole();
+  const name = await screen.findByRole('textbox', { name: 'Name *' });
+  await waitFor(() => expect(name).toHaveValue('Alice'));
+  await user.type(name, ' draft');
+  await selectSales(user);
+  await user.click(screen.getByRole('button', { name: 'Save', exact: true }));
+  expect(await screen.findByText(enUS.settings.failed)).toBeVisible();
+  expect(name).toHaveValue('Alice draft');
+  expect(
+    screen.getByRole('combobox', { name: 'Application', exact: true }),
+  ).toHaveTextContent('Sales team');
+  expect(view.toasts()).toHaveLength(0);
+  await user.click(screen.getByRole('button', { name: 'Close', exact: true }));
+  const confirm = await screen.findByRole('alertdialog');
+  await user.click(
+    within(confirm).getByRole('button', { name: 'Cancel', exact: true }),
+  );
+  expect(name).toHaveValue('Alice draft');
+  await user.click(screen.getByRole('button', { name: 'Close', exact: true }));
+  await user.click(
+    within(await screen.findByRole('alertdialog')).getByRole('button', {
+      name: 'Confirm',
+      exact: true,
+    }),
+  );
+  await waitFor(() =>
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+  );
+  expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+});
+
+it('keeps names as plain text and hides account actions for read-only users', async () => {
+  await renderUsers('/users', '', false, true, ['read']);
+  expect(await screen.findByText('Alice', { exact: true })).toBeVisible();
+  expect(
+    screen.queryByRole('link', { name: 'Alice', exact: true }),
+  ).not.toBeInTheDocument();
+  for (const name of ['Disable', 'Enable', 'Revoke sessions'])
+    expect(
+      screen.queryByRole('button', { name, exact: true }),
+    ).not.toBeInTheDocument();
+});
+
+it('keeps the editor read-only without management permission', async () => {
+  await renderUsers('/users', '/alice/edit', false, true);
+  expect(await screen.findByRole('textbox', { name: 'Name *' })).toBeDisabled();
+  expect(
+    await screen.findByRole('combobox', { name: 'Application', exact: true }),
+  ).toBeDisabled();
+  expect(
+    screen.queryByRole('button', { name: 'Save', exact: true }),
+  ).not.toBeInTheDocument();
+});
+
+it('lets role-only managers save only roleScopes and prevents protected role selection', async () => {
+  const user = userEvent.setup();
+  const view = await renderUsers('/users', '', false, true, [
+    'read',
+    'assign-role',
+  ]);
+  const edit = await screen.findByRole('link', {
+    name: 'Alice',
+    exact: true,
+  });
+  expect(
+    screen.queryByRole('button', { name: 'Actions for Alice' }),
+  ).not.toBeInTheDocument();
+  await user.click(edit);
+  expect(await screen.findByRole('textbox', { name: 'Name *' })).toBeDisabled();
+  await user.click(
+    await screen.findByRole('combobox', { name: 'Application', exact: true }),
+  );
+  expect(
+    await screen.findByRole('option', { name: 'System administrator' }),
+  ).toHaveAttribute('aria-disabled', 'true');
+  await user.click(screen.getByRole('option', { name: 'Sales team' }));
+  await user.keyboard('{Escape}');
+  await user.click(screen.getByRole('button', { name: 'Save', exact: true }));
+  await waitFor(() =>
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+  );
+  expect(view.calls).toHaveBeenCalledWith(
+    expect.objectContaining({
+      method: 'PATCH',
+      json: { roleScopes: { app: ['sales'] } },
+    }),
+  );
+});
+
+it('blocks closing and duplicate submission until the unified save completes', async () => {
+  const user = userEvent.setup();
+  let current = { ...original };
+  let complete!: (value: unknown) => void;
+  const pending = new Promise((resolve) => {
+    complete = resolve;
+  });
+  const calls = vi.fn(({ path, method }: { path: string; method: string }) => {
+    if (path === 'authorization/permissions')
+      return { data: { unrestricted: true, permissions: [] } };
+    if (path === 'users/options') return { data: { roleScopes: [] } };
+    if (path === 'users/alice' && method === 'PATCH') return pending;
+    if (path === 'users/alice') return { data: current };
+    return { data: [current], meta: { total: 41 } };
+  });
+  const view = await renderWithApp(<Pages base='/users' />, {
+    route: `/users/alice/edit${search}`,
+    namespace,
+    namespaces,
+    services,
+    fetch: answerApi(calls),
+  });
+  const name = await screen.findByRole('textbox', { name: 'Name *' });
+  await waitFor(() => expect(name).toHaveValue('Alice'));
+  await user.type(name, ' changed');
+  await user.click(screen.getByRole('button', { name: 'Save', exact: true }));
+  await waitFor(() => expect(name).toBeDisabled());
+  expect(
+    screen.getByRole('button', { name: enUS.settings.saving }),
+  ).toBeDisabled();
+  expect(
+    screen.getByRole('button', { name: 'Cancel', exact: true }),
+  ).toBeDisabled();
+  await user.click(screen.getByRole('button', { name: 'Close', exact: true }));
+  expect(screen.getAllByRole('dialog')).toHaveLength(1);
+  expect(view.toasts()).toHaveLength(0);
+  current = { ...original, name: 'Alice changed' };
+  complete({ data: current });
+  await waitFor(() =>
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+  );
+  expect(
+    calls.mock.calls.filter(([call]) => call.method === 'PATCH'),
+  ).toHaveLength(1);
+});
+
+it('preserves protected and unknown assignments and confirms actual removals before the one Save', async () => {
+  const user = userEvent.setup();
+  const view = await renderUsers('/users', '/alice/edit', true, true, [], {
+    app: ['root', 'sales', 'legacy-role'],
+    external: ['retained'],
+  });
+  const picker = await screen.findByRole('combobox', {
+    name: 'Application',
+    exact: true,
+  });
+  expect(picker).toHaveTextContent('legacy-role');
+  await user.click(picker);
+  expect(
+    await screen.findByRole('option', { name: 'System administrator' }),
+  ).toHaveAttribute('aria-disabled', 'true');
+  expect(screen.getByRole('option', { name: 'legacy-role' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+  await user.click(screen.getByRole('option', { name: 'Sales team' }));
+  await user.keyboard('{Escape}');
+  await user.click(screen.getByRole('button', { name: 'Save', exact: true }));
+  const confirm = await screen.findByRole('alertdialog');
+  expect(confirm).toHaveTextContent('Sales team');
+  expect(
+    view.calls.mock.calls.filter(([call]) => call.method === 'PATCH'),
+  ).toHaveLength(0);
+  await user.click(
+    within(confirm).getByRole('button', { name: 'Save', exact: true }),
+  );
+  await waitFor(() =>
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+  );
+  expect(view.calls).toHaveBeenCalledWith(
+    expect.objectContaining({
+      method: 'PATCH',
+      json: expect.objectContaining({
+        roleScopes: { app: ['root', 'legacy-role'] },
+      }),
+    }),
+  );
+});
+
+it('focuses and describes the required role dropdown when creating without a role', async () => {
+  const user = userEvent.setup();
+  const view = await renderUsers('/users', '/create', true, true, [], {}, true);
+  await user.type(
+    await screen.findByRole('textbox', { name: 'Name *' }),
+    'New user',
+  );
+  await user.type(
+    screen.getByRole('textbox', { name: 'Email *' }),
+    'new@example.test',
+  );
+  await user.type(
+    screen.getByLabelText(`${enUS.settings.password} *`),
+    'long-enough-password',
+  );
+  await user.click(screen.getByRole('button', { name: 'Create', exact: true }));
+  const roles = screen.getByRole('combobox', {
+    name: 'Application',
+    exact: true,
+  });
+  await waitFor(() => expect(roles).toHaveFocus());
+  expect(roles).toHaveAttribute('aria-invalid', 'true');
+  expect(roles).toHaveAccessibleDescription(enUS.settings.required);
+  expect(
+    view.calls.mock.calls.filter(([call]) => call.method === 'POST'),
+  ).toHaveLength(0);
+});

package/tests/logic/return-to.test.ts

@@ -0,0 +1,19 @@
+import { expect, it } from 'vitest';
+import { safeReturnTo } from '../../client/lib/return-to.js';
+it('accepts application-relative state and rejects external or ambiguous destinations', () => {
+  expect(safeReturnTo('/settings/processes/loan?q=review&page=2#node')).toBe(
+    '/settings/processes/loan?q=review&page=2#node',
+  );
+  for (const value of [
+    null,
+    '',
+    'https://outside.test',
+    '//outside.test',
+    '/a/..//outside.test',
+    '/\\outside.test',
+    '/\n/outside.test',
+    'javascript:alert(1)',
+    'settings/users',
+  ])
+    expect(safeReturnTo(value)).toBeUndefined();
+});

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@nocobase/dev-config/tsconfig/client.json",
   "compilerOptions": {
+    "types": ["node"],
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
   },
   "include": ["client"],