@nocobase/client-v2 2.1.0-beta.32 → 2.1.0-beta.34

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

@@ -0,0 +1,75 @@
+/**
+ * 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 type React from 'react';
+
+/**
+ * Same shape as antd Table's `rowKey` prop — either a record key name or a
+ * function. Hoisted here so utilities and `Table.tsx` agree on the contract.
+ */
+export type RowKey<RecordType extends object> =
+  | (keyof RecordType & (string | number))
+  | ((record: RecordType, index?: number) => React.Key);
+
+/**
+ * Read a stable row id off a record. Mirrors antd Table's rowKey resolution
+ * but normalises non-primitive ids to strings so `data-row-key` attributes
+ * and `useSortable({ id })` agree on equality.
+ */
+export function readRowKey<RecordType extends object>(
+  record: RecordType,
+  rowKey: RowKey<RecordType>,
+  index?: number,
+): React.Key | undefined {
+  if (typeof rowKey === 'function') {
+    return rowKey(record, index);
+  }
+  const value = record[rowKey] as unknown;
+  if (value == null) return undefined;
+  return typeof value === 'string' || typeof value === 'number' ? value : String(value);
+}
+
+/**
+ * Pixel-perfect snapshot of a rendered `<tr>` for the drag overlay clone.
+ * Contains everything needed to rebuild a visually identical floating row
+ * without re-running antd's column layout pass.
+ */
+export type RowSnapshot = {
+  /** outerHTML of the source `<tr>`, captured at drag start. */
+  html: string;
+  /** Per-cell pixel widths (in DOM order) so the clone can fix them via `<col>`. */
+  cellWidths: number[];
+  /** Total row width — used as the wrapper width so the clone matches source horizontally. */
+  totalWidth: number;
+  /** Total row height — applied to the clone so cell padding matches the source row exactly. */
+  totalHeight: number;
+};
+
+/**
+ * Snapshot the source `<tr>` so the drag overlay can render a pixel-accurate
+ * floating clone. We can't reliably recompute the layout from `columns` alone
+ * — antd auto-sizes columns at runtime based on content + the surrounding
+ * container — so we read the rendered widths off the DOM at drag start. The
+ * row height is captured too because antd's cell padding rules are scoped to
+ * a selector chain we strip in the clone.
+ */
+export function snapshotSourceRow(rowKey: string): RowSnapshot | null {
+  if (typeof document === 'undefined') return null;
+  // `CSS.escape` is in lib.dom and shipped in every browser we target; the
+  // guard is purely a belt-and-suspenders against exotic test environments
+  // where `window.CSS` may be absent.
+  const cssGlobal: { escape?: (value: string) => string } | undefined =
+    typeof window !== 'undefined' ? window.CSS : undefined;
+  const escaped = cssGlobal?.escape ? cssGlobal.escape(rowKey) : rowKey;
+  const sourceRow = document.querySelector(`tr[data-row-key="${escaped}"]`) as HTMLTableRowElement | null;
+  if (!sourceRow) return null;
+  const cellWidths = Array.from(sourceRow.cells).map((cell) => cell.getBoundingClientRect().width);
+  const rect = sourceRow.getBoundingClientRect();
+  return { html: sourceRow.outerHTML, cellWidths, totalWidth: rect.width, totalHeight: rect.height };
+}

package/src/components/index.ts

@@ -9,6 +9,8 @@
 
 export * from './AppComponents';
 export * from './BlankComponent';
+export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';
 export * from './RouterContextCleaner';
+export * from './form/table';

package/src/flow/actions/__tests__/formAssignRules.legacyMigration.test.tsx

@@ -0,0 +1,173 @@
+/**
+ * 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 React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FlowEngine, FlowModel, FlowSettingsContextProvider } from '@nocobase/flow-engine';
+import { formAssignRules } from '../formAssignRules';
+import { filterFormDefaultValues } from '../filterFormDefaultValues';
+
+const mockState = vi.hoisted(() => ({
+  editorProps: [] as any[],
+}));
+
+vi.mock('../../components/FieldAssignRulesEditor', () => ({
+  FieldAssignRulesEditor: (props: any) => {
+    mockState.editorProps.push(props);
+    return null;
+  },
+}));
+
+vi.mock('../../components/fieldAssignOptions', () => ({
+  collectFieldAssignCascaderOptions: vi.fn(() => []),
+}));
+
+vi.mock('../../components/useAssociationTitleFieldSync', () => ({
+  useAssociationTitleFieldSync: () => ({
+    isTitleFieldCandidate: vi.fn(() => false),
+    onSyncAssociationTitleField: vi.fn(),
+  }),
+}));
+
+vi.mock('../../internal/utils/modelUtils', () => ({
+  findFormItemModelByFieldPath: vi.fn(() => null),
+  getCollectionFromModel: vi.fn(() => null),
+}));
+
+function createLegacyField(fieldPath: string, value: any, legacyFlowKey: string) {
+  return {
+    props: {},
+    stepParams: {
+      fieldSettings: { init: { fieldPath } },
+      [legacyFlowKey]: { initialValue: { defaultValue: value } },
+    },
+    getProps() {
+      return this.props;
+    },
+    getStepParams(flowKey: string, stepKey: string) {
+      return this.stepParams?.[flowKey]?.[stepKey];
+    },
+  };
+}
+
+function createModel(legacyFlowKey: string, fields = [{ fieldPath: 'description', value: 'Legacy description' }]) {
+  const engine = new FlowEngine();
+  engine.translate = vi.fn((key: string) => key) as any;
+  const model = new FlowModel({ uid: `model-${legacyFlowKey}`, flowEngine: engine }) as any;
+  model.subModels.grid = {
+    subModels: {
+      items: fields.map((field) => createLegacyField(field.fieldPath, field.value, legacyFlowKey)),
+    },
+  };
+  return model;
+}
+
+function getActionComponent(action: any) {
+  const schema = typeof action.uiSchema === 'function' ? action.uiSchema() : action.uiSchema;
+  return schema.value['x-component'];
+}
+
+function renderAction(action: any, model: any, initialValue: any[] = []) {
+  const Comp = getActionComponent(action);
+  const onChange = vi.fn();
+
+  const Harness = () => {
+    const [value, setValue] = React.useState(initialValue);
+    const handleChange = React.useCallback(
+      (next: any[]) => {
+        onChange(next);
+        setValue(next);
+      },
+      [onChange],
+    );
+
+    return (
+      <FlowSettingsContextProvider value={model.context}>
+        <Comp value={value} onChange={handleChange} />
+      </FlowSettingsContextProvider>
+    );
+  };
+
+  render(<Harness />);
+  return { onChange };
+}
+
+function lastEditorValue() {
+  return mockState.editorProps.at(-1)?.value;
+}
+
+describe('Field values legacy default migration', () => {
+  beforeEach(() => {
+    mockState.editorProps.length = 0;
+    vi.clearAllMocks();
+  });
+
+  it('imports form field legacy defaults before form-level value is persisted', async () => {
+    const model = createModel('editItemSettings');
+    const { onChange } = renderAction(formAssignRules, model);
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith([
+        expect.objectContaining({
+          key: 'legacy-default:description',
+          targetPath: 'description',
+          mode: 'default',
+          value: 'Legacy description',
+        }),
+      ]);
+    });
+    expect(lastEditorValue()).toEqual([
+      expect.objectContaining({
+        targetPath: 'description',
+        value: 'Legacy description',
+      }),
+    ]);
+  });
+
+  it('does not re-import form legacy defaults after an empty form-level value is persisted', async () => {
+    const model = createModel('editItemSettings');
+    model.setStepParams('formModelSettings', 'assignRules', { value: [] });
+    const { onChange } = renderAction(formAssignRules, model, []);
+
+    await waitFor(() => {
+      expect(mockState.editorProps.length).toBeGreaterThan(1);
+    });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(lastEditorValue()).toEqual([]);
+  });
+
+  it('does not append deleted legacy form targets when another rule is already persisted', async () => {
+    const persisted = [{ key: 'kept', targetPath: 'title', mode: 'default', value: 'Kept title' }];
+    const model = createModel('editItemSettings', [
+      { fieldPath: 'title', value: 'Kept title' },
+      { fieldPath: 'description', value: 'Legacy description' },
+    ]);
+    model.setStepParams('formModelSettings', 'assignRules', { value: persisted });
+    const { onChange } = renderAction(formAssignRules, model, persisted);
+
+    await waitFor(() => {
+      expect(mockState.editorProps.length).toBeGreaterThan(1);
+    });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(lastEditorValue()).toEqual(persisted);
+  });
+
+  it('does not re-import filter form legacy defaults after an empty form-level value is persisted', async () => {
+    const model = createModel('filterFormItemSettings');
+    model.setStepParams('formFilterBlockModelSettings', 'defaultValues', { value: [] });
+    const { onChange } = renderAction(filterFormDefaultValues, model, []);
+
+    await waitFor(() => {
+      expect(mockState.editorProps.length).toBeGreaterThan(1);
+    });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(lastEditorValue()).toEqual([]);
+  });
+});

package/src/flow/actions/__tests__/pattern.test.ts

@@ -187,4 +187,138 @@ describe('pattern action', () => {
 
     getDisplayBindingSpy.mockRestore();
   });
+
+  it('falls back to the target collection title field for association display only mode', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      DummyFormItemModel,
+      FieldModel,
+    });
+
+    const parent = engine.createModel<DummyFormItemModel>({
+      use: DummyFormItemModel,
+      uid: 'form-item-association',
+      subModels: {
+        field: {
+          use: FieldModel,
+          uid: 'field-association',
+          props: {},
+        },
+      },
+    });
+    const collectionField = {
+      targetCollectionTitleFieldName: 'name',
+      isAssociationField: () => true,
+    };
+    parent.collectionField = collectionField;
+
+    await pattern.beforeParamsSave?.(
+      {
+        model: parent,
+        collectionField,
+      } as any,
+      { pattern: 'readPretty' },
+      { pattern: 'editable' },
+    );
+
+    expect(parent.props).toMatchObject({
+      pattern: 'readPretty',
+      disabled: false,
+      titleField: 'name',
+    });
+    expect(parent.getStepParams('editItemSettings', 'titleField')).toEqual({
+      titleField: 'name',
+    });
+  });
+
+  it('passes the association title field to the rebuilt display field model', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      DummyFormItemModel,
+      FieldModel,
+      DummyDisplayFieldModel,
+    });
+
+    const parent = engine.createModel<DummyFormItemModel>({
+      use: DummyFormItemModel,
+      uid: 'form-item-association-rebuild',
+      subModels: {
+        field: {
+          use: FieldModel,
+          uid: 'field-association-rebuild',
+          props: {},
+        },
+      },
+    });
+    const targetTitleField = { name: 'name' };
+    const collectionField = {
+      targetCollectionTitleFieldName: 'name',
+      targetCollection: {
+        getField: vi.fn(() => targetTitleField),
+      },
+      isAssociationField: () => true,
+    };
+    parent.collectionField = collectionField;
+    const getDisplayBindingSpy = vi.spyOn(DetailsItemModel, 'getDefaultBindingByField').mockReturnValue({
+      modelName: 'DummyDisplayFieldModel',
+      defaultProps: { display: true },
+    } as any);
+
+    await pattern.afterParamsSave?.(
+      {
+        model: parent,
+        collectionField,
+        engine,
+      } as any,
+      { pattern: 'readPretty' },
+      { pattern: 'editable' },
+    );
+
+    expect(parent.subModels.field).toBeInstanceOf(DummyDisplayFieldModel);
+    expect(parent.subModels.field?.props).toMatchObject({
+      display: true,
+      titleField: 'name',
+    });
+
+    getDisplayBindingSpy.mockRestore();
+  });
+
+  it('refreshes the parent model after leaving display only mode', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      DummyFormItemModel,
+      FieldModel,
+      DummyDisplayFieldModel,
+    });
+
+    const host = engine.createModel<FlowModel>({
+      use: FlowModel,
+      uid: 'sub-table-host',
+    });
+    const parent = engine.createModel<DummyFormItemModel>({
+      use: DummyFormItemModel,
+      uid: 'sub-table-column',
+      subModels: {
+        field: {
+          use: FieldModel,
+          uid: 'sub-table-column-field',
+          stepParams: {
+            fieldBinding: {
+              use: 'DummyDisplayFieldModel',
+            },
+          },
+        },
+      },
+    });
+    parent.setParent(host);
+    const hostSetPropsSpy = vi.spyOn(host, 'setProps');
+
+    await pattern.afterParamsSave?.(makeCtx(parent), { pattern: 'editable' }, { pattern: 'readPretty' });
+
+    expect(parent.subModels.field).toBeInstanceOf(FieldModel);
+    expect(parent.subModels.field?.uid).toBe('sub-table-column-field');
+    expect(hostSetPropsSpy).toHaveBeenCalledWith({
+      __patternRefreshKey: expect.any(String),
+    });
+  });
 });

package/src/flow/actions/__tests__/titleField.test.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { titleField } from '../titleField';
+
+describe('titleField action', () => {
+  it('builds options from target field interface metadata', () => {
+    const titleableField = {
+      name: 'nickname',
+      title: 'Nickname',
+      getInterfaceOptions: vi.fn(() => ({ titleUsable: true })),
+    };
+    const nonTitleableField = {
+      name: 'profile',
+      title: 'Profile',
+      getInterfaceOptions: vi.fn(() => ({ titleUsable: false })),
+    };
+    const missingContextManager = {
+      collectionFieldInterfaceManager: {
+        getFieldInterface: vi.fn(() => undefined),
+      },
+    };
+
+    const uiMode = (titleField as any).uiMode({
+      dataSourceManager: missingContextManager,
+      collectionField: {
+        targetCollection: {
+          getFields: () => [titleableField, nonTitleableField],
+        },
+      },
+    });
+
+    expect(uiMode.props.options).toEqual([{ value: 'nickname', label: 'Nickname' }]);
+    expect(titleableField.getInterfaceOptions).toHaveBeenCalled();
+    expect(nonTitleableField.getInterfaceOptions).toHaveBeenCalled();
+    expect(missingContextManager.collectionFieldInterfaceManager.getFieldInterface).not.toHaveBeenCalled();
+  });
+});

package/src/flow/actions/filterFormDefaultValues.tsx

@@ -10,7 +10,8 @@
 import { defineAction, observer, tExpr, useFlowContext } from '@nocobase/flow-engine';
 import { isEqual } from 'lodash';
 import React from 'react';
-import { FieldAssignRulesEditor, type FieldAssignRuleItem } from '../components/FieldAssignRulesEditor';
+import { FieldAssignRulesEditor } from '../components/FieldAssignRulesEditor';
+import type { FieldAssignRuleItem } from '../components/FieldAssignRulesEditor';
 import { collectFieldAssignCascaderOptions } from '../components/fieldAssignOptions';
 import { useAssociationTitleFieldSync } from '../components/useAssociationTitleFieldSync';
 import { findFormItemModelByFieldPath, getCollectionFromModel } from '../internal/utils/modelUtils';
@@ -18,6 +19,7 @@ import {
   collectLegacyDefaultValueRulesFromFilterFormModel,
   mergeAssignRulesWithLegacyDefaults,
 } from '../models/blocks/filter-form/legacyDefaultValueMigration';
+import { hasPersistedAssignRulesValue } from '../models/blocks/shared/legacyDefaultValueMigrationBase';
 import { getDefaultOperator } from '../models/blocks/filter-manager/utils';
 import { operators } from '../../flow-compat';
 
@@ -36,6 +38,10 @@ const FilterFormDefaultValuesUI = observer(
       return collectLegacyDefaultValueRulesFromFilterFormModel(ctx.model);
     }, [ctx.model]);
 
+    const hasPersistedValue = React.useMemo(() => {
+      return hasPersistedAssignRulesValue(ctx.model, 'formFilterBlockModelSettings', 'defaultValues');
+    }, [ctx.model]);
+
     const getValueInputProps = React.useCallback(
       (item: FieldAssignRuleItem) => {
         const targetPath = item?.targetPath ? String(item.targetPath) : '';
@@ -57,7 +63,7 @@ const FilterFormDefaultValuesUI = observer(
     );
 
     // 兼容：将字段级默认值（filterFormItemSettings.initialValue）合并到表单级 defaultValues 里展示。
-    // 仅在首次打开时合并，后续以当前 step 表单值为准（便于用户在此处编辑/删除后统一保存）。
+    // 仅在表单级 defaultValues.value 尚未持久化时合并；已保存的空数组也代表用户显式删除。
     const hasInitializedMergeRef = React.useRef(false);
     const [hasInitializedMerge, setHasInitializedMerge] = React.useState(false);
     const markInitialized = React.useCallback(() => {
@@ -66,12 +72,23 @@ const FilterFormDefaultValuesUI = observer(
       setHasInitializedMerge(true);
     }, []);
 
+    const normalizedValue = React.useMemo(() => {
+      return Array.isArray(props.value) ? props.value : [];
+    }, [props.value]);
+
+    const legacyAwareValue = React.useMemo(() => {
+      if (hasPersistedValue) {
+        return normalizedValue;
+      }
+      return mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
+    }, [hasPersistedValue, legacyDefaults, normalizedValue, props.value]);
+
     const value = React.useMemo(() => {
       if (!canEdit || !hasInitializedMerge) {
-        return mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
+        return legacyAwareValue;
       }
-      return Array.isArray(props.value) ? props.value : [];
-    }, [canEdit, hasInitializedMerge, legacyDefaults, props.value]);
+      return normalizedValue;
+    }, [canEdit, hasInitializedMerge, legacyAwareValue, normalizedValue]);
 
     const handleChange = React.useCallback(
       (next: FieldAssignRuleItem[]) => {
@@ -87,12 +104,16 @@ const FilterFormDefaultValuesUI = observer(
       if (hasInitializedMergeRef.current) return;
       if (!canEdit) return;
 
-      const nextValue = mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
-      if (!isEqual(props.value || [], nextValue || [])) {
-        props.onChange?.(nextValue);
+      if (hasPersistedValue) {
+        markInitialized();
+        return;
+      }
+
+      if (!isEqual(normalizedValue, legacyAwareValue)) {
+        props.onChange?.(legacyAwareValue);
       }
       markInitialized();
-    }, [canEdit, legacyDefaults, markInitialized, props.onChange, props.value]);
+    }, [canEdit, hasPersistedValue, legacyAwareValue, markInitialized, normalizedValue, props.onChange]);
 
     return (
       <FieldAssignRulesEditor

package/src/flow/actions/formAssignRules.tsx

@@ -10,7 +10,8 @@
 import { defineAction, observer, tExpr, useFlowContext } from '@nocobase/flow-engine';
 import { isEqual } from 'lodash';
 import React from 'react';
-import { FieldAssignRulesEditor, type FieldAssignRuleItem } from '../components/FieldAssignRulesEditor';
+import { FieldAssignRulesEditor } from '../components/FieldAssignRulesEditor';
+import type { FieldAssignRuleItem } from '../components/FieldAssignRulesEditor';
 import { collectFieldAssignCascaderOptions } from '../components/fieldAssignOptions';
 import { useAssociationTitleFieldSync } from '../components/useAssociationTitleFieldSync';
 import { getCollectionFromModel } from '../internal/utils/modelUtils';
@@ -18,6 +19,7 @@ import {
   collectLegacyDefaultValueRulesFromFormModel,
   mergeAssignRulesWithLegacyDefaults,
 } from '../models/blocks/form/legacyDefaultValueMigration';
+import { hasPersistedAssignRulesValue } from '../models/blocks/shared/legacyDefaultValueMigrationBase';
 
 const FormAssignRulesUI = observer(
   (props: { value?: FieldAssignRuleItem[]; onChange?: (value: FieldAssignRuleItem[]) => void }) => {
@@ -34,8 +36,12 @@ const FormAssignRulesUI = observer(
       return collectLegacyDefaultValueRulesFromFormModel(ctx.model);
     }, [ctx.model]);
 
+    const hasPersistedValue = React.useMemo(() => {
+      return hasPersistedAssignRulesValue(ctx.model, 'formModelSettings', 'assignRules');
+    }, [ctx.model]);
+
     // 兼容：将字段级默认值（editItemSettings/formItemSettings.initialValue）合并到表单级 assignRules 里展示。
-    // 仅在首次打开时合并，后续以当前 step 表单值为准（便于用户在此处编辑/删除后统一保存）。
+    // 仅在表单级 assignRules.value 尚未持久化时合并；已保存的空数组也代表用户显式删除。
     const hasInitializedMergeRef = React.useRef(false);
     const [hasInitializedMerge, setHasInitializedMerge] = React.useState(false);
     const markInitialized = React.useCallback(() => {
@@ -49,12 +55,19 @@ const FormAssignRulesUI = observer(
       return base;
     }, [props.value]);
 
+    const legacyAwareValue = React.useMemo(() => {
+      if (hasPersistedValue) {
+        return normalizedValue;
+      }
+      return mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
+    }, [hasPersistedValue, legacyDefaults, normalizedValue, props.value]);
+
     const value = React.useMemo(() => {
       if (!canEdit || !hasInitializedMerge) {
-        return mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
+        return legacyAwareValue;
       }
       return normalizedValue;
-    }, [canEdit, hasInitializedMerge, legacyDefaults, normalizedValue, props.value]);
+    }, [canEdit, hasInitializedMerge, legacyAwareValue, normalizedValue]);
 
     const handleChange = React.useCallback(
       (next: FieldAssignRuleItem[]) => {
@@ -70,14 +83,16 @@ const FormAssignRulesUI = observer(
       if (hasInitializedMergeRef.current) return;
       if (!canEdit) return;
 
-      const merged = mergeAssignRulesWithLegacyDefaults(props.value, legacyDefaults);
-      const nextValue = merged;
+      if (hasPersistedValue) {
+        markInitialized();
+        return;
+      }
 
-      if (!isEqual(props.value || [], nextValue || [])) {
-        props.onChange?.(nextValue);
+      if (!isEqual(normalizedValue, legacyAwareValue)) {
+        props.onChange?.(legacyAwareValue);
       }
       markInitialized();
-    }, [canEdit, legacyDefaults, markInitialized, props.onChange, props.value]);
+    }, [canEdit, hasPersistedValue, legacyAwareValue, markInitialized, normalizedValue, props.onChange]);
 
     return (
       <FieldAssignRulesEditor