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

package/server/config/notification.ts

@@ -1,11 +1,8 @@
-import {
-  defineAppConfig,
-  type AppConfigFactory,
-} from '@nocobase/app-server/config';
+import { defineMailChannelsConfig } from '@nocobase/app-server/mailer';
+import { type AppConfigFactory } from '@nocobase/app-server/config';
 import type { NotificationConfig } from '@nocobase/app-plugin-notification/server';
 
-const notification: AppConfigFactory<NotificationConfig> = defineAppConfig(
-  (_runtime) => ({ channels: {} }),
-);
+const notification: AppConfigFactory<NotificationConfig> =
+  defineMailChannelsConfig({ defaults: { channels: {} } });
 
 export default notification;

package/tests/components/app-layout-routes.test.tsx

@@ -10,6 +10,10 @@ import { MemoryRouter, Route, Routes } from 'react-router';
 import { afterEach, beforeEach, expect, it, vi } from 'vitest';
 
 import { AppLayout } from '../../client/layouts/app-layout.js';
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 import enUS from '../../client/locales/en-US.js';
 
 // Breadcrumb titles are route data, not keys any namespace owns: the trail translates each through its package's
@@ -87,14 +91,17 @@ function OrderPage(): ReactElement {
 }
 
 function renderLayout(page: ReactElement): HTMLElement {
+  const sidebarPreference = createAppSidebarPreferenceStore('/test-app');
   render(
-    <MemoryRouter initialEntries={['/orders/42']}>
-      <Routes>
-        <Route element={<AppLayout routes={routes} />}>
-          <Route path='/orders/:id' element={page} />
-        </Route>
-      </Routes>
-    </MemoryRouter>,
+    <SidebarPreferenceProvider value={sidebarPreference}>
+      <MemoryRouter initialEntries={['/orders/42']}>
+        <Routes>
+          <Route element={<AppLayout routes={routes} />}>
+            <Route path='/orders/:id' element={page} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    </SidebarPreferenceProvider>,
     { wrapper: I18n },
   );
   return screen.getByRole('banner');

package/tests/components/auth-i18n.test.tsx

@@ -11,20 +11,32 @@ import RegisterPage from '../../client/pages/auth/register.js';
 import ResetPasswordPage from '../../client/pages/auth/reset-password.js';
 import { Loading } from '../../client/components/loading.js';
 
+const resetState = vi.hoisted(() => ({
+  success: false,
+  available: true,
+  pending: false,
+  failed: false,
+  retry: vi.fn(),
+}));
+
 vi.mock('@nocobase/app-plugin-authentication/client', () => ({
   useSignUpAvailable: () => true,
   usePasswordResetCapability: () => ({
-    data: { passwordResetAvailable: true },
-    isPending: false,
-    isError: false,
-    refetch: vi.fn(),
+    data: { passwordResetAvailable: resetState.available },
+    isPending: resetState.pending,
+    isError: resetState.failed,
+    refetch: resetState.retry,
   }),
 }));
 
 vi.mock('@nocobase/app-plugin-authentication/client/actions', () => ({
   usePasswordLogin: () => ({ isPending: false, submit: vi.fn() }),
   usePasswordRegistration: () => ({ isPending: false, submit: vi.fn() }),
-  usePasswordReset: () => ({ isPending: false, submit: vi.fn() }),
+  usePasswordReset: () => ({
+    isPending: false,
+    isSuccess: resetState.success,
+    submit: vi.fn(),
+  }),
   usePasswordResetRequest: () => ({
     isPending: false,
     isSuccess: true,
@@ -49,6 +61,46 @@ function renderPage(value: I18nRuntime, page: ReactElement) {
   );
 }
 describe('authentication translations', () => {
+  it('shows translated success and stops offering a second reset', async () => {
+    resetState.success = true;
+    try {
+      const value = await runtime();
+      renderPage(value, <ResetPasswordPage />);
+      expect(screen.getByRole('status')).toHaveTextContent(
+        'Your password has been reset.',
+      );
+      expect(screen.queryByLabelText('New password')).not.toBeInTheDocument();
+      await act(() => value.changeLanguage('zh-CN'));
+      expect(screen.getByRole('status')).toHaveTextContent(
+        '密码已重置，请用新密码登录。',
+      );
+    } finally {
+      resetState.success = false;
+    }
+  });
+  it('hides the form when capability is disabled and allows retry after a failed lookup', async () => {
+    resetState.available = false;
+    try {
+      const value = await runtime();
+      const view = renderPage(value, <ResetPasswordPage />);
+      expect(screen.queryByLabelText('New password')).not.toBeInTheDocument();
+      resetState.failed = true;
+      view.rerender(
+        <I18nProvider runtime={value}>
+          <MemoryRouter>
+            <ResetPasswordPage />
+          </MemoryRouter>
+        </I18nProvider>,
+      );
+      fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+      expect(resetState.retry).toHaveBeenCalledOnce();
+    } finally {
+      resetState.available = true;
+      resetState.failed = false;
+      resetState.retry.mockReset();
+    }
+  });
+
   it('updates the login page, brand panel and visibility control on language change', async () => {
     const value = await runtime();
     renderPage(value, <LoginPage />);

package/tests/components/data-table.test.tsx

@@ -0,0 +1,127 @@
+import { renderWithApp } from '@nocobase/app-testing/client';
+import type { ColumnDef, PaginationState } from '@tanstack/react-table';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { describe, it, expect } from 'vitest';
+import {
+  DataTable,
+  DataTableColumnHeader,
+  DataTableViewOptions,
+} 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/datatable-test';
+const namespaces = {
+  [namespace]: {
+    'en-US': async () => ({ default: enUS }),
+    'zh-CN': async () => ({ default: zhCN }),
+  },
+};
+type Item = { id: string; amount: number };
+const rows: Item[] = Array.from({ length: 12 }, (_, amount) => ({
+  id: `row-${amount}`,
+  amount,
+}));
+const columns: ColumnDef<Item>[] = [
+  { accessorKey: 'id', header: 'ID', enableHiding: false },
+  {
+    accessorKey: 'amount',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title='Amount' />
+    ),
+  },
+];
+describe('standard DataTable', () => {
+  it('uses real TanStack sorting, pagination and column visibility with restoration', async () => {
+    const user = userEvent.setup();
+    await renderWithApp(
+      <DataTable
+        columns={columns}
+        data={rows}
+        getRowId={(row) => row.id}
+        showSelectedCount={false}
+        toolbar={(table) => (
+          <DataTableViewOptions table={table} getColumnLabel={() => 'Amount'} />
+        )}
+      />,
+      { namespace, namespaces },
+    );
+    expect(screen.getByText('Page 1 of 2')).toBeVisible();
+    expect(screen.queryByText('row-10')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(screen.getByText('row-10')).toBeVisible();
+    await user.click(
+      screen.getByRole('button', { name: 'Go to previous page' }),
+    );
+    await user.click(
+      screen.getByRole('button', { name: 'Amount', exact: true }),
+    );
+    await user.click(
+      await screen.findByRole('menuitem', { name: 'Desc', exact: true }),
+    );
+    expect(
+      within(screen.getAllByRole('row')[1]!).getByText('row-11'),
+    ).toBeVisible();
+    await user.click(screen.getByRole('button', { name: 'View', exact: true }));
+    await user.click(
+      await screen.findByRole('menuitemcheckbox', {
+        name: 'Amount',
+        exact: true,
+      }),
+    );
+    expect(screen.getAllByRole('columnheader', { hidden: true })).toHaveLength(
+      1,
+    );
+    await user.click(
+      await screen.findByRole('menuitemcheckbox', {
+        name: 'Amount',
+        exact: true,
+      }),
+    );
+    expect(screen.getByRole('columnheader', { name: 'Amount' })).toBeVisible();
+  });
+  it('preserves the server page and sort instead of applying client paging or sorting again', async () => {
+    const user = userEvent.setup();
+    const pageRows = rows.slice(0, 2);
+    function ServerPage() {
+      const [page, setPage] = useState<PaginationState>({
+        pageIndex: 2,
+        pageSize: 2,
+      });
+      return (
+        <DataTable
+          columns={columns}
+          data={pageRows}
+          manualPagination
+          rowCount={12}
+          paginationState={page}
+          onPaginationChange={setPage}
+          manualSorting
+          sortingState={[{ id: 'amount', desc: true }]}
+          showSelectedCount={false}
+          pageSizeOptions={[2]}
+        />
+      );
+    }
+    await renderWithApp(<ServerPage />, { namespace, namespaces });
+    expect(screen.getByText('Page 3 of 6')).toBeVisible();
+    expect(screen.getByText('row-0')).toBeVisible();
+    expect(
+      within(screen.getAllByRole('row')[1]!).getByText('row-0'),
+    ).toBeVisible();
+    await user.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(screen.getByText('Page 4 of 6')).toBeVisible();
+    expect(screen.getByText('row-0')).toBeVisible();
+  });
+  it('keeps empty-state and paging controls localized in Chinese', async () => {
+    await renderWithApp(
+      <DataTable columns={columns} data={[]} showSelectedCount={false} />,
+      { namespace, namespaces, locale: 'zh-CN' },
+    );
+    expect(screen.getByText(zhCN.dataTable.noResults)).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: zhCN.dataTable.nextPage }),
+    ).toBeDisabled();
+  });
+});

package/tests/components/layout-i18n.test.tsx

@@ -13,6 +13,10 @@ import { describe, expect, it, vi } from 'vitest';
 
 import locales from '../../client/locales/index.js';
 import { AppLayout } from '../../client/layouts/app-layout.js';
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 vi.mock('@nocobase/app-plugin-i18n/client', () => ({
   useSyncServerLocale: () => {},
 }));
@@ -45,6 +49,7 @@ const overview: AppClientRegisteredRoute = {
 };
 
 async function setup(children: ReactNode) {
+  const sidebarPreference = createAppSidebarPreferenceStore('/test-app');
   vi.stubGlobal('matchMedia', () => ({
     matches: true,
     addEventListener: vi.fn(),
@@ -64,7 +69,9 @@ async function setup(children: ReactNode) {
   render(
     <I18nProvider runtime={runtime}>
       <ClientApplicationContext.Provider value={app}>
-        <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
+        <SidebarPreferenceProvider value={sidebarPreference}>
+          <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
+        </SidebarPreferenceProvider>
       </ClientApplicationContext.Provider>
     </I18nProvider>,
   );
@@ -81,10 +88,10 @@ describe('shell translations', () => {
     expect(screen.getByText('AI builds freely.')).toBeVisible();
     await act(() => runtime.changeLanguage('zh-CN'));
     expect(screen.getByRole('navigation', { name: '面包屑' })).toBeVisible();
-    expect(screen.getByText('AI 自由构建。')).toBeVisible();
+    expect(screen.getByText('AI 自由构建')).toBeVisible();
     expect(
       screen.getByRole('link', { name: 'NocoBase' }).parentElement,
-    ).toHaveTextContent('NocoBase 保障可靠。');
+    ).toHaveTextContent('NocoBase 保障可靠');
     expect(
       screen.getByRole('button', { name: '展开或收起导航' }),
     ).toHaveAttribute('title', '展开或收起导航');

package/tests/components/navigation-menu.test.tsx

@@ -1,3 +1,7 @@
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
 import {
   act,
@@ -25,7 +29,10 @@ import {
   AppSidebarProvider,
   AppSidebarToggle,
 } from '../../client/layouts/components/app-sidebar.js';
-import { NavigationMenu } from '../../client/layouts/components/navigation-menu.js';
+import {
+  NavigationMenu,
+  type NavigationBadges,
+} from '../../client/layouts/components/navigation-menu.js';
 
 // Navigation titles are route data, not keys any namespace owns: the menu translates each through its package's
 // namespace with the title itself as `defaultValue`, so the runtime is not strict.
@@ -35,11 +42,15 @@ function I18n({ children }: { readonly children: ReactNode }) {
   return <TestI18nProvider runtime={runtime}>{children}</TestI18nProvider>;
 }
 
-const preferenceKey = 'nocobase:sidebar:collapsed';
+const sidebarPreference = createAppSidebarPreferenceStore('/main');
+
+const preferenceKey = 'nocobase:sidebar:collapsed:app:/main';
 
 function setCollapsed(collapsed: boolean) {
   localStorage.setItem(preferenceKey, String(collapsed));
-  window.dispatchEvent(new Event('nocobase:sidebar-preference-change'));
+  window.dispatchEvent(
+    new Event('nocobase:sidebar-preference-change:app:/main'),
+  );
 }
 
 function page(name: string): AppClientRegisteredRoute {
@@ -58,19 +69,28 @@ function page(name: string): AppClientRegisteredRoute {
 const child = page('child');
 const sibling = page('sibling');
 
-function shell(items: readonly RouteNavigationItem[], selectedKey?: string) {
+function shell(
+  items: readonly RouteNavigationItem[],
+  selectedKey?: string,
+  sections = true,
+  badges?: NavigationBadges,
+) {
   return (
     <MemoryRouter>
-      <AppSidebarProvider>
-        <AppSidebar label='Navigation'>
-          <NavigationMenu
-            items={items}
-            label='Menu'
-            selectedKey={selectedKey}
-          />
-        </AppSidebar>
-        <AppSidebarToggle />
-      </AppSidebarProvider>
+      <SidebarPreferenceProvider value={sidebarPreference}>
+        <AppSidebarProvider>
+          <AppSidebar label='Navigation'>
+            <NavigationMenu
+              items={items}
+              label='Menu'
+              selectedKey={selectedKey}
+              sections={sections}
+              badges={badges}
+            />
+          </AppSidebar>
+          <AppSidebarToggle />
+        </AppSidebarProvider>
+      </SidebarPreferenceProvider>
     </MemoryRouter>
   );
 }
@@ -99,7 +119,10 @@ describe.each([
       { route: sibling, children: [] },
     ],
   };
-  const tree = (selectedKey: string | undefined) => shell([item], selectedKey);
+  // The collapsible form: a clickable parent always, and a group without a page when sections are off or it is
+  // nested. A top-level group without a page is a section, covered below.
+  const tree = (selectedKey: string | undefined) =>
+    shell([item], selectedKey, false);
   function toggle() {
     return screen.getByRole('button', { name: 'Group' });
   }
@@ -140,6 +163,61 @@ describe.each([
   });
 });
 
+describe('sections', () => {
+  const group: RouteNavigationItem = {
+    route: { ...page('Group'), componentLoader: undefined },
+    children: [
+      { route: child, children: [] },
+      { route: sibling, children: [] },
+    ],
+  };
+
+  it('draws a top-level group without a page as a heading over entries always shown', () => {
+    render(shell([{ route: page('Home'), children: [] }, group], 'elsewhere'), {
+      wrapper: I18n,
+    });
+    expect(screen.getByText('Group')).toHaveAttribute(
+      'data-sidebar',
+      'group-label',
+    );
+    expect(
+      screen.queryByRole('button', { name: 'Group' }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'child' })).toBeVisible();
+    expect(screen.getByRole('link', { name: 'sibling' })).toBeVisible();
+    expect(screen.getByRole('link', { name: 'Home' })).toBeVisible();
+  });
+
+  it('keeps a group divided into sections as one collapsible entry', () => {
+    const divided: RouteNavigationItem = {
+      route: { ...page('Flows'), componentLoader: undefined },
+      children: [
+        {
+          section: true,
+          route: { ...page('Business'), componentLoader: undefined },
+          children: [{ route: child, children: [] }],
+        },
+      ],
+    };
+    render(shell([divided], routeKey(child)), { wrapper: I18n });
+    expect(screen.getByRole('button', { name: 'Flows' })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    );
+    expect(screen.getByRole('group', { name: 'Business' })).toBeVisible();
+  });
+
+  it('shows a section entries as icons, not a popup, in the collapsed sidebar', () => {
+    setCollapsed(true);
+    render(shell([group], routeKey(child)), { wrapper: I18n });
+    const link = screen.getByRole('link', { name: 'child' });
+    expect(link).toHaveAttribute('aria-current', 'page');
+    expect(
+      screen.queryByRole('button', { name: 'Group' }),
+    ).not.toBeInTheDocument();
+  });
+});
+
 it('marks the selected page with the selected navigation colors', () => {
   render(
     shell([{ route: page('Home'), children: [] }], routeKey(page('Home'))),
@@ -156,11 +234,72 @@ it('marks the selected page with the selected navigation colors', () => {
   );
 });
 
+describe('entry counts', () => {
+  const entries: RouteNavigationItem[] = [
+    { route: page('inbox'), children: [] },
+    { route: page('approvals'), children: [] },
+    { route: page('runs'), children: [] },
+    { route: page('archive'), children: [] },
+  ];
+  const badges: NavigationBadges = {
+    inbox: 5,
+    approvals: 120,
+    runs: { count: 2, live: true, hint: '2 running' },
+    archive: 0,
+  };
+
+  it('shows a count beside its entry, in the entry name, and nothing at zero', () => {
+    render(shell(entries, undefined, true, badges), { wrapper: I18n });
+    const inbox = screen.getByRole('link', { name: 'inbox · 5' });
+    const badge = inbox.parentElement?.querySelector(
+      '[data-slot="sidebar-menu-badge"]',
+    );
+    expect(badge).toHaveTextContent('5');
+    expect(badge).toHaveAttribute('aria-hidden', 'true');
+    expect(screen.getByRole('link', { name: 'approvals · 120' })).toBeVisible();
+    expect(
+      screen
+        .getByRole('link', { name: 'approvals · 120' })
+        .parentElement?.querySelector('[data-slot="sidebar-menu-badge"]'),
+    ).toHaveTextContent('99+');
+    const archive = screen.getByRole('link', { name: 'archive' });
+    expect(
+      archive.parentElement?.querySelector('[data-slot="sidebar-menu-badge"]'),
+    ).toBeNull();
+  });
+
+  it('names work under way by its hint', () => {
+    render(shell(entries, undefined, true, badges), { wrapper: I18n });
+    const runs = screen.getByRole('link', { name: 'runs · 2 running' });
+    expect(
+      runs.parentElement?.querySelector('[data-slot="sidebar-menu-badge"]'),
+    ).toHaveAttribute('title', '2 running');
+  });
+
+  it('marks a counted entry with a dot and its count in the tooltip when collapsed', async () => {
+    setCollapsed(true);
+    const user = userEvent.setup();
+    render(shell(entries, undefined, true, badges), { wrapper: I18n });
+    const inbox = screen.getByRole('link', { name: 'inbox · 5' });
+    expect(
+      inbox.parentElement?.querySelector('[data-slot="navigation-badge-dot"]'),
+    ).not.toBeNull();
+    expect(
+      screen
+        .getByRole('link', { name: 'archive' })
+        .parentElement?.querySelector('[data-slot="navigation-badge-dot"]'),
+    ).toBeNull();
+    await user.hover(inbox);
+    expect(screen.getByRole('tooltip')).toHaveTextContent('inbox · 5');
+  });
+});
+
 describe('collapsed navigation', () => {
   beforeEach(() => setCollapsed(true));
 
+  // A group's popup belongs to the collapsible form, so these render without sections.
   function show(item: RouteNavigationItem, selectedKey = routeKey(child)) {
-    return render(shell([item], selectedKey), { wrapper: I18n });
+    return render(shell([item], selectedKey, false), { wrapper: I18n });
   }
 
   it('shows a leaf label immediately on hover and dismisses it on leave', async () => {