@nocobase/client-v2 2.1.0-beta.24 → 2.1.0-beta.26

package/src/flow/models/actions/__tests__/AssociationActionModel.test.ts

@@ -0,0 +1,250 @@
+/**
+ * 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 { BaseRecordResource, FlowEngine } from '@nocobase/flow-engine';
+import {
+  applyDisassociateAction,
+  ActionModel,
+  applyAssociateAction,
+  AssociateActionModel,
+  CollectionActionGroupModel,
+  DisassociateActionModel,
+  getAssociationTargetResourceSettings,
+  PopupActionModel,
+  RecordActionGroupModel,
+} from '../../..';
+
+class TestAssociationResource<T = any> extends BaseRecordResource<T> {
+  async refresh(): Promise<void> {}
+}
+
+const createEngine = () => {
+  const engine = new FlowEngine();
+  engine.registerModels({
+    ActionModel,
+    AssociateActionModel,
+    DisassociateActionModel,
+    PopupActionModel,
+    CollectionActionGroupModel,
+    RecordActionGroupModel,
+  });
+  return engine;
+};
+
+const createContext = (engine: FlowEngine, resourceSettingsInit: any) => {
+  const collection = {
+    options: {
+      availableActions: ['list', 'update'],
+    },
+    getFilterByTK: vi.fn((record) => record.id),
+  };
+  return {
+    engine,
+    collection,
+    blockModel: {
+      collection,
+      getResourceSettingsInitParams: () => resourceSettingsInit,
+    },
+  } as any;
+};
+
+describe('association action models', () => {
+  it('uses update permission for association operations', () => {
+    expect(AssociateActionModel.prototype.getAclActionName.call({})).toBe('update');
+    expect(DisassociateActionModel.prototype.getAclActionName.call({})).toBe('update');
+    expect(AssociateActionModel.capabilityActionName).toBe('update');
+    expect(DisassociateActionModel.capabilityActionName).toBe('update');
+  });
+
+  it('uses association target collection for selector table blocks', () => {
+    const ctx: any = {
+      blockModel: {
+        association: {
+          target: 'transports',
+          targetCollection: {
+            name: 'transports',
+            dataSourceKey: 'main',
+          },
+        },
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.transports',
+        }),
+      },
+    };
+
+    expect(getAssociationTargetResourceSettings(ctx)).toEqual({
+      dataSourceKey: 'main',
+      collectionName: 'transports',
+    });
+  });
+
+  it('shows Associate only in collection actions of association blocks', async () => {
+    const engine = createEngine();
+
+    const relationItems = await CollectionActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+        associationName: 'products.o2m_orders',
+      }),
+    );
+    const normalItems = await CollectionActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+      }),
+    );
+
+    expect(relationItems.map((item: any) => item.useModel)).toContain('AssociateActionModel');
+    expect(relationItems.map((item: any) => item.useModel)).not.toContain('DisassociateActionModel');
+    expect(normalItems.map((item: any) => item.useModel)).not.toContain('AssociateActionModel');
+  });
+
+  it('shows Disassociate only in record actions of association blocks', async () => {
+    const engine = createEngine();
+
+    const relationItems = await RecordActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+        associationName: 'products.o2m_orders',
+      }),
+    );
+    const normalItems = await RecordActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+      }),
+    );
+
+    expect(relationItems.map((item: any) => item.useModel)).toContain('DisassociateActionModel');
+    expect(relationItems.map((item: any) => item.useModel)).not.toContain('AssociateActionModel');
+    expect(normalItems.map((item: any) => item.useModel)).not.toContain('DisassociateActionModel');
+  });
+
+  it('disassociates the current record through association resource remove action', async () => {
+    const resource = {
+      runAction: vi.fn(async () => ({})),
+      refresh: vi.fn(async () => {}),
+    };
+    const collection = {
+      getFilterByTK: vi.fn(() => 12),
+    };
+    const ctx: any = {
+      blockModel: {
+        collection,
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+        }),
+      },
+      record: {
+        id: 12,
+      },
+      message: {
+        success: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyDisassociateAction(ctx);
+
+    expect(collection.getFilterByTK).toHaveBeenCalledWith(ctx.record);
+    expect(resource.runAction).toHaveBeenCalledWith('remove', {
+      data: [12],
+    });
+    expect(resource.refresh).toHaveBeenCalled();
+    expect(ctx.message.success).toHaveBeenCalledWith('Record disassociated successfully');
+  });
+
+  it('associates selected records through association resource add action', async () => {
+    const resource = {
+      runAction: vi.fn(async () => ({})),
+      refresh: vi.fn(async () => {}),
+    };
+    const collection = {
+      getFilterByTK: vi.fn((record) => record.id),
+    };
+    const ctx: any = {
+      blockModel: {
+        collection,
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+        }),
+      },
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyAssociateAction(ctx, [{ id: 11 }, { id: 12 }]);
+
+    expect(collection.getFilterByTK).toHaveBeenCalledWith({ id: 11 });
+    expect(collection.getFilterByTK).toHaveBeenCalledWith({ id: 12 });
+    expect(resource.runAction).toHaveBeenCalledWith('add', {
+      data: [11, 12],
+    });
+    expect(resource.refresh).toHaveBeenCalled();
+    expect(ctx.message.success).toHaveBeenCalledWith('Record associated successfully');
+  });
+
+  it('uses nested association resource url when adding associated records', async () => {
+    const engine = createEngine();
+    const resource = engine.createResource(TestAssociationResource);
+    const api = {
+      request: vi.fn().mockResolvedValue({ data: { data: {} } }),
+    };
+    resource.setAPIClient(api as any);
+    resource.setResourceName('products.o2m_orders');
+    resource.setSourceId('362872646860800');
+
+    const ctx: any = {
+      blockModel: {
+        collection: {
+          getFilterByTK: vi.fn((record) => record.id),
+        },
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+          sourceId: '362872646860800',
+        }),
+      },
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyAssociateAction(ctx, [{ id: 11 }]);
+
+    expect(api.request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        method: 'post',
+        url: 'products/362872646860800/o2m_orders:add',
+        data: [11],
+      }),
+    );
+  });
+});

package/src/flow/models/actions/index.ts

@@ -8,8 +8,11 @@
  */
 
 export * from './AddNewActionModel';
+export * from './AssociateActionModel';
+export * from './AssociationActionUtils';
 export * from './BulkDeleteActionModel';
 export * from './DeleteActionModel';
+export * from './DisassociateActionModel';
 export * from './EditActionModel';
 export * from './FilterActionModel';
 export * from './JSActionModel';

package/src/flow/models/base/GridModel.tsx

@@ -118,6 +118,14 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
   private dragState?: DragState;
   private _memoItemFlowSettings?: Exclude<FlowModelRendererProps['showFlowSettings'], boolean>;
 
+  onInit(options) {
+    super.onInit(options);
+    // 历史数据里可能残留拖拽高亮框，初始化时立即清理，避免刷新页面后常驻显示。
+    if (this.props.dragOverlayRect) {
+      this.setProps('dragOverlayRect', null);
+    }
+  }
+
   private updateDragPointerPosition = (event: Event) => {
     if (!this.dragState) {
       return;
@@ -243,6 +251,12 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     return this.normalizeLayoutFromSource();
   }
 
+  serialize(): Record<string, any> {
+    const data = super.serialize();
+    data.props = _.omit(data.props, ['dragOverlayRect']);
+    return data;
+  }
+
   syncLayoutProps(layout: GridLayoutV2) {
     const projection = projectLayoutToLegacyRows(layout);
     this.setProps('layout', layout);
@@ -801,11 +815,17 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     this.setProps('dragOverlayRect', null);
   }
 
-  handleDragEnd(_event: DragEndEvent) {
+  handleDragEnd(event: DragEndEvent) {
     if (!this.dragState) {
       return;
     }
 
+    const finalPoint = this.computePointerPosition(event);
+    if (finalPoint) {
+      const finalSlot = this.resolveDragSlot(finalPoint);
+      this.applyPreview(finalSlot);
+    }
+
     const previewLayout = this.dragState.previewLayout;
     if (previewLayout) {
       if (previewLayout.layout) {

package/src/flow/models/base/__tests__/GridModel.dragSnapshotContainer.test.ts

@@ -283,4 +283,102 @@ describe('GridModel drag snapshot container', () => {
       type: 'column',
     });
   });
+
+  it('clears persisted drag overlay on init', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-hidden-stale-overlay',
+      props: {
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    expect(model.props.dragOverlayRect).toBeNull();
+  });
+
+  it('omits drag overlay rect from serialized props', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-serialize-overlay',
+      props: {
+        rowGap: 24,
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    const serialized = model.serialize();
+
+    expect(serialized.props).toMatchObject({ rowGap: 24 });
+    expect(serialized.props).not.toHaveProperty('dragOverlayRect');
+  });
+
+  it('recomputes the final slot from drag end position before saving layout', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-final-slot',
+      props: {},
+      structure: {} as any,
+    });
+    const applyPreview = vi.fn((slot) => {
+      (model as any).dragState.previewLayout = slot
+        ? {
+            rows: { 'row-final': [['item-1']] },
+            sizes: { 'row-final': [24] },
+          }
+        : undefined;
+    });
+    const resolveDragSlot = vi.fn(() => ({
+      type: 'row-gap',
+      targetRowId: 'row-final',
+      position: 'below',
+      rect: { top: 200, left: 20, width: 440, height: 32 },
+    }));
+    const saveGridLayout = vi.fn();
+    const syncLayoutProps = vi.fn();
+    const finishDrag = vi.fn();
+
+    (model as any).applyPreview = applyPreview;
+    (model as any).resolveDragSlot = resolveDragSlot;
+    (model as any).saveGridLayout = saveGridLayout;
+    (model as any).syncLayoutProps = syncLayoutProps;
+    (model as any).finishDrag = finishDrag;
+    (model as any).dragState = {
+      sourceUid: 'item-1',
+      snapshot: { rows: {}, sizes: {} },
+      slots: [],
+      containerEl: null,
+      containerRect: { top: 0, left: 0, width: 0, height: 0 },
+      pointerOrigin: { x: 100, y: 100 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+      generatedIds: new Map(),
+    };
+
+    model.handleDragEnd({
+      delta: { x: 30, y: 220 },
+    } as any);
+
+    expect(resolveDragSlot).toHaveBeenCalledWith({ x: 130, y: 320 });
+    expect(applyPreview).toHaveBeenCalledOnce();
+    expect(saveGridLayout).toHaveBeenCalledWith({
+      rows: { 'row-final': [['item-1']] },
+      sizes: { 'row-final': [24] },
+    });
+    expect(finishDrag).toHaveBeenCalledOnce();
+  });
 });

package/src/flow/models/blocks/details/DetailsItemModel.tsx

@@ -379,6 +379,9 @@ DetailsItemModel.registerFlow({
   steps: {
     aclCheckRefresh: {
       use: 'aclCheckRefresh',
+      defaultParams: {
+        strategy: 'formItem',
+      },
     },
   },
 });

package/src/flow/models/blocks/filter-form/FilterFormBlockModel.tsx

@@ -102,15 +102,19 @@ export class FilterFormBlockModel extends FilterBlockModel<{
     // 首次进入页面：等待子模型 beforeRender 完成（例如 name 初始化），再应用表单级默认值并触发筛选
     void this.applyDefaultsAndInitialFilter();
 
-    // 监听页面区块删除，自动清理已失效的筛选字段
+    // 监听页面区块删除，自动清理已失效的筛选字段。
+    // 这里使用 onSubModelDestroyed 而不是 onSubModelRemoved，避免弹窗关闭时
+    // 的临时模型卸载被误判成“用户删除了目标区块”。
     const blockGridModel = this.context.blockGridModel;
     if (blockGridModel?.emitter) {
-      const handleTargetRemoved = (model) => {
+      const handleTargetDestroyed = (model) => {
         if (!model?.uid || model.uid === this.uid) return;
-        this.handleTargetBlockRemoved(model.uid);
+        void this.handleTargetBlockRemoved(model.uid).catch((error) => {
+          console.error('Failed to handle destroyed target block in FilterFormBlockModel:', error);
+        });
       };
-      blockGridModel.emitter.on('onSubModelRemoved', handleTargetRemoved);
-      this.removeTargetBlockListener = () => blockGridModel.emitter.off('onSubModelRemoved', handleTargetRemoved);
+      blockGridModel.emitter.on('onSubModelDestroyed', handleTargetDestroyed);
+      this.removeTargetBlockListener = () => blockGridModel.emitter.off('onSubModelDestroyed', handleTargetDestroyed);
     }
   }
 

package/src/flow/models/blocks/filter-form/__tests__/FilterFormBlockModel.cleanup.test.ts

@@ -0,0 +1,138 @@
+/**
+ * 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 '@nocobase/client';
+import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { waitFor } from '@testing-library/react';
+import { TableBlockModel } from '../../table/TableBlockModel';
+import { FilterFormBlockModel } from '../FilterFormBlockModel';
+import { FilterFormGridModel } from '../FilterFormGridModel';
+import { FilterFormItemModel } from '../FilterFormItemModel';
+
+describe('FilterFormBlockModel cleanup', () => {
+  function createFilterFormSetup() {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      FlowModel,
+      TableBlockModel,
+      FilterFormBlockModel,
+      FilterFormGridModel,
+      FilterFormItemModel,
+    });
+
+    const blockGridModel = engine.createModel<FlowModel>({
+      uid: 'block-grid',
+      use: 'FlowModel',
+      subModels: {
+        items: [],
+      },
+    } as any);
+
+    const tableBlock = blockGridModel.addSubModel('items', {
+      uid: 'target-table',
+      use: 'TableBlockModel',
+    }) as TableBlockModel;
+
+    const filterForm = blockGridModel.addSubModel('items', {
+      uid: 'filter-form',
+      use: 'FilterFormBlockModel',
+      subModels: {
+        grid: {
+          uid: 'filter-grid',
+          use: 'FilterFormGridModel',
+          subModels: {
+            items: [],
+          },
+        },
+      },
+    }) as FilterFormBlockModel;
+
+    const filterItem = filterForm.subModels.grid.addSubModel('items', {
+      uid: 'filter-item',
+      use: 'FilterFormItemModel',
+      stepParams: {
+        filterFormItemSettings: {
+          init: {
+            defaultTargetUid: tableBlock.uid,
+          },
+        },
+      },
+    }) as FilterFormItemModel;
+
+    const removeFilterConfig = vi.fn(async () => {});
+    const saveConnectFieldsConfig = vi.fn(async () => {});
+    const getConnectFieldsConfig = vi.fn(() => ({
+      targets: [
+        {
+          targetId: tableBlock.uid,
+          filterPaths: ['name'],
+        },
+      ],
+    }));
+
+    filterForm.context.defineProperty('blockGridModel', { value: blockGridModel });
+    filterForm.context.defineProperty('filterManager', {
+      value: {
+        removeFilterConfig,
+        saveConnectFieldsConfig,
+        getConnectFieldsConfig,
+      },
+    });
+    filterForm.subModels.grid.context.defineProperty('filterManager', {
+      value: {
+        removeFilterConfig,
+        saveConnectFieldsConfig,
+        getConnectFieldsConfig,
+      },
+    });
+
+    const destroySpy = vi.spyOn(filterItem, 'destroy').mockResolvedValue(true as any);
+    vi.spyOn(filterForm as any, 'applyDefaultsAndInitialFilter').mockResolvedValue(undefined);
+
+    (filterForm as any).onMount();
+
+    return {
+      engine,
+      blockGridModel,
+      tableBlock,
+      filterForm,
+      filterItem,
+      removeFilterConfig,
+      saveConnectFieldsConfig,
+      getConnectFieldsConfig,
+      destroySpy,
+    };
+  }
+
+  it('does not remove filter items when target block is only removed during popup teardown', async () => {
+    const { engine, blockGridModel, tableBlock, filterForm, removeFilterConfig, destroySpy } = createFilterFormSetup();
+
+    await Promise.resolve(engine.removeModelWithSubModels(blockGridModel.uid));
+
+    expect(removeFilterConfig).not.toHaveBeenCalled();
+    expect(destroySpy).not.toHaveBeenCalled();
+
+    (filterForm as any).onUnmount();
+    expect(engine.getModel(tableBlock.uid)).toBeUndefined();
+  });
+
+  it('removes filter items when target block is actually destroyed', async () => {
+    const { tableBlock, filterForm, removeFilterConfig, destroySpy } = createFilterFormSetup();
+
+    await tableBlock.destroy();
+
+    await waitFor(() => {
+      expect(removeFilterConfig).toHaveBeenCalledWith({ filterId: 'filter-item' });
+      expect(destroySpy).toHaveBeenCalledTimes(1);
+    });
+
+    (filterForm as any).onUnmount();
+  });
+});

package/src/flow/models/blocks/form/__tests__/FormBlockModel.test.tsx

@@ -85,6 +85,7 @@ async function setupFormModel() {
       { name: 'assignees', type: 'belongsToMany', target: 'users', interface: 'm2m' },
       { name: 'note', type: 'string', interface: 'text' },
       { name: 'status', type: 'string', interface: 'text' },
+      { name: 'rawPayload', type: 'json', filterable: true },
     ],
   });
 
@@ -283,6 +284,27 @@ describe('FormBlockModel (form/formValues injection & server resolve anchors)',
     expect(params.note).toBeUndefined();
   });
 
+  it('keeps interfaced fields in formValues meta even when they are not configured in the form grid', async () => {
+    const model = await setupFormModel();
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+    mockFormGridEnabledFields(model, ['customer', 'note']);
+
+    const opt = (model.context as any).getPropertyOptions('formValues');
+    const meta = await opt.meta();
+    const props = await meta.properties();
+
+    expect(props).toHaveProperty('customer');
+    expect(props).toHaveProperty('note');
+    expect(props).toHaveProperty('status');
+    expect(props).toHaveProperty('assignees');
+    expect(props).not.toHaveProperty('rawPayload');
+  });
+
   it('registers formValuesChange event and eventSettings flow', async () => {
     const engine = new FlowEngine();
     const TestFormModel = await createTestFormModelSubclass();

package/src/flow/models/blocks/table/JSColumnModel.tsx

@@ -30,6 +30,27 @@ import { TableCustomColumnModel } from './TableCustomColumnModel';
 import { CodeEditor } from '../../../components/code-editor';
 import { resolveRunJsParams } from '../../utils/resolveRunJsParams';
 
+function getRecordRenderSignature(record: any) {
+  if (!record || typeof record !== 'object') {
+    return String(record);
+  }
+
+  try {
+    const seen = new WeakSet();
+    return JSON.stringify(record, (_key, value) => {
+      if (value && typeof value === 'object') {
+        if (seen.has(value)) {
+          return '[Circular]';
+        }
+        seen.add(value);
+      }
+      return value;
+    });
+  } catch (error) {
+    return String(record);
+  }
+}
+
 export class JSColumnModel extends TableCustomColumnModel {
   // Stable per‑instance render component to avoid remounts across re-renders
   private _RenderComponent?: React.ComponentType;
@@ -113,7 +134,13 @@ export class JSColumnModel extends TableCustomColumnModel {
         // 使用记录主键作为 fork key，避免分页后 index 复用导致 fork 复用
         const tk = this.context.collection?.getFilterByTK?.(record);
         const forkKey = tk ?? record?.id ?? index;
+        const recordSignature = getRecordRenderSignature(record);
         const fork = this.createFork({}, String(forkKey));
+        const previousRecordSignature = (fork as any).__recordRenderSignature;
+        if (previousRecordSignature !== recordSignature) {
+          (fork as any).__recordRenderSignature = recordSignature;
+          fork.invalidateFlowCache('beforeRender');
+        }
         const recordMeta: PropertyMetaFactory = createRecordMetaFactory(
           () => fork.context.collection,
           fork.context.t('Current record'),
@@ -137,7 +164,7 @@ export class JSColumnModel extends TableCustomColumnModel {
         fork.context.defineProperty('recordIndex', {
           get: () => index,
         });
-        return <MemoFlowModelRenderer key={fork.uid} model={fork} />;
+        return <MemoFlowModelRenderer key={`${fork.uid}:${recordSignature}`} model={fork} />;
       },
     };
   }
@@ -264,7 +291,8 @@ JSColumnModel.registerFlow({
 
         ctx.onRefReady(ctx.ref, async (element) => {
           ctx.defineProperty('element', {
-            get: () => new ElementProxy(element),
+            get: () => new ElementProxy((ctx.ref?.current as HTMLElement | null) || element),
+            cache: false,
           });
           const navigator = createSafeNavigator();
           await ctx.runjs(