@nocobase/client-v2 3.0.0-alpha.5 → 3.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.7",
   "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.5",
-    "@nocobase/flow-engine": "3.0.0-alpha.5",
-    "@nocobase/sdk": "3.0.0-alpha.5",
-    "@nocobase/shared": "3.0.0-alpha.5",
-    "@nocobase/utils": "3.0.0-alpha.5",
+    "@nocobase/evaluators": "3.0.0-alpha.7",
+    "@nocobase/flow-engine": "3.0.0-alpha.7",
+    "@nocobase/sdk": "3.0.0-alpha.7",
+    "@nocobase/shared": "3.0.0-alpha.7",
+    "@nocobase/utils": "3.0.0-alpha.7",
     "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": "82c7ed1cdb2f247c190582e34ee37f154cac0968"
+  "gitHead": "19cd28c710f3b3c614ebe2fd7d5a415d527ee559"
 }

package/src/__tests__/app.test.tsx

@@ -406,6 +406,116 @@ describe('app', () => {
     expect(screen.getByText('Enabling plugin')).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('should not show Try again for an app upgrade error state', async () => {
+    class PluginHelloClient extends Plugin {}
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    app.error = Object.assign(new Error('Loading data sources...'), {
+      code: 'APP_COMMANDING',
+      command: { name: 'upgrade' },
+    });
+
+    await renderApp(app);
+
+    expect(screen.getByText('App upgrading')).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 () => {
     class PluginHelloClient extends Plugin {
       async load() {

package/src/__tests__/browserChecker.test.ts

@@ -147,6 +147,19 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
       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',
@@ -158,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',
@@ -180,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/',

package/src/__tests__/settings-shell.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, theme as antdTheme } from 'antd';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -19,6 +19,7 @@ import type { ThemeConfig } from '../theme';
 const userCenterModel = { uid: 'settings-user-center' };
 const createModel = vi.fn(() => userCenterModel);
 const matchRoutes = vi.fn(() => [{ route: { id: 'settings' } }]);
+let settingsThemeConfig: ThemeConfig | null = null;
 const mockApp = {
   flowEngine: {
     createModel,
@@ -46,6 +47,10 @@ vi.mock('../settings-app/SettingsSearch', () => ({
   SettingsSearch: () => <div data-testid="settings-search">search</div>,
 }));
 
+vi.mock('../settings-app/useSettingsThemeConfig', () => ({
+  useSettingsThemeConfig: () => settingsThemeConfig,
+}));
+
 vi.mock('../flow/admin-shell/admin-layout/HelpLite', () => ({
   HelpLite: () => <div data-testid="settings-help">help</div>,
 }));
@@ -60,8 +65,15 @@ vi.mock('@nocobase/flow-engine', async (importOriginal) => {
   };
 });
 
+const TokenProbe = () => {
+  const { token } = antdTheme.useToken();
+
+  return <div data-testid="settings-theme-token">{`${token.marginBlock}:${token.sizeLG}`}</div>;
+};
+
 describe('SettingsShell', () => {
   beforeEach(() => {
+    settingsThemeConfig = null;
     createModel.mockClear();
     matchRoutes.mockReset();
     matchRoutes.mockReturnValue([{ route: { id: 'settings' } }]);
@@ -111,6 +123,20 @@ describe('SettingsShell', () => {
     expect(screen.getByRole('banner')).toHaveStyle({ background: '#ffffff' });
   });
 
+  it('preserves NocoBase custom tokens in the stored compact theme', () => {
+    settingsThemeConfig = { algorithm: antdTheme.compactAlgorithm };
+
+    render(
+      <MemoryRouter initialEntries={['/settings/system-settings']}>
+        <SettingsShell>
+          <TokenProbe />
+        </SettingsShell>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByTestId('settings-theme-token')).toHaveTextContent('16:16');
+  });
+
   it('places the settings content and embed container side by side below the header', () => {
     const { container } = render(
       <MemoryRouter initialEntries={['/settings/theme-editor']}>

package/src/components/AppComponents.tsx

@@ -28,9 +28,11 @@ interface AppErrorPayload {
       maintainingDialog?: string;
     };
   };
-  [key: string]: any;
 }
 
+const isAppUpgrading = (error?: AppErrorPayload) =>
+  error?.code === 'APP_COMMANDING' && error.command?.name === 'upgrade';
+
 export const AppSpin = () => {
   return (
     <Spin style={{ position: 'fixed', top: '50%', left: '50%', fontSize: 72, transform: 'translate(-50%, -50%)' }} />
@@ -168,6 +170,7 @@ const getProps = (app: Application) => {
 export const AppError: FC<{ error: Error & { title?: string }; app: Application }> = observer(
   ({ app, error }) => {
     const props = getProps(app);
+    const upgrading = isAppUpgrading(app.error as AppErrorPayload | undefined);
     return (
       <div>
         <Result
@@ -180,11 +183,13 @@ export const AppError: FC<{ error: Error & { title?: string }; app: Application
           status="error"
           title={error?.title || app.i18n.t('App error', { ns: 'client' })}
           subTitle={app.i18n.t(error?.message)}
-          extra={[
-            <Button type="primary" key="try" onClick={() => window.location.reload()}>
-              {app.i18n.t('Try again')}
-            </Button>,
-          ]}
+          extra={
+            upgrading ? null : (
+              <Button type="primary" key="try" onClick={() => window.location.reload()}>
+                {app.i18n.t('Try again')}
+              </Button>
+            )
+          }
           {...props}
         />
       </div>
@@ -223,10 +228,14 @@ export const AppMaintaining: FC<{ app: Application; error: Error }> = observer(
 
 export const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(
   ({ app, error }) => {
-    const component = (error as AppErrorPayload | undefined)?.command?.components?.maintainingDialog;
+    const payload = error as AppErrorPayload | undefined;
+    const component = payload?.command?.components?.maintainingDialog;
     if (component) {
       return app.renderComponent(component, { app, error });
     }
+    if (isAppUpgrading(payload)) {
+      return null;
+    }
 
     const { icon, status, title, subTitle } = getProps(app);
     return (

package/src/components/form/table/Table.tsx

@@ -9,11 +9,11 @@
 
 import { DragOverlay, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { cx } from '@emotion/css';
+import { css, cx, injectGlobal } from '@emotion/css';
 import { DndProvider } from '@nocobase/flow-engine';
 import { useMemoizedFn } from 'ahooks';
-import { Table as AntdTable, type TableProps as AntdTableProps } from 'antd';
-import type { ColumnsType, ColumnType, GetRowKey } from 'antd/es/table/interface';
+import { Table as AntdTable, theme, type TableProps as AntdTableProps } from 'antd';
+import type { ColumnsType, ColumnGroupType, ColumnType, GetRowKey } from 'antd/es/table/interface';
 import type { RenderedCell } from 'rc-table/lib/interface';
 import React, { useMemo, useState } from 'react';
 import { SortableRow, SortHandle } from './dnd/SortableRow';
@@ -24,6 +24,20 @@ import { readRowKey, snapshotSourceRow, type RowKey, type RowSnapshot } from './
 
 type RowSelectionRenderCellResult<RecordType> = React.ReactNode | RenderedCell<RecordType>;
 
+const DEFAULT_COLUMN_CONTENT_CLASS_NAME = 'nb-table-default-column-content';
+const DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY = '--nb-table-default-column-content-max-width';
+
+// Zero specificity lets caller classes remain authoritative regardless of stylesheet insertion order. The max-width
+// value itself comes from a token-derived private CSS variable set by each Table instance.
+injectGlobal`
+  :where(.${DEFAULT_COLUMN_CONTENT_CLASS_NAME}) {
+    max-width: var(${DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY});
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+`;
+
 /**
  * Default initial page size for `Table`. Exposed so consumers can seed their
  * controlled `pageSize` state with the same value the component would use if
@@ -50,6 +64,54 @@ function isRenderedCell<RecordType>(value: unknown): value is RenderedCell<Recor
   return typeof value === 'object' && value !== null && !React.isValidElement(value) && 'children' in value;
 }
 
+function isColumnGroup<RecordType>(
+  column: ColumnGroupType<RecordType> | ColumnType<RecordType>,
+): column is ColumnGroupType<RecordType> {
+  return 'children' in column && Array.isArray(column.children) && column.children.length > 0;
+}
+
+function addDefaultColumnContentClassName<RecordType>(
+  columns: ColumnsType<RecordType>,
+  defaultClassName: string,
+): ColumnsType<RecordType> {
+  return columns.map((column) => {
+    if (column === AntdTable.EXPAND_COLUMN || column === AntdTable.SELECTION_COLUMN) {
+      return column;
+    }
+
+    if (isColumnGroup(column)) {
+      return {
+        ...column,
+        children: addDefaultColumnContentClassName(column.children, defaultClassName),
+      };
+    }
+
+    if (column.width !== undefined || column.ellipsis || column.fixed) {
+      return column;
+    }
+
+    const originalOnCell = column.onCell;
+    const originalOnHeaderCell = column.onHeaderCell;
+    return {
+      ...column,
+      onCell: (record, index) => {
+        const cellProps = originalOnCell?.(record, index) ?? {};
+        return {
+          ...cellProps,
+          className: cx(defaultClassName, cellProps.className),
+        };
+      },
+      onHeaderCell: (headerColumn) => {
+        const cellProps = originalOnHeaderCell?.(headerColumn) ?? {};
+        return {
+          ...cellProps,
+          className: cx(defaultClassName, cellProps.className),
+        };
+      },
+    };
+  });
+}
+
 export interface TableProps<RecordType extends object = any> extends AntdTableProps<RecordType> {
   /**
    * Required so drag-sort, hover-swap and row identity work. Accepts the same
@@ -108,6 +170,7 @@ export interface TableProps<RecordType extends object = any> extends AntdTablePr
  * plus the index swap, so it is safe as the default table on any page.
  */
 export function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
+  const { token } = theme.useToken();
   const {
     rowKey,
     showIndex = true,
@@ -143,6 +206,17 @@ export function Table<RecordType extends object = any>(props: TableProps<RecordT
   const showHandleInSelection = isDraggable && showSortHandle && !!rowSelection;
   const showStandaloneHandleColumn = isDraggable && showSortHandle && !rowSelection;
 
+  const defaultColumnContentClassName = useMemo(
+    () =>
+      cx(
+        DEFAULT_COLUMN_CONTENT_CLASS_NAME,
+        css`
+          ${DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY}: ${token.screenXS - token.paddingXL * 3 + token.padding * 2}px;
+        `,
+      ),
+    [token.padding, token.paddingXL, token.screenXS],
+  );
+
   const itemKeys = useMemo<string[]>(() => {
     if (!isDraggable || !dataSource) return [];
     return dataSource
@@ -191,15 +265,16 @@ export function Table<RecordType extends object = any>(props: TableProps<RecordT
   // selection cell — see `augmentedRowSelection` below.
   const augmentedColumns = useMemo<ColumnsType<RecordType>>(() => {
     const baseColumns: ColumnsType<RecordType> = columns ?? [];
-    if (!showStandaloneHandleColumn) return baseColumns;
+    const styledColumns = addDefaultColumnContentClassName(baseColumns, defaultColumnContentClassName);
+    if (!showStandaloneHandleColumn) return styledColumns;
     const handleColumn: ColumnType<RecordType> = {
       key: '__sort__',
       width: sortHandleColumnWidth,
       align: 'center',
       render: () => <SortHandle />,
     };
-    return [handleColumn, ...baseColumns];
-  }, [columns, showStandaloneHandleColumn, sortHandleColumnWidth]);
+    return [handleColumn, ...styledColumns];
+  }, [columns, defaultColumnContentClassName, showStandaloneHandleColumn, sortHandleColumnWidth]);
 
   const augmentedRowSelection = useMemo(() => {
     if (!rowSelection) return rowSelection;