@nocobase/client-v2 2.1.0-beta.33 → 2.1.0-beta.35

package/src/components/form/__tests__/EnvVariableInput.test.tsx

@@ -0,0 +1,175 @@
+/**
+ * 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 { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { FlowContext, FlowContextProvider, MetaTreeNode } from '@nocobase/flow-engine';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { EnvVariableInput, formatEnvPath, parseEnvPath } from '../EnvVariableInput';
+
+function createContextWithEnv() {
+  const ctx = new FlowContext();
+  (ctx as any).t = (key: string) => key;
+
+  ctx.defineProperty('$env', {
+    value: { API_KEY: 'secret', BASE_URL: 'https://example.com' },
+    meta: {
+      title: 'Env',
+      type: 'object',
+      properties: {
+        API_KEY: { title: 'API Key', type: 'string' },
+        BASE_URL: { title: 'Base URL', type: 'string' },
+      },
+    },
+  });
+
+  ctx.defineProperty('$user', {
+    value: { name: 'John' },
+    meta: {
+      title: 'User',
+      type: 'object',
+      properties: {
+        name: { title: 'Name', type: 'string' },
+      },
+    },
+  });
+
+  return ctx;
+}
+
+function renderWithCtx(ctx: FlowContext, node: React.ReactNode) {
+  return render(<FlowContextProvider context={ctx}>{node}</FlowContextProvider>);
+}
+
+describe('parseEnvPath', () => {
+  it('parses single segment', () => {
+    expect(parseEnvPath('{{ $env.API_KEY }}')).toEqual(['$env', 'API_KEY']);
+  });
+
+  it('parses nested segments', () => {
+    expect(parseEnvPath('{{ $env.foo.bar.baz }}')).toEqual(['$env', 'foo', 'bar', 'baz']);
+  });
+
+  it('trims surrounding whitespace', () => {
+    expect(parseEnvPath('   {{ $env.API_KEY }}   ')).toEqual(['$env', 'API_KEY']);
+  });
+
+  it('returns undefined for plain text', () => {
+    expect(parseEnvPath('plain value')).toBeUndefined();
+  });
+
+  it('returns undefined for non-$env variable', () => {
+    expect(parseEnvPath('{{ $user.name }}')).toBeUndefined();
+  });
+
+  it('returns undefined for mixed content', () => {
+    expect(parseEnvPath('prefix {{ $env.API_KEY }} suffix')).toBeUndefined();
+  });
+
+  it('returns undefined for empty / undefined', () => {
+    expect(parseEnvPath('')).toBeUndefined();
+    expect(parseEnvPath(undefined)).toBeUndefined();
+  });
+});
+
+describe('formatEnvPath', () => {
+  it('formats a single nested env path', () => {
+    expect(formatEnvPath({ paths: ['$env', 'API_KEY'] } as MetaTreeNode)).toBe('{{ $env.API_KEY }}');
+  });
+
+  it('formats multi-level env path', () => {
+    expect(formatEnvPath({ paths: ['$env', 'foo', 'bar'] } as MetaTreeNode)).toBe('{{ $env.foo.bar }}');
+  });
+
+  it('returns undefined for non-$env namespace', () => {
+    expect(formatEnvPath({ paths: ['$user', 'name'] } as MetaTreeNode)).toBeUndefined();
+  });
+
+  it('returns undefined for $env root only', () => {
+    expect(formatEnvPath({ paths: ['$env'] } as MetaTreeNode)).toBeUndefined();
+  });
+
+  it('returns undefined for empty meta', () => {
+    expect(formatEnvPath(undefined)).toBeUndefined();
+    expect(formatEnvPath({ paths: [] } as MetaTreeNode)).toBeUndefined();
+  });
+});
+
+describe('EnvVariableInput component', () => {
+  it('renders contenteditable editor with the variable selector button', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'textbox' })).toBeInTheDocument();
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the variable as a styled pill when value is a $env expression', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="{{ $env.API_KEY }}" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const tag = screen.getByText((_, node) => node?.textContent === 'Env/API Key' && node.tagName === 'SPAN');
+      expect(tag).toBeInTheDocument();
+      expect(tag.className).toContain('nb-variable-tag');
+    });
+  });
+
+  it('renders password input when value is plain text and password=true', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="my-secret" password onChange={() => undefined} />);
+
+    const input = await screen.findByDisplayValue('my-secret');
+    expect(input).toBeInTheDocument();
+    expect(input.getAttribute('type')).toBe('password');
+  });
+
+  it('does NOT mask when value is a $env expression even with password=true', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="{{ $env.API_KEY }}" password onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const tag = screen.getByText((_, node) => node?.textContent === 'Env/API Key' && node.tagName === 'SPAN');
+      expect(tag).toBeInTheDocument();
+    });
+    expect(screen.queryByDisplayValue('{{ $env.API_KEY }}')).not.toBeInTheDocument();
+  });
+
+  it('propagates onChange when typing into the password input', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(ctx, <EnvVariableInput value="initial" password onChange={handleChange} />);
+
+    const input = await screen.findByDisplayValue('initial');
+    fireEvent.change(input, { target: { value: 'next-value' } });
+    expect(handleChange).toHaveBeenCalledWith('next-value');
+  });
+
+  it('renders placeholder text on the editor', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" placeholder="enter or pick" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const editor = screen.getByRole('textbox', { name: 'textbox' });
+      expect(editor.getAttribute('data-placeholder')).toBe('enter or pick');
+    });
+  });
+
+  it('honors disabled state', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" disabled onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const editor = screen.getByRole('textbox', { name: 'textbox' });
+      expect(editor.getAttribute('contenteditable')).toBe('false');
+    });
+  });
+});

package/src/components/form/index.tsx

@@ -12,3 +12,4 @@ export * from './DrawerFormLayout';
 export * from './EnvVariableInput';
 export * from './FileSizeInput';
 export * from './JsonTextArea';
+export * from './VariableInput';

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

@@ -0,0 +1,51 @@
+/**
+ * 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 { cx } from '@emotion/css';
+import { theme } from 'antd';
+import React from 'react';
+import { overlayCellStylesClassName } from './styles';
+import type { RowSnapshot } from './utils';
+
+/**
+ * Floating clone of the row being dragged, rendered inside a `<DragOverlay>`
+ * so it follows the cursor while the source row stays in place. We inject the
+ * snapshot's `outerHTML` straight into a mini `<table>` so every antd class
+ * (`ant-table-cell`, `ant-table-selection-column`, theme tokens, etc.) is
+ * preserved. A `<colgroup>` re-applies the measured cell widths so the clone
+ * lines up column-for-column with the source row; the wrapper's pinned
+ * `height` + table `height:100%` keeps vertical sizing consistent regardless
+ * of which antd table size variant the caller picked.
+ *
+ * The wrapper also carries `overlayCellStylesClassName` so the index numeric
+ * (`.nb-table-index`) is hidden while dragging — only the handle + checkbox
+ * are surfaced inside the floating clone.
+ */
+export function RowOverlayPreview(props: { snapshot: RowSnapshot }) {
+  const { token } = theme.useToken();
+  const { html, cellWidths, totalWidth, totalHeight } = props.snapshot;
+  const colGroupHTML = cellWidths.map((width) => `<col style="width:${width}px" />`).join('');
+  const tableHTML = `<table style="table-layout:fixed;width:100%;height:100%;border-collapse:collapse"><colgroup>${colGroupHTML}</colgroup><tbody class="ant-table-tbody">${html}</tbody></table>`;
+  return (
+    <div
+      className={cx('ant-table-wrapper', overlayCellStylesClassName)}
+      style={{
+        width: totalWidth || 'auto',
+        height: totalHeight || 'auto',
+        background: token.colorBgContainer,
+        boxShadow: token.boxShadowSecondary,
+        borderRadius: token.borderRadius,
+        pointerEvents: 'none',
+        opacity: 0.95,
+        overflow: 'hidden',
+      }}
+      dangerouslySetInnerHTML={{ __html: tableHTML }}
+    />
+  );
+}

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

@@ -0,0 +1,72 @@
+/**
+ * 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 { cx } from '@emotion/css';
+import React from 'react';
+import { SORT_HANDLE_GUTTER } from './constants';
+import { SortHandle } from './dnd/SortableRow';
+
+export interface SelectionCellProps {
+  /** Whether the row is currently selected — drives the index/checkbox swap. */
+  checked: boolean;
+  /** Zero-based row index (within the current page). `TableIndex` displays it as `index + 1`. */
+  index: number;
+  /** Render the drag handle on the left gutter. Mutually exclusive with `showStandaloneHandle`. */
+  showHandle: boolean;
+  /** Render the row index numeric. When `false` only the antd checkbox is shown (default antd UX). */
+  showIndex: boolean;
+  /** The original antd checkbox node produced by `rowSelection.renderCell`. */
+  originalNode: React.ReactNode;
+}
+
+const handleSpanStyle: React.CSSProperties = {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  bottom: 0,
+  width: SORT_HANDLE_GUTTER,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+/**
+ * The body half of the rowSelection column. Renders, in order:
+ *   1. An absolute-positioned drag handle pinned to the left gutter (only
+ *      when `showHandle` is true). The parent `<td>` must be
+ *      `position: relative` for the handle to land inside the gutter —
+ *      `selectionGutterClassName` in `styles.ts` adds that.
+ *   2. A `.nb-row-selection-cell` wrapper that contains both the row index
+ *      and the checkbox. CSS in `indexSwapClassName` swaps which one is
+ *      visible depending on hover / `checked` state.
+ *
+ * When `showIndex` is false we drop the swap entirely and render only the
+ * original antd checkbox — matches the default antd selection column UX for
+ * tables that don't want the index numeric.
+ */
+export function SelectionCell(props: SelectionCellProps) {
+  const { checked, index, showHandle, showIndex, originalNode } = props;
+  return (
+    <>
+      {showHandle ? (
+        <span style={handleSpanStyle}>
+          <SortHandle />
+        </span>
+      ) : null}
+      {showIndex ? (
+        <span className={cx('nb-row-selection-cell', { checked })}>
+          <span className="nb-table-index">{index + 1}</span>
+          <span className="nb-origin-node">{originalNode}</span>
+        </span>
+      ) : (
+        originalNode
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,279 @@
+/**
+ * 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 { DragOverlay, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { cx } 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 type { RenderedCell } from 'rc-table/lib/interface';
+import React, { useMemo, useState } from 'react';
+import { SortableRow, SortHandle } from './dnd/SortableRow';
+import { RowOverlayPreview } from './RowOverlayPreview';
+import { SelectionCell } from './SelectionCell';
+import { indexSwapClassName, selectionGutterClassName } from './styles';
+import { readRowKey, snapshotSourceRow, type RowKey, type RowSnapshot } from './utils';
+
+type RowSelectionRenderCellResult<RecordType> = React.ReactNode | RenderedCell<RecordType>;
+
+/**
+ * Default initial page size for `Table`. Exposed so consumers can seed their
+ * controlled `pageSize` state with the same value the component would use if
+ * they relied purely on the built-in pagination defaults.
+ */
+export const DEFAULT_PAGE_SIZE = 50;
+
+/**
+ * Default `pageSizeOptions` injected into the pagination config. Matches the
+ * v1 settings-page table so users see the same choices across versions.
+ * Consumers can override by passing their own `pageSizeOptions` in
+ * `pagination`.
+ */
+export const PAGE_SIZE_OPTIONS: readonly number[] = [5, 10, 20, 50, 100, 200];
+
+/**
+ * antd's `rowSelection.renderCell` can return either a `ReactNode` or a
+ * `RenderedCell` (the `{ children, props }` shape used to drive colSpan /
+ * rowSpan). `SelectionCell` only paints inside an existing selection cell —
+ * cell-spanning isn't supported here — so this guard unwraps to the inner
+ * children when a `RenderedCell` slips through.
+ */
+function isRenderedCell<RecordType>(value: unknown): value is RenderedCell<RecordType> {
+  return typeof value === 'object' && value !== null && !React.isValidElement(value) && 'children' in value;
+}
+
+export interface TableProps<RecordType extends object = any> extends AntdTableProps<RecordType> {
+  /**
+   * Required so drag-sort, hover-swap and row identity work. Accepts the same
+   * shape as antd `Table.rowKey`. When passed as a function it gets the
+   * record + index and must return a serializable id.
+   */
+  rowKey: RowKey<RecordType>;
+  /**
+   * Show row index (1, 2, 3, …) in the rowSelection column by default; hovering
+   * a row or selecting it reveals the checkbox in the same cell. Requires
+   * `rowSelection` — the index lives in the selection column. Defaults to
+   * `true`.
+   */
+  showIndex?: boolean;
+  /**
+   * Enable vertical drag-and-drop row reordering. When true, rows show a drag
+   * handle on the left and `onSortEnd` fires after each drop. Defaults to
+   * `false`; the rest of the table behaves like a plain antd Table.
+   */
+  isDraggable?: boolean;
+  /**
+   * Called after a row is dropped onto another. Only used when `isDraggable`
+   * is true. The caller persists the move (e.g. `resource.move(...)`) and
+   * refreshes `dataSource` — this component does NOT mutate the data array.
+   */
+  onSortEnd?: (from: RecordType, to: RecordType) => void | Promise<void>;
+  /**
+   * Hide the drag handle entirely while still keeping `isDraggable` on. Useful
+   * when the caller wants to embed `<SortHandle />` inside a custom column.
+   * Defaults to `true`.
+   */
+  showSortHandle?: boolean;
+  /**
+   * Override the width of the auto-inserted handle column when `rowSelection`
+   * is absent. When `rowSelection` is provided the handle is rendered inside
+   * the selection column instead, so this prop is ignored.
+   */
+  sortHandleColumnWidth?: number;
+}
+
+/**
+ * Generic v2 settings-page table primitive. Built on antd's `Table` and adds:
+ *
+ * - Row-index ↔ checkbox swap inside the selection column (`showIndex`,
+ *   on by default): index visible at rest, checkbox shows on hover or when
+ *   selected. Both elements are absolutely positioned inside the cell so
+ *   they share the same center anchor and never compete for layout space.
+ * - Optional vertical drag-and-drop reordering (`isDraggable`): handle is
+ *   absolute-positioned in a 32px left gutter so the checkbox column stays
+ *   visually centered. The drag overlay renders an `outerHTML` clone of the
+ *   source `<tr>`; the index is suppressed inside the clone so the row
+ *   being moved doesn't display a stale ordinal.
+ *
+ * Use this in place of antd `Table` for any settings-page list. When
+ * `isDraggable` is false the component is a thin pass-through to antd Table
+ * 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 {
+    rowKey,
+    showIndex = true,
+    isDraggable = false,
+    onSortEnd,
+    showSortHandle = true,
+    sortHandleColumnWidth = 40,
+    components,
+    columns,
+    dataSource,
+    rowSelection,
+    className,
+    pagination,
+    ...rest
+  } = props;
+
+  // Apply opinionated pagination defaults (showSizeChanger + a v1-aligned set
+  // of pageSizeOptions). `pagination === false` is preserved verbatim so
+  // callers can still disable pagination outright; for any other value (object
+  // or undefined) we spread caller-provided keys last so explicit overrides
+  // win.
+  const mergedPagination = useMemo<AntdTableProps<RecordType>['pagination']>(() => {
+    if (pagination === false) {
+      return false;
+    }
+    return {
+      showSizeChanger: true,
+      pageSizeOptions: [...PAGE_SIZE_OPTIONS],
+      ...(pagination ?? {}),
+    };
+  }, [pagination]);
+
+  const showHandleInSelection = isDraggable && showSortHandle && !!rowSelection;
+  const showStandaloneHandleColumn = isDraggable && showSortHandle && !rowSelection;
+
+  const itemKeys = useMemo<string[]>(() => {
+    if (!isDraggable || !dataSource) return [];
+    return dataSource
+      .map((record, index) => readRowKey(record, rowKey, index))
+      .filter((key): key is React.Key => key != null)
+      .map((key) => String(key));
+  }, [dataSource, isDraggable, rowKey]);
+
+  // Snapshot of the source `<tr>` at drag start. Cleared on drag end / cancel.
+  const [activeSnapshot, setActiveSnapshot] = useState<RowSnapshot | null>(null);
+
+  const handleDragStart = useMemoizedFn((event: DragStartEvent) => {
+    setActiveSnapshot(snapshotSourceRow(String(event.active.id)));
+  });
+
+  const handleDragCancel = useMemoizedFn(() => {
+    setActiveSnapshot(null);
+  });
+
+  const handleDragEnd = useMemoizedFn(async (event: DragEndEvent) => {
+    setActiveSnapshot(null);
+    const { active, over } = event;
+    if (!active || !over || !onSortEnd) return;
+    if (String(active.id) === String(over.id)) return;
+    if (!dataSource) return;
+    const fromIndex = dataSource.findIndex(
+      (record, index) => String(readRowKey(record, rowKey, index)) === String(active.id),
+    );
+    const toIndex = dataSource.findIndex(
+      (record, index) => String(readRowKey(record, rowKey, index)) === String(over.id),
+    );
+    if (fromIndex < 0 || toIndex < 0) return;
+    const from = dataSource[fromIndex];
+    const to = dataSource[toIndex];
+    if (!from || !to) return;
+    await onSortEnd(from, to);
+  });
+
+  const tableComponents = useMemo(() => {
+    if (!isDraggable) return components;
+    return { ...components, body: { ...components?.body, row: SortableRow } };
+  }, [components, isDraggable]);
+
+  // When dragging without rowSelection, prepend a standalone column for the
+  // handle. When rowSelection is present, the handle lives inside the
+  // selection cell — see `augmentedRowSelection` below.
+  const augmentedColumns = useMemo<ColumnsType<RecordType>>(() => {
+    const baseColumns: ColumnsType<RecordType> = columns ?? [];
+    if (!showStandaloneHandleColumn) return baseColumns;
+    const handleColumn: ColumnType<RecordType> = {
+      key: '__sort__',
+      width: sortHandleColumnWidth,
+      align: 'center',
+      render: () => <SortHandle />,
+    };
+    return [handleColumn, ...baseColumns];
+  }, [columns, showStandaloneHandleColumn, sortHandleColumnWidth]);
+
+  const augmentedRowSelection = useMemo(() => {
+    if (!rowSelection) return rowSelection;
+    if (!showHandleInSelection && !showIndex) return rowSelection;
+    const originalRenderCell = rowSelection.renderCell;
+    return {
+      ...rowSelection,
+      renderCell: (checked: boolean, record: RecordType, index: number, originalNode: React.ReactNode) => {
+        const result: RowSelectionRenderCellResult<RecordType> = originalRenderCell
+          ? originalRenderCell(checked, record, index, originalNode)
+          : originalNode;
+        const node: React.ReactNode = isRenderedCell<RecordType>(result) ? result.children ?? null : result;
+        return (
+          <SelectionCell
+            checked={checked}
+            index={index}
+            showHandle={showHandleInSelection}
+            showIndex={showIndex}
+            originalNode={node}
+          />
+        );
+      },
+    };
+  }, [rowSelection, showHandleInSelection, showIndex]);
+
+  const tableClassName = cx(
+    className,
+    showHandleInSelection && selectionGutterClassName,
+    showIndex && rowSelection && indexSwapClassName,
+  );
+
+  // antd's `rowKey` accepts `string | GetRowKey<RecordType>`. Our `RowKey`
+  // alias is narrower (keyof RecordType for string keys), but TS doesn't infer
+  // that `keyof T & string` is assignable to `string` without help — express
+  // the narrowing explicitly at the antd boundary.
+  const antdRowKey: string | GetRowKey<RecordType> = typeof rowKey === 'function' ? rowKey : String(rowKey);
+
+  const tableBody = (
+    <AntdTable<RecordType>
+      {...rest}
+      rowKey={antdRowKey}
+      dataSource={dataSource}
+      columns={augmentedColumns}
+      components={tableComponents}
+      rowSelection={augmentedRowSelection}
+      className={tableClassName}
+      pagination={mergedPagination}
+    />
+  );
+
+  if (!isDraggable || !onSortEnd || !itemKeys.length) {
+    return tableBody;
+  }
+
+  return (
+    <DndProvider
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+      showDragOverlay={false}
+    >
+      <SortableContext items={itemKeys} strategy={verticalListSortingStrategy}>
+        {tableBody}
+      </SortableContext>
+      {/* dropAnimation={null}: skip the default tween that snaps the overlay
+          back to the source `<tr>` on drop. Our source row hasn't moved yet
+          (the server `move` + refetch is async) so the tween reads as the
+          row "bouncing back" to its original position, which contradicts the
+          successful drop the user just performed. */}
+      <DragOverlay dropAnimation={null}>
+        {activeSnapshot ? <RowOverlayPreview snapshot={activeSnapshot} /> : null}
+      </DragOverlay>
+    </DndProvider>
+  );
+}
+
+export default Table;

package/src/components/form/table/__tests__/Table.pagination.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS, Table } from '../Table';
+
+type Row = { id: number; name: string };
+
+const columns = [{ title: 'Name', dataIndex: 'name' as const }];
+
+function makeRows(count: number): Row[] {
+  return Array.from({ length: count }, (_, index) => ({ id: index + 1, name: `row-${index + 1}` }));
+}
+
+describe('Table pagination defaults', () => {
+  it('exports DEFAULT_PAGE_SIZE=50 and the v1-aligned PAGE_SIZE_OPTIONS list', () => {
+    expect(DEFAULT_PAGE_SIZE).toBe(50);
+    expect([...PAGE_SIZE_OPTIONS]).toEqual([5, 10, 20, 50, 100, 200]);
+  });
+
+  it('shows the page-size changer by default when pagination is enabled', () => {
+    const { container } = render(
+      <Table<Row>
+        rowKey="id"
+        columns={columns}
+        dataSource={makeRows(120)}
+        pagination={{ current: 1, pageSize: 50, total: 120 }}
+      />,
+    );
+    expect(container.querySelector('.ant-pagination-options-size-changer')).not.toBeNull();
+  });
+
+  it('shows the page-size changer when caller omits pagination entirely', () => {
+    const { container } = render(<Table<Row> rowKey="id" columns={columns} dataSource={makeRows(120)} />);
+    expect(container.querySelector('.ant-pagination-options-size-changer')).not.toBeNull();
+  });
+
+  it('renders no pagination at all when caller passes pagination={false}', () => {
+    const { container } = render(
+      <Table<Row> rowKey="id" columns={columns} dataSource={makeRows(120)} pagination={false} />,
+    );
+    expect(container.querySelector('.ant-pagination')).toBeNull();
+  });
+
+  it('lets caller-provided showSizeChanger=false override the default', () => {
+    const { container } = render(
+      <Table<Row>
+        rowKey="id"
+        columns={columns}
+        dataSource={makeRows(120)}
+        pagination={{ current: 1, pageSize: 50, total: 120, showSizeChanger: false }}
+      />,
+    );
+    expect(container.querySelector('.ant-pagination-options-size-changer')).toBeNull();
+  });
+
+  it('preserves caller-controlled current page when caller passes a pagination object', () => {
+    const { container } = render(
+      <Table<Row>
+        rowKey="id"
+        columns={columns}
+        dataSource={makeRows(120)}
+        pagination={{ current: 2, pageSize: 50, total: 120 }}
+      />,
+    );
+    // antd marks the active page with `.ant-pagination-item-active` and the
+    // page number lives inside an <a> child — checking the rendered text is
+    // the most stable assertion across antd versions.
+    const active = container.querySelector('.ant-pagination-item-active');
+    expect(active?.textContent).toBe('2');
+  });
+});

package/src/components/form/table/constants.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+/**
+ * Pixel reservation on the left side of the rowSelection column for the drag
+ * handle. Used by the runtime `selectionGutterClassName` (real table) and by
+ * the drag overlay `overlayCellStylesClassName` (floating clone) so both
+ * variants put the handle in the same gutter position.
+ */
+export const SORT_HANDLE_GUTTER = 32;