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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nocobase/app-template-default",
   "displayName": "Default Template",
-  "version": "1.0.0-beta.67",
+  "version": "1.0.0-beta.68",
   "type": "module",
   "prettier": "@nocobase/dev-config/prettier",
   "engines": {
@@ -9,7 +9,7 @@
   },
   "nocobase": {
     "templateKind": "app",
-    "defaultTemplateVersion": "1.0.0-beta.67"
+    "defaultTemplateVersion": "1.0.0-beta.68"
   },
   "devDependencies": {
     "@ai-sdk/react": "2.0.0",
@@ -77,7 +77,7 @@
     "tar": "^7.5.22",
     "@nocobase/app-client": "^3.0.0-beta.1",
     "@nocobase/app-plugin-template-print": "0.0.2-beta.2",
-    "@nocobase/app-skills": "0.1.0-beta.34",
+    "@nocobase/app-skills": "0.1.0-beta.35",
     "@nocobase/app-testing": "0.1.0-beta.3",
     "@nocobase/app-websocket": "^0.0.2-beta.0",
     "@nocobase/dev-config": "0.1.0-beta.22",
@@ -143,7 +143,7 @@
     "better-auth": "1.7.5",
     "hono": "^4.13.2",
     "@nocobase/app-plugin-api-keys": "^1.0.0-beta.16",
-    "@nocobase/app-plugin-authentication": "^2.0.0-beta.7",
+    "@nocobase/app-plugin-authentication": "^2.0.0-beta.8",
     "@nocobase/app-plugin-authorization": "^1.0.0-beta.27",
     "@nocobase/app-plugin-database-explorer": "^1.0.0-beta.14",
     "@nocobase/app-plugin-file": "^1.0.0-beta.23",
@@ -151,10 +151,10 @@
     "@nocobase/app-plugin-mail": "^1.0.0-beta.13",
     "@nocobase/app-plugin-notification": "^1.0.0-beta.27",
     "@nocobase/app-plugin-notification-in-app": "^1.0.0-beta.24",
-    "@nocobase/app-plugin-notification-providers": "^0.2.0-beta.11",
+    "@nocobase/app-plugin-notification-providers": "^0.2.0-beta.12",
     "@nocobase/app-plugin-scheduler": "^1.0.0-beta.17",
     "@nocobase/app-plugin-users": "^2.0.0-beta.4",
-    "@nocobase/app-server": "^2.0.0-beta.5",
+    "@nocobase/app-server": "^2.0.0-beta.6",
     "@nocobase/config": "^0.1.0-beta.3",
     "@nocobase/db": "^1.0.0-beta.19",
     "@nocobase/db-sqlite": "^0.1.0-beta.5",
@@ -166,7 +166,7 @@
     "@nocobase/authorization": "^1.0.0-beta.13",
     "@nocobase/queue": "^0.1.0-beta.9",
     "@nocobase/jobs": "^0.1.0-beta.3",
-    "@nocobase/lifecycle": "^0.1.0-beta.1",
+    "@nocobase/lifecycle": "^0.1.0-beta.2",
     "@nocobase/i18n": "^1.0.0-beta.7",
     "@nocobase/caching": "^0.1.0-beta.3",
     "@nocobase/repository-input": "^0.1.0-beta.3",

package/server/app.ts

@@ -1,3 +1,4 @@
+import { MailerProvider } from '@nocobase/app-server/mailer';
 import type { Application } from '@nocobase/app-server/application';
 import { DatabaseProvider } from '@nocobase/app-server/database';
 import { I18nProvider, i18nHttpMiddleware } from '@nocobase/app-server/i18n';
@@ -33,6 +34,7 @@ export function createApp(runtime: AppRuntimeContext): Application {
   app.addServiceProvider(SecretsProvider);
   app.addServiceProvider(SessionProvider);
   app.addServiceProvider(DriveProvider);
+  app.addServiceProvider(MailerProvider);
   app.addServiceProvider(QueueServiceProvider, {
     nodeEnv: runtime.env.NODE_ENV,
   });

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/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/layout-i18n.test.tsx

@@ -81,10 +81,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

@@ -25,7 +25,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.
@@ -58,7 +61,12 @@ 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>
@@ -67,6 +75,8 @@ function shell(items: readonly RouteNavigationItem[], selectedKey?: string) {
             items={items}
             label='Menu'
             selectedKey={selectedKey}
+            sections={sections}
+            badges={badges}
           />
         </AppSidebar>
         <AppSidebarToggle />
@@ -99,7 +109,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 +153,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 +224,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 () => {

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

@@ -1,6 +1,5 @@
 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 {
@@ -80,19 +79,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);

package/tests/components/status-badge.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { StatusBadge } from '#components/status-badge';
+
+// The two badge sizes are drawn by client/styles.css from `data-size`, which jsdom does not apply, so this checks the
+// attribute that selects them.
+describe('StatusBadge', () => {
+  it('is the default badge unless asked for the small one', () => {
+    render(
+      <>
+        <StatusBadge tone='success'>Done</StatusBadge>
+        <StatusBadge tone='warning' size='sm'>
+          Waiting
+        </StatusBadge>
+      </>,
+    );
+    expect(screen.getByText('Done')).not.toHaveAttribute('data-size');
+    expect(screen.getByText('Waiting')).toHaveAttribute('data-size', 'sm');
+    expect(screen.getByText('Waiting')).toHaveAttribute('data-slot', 'badge');
+  });
+});

package/tests/logic/scrollbar.test.ts

@@ -0,0 +1,88 @@
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { revealScrollbarsWhileScrolling } from '../../client/lib/scrollbar';
+
+describe('revealScrollbarsWhileScrolling', () => {
+  beforeAll(() => revealScrollbarsWhileScrolling());
+  afterEach(() => vi.useRealTimers());
+
+  function scroll(target: EventTarget) {
+    target.dispatchEvent(new Event('scroll'));
+  }
+
+  it('marks a scrolling element until it has been still for a moment', () => {
+    vi.useFakeTimers();
+    const list = document.createElement('div');
+    document.body.append(list);
+    scroll(list);
+    expect(list).toHaveAttribute('data-scrolling');
+    vi.advanceTimersByTime(799);
+    expect(list).toHaveAttribute('data-scrolling');
+    vi.advanceTimersByTime(1);
+    expect(list).not.toHaveAttribute('data-scrolling');
+    list.remove();
+  });
+
+  it('keeps the mark while scrolling goes on', () => {
+    vi.useFakeTimers();
+    const list = document.createElement('div');
+    document.body.append(list);
+    scroll(list);
+    vi.advanceTimersByTime(600);
+    scroll(list);
+    vi.advanceTimersByTime(600);
+    expect(list).toHaveAttribute('data-scrolling');
+    vi.advanceTimersByTime(200);
+    expect(list).not.toHaveAttribute('data-scrolling');
+    list.remove();
+  });
+
+  it('marks the page root when the page itself scrolls', () => {
+    vi.useFakeTimers();
+    scroll(document);
+    expect(
+      document.scrollingElement ?? document.documentElement,
+    ).toHaveAttribute('data-scrolling');
+    vi.advanceTimersByTime(800);
+    expect(
+      document.scrollingElement ?? document.documentElement,
+    ).not.toHaveAttribute('data-scrolling');
+  });
+});
+
+describe('revealScrollbarsWhileScrolling near an edge', () => {
+  function scroller(): HTMLDivElement {
+    const element = document.createElement('div');
+    element.style.overflowY = 'auto';
+    Object.defineProperty(element, 'scrollHeight', { value: 500 });
+    Object.defineProperty(element, 'clientHeight', { value: 100 });
+    element.getBoundingClientRect = () =>
+      ({ left: 0, top: 0, right: 200, bottom: 100 }) as DOMRect;
+    document.body.append(element);
+    return element;
+  }
+
+  function move(target: Element, clientX: number) {
+    const event = new MouseEvent('pointermove', {
+      bubbles: true,
+      clientX,
+      clientY: 50,
+    });
+    Object.defineProperty(event, 'pointerType', { value: 'mouse' });
+    target.dispatchEvent(event);
+  }
+
+  it('shows the bar while the mouse is near the edge it runs along', () => {
+    vi.useFakeTimers();
+    const list = scroller();
+    move(list, 100);
+    vi.advanceTimersByTime(20);
+    expect(list).not.toHaveAttribute('data-scrolling');
+    move(list, 195);
+    vi.advanceTimersByTime(20);
+    expect(list).toHaveAttribute('data-scrolling');
+    vi.advanceTimersByTime(800);
+    expect(list).not.toHaveAttribute('data-scrolling');
+    list.remove();
+  });
+});

package/tests/logic/theme-tokens.test.ts

@@ -40,6 +40,7 @@ const colors = [
   'muted-foreground',
   'accent',
   'accent-foreground',
+  'hover',
   'destructive',
   'border',
   'input',

package/vitest.config.ts

@@ -15,6 +15,7 @@ export default createReactVitestConfig({
           // together with every client that resolves the authentication tokens and provider.
           /@nocobase\/app-plugin-(?:authentication|api-keys|users)\/(?:dist\/)?client\//u,
           /@nocobase\/app-plugin-authorization\/(?:dist\/)?client\//u,
+          /@nocobase\/app-plugin-(?:lifecycle-example|office-flows-example)\/(?:dist\/)?client\//u,
           /@nocobase\/app-plugin-notification-in-app\/(?:dist\/)?client\//u,
         ],
       },