@nocobase/app-template-default 1.0.0-beta.67 → 1.0.0-beta.69

package/tests/components/permission-filter.test.tsx

@@ -0,0 +1,202 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { expect, it, vi } from 'vitest';
+import {
+  PermissionFilter,
+  type PermissionFilterLabels,
+} from '#components/permission-filter';
+const labels: PermissionFilterLabels = {
+  limit: 'Up to 20 conditions',
+  configure: 'Conditions',
+  title: 'Configure filter',
+  description: 'Apply then save role',
+  all: 'All conditions',
+  any: 'Any condition',
+  field: 'Field',
+  operator: 'Operator',
+  valueType: 'Value type',
+  value: 'Value',
+  text: 'Text',
+  number: 'Number',
+  boolean: 'Boolean',
+  true: 'Yes',
+  false: 'No',
+  add: 'Add condition',
+  remove: 'Remove',
+  cancel: 'Cancel',
+  apply: 'Apply',
+  invalid: 'Complete all conditions',
+  advanced: 'Advanced conditions are preserved',
+  reconfigure: 'Reconfigure',
+  operators: {
+    $eq: 'Equals',
+    $ne: 'Not equal',
+    $includes: 'Contains',
+    $gt: 'Greater than',
+    $gte: 'At least',
+    $lt: 'Less than',
+    $lte: 'At most',
+    $empty: 'Empty',
+    $notEmpty: 'Not empty',
+  },
+};
+const fields = [
+  { value: 'department', label: 'Department' },
+  { value: 'amountCents', label: 'Amount (cents)' },
+];
+it('validates a filter, prevents Enter submitting the role and emits a native typed filter', async () => {
+  const user = userEvent.setup(),
+    apply = vi.fn(),
+    submit = vi.fn((event) => event.preventDefault());
+  function Draft() {
+    const [open, setOpen] = useState(true);
+    return (
+      <form onSubmit={submit}>
+        <PermissionFilter
+          open={open}
+          onOpenChange={setOpen}
+          value={undefined}
+          fields={fields}
+          labels={labels}
+          onApply={apply}
+        />
+      </form>
+    );
+  }
+  render(<Draft />);
+  expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+  await user.type(screen.getByRole('textbox', { name: 'Value 1' }), 'Finance');
+  await user.keyboard('{Enter}');
+  expect(submit).not.toHaveBeenCalled();
+  await user.click(screen.getByRole('button', { name: 'Add condition' }));
+  await user.click(screen.getByRole('combobox', { name: 'Field 2' }));
+  await user.click(
+    await screen.findByRole('option', { name: 'Amount (cents)' }),
+  );
+  await user.click(screen.getByRole('combobox', { name: 'Operator 2' }));
+  await user.click(await screen.findByRole('option', { name: 'At least' }));
+  await user.type(
+    screen.getByRole('textbox', { name: 'Value 2' }),
+    'not a number',
+  );
+  expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+  await user.clear(screen.getByRole('textbox', { name: 'Value 2' }));
+  await user.type(screen.getByRole('textbox', { name: 'Value 2' }), '500000');
+  await user.click(screen.getByRole('button', { name: 'Apply' }));
+  expect(apply).toHaveBeenCalledExactlyOnceWith({
+    kind: 'group',
+    logic: 'and',
+    items: [
+      {
+        kind: 'condition',
+        path: ['department'],
+        operator: '$eq',
+        value: 'Finance',
+      },
+      {
+        kind: 'condition',
+        path: ['amountCents'],
+        operator: '$gte',
+        value: 500000,
+      },
+    ],
+  });
+  expect(submit).not.toHaveBeenCalled();
+});
+it('keeps advanced existing filters until explicit reconfiguration and cancellation never applies', async () => {
+  const user = userEvent.setup(),
+    apply = vi.fn(),
+    close = vi.fn();
+  render(
+    <PermissionFilter
+      open
+      onOpenChange={close}
+      value={{
+        kind: 'group',
+        logic: 'or',
+        items: [{ kind: 'group', logic: 'and', items: [] }],
+      }}
+      fields={fields}
+      labels={labels}
+      onApply={apply}
+    />,
+  );
+  await waitFor(() => expect(screen.getByText(labels.advanced)).toBeVisible());
+  expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+  await user.click(screen.getByRole('button', { name: 'Cancel' }));
+  expect(close).toHaveBeenCalledWith(false);
+  expect(apply).not.toHaveBeenCalled();
+});
+it('restores existing values, requires nonempty conditions and preserves typed boolean values', async () => {
+  const user = userEvent.setup(),
+    apply = vi.fn();
+  render(
+    <PermissionFilter
+      open
+      onOpenChange={vi.fn()}
+      value={{
+        kind: 'condition',
+        path: ['department'],
+        operator: '$eq',
+        value: 'Finance',
+      }}
+      fields={fields}
+      labels={labels}
+      onApply={apply}
+    />,
+  );
+  expect(screen.getByRole('textbox', { name: 'Value 1' })).toHaveValue(
+    'Finance',
+  );
+  await user.click(screen.getByRole('button', { name: 'Remove' }));
+  expect(screen.getByRole('button', { name: 'Add condition' })).toHaveFocus();
+  expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+  await user.click(screen.getByRole('button', { name: 'Add condition' }));
+  await user.click(screen.getByRole('combobox', { name: 'Value type 1' }));
+  await user.click(await screen.findByRole('option', { name: 'Boolean' }));
+  await user.click(screen.getByRole('combobox', { name: 'Value 1' }));
+  await user.click(await screen.findByRole('option', { name: 'No' }));
+  await user.click(screen.getByRole('button', { name: 'Apply' }));
+  expect(apply.mock.calls[0]?.[0].items[0].value).toBe(false);
+});
+it('keeps readonly configuration disabled', () => {
+  render(
+    <PermissionFilter
+      open={false}
+      onOpenChange={vi.fn()}
+      value={undefined}
+      fields={fields}
+      labels={labels}
+      onApply={vi.fn()}
+      disabled
+    />,
+  );
+  expect(screen.getByRole('button', { name: 'Conditions' })).toBeDisabled();
+});
+
+it('keeps the condition limit explained and restores focus when removing a row at the limit', async () => {
+  render(
+    <PermissionFilter
+      open
+      onOpenChange={vi.fn()}
+      value={{
+        kind: 'group',
+        logic: 'and',
+        items: Array.from({ length: 20 }, () => ({
+          kind: 'condition',
+          path: ['department'],
+          operator: '$eq',
+          value: 'Finance',
+        })),
+      }}
+      fields={fields}
+      labels={labels}
+      onApply={vi.fn()}
+    />,
+  );
+  expect(screen.getByRole('button', { name: 'Add condition' })).toBeDisabled();
+  await waitFor(() => expect(screen.getByText(labels.limit)).toBeVisible());
+  await userEvent.click(screen.getAllByRole('button', { name: 'Remove' })[0]!);
+  expect(screen.getByRole('button', { name: 'Add condition' })).toHaveFocus();
+});

package/tests/components/settings.test.tsx

@@ -0,0 +1,294 @@
+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 { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Routes, Route, useNavigate } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
+import UserForm from '../../client/pages/settings/user-form.js';
+import UsersPage from '../../client/pages/settings/users.js';
+import RoleForm from '../../client/pages/settings/role-form.js';
+import RolesPage from '../../client/pages/settings/roles.js';
+import enUS from '../../client/locales/en-US.js';
+import zhCN from '../../client/locales/zh-CN.js';
+const settingsNamespace = '@nocobase/settings-test';
+const userRow = {
+  id: 'alice',
+  name: 'Alice',
+  email: 'alice@example.test',
+  disabledAt: null,
+  roleScopes: { app: ['sales'] },
+};
+const services = (app: ClientApplication) =>
+  app.container.instance(
+    authorizationClientToken,
+    new AuthorizationClient(app.container.resolve(apiClientToken)),
+  );
+const namespaces = {
+  [settingsNamespace]: {
+    'en-US': async () => ({ default: enUS }),
+    'zh-CN': async () => ({ default: zhCN }),
+  },
+};
+
+describe('template system settings', () => {
+  it('loads real client data, searches without losing typed input and hides actions without permission', async () => {
+    const user = userEvent.setup();
+    const calls = vi.fn(({ path }: { path: string }) =>
+      path === 'authorization/permissions'
+        ? { data: { unrestricted: false, permissions: [] } }
+        : { data: [userRow], meta: { total: 1 } },
+    );
+    await renderWithApp(<UsersPage />, {
+      namespace: settingsNamespace,
+      namespaces,
+      services,
+      fetch: answerApi(calls),
+    });
+    expect(await screen.findByRole('link', { name: 'Alice' })).toBeVisible();
+    expect(
+      screen.queryByRole('link', { name: 'New user' }),
+    ).not.toBeInTheDocument();
+    const search = screen.getByRole('textbox', {
+      name: enUS.settings.userSearch,
+    });
+    await user.type(search, 'Ali');
+    await waitFor(() =>
+      expect(calls).toHaveBeenCalledWith(
+        expect.objectContaining({
+          path: 'users',
+          query: expect.objectContaining({ q: 'Ali' }),
+        }),
+      ),
+    );
+    expect(search).toHaveValue('Ali');
+  });
+  it('waits for Chinese composition and restores the textbox from history query changes', async () => {
+    const calls = vi.fn(({ path }: { path: string }) =>
+      path === 'authorization/permissions'
+        ? { data: { unrestricted: false, permissions: [] } }
+        : { data: [userRow], meta: { total: 1 } },
+    );
+    function HistoryControls() {
+      const navigate = useNavigate();
+      return (
+        <button onClick={() => void navigate('?q=Bob')}>External query</button>
+      );
+    }
+    await renderWithApp(
+      <>
+        <UsersPage />
+        <HistoryControls />
+      </>,
+      {
+        namespace: settingsNamespace,
+        namespaces,
+        services,
+        fetch: answerApi(calls),
+      },
+    );
+    const search = screen.getByRole('textbox', {
+      name: enUS.settings.userSearch,
+    });
+    fireEvent.compositionStart(search);
+    fireEvent.change(search, { target: { value: '张三' } });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+    expect(
+      calls.mock.calls.some(
+        ([call]) => Reflect.get(call, 'query')?.q === '张三',
+      ),
+    ).toBe(false);
+    fireEvent.compositionEnd(search);
+    await waitFor(() =>
+      expect(calls).toHaveBeenCalledWith(
+        expect.objectContaining({
+          path: 'users',
+          query: expect.objectContaining({ q: '张三' }),
+        }),
+      ),
+    );
+    await userEvent.click(
+      screen.getByRole('button', { name: 'External query' }),
+    );
+    await waitFor(() => expect(search).toHaveValue('Bob'));
+  });
+  it('shows failed role options with retry and prevents incomplete saves', async () => {
+    const calls = vi.fn(({ path }: { path: string }) => {
+      if (path === 'authorization/permissions')
+        return { data: { unrestricted: true, permissions: [] } };
+      if (path.endsWith('/options'))
+        return Response.json(
+          { error: { code: 'INTERNAL_SERVER_ERROR', message: 'Unavailable' } },
+          { status: 500 },
+        );
+      return { data: [{ key: 'sales', title: 'Sales', grants: [] }] };
+    });
+    await renderWithApp(
+      <Routes>
+        <Route path='/settings/roles' element={<RolesPage />}>
+          <Route path='create' element={<RoleForm />} />
+        </Route>
+      </Routes>,
+      {
+        route: '/settings/roles/create',
+        namespace: settingsNamespace,
+        namespaces,
+        services,
+        fetch: answerApi(calls),
+      },
+    );
+    expect((await screen.findAllByText(enUS.settings.failed))[0]).toBeVisible();
+    expect(
+      screen.queryByRole('button', { name: 'Save', exact: true }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getAllByRole('button', { name: 'Retry' }).length,
+    ).toBeGreaterThan(0);
+    expect(
+      calls.mock.calls.some(([call]) => Reflect.get(call, 'method') === 'POST'),
+    ).toBe(false);
+  });
+  it('keeps user creation disabled and displays a retry when role options fail', async () => {
+    const calls = vi.fn(({ path }: { path: string }) => {
+      if (path === 'authorization/permissions')
+        return { data: { unrestricted: true, permissions: [] } };
+      if (path.endsWith('/options'))
+        return Response.json(
+          { error: { code: 'INTERNAL_SERVER_ERROR', message: 'Unavailable' } },
+          { status: 500 },
+        );
+      return { data: [userRow], meta: { total: 1 } };
+    });
+    await renderWithApp(
+      <Routes>
+        <Route path='/settings/users' element={<UsersPage />}>
+          <Route path='create' element={<UserForm />} />
+        </Route>
+      </Routes>,
+      {
+        route: '/settings/users/create',
+        namespace: settingsNamespace,
+        namespaces,
+        services,
+        fetch: answerApi(calls),
+      },
+    );
+    expect((await screen.findAllByText(enUS.settings.failed))[0]).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: 'Create', exact: true }),
+    ).toBeDisabled();
+    expect(
+      screen.getAllByRole('button', { name: 'Retry' }).length,
+    ).toBeGreaterThan(0);
+  });
+  it('preserves the role draft on a conditional save conflict and submits the original revision', async () => {
+    const user = userEvent.setup();
+    const calls = vi.fn(
+      ({ path, method }: { path: string; method: string }) => {
+        if (path === 'authorization/permissions')
+          return { data: { unrestricted: true, permissions: [] } };
+        if (path.endsWith('/options'))
+          return {
+            data: {
+              sections: [
+                {
+                  name: 'settings',
+                  title: 'Settings',
+                  order: 0,
+                  subsections: [
+                    {
+                      name: 'settings',
+                      title: 'Settings',
+                      resources: [
+                        {
+                          type: 'settings',
+                          id: 'files',
+                          title: 'Files',
+                          actions: [{ name: 'read', title: 'Read files' }],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+              recordAccess: [],
+              subjectTypes: [],
+              collections: [],
+            },
+          };
+        if (path === 'authorization/permissionSets')
+          return {
+            data: [
+              {
+                key: 'sales',
+                title: 'Sales',
+                grants: [],
+                revision: 'version-1',
+              },
+            ],
+          };
+        if (method === 'PATCH')
+          return Response.json(
+            {
+              error: {
+                code: 'ALREADY_EXISTS',
+                message: 'Conflict',
+                reason: 'PERMISSION_SET_CONFLICT',
+              },
+            },
+            { status: 409 },
+          );
+        return {
+          data: {
+            key: 'sales',
+            title: 'Sales',
+            grants: [],
+            revision: 'version-1',
+          },
+        };
+      },
+    );
+    await renderWithApp(
+      <Routes>
+        <Route path='/settings/roles' element={<RolesPage />}>
+          <Route path=':key/edit' element={<RoleForm />} />
+        </Route>
+      </Routes>,
+      {
+        route: '/settings/roles/sales/edit',
+        namespace: settingsNamespace,
+        namespaces,
+        services,
+        fetch: answerApi(calls),
+      },
+    );
+    await user.click(await screen.findByRole('button', { name: /^Settings/ }));
+    const toggle = await screen.findByRole('checkbox', { name: 'Read files' });
+    await waitFor(() =>
+      expect(toggle).not.toHaveAttribute('aria-disabled', 'true'),
+    );
+    await user.click(toggle);
+    await user.click(screen.getByRole('button', { name: 'Save', exact: true }));
+    expect(await screen.findByText(enUS.settings.conflict)).toBeVisible();
+    expect(toggle).toBeChecked();
+    expect(calls).toHaveBeenCalledWith(
+      expect.objectContaining({
+        method: 'PATCH',
+        json: expect.objectContaining({
+          expectedRevision: 'version-1',
+          grants: [
+            {
+              resource: { type: 'settings', id: 'files' },
+              actions: [{ action: 'read' }],
+            },
+          ],
+        }),
+      }),
+    );
+  });
+});

package/tests/components/sidebar-permissions.test.tsx

@@ -1,6 +1,9 @@
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
-import { act, render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import {
@@ -10,6 +13,8 @@ import {
 import { NavigationMenu } from '../../client/layouts/components/navigation-menu';
 import { AppSidebarProvider } from '../../client/layouts/components/app-sidebar';
 
+const sidebarPreference = createAppSidebarPreferenceStore('/main');
+
 const auth = vi.hoisted(() => ({ revision: 0, client: { can: vi.fn() } }));
 vi.mock('@nocobase/app-plugin-authorization/client', () => ({
   useAuthorizationClient: () => auth.client,
@@ -63,16 +68,18 @@ describe.each(['expanded', 'collapsed', 'mobile'])(
     it('hides pending and denied entries, removes empty groups, and refreshes open menus', async () => {
       if (mode === 'mobile') vi.stubGlobal('innerWidth', 390);
       if (mode === 'collapsed')
-        localStorage.setItem('nocobase:sidebar:collapsed', 'true');
+        localStorage.setItem('nocobase:sidebar:collapsed:app:/main', 'true');
       const resolve: ((allowed: boolean) => void)[] = [];
       auth.client.can.mockImplementation(
         () => new Promise<boolean>((done) => resolve.push(done)),
       );
       const tree = () => (
         <MemoryRouter>
-          <AppSidebarProvider>
-            <Menu />
-          </AppSidebarProvider>
+          <SidebarPreferenceProvider value={sidebarPreference}>
+            <AppSidebarProvider>
+              <Menu />
+            </AppSidebarProvider>
+          </SidebarPreferenceProvider>
         </MemoryRouter>
       );
       const { rerender } = render(tree());
@@ -80,19 +87,10 @@ describe.each(['expanded', 'collapsed', 'mobile'])(
       await act(async () => {
         resolve.forEach((done, i) => done(i === 0));
       });
-      const user = userEvent.setup();
-      if (mode === 'collapsed') {
-        await user.hover(await screen.findByRole('button', { name: 'Group' }));
-        expect(
-          within(await screen.findByRole('dialog')).getByRole('link', {
-            name: 'Allowed',
-          }),
-        ).toHaveAttribute('href', '/Allowed');
-      } else {
-        expect(
-          await screen.findByRole('link', { name: 'Allowed' }),
-        ).toBeVisible();
-      }
+      // Group is a section: its entries show in every mode, as icons in the collapsed sidebar.
+      expect(
+        await screen.findByRole('link', { name: 'Allowed' }),
+      ).toHaveAttribute('href', '/Allowed');
       expect(screen.queryByText('Denied')).not.toBeInTheDocument();
       expect(screen.queryByText('Empty')).not.toBeInTheDocument();
       auth.client.can.mockResolvedValue(false);