@nocobase/client-v2 3.0.0-alpha.1 → 3.0.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.12",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "3.0.0-alpha.1",
-    "@nocobase/flow-engine": "3.0.0-alpha.1",
-    "@nocobase/sdk": "3.0.0-alpha.1",
-    "@nocobase/shared": "3.0.0-alpha.1",
-    "@nocobase/utils": "3.0.0-alpha.1",
+    "@nocobase/evaluators": "3.0.0-alpha.12",
+    "@nocobase/flow-engine": "3.0.0-alpha.12",
+    "@nocobase/sdk": "3.0.0-alpha.12",
+    "@nocobase/shared": "3.0.0-alpha.12",
+    "@nocobase/utils": "3.0.0-alpha.12",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -48,5 +48,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "22d8be8ece179cfa5c8a4ebb2c896c92bd418e03"
+  "gitHead": "2ba035885741a9977d76bbabf8f2caf44b199139"
 }

package/src/APIClient.ts

@@ -8,6 +8,68 @@
  */
 
 import { APIClient as APIClientSDK, hasHeaderValue } from '@nocobase/sdk';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import type { AxiosRequestConfig } from 'axios';
+import React from 'react';
+
+type ResponseMessage = string | { message?: unknown };
+
+interface APIClientApplication {
+  getName?: () => string | undefined;
+  context?: {
+    notification?: NotificationInstance;
+  };
+}
+
+interface NotificationError {
+  config?: AxiosRequestConfig & {
+    skipNotify?: boolean | ((error: unknown) => boolean);
+  };
+}
+
+const notificationCache = new Map<string, number>();
+
+function getMessageText(item: ResponseMessage): string {
+  if (typeof item === 'string') {
+    return item;
+  }
+  return typeof item?.message === 'string' ? item.message : '';
+}
+
+function deduplicateMessages(messages: ResponseMessage[]): ResponseMessage[] {
+  if (notificationCache.size > 10) {
+    notificationCache.clear();
+  }
+  const now = Date.now();
+  return messages.filter((item) => {
+    const message = getMessageText(item);
+    if (!message) {
+      return false;
+    }
+    const lastTime = notificationCache.get(message);
+    if (lastTime && now - lastTime < 500) {
+      return false;
+    }
+    notificationCache.set(message, now);
+    return true;
+  });
+}
+
+function notify(type: 'success' | 'error', messages: ResponseMessage[], instance?: NotificationInstance) {
+  if (!instance || messages.length === 0) {
+    return;
+  }
+  const filteredMessages = deduplicateMessages(messages);
+  if (filteredMessages.length === 0) {
+    return;
+  }
+  instance[type]({
+    message: filteredMessages.map((item, index) => {
+      const message = getMessageText(item);
+      return React.createElement('div', { key: `${index}_${message}` }, message);
+    }),
+  });
+}
 
 function offsetToTimeZone(offset: number) {
   const hours = Math.floor(Math.abs(offset));
@@ -23,6 +85,12 @@ function getCurrentTimezone() {
 }
 
 export class APIClient extends APIClientSDK {
+  app?: APIClientApplication;
+
+  get notification() {
+    return this.app?.context?.notification;
+  }
+
   getHostname() {
     if (process.env.API_BASE_URL) {
       try {
@@ -55,5 +123,29 @@ export class APIClient extends APIClientSDK {
       return config;
     });
     super.interceptors();
+    this.useNotificationMiddleware();
+  }
+
+  handleNotificationError(error: unknown) {
+    const notificationError = error as NotificationError;
+    const skipNotify = notificationError.config?.skipNotify;
+    if (skipNotify && (skipNotify === true || (typeof skipNotify === 'function' && skipNotify(error)))) {
+      throw error;
+    }
+    const messages = this.toErrMessages(error);
+    if (Array.isArray(messages)) {
+      notify('error', messages, this.notification);
+    }
+    throw error;
+  }
+
+  useNotificationMiddleware() {
+    this.axios.interceptors.response.use((response) => {
+      const messages = response.data?.messages;
+      if (Array.isArray(messages)) {
+        notify('success', messages, this.notification);
+      }
+      return response;
+    }, this.handleNotificationError.bind(this));
   }
 }

package/src/Application.tsx

@@ -45,7 +45,7 @@ export class Application extends BaseApplication<
   public hasLoadError = false;
 
   protected createApiClient(options: ApplicationOptions) {
-    return new APIClient({
+    const apiClient = new APIClient({
       // Cross-origin API deployments rely on cookies for auth (e.g. permanent file
       // URLs); trust is enforced server-side via the CORS origin whitelist and the
       // CSRF middleware, not by omitting credentials.
@@ -53,6 +53,8 @@ export class Application extends BaseApplication<
       ...options.apiClient,
       appName: options.name || getSubAppName(options.publicPath),
     });
+    apiClient.app = this;
+    return apiClient;
   }
 
   protected configureRuntimeAdapters() {

package/src/__tests__/APIClient.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { APIClient } from '@nocobase/client-v2';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+function createAPIClient() {
+  const notification = {
+    error: vi.fn(),
+    success: vi.fn(),
+  } as unknown as NotificationInstance;
+  const apiClient = new APIClient();
+  apiClient.app = { context: { notification } };
+  const apiMock = new MockAdapter(apiClient.axios);
+  return { apiClient, apiMock, notification };
+}
+
+describe('APIClient response notifications', () => {
+  it('shows error messages returned by failed requests', async () => {
+    const { apiClient, apiMock, notification } = createAPIClient();
+    apiMock.onPost('/posts:create').reply(400, { errors: [{ message: 'Request rejected by workflow' }] });
+
+    await expect(apiClient.request({ url: '/posts:create', method: 'post' })).rejects.toBeDefined();
+
+    expect(notification.error).toHaveBeenCalledOnce();
+    const [{ message }] = vi.mocked(notification.error).mock.calls[0];
+    expect(renderToStaticMarkup(<>{message}</>)).toContain('Request rejected by workflow');
+  });
+
+  it('does not show errors when skipNotify is enabled', async () => {
+    const { apiClient, apiMock, notification } = createAPIClient();
+    apiMock.onGet('/health').reply(500, { errors: [{ message: 'Health check failed' }] });
+
+    await expect(apiClient.request({ url: '/health', skipNotify: true })).rejects.toBeDefined();
+
+    expect(notification.error).not.toHaveBeenCalled();
+  });
+
+  it('shows messages returned by successful requests', async () => {
+    const { apiClient, apiMock, notification } = createAPIClient();
+    apiMock.onPost('/posts:create').reply(200, { messages: [{ message: 'Created successfully' }] });
+
+    await apiClient.request({ url: '/posts:create', method: 'post' });
+
+    expect(notification.success).toHaveBeenCalledOnce();
+    const [{ message }] = vi.mocked(notification.success).mock.calls[0];
+    expect(renderToStaticMarkup(<>{message}</>)).toContain('Created successfully');
+  });
+});

package/src/__tests__/app.test.tsx

@@ -379,7 +379,11 @@ describe('app', () => {
     expect(screen.getByText('maintaining dialog message')).toBeInTheDocument();
   });
 
-  it('should keep current content behind maintained dialog state', async () => {
+  it.each([
+    ['pm.enable', 'Enabling plugin'],
+    ['pm.disable', 'Disabling plugin'],
+    ['future.command', 'future.command'],
+  ])('should keep current content behind the default dialog while app commanding: %s', async (commandName, title) => {
     const CurrentPage = () => {
       const [count, setCount] = React.useState(0);
       return <button onClick={() => setCount((value) => value + 1)}>Current page count: {count}</button>;
@@ -398,12 +402,127 @@ describe('app', () => {
     act(() => {
       app.maintained = true;
       app.maintaining = true;
-      app.error = { code: 'APP_COMMANDING', command: { name: 'pm.enable' }, message: 'starting sub applications...' };
+      app.error = { code: 'APP_COMMANDING', command: { name: commandName }, message: 'starting sub applications...' };
     });
 
     expect(screen.getByRole('button', { name: 'Current page count: 1' })).toBeInTheDocument();
     expect(screen.getByRole('dialog')).toBeInTheDocument();
-    expect(screen.getByText('Enabling plugin')).toBeInTheDocument();
+    expect(screen.getByText(title)).toBeInTheDocument();
+  });
+
+  it('should keep current content without a dialog while app upgrading', async () => {
+    const CurrentPage = () => <div>Current page</div>;
+
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.router.add('root', { path: '/', Component: CurrentPage });
+      }
+    }
+
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    await renderApp(app);
+
+    act(() => {
+      app.maintained = true;
+      app.maintaining = true;
+      app.error = Object.assign(new Error('Loading data sources...'), {
+        code: 'APP_COMMANDING',
+        command: { name: 'upgrade' },
+      });
+    });
+
+    expect(screen.getByText('Current page')).toBeInTheDocument();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it.each([
+    ['upgrade', 'App upgrading'],
+    ['pm.enable', 'Enabling plugin'],
+    ['pm.disable', 'Disabling plugin'],
+    ['future.command', 'future.command'],
+  ])('should not show Try again for an app commanding error state: %s', async (commandName, title) => {
+    class PluginHelloClient extends Plugin {}
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    app.error = Object.assign(new Error('Loading data sources...'), {
+      code: 'APP_COMMANDING',
+      command: { name: commandName },
+    });
+
+    await renderApp(app);
+
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Try again' })).not.toBeInTheDocument();
+  });
+
+  it('should clear upgrade feedback after an existing page error', async () => {
+    const BrokenPage = () => {
+      throw new Error('page error');
+    };
+
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.router.add('root', { path: '/', Component: BrokenPage });
+      }
+    }
+
+    const app = createMockClient({
+      plugins: [PluginHelloClient],
+      ws: { url: 'ws://localhost:3000/ws' },
+    });
+    app.maintained = true;
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      await renderApp(app);
+      expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+
+      act(() => {
+        app.ws.emit('message', {
+          type: 'maintaining',
+          payload: {
+            code: 'APP_COMMANDING',
+            command: { name: 'upgrade' },
+            message: 'Loading data sources...',
+          },
+        });
+      });
+
+      expect(screen.getByText('App upgrading')).toBeInTheDocument();
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Try again' })).not.toBeInTheDocument();
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
+
+  it('should keep a custom maintaining dialog while app upgrading', async () => {
+    class PluginHelloClient extends Plugin {}
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    app.addComponents({
+      CustomUpgradeStatus: () => <div>Custom upgrade status</div>,
+    });
+    app.maintained = true;
+    app.maintaining = true;
+    app.error = Object.assign(new Error('Loading data sources...'), {
+      code: 'APP_COMMANDING',
+      command: {
+        name: 'upgrade',
+        components: { maintainingDialog: 'CustomUpgradeStatus' },
+      },
+    });
+
+    await renderApp(app);
+
+    expect(screen.getByText('Custom upgrade status')).toBeInTheDocument();
+  });
+
+  it('should keep Try again for recoverable app errors', async () => {
+    class PluginHelloClient extends Plugin {}
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    app.error = Object.assign(new Error('load error'), { code: 'LOAD_ERROR' });
+
+    await renderApp(app);
+
+    expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
   });
 
   it('should handle long loading state gracefully', async () => {

package/src/__tests__/authRedirect.test.ts

@@ -347,6 +347,23 @@ describe('auth redirect helpers', () => {
       );
     });
 
+    it('should derive a scoped Portal signin href under the current sub-app basename', () => {
+      const app = {
+        getPublicPath: () => '/nocobase/v2/',
+        router: {
+          getBasename: () => '/nocobase/v2/apps/test-app/',
+        },
+      } satisfies Parameters<typeof buildV2SigninHref>[0];
+
+      expect(
+        buildV2SigninHref(app, '/nocobase/v2/apps/test-app/customer/orders', {
+          signInRoutePath: '/customer/signin',
+        }),
+      ).toBe(
+        '/nocobase/v2/apps/test-app/customer/signin?redirect=%2Fnocobase%2Fv2%2Fapps%2Ftest-app%2Fcustomer%2Forders',
+      );
+    });
+
     it('should redirect to sub-app signin with window.location.replace', () => {
       const replace = vi.fn();
       Object.defineProperty(globalThis.window, 'location', {

package/src/__tests__/browserChecker.test.ts

@@ -136,6 +136,30 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
       expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/v/');
     });
 
+    it('redirects app root to modern entry for modern-only', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/',
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-only',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/v/');
+    });
+
+    it.each(['/', '/index.html'])('redirects app root entry %s to Settings for settings-default', (pathname) => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname,
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'settings-default',
+        search: '?from=entry',
+        hash: '#panel',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/settings/?from=entry#panel');
+    });
+
     it('does not redirect legacy deep links for modern-default', () => {
       const replace = executeBrowserChecker(scriptPath, {
         pathname: '/admin',
@@ -147,6 +171,17 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
       expect(replace).not.toHaveBeenCalled();
     });
 
+    it('does not redirect legacy deep links for settings-default', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/admin',
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'settings-default',
+      });
+
+      expect(replace).not.toHaveBeenCalled();
+    });
+
     it('rewrites legacy document paths for modern-only', () => {
       const replace = executeBrowserChecker(scriptPath, {
         pathname: '/admin/settings/workflow',
@@ -169,6 +204,19 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
       expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/nocobase/v/');
     });
 
+    it('redirects a sub-path app root directly to Settings for settings-default', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/nocobase/',
+        publicPath: '/nocobase/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'settings-default',
+        search: '?from=entry',
+        hash: '#panel',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/nocobase/settings/?from=entry#panel');
+    });
+
     it('rewrites sub-app legacy deep links for modern-only without collapsing the sub-app segment', () => {
       const replace = executeBrowserChecker(scriptPath, {
         pathname: '/nocobase/apps/a_31itq60q4kg/admin/',
@@ -182,32 +230,36 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
   }
 
   if (scriptPath.includes('/app/client-v2/public/')) {
-    it.each(['/v', '/v/'])('redirects the main modern root %s to Settings', (pathname) => {
+    it.each([
+      ['/v', 'http://c.local.nocobase.com/v/'],
+      ['/v/', undefined],
+    ])('normalizes the modern client root %s without redirecting to Settings', (pathname, expectedRedirect) => {
       const replace = executeBrowserChecker(scriptPath, {
         pathname,
         publicPath: '/v/',
         modernClientPrefix: 'v',
       });
 
-      expect(replace).toHaveBeenCalledOnce();
-      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/settings');
+      if (expectedRedirect) {
+        expect(replace).toHaveBeenCalledOnce();
+        expect(replace).toHaveBeenCalledWith(expectedRedirect);
+      } else {
+        expect(replace).not.toHaveBeenCalled();
+      }
     });
 
-    it.each([
-      ['/v/apps/demo', '/settings/apps/demo'],
-      ['/v/apps/demo/', '/settings/apps/demo'],
-      ['/v/_app/demo', '/settings/_app/demo'],
-      ['/v/_app/demo/', '/settings/_app/demo'],
-    ])('redirects the scoped modern root %s to %s', (pathname, expectedPathname) => {
-      const replace = executeBrowserChecker(scriptPath, {
-        pathname,
-        publicPath: '/v/',
-        modernClientPrefix: 'v',
-      });
+    it.each(['/v/apps/demo', '/v/apps/demo/', '/v/_app/demo', '/v/_app/demo/'])(
+      'lets the scoped modern client handle its root %s',
+      (pathname) => {
+        const replace = executeBrowserChecker(scriptPath, {
+          pathname,
+          publicPath: '/v/',
+          modernClientPrefix: 'v',
+        });
 
-      expect(replace).toHaveBeenCalledOnce();
-      expect(replace).toHaveBeenCalledWith(`http://c.local.nocobase.com${expectedPathname}`);
-    });
+        expect(replace).not.toHaveBeenCalled();
+      },
+    );
 
     it.each([
       ['/settings/apps/demo', '/', '/settings/apps/demo/', 'v'],
@@ -233,23 +285,19 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
     });
 
     it.each([
-      ['/tenant/apps/root/modern/apps/demo/', '/tenant/apps/root/modern/', '/tenant/apps/root/settings/apps/demo'],
-      ['/tenant/_app/root/modern/_app/demo/', '/tenant/_app/root/modern/', '/tenant/_app/root/settings/_app/demo'],
-    ])(
-      'preserves public path, query, and hash for %s without treating public-path segments as app scope',
-      (pathname, publicPath, expectedPathname) => {
-        const replace = executeBrowserChecker(scriptPath, {
-          pathname,
-          publicPath,
-          modernClientPrefix: 'modern',
-          search: '?tab=overview',
-          hash: '#panel',
-        });
+      ['/tenant/apps/root/modern/apps/demo/', '/tenant/apps/root/modern/'],
+      ['/tenant/_app/root/modern/_app/demo/', '/tenant/_app/root/modern/'],
+    ])('lets the modern client handle %s under a nested public path', (pathname, publicPath) => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname,
+        publicPath,
+        modernClientPrefix: 'modern',
+        search: '?tab=overview',
+        hash: '#panel',
+      });
 
-        expect(replace).toHaveBeenCalledOnce();
-        expect(replace).toHaveBeenCalledWith(`http://c.local.nocobase.com${expectedPathname}?tab=overview#panel`);
-      },
-    );
+      expect(replace).not.toHaveBeenCalled();
+    });
 
     it.each([
       ['/v/admin', '/v/'],

package/src/__tests__/nocobase-buildin-plugin-auth.test.tsx

@@ -72,6 +72,21 @@ class TestRootPortalPlugin extends Plugin {
   }
 }
 
+class TestScopedPortalPlugin extends Plugin {
+  async load() {
+    this.router.add('customer-portal', {
+      path: '/customer/*',
+      authCheck: true,
+      Component: () => <div>customer portal</div>,
+    });
+    this.router.add('customer-portal-signin', {
+      path: '/customer/signin',
+      skipAuthCheck: true,
+      Component: () => <div>customer portal signin</div>,
+    });
+  }
+}
+
 describe('nocobase buildin plugin auth redirect', () => {
   const originalLocation = globalThis.window.location;
 
@@ -187,6 +202,28 @@ describe('nocobase buildin plugin auth redirect', () => {
     });
   });
 
+  it('should use an explicitly registered Portal signin route when unauthenticated', async () => {
+    const app = createMockClient({
+      publicPath: '/v2/',
+      plugins: [NocoBaseBuildInPlugin as unknown as typeof Plugin, TestScopedPortalPlugin as typeof Plugin],
+      router: { type: 'memory', initialEntries: ['/v2/customer/dashboard?tab=overview#panel'] },
+    });
+    app.apiMock.onGet('app:getLang').reply(200, {
+      data: { lang: 'en-US', resources: { client: {} }, cron: {} },
+    });
+    app.apiMock.onGet('/auth:check').reply(200, { data: {} });
+
+    const Root = app.getRootComponent();
+    render(<Root />);
+
+    await waitFor(() => {
+      expect(app.router.router.state.location.pathname).toBe('/v2/customer/signin');
+      expect(app.router.router.state.location.search).toBe(
+        '?redirect=%2Fv2%2Fcustomer%2Fdashboard%3Ftab%3Doverview%23panel',
+      );
+    });
+  });
+
   it('should check current user after navigating from skipped route to v2 admin', async () => {
     const app = createMockClient({
       publicPath: '/v2/',