@nocobase/client-v2 2.1.0-alpha.26 → 2.1.0-alpha.27

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

@@ -8,13 +8,22 @@
  */
 
 import { SettingOutlined } from '@ant-design/icons';
-import { AddSubModelButton, DragOverlayConfig, FlowSettingsButton, observable } from '@nocobase/flow-engine';
+import {
+  AddSubModelButton,
+  DragOverlayConfig,
+  FlowSettingsButton,
+  GridLayoutV2,
+  normalizeGridLayout,
+  observable,
+  projectLayoutToLegacyRows,
+} from '@nocobase/flow-engine';
 import React from 'react';
 import { CollectionBlockModel, GRID_FLOW_KEY, GRID_STEP, GridModel } from '../../base';
 import { getAllDataModels } from '../filter-manager/utils';
 import { FilterFormItemModel } from './FilterFormItemModel';
 
 export class FilterFormGridModel extends GridModel {
+  private fullLayoutBeforeCollapse?: GridLayoutV2;
   itemSettingsMenuLevel = 2;
   itemFlowSettings = {
     showBackground: true,
@@ -28,8 +37,8 @@ export class FilterFormGridModel extends GridModel {
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
-      before: { offsetTop: -12, height: 24 },
-      after: { offsetTop: 7, height: 24 },
+      before: { offsetTop: -6, height: 24 },
+      after: { offsetTop: 3, height: 24 },
     },
     // 列边缘
     columnEdge: {
@@ -38,8 +47,8 @@ export class FilterFormGridModel extends GridModel {
     },
     // 行间隙
     rowGap: {
-      above: { offsetTop: 0, height: 24 },
-      below: { offsetTop: -14, height: 24 },
+      above: { offsetTop: -2, height: 24 },
+      below: { offsetTop: -12, height: 24 },
     },
   };
 
@@ -62,8 +71,16 @@ export class FilterFormGridModel extends GridModel {
    */
   private getFullLayout() {
     const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
-    const rawCurrentRows = (this.props.rows || {}) as Record<string, string[][]>;
-    const rawSavedRows = (params.rows || {}) as Record<string, string[][]>;
+    const currentLayout = this.props.layout ? this.getGridLayout() : undefined;
+    const savedLayout = params.layout ? this.normalizeLayoutFromSource(params) : undefined;
+    const currentProjection = currentLayout
+      ? projectLayoutToLegacyRows(currentLayout)
+      : { rows: this.props.rows || {}, rowOrder: this.props.rowOrder };
+    const savedProjection = savedLayout
+      ? projectLayoutToLegacyRows(savedLayout)
+      : { rows: params.rows || {}, rowOrder: params.rowOrder };
+    const rawCurrentRows = currentProjection.rows as Record<string, string[][]>;
+    const rawSavedRows = (savedProjection.rows || {}) as Record<string, string[][]>;
     const currentCount = Object.keys(rawCurrentRows).length;
     const savedCount = Object.keys(rawSavedRows).length;
     const getItemCount = (rows: Record<string, string[][]>) =>
@@ -77,10 +94,13 @@ export class FilterFormGridModel extends GridModel {
       currentCount > savedCount || (currentCount === savedCount && currentItemCount >= savedItemCount);
     const sourceRows = this.mergeRowsWithItems(useCurrentLayout ? rawCurrentRows : rawSavedRows);
     const sourceRowOrder = useCurrentLayout
-      ? this.props.rowOrder || params.rowOrder
-      : params.rowOrder || this.props.rowOrder;
+      ? currentProjection.rowOrder || this.props.rowOrder || params.rowOrder
+      : savedProjection.rowOrder || params.rowOrder || this.props.rowOrder;
 
-    return this.normalizeRowsWithOrder(sourceRows, sourceRowOrder);
+    return {
+      ...this.normalizeRowsWithOrder(sourceRows, sourceRowOrder),
+      layout: useCurrentLayout ? currentLayout : savedLayout,
+    };
   }
 
   /**
@@ -115,17 +135,37 @@ export class FilterFormGridModel extends GridModel {
   }
 
   toggleFormFieldsCollapse(collapse: boolean, visibleRows: number) {
-    const { rows: fullRows, rowOrder } = this.getFullLayout();
+    const { rows: fullRows, rowOrder, layout } = this.getFullLayout();
 
     if (!collapse) {
-      this.setProps('rows', fullRows);
-      this.setProps('rowOrder', rowOrder);
+      const restoredLayout = this.fullLayoutBeforeCollapse || layout;
+      if (restoredLayout) {
+        this.syncLayoutProps(restoredLayout);
+      } else {
+        this.setProps('rows', fullRows);
+        this.setProps('rowOrder', rowOrder);
+      }
+      this.fullLayoutBeforeCollapse = undefined;
       return;
     }
 
+    if (!this.fullLayoutBeforeCollapse) {
+      this.fullLayoutBeforeCollapse =
+        layout ||
+        normalizeGridLayout({
+          rows: fullRows,
+          rowOrder,
+          itemUids: this.getItemUids(),
+        });
+    }
+
     const limitedRows = this.limitRowsByVisibleCount(fullRows, rowOrder, visibleRows);
+    const limitedLayout = normalizeGridLayout({
+      rows: limitedRows,
+      rowOrder,
+    });
 
-    this.setProps('rows', limitedRows);
+    this.syncLayoutProps(limitedLayout);
     this.setProps('rowOrder', rowOrder);
   }
 

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/filter-form/__tests__/FilterFormGridModel.toggleFormFieldsCollapse.test.ts

@@ -102,6 +102,51 @@ describe('FilterFormGridModel.toggleFormFieldsCollapse', () => {
     expect(model.props.rowOrder).toEqual(['first']);
   });
 
+  it('updates render layout when collapsing a v2 layout', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-v2',
+      use: 'FilterFormGridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'first',
+              cells: [{ id: 'first-cell', items: ['field-1', 'field-2', 'field-3'] }],
+              sizes: [24],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = {
+      items: [
+        engine.createModel({ use: 'FlowModel', uid: 'field-1' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-2' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-3' }),
+      ],
+    };
+
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, {
+      layout: model.props.layout,
+    });
+
+    model.toggleFormFieldsCollapse(true, 1);
+
+    expect(model.props.rows).toEqual({
+      first: [['field-1']],
+    });
+    expect(model.props.layout.rows[0].cells[0].items).toEqual(['field-1']);
+
+    model.toggleFormFieldsCollapse(false, 1);
+
+    expect(model.props.rows).toEqual({
+      first: [['field-1', 'field-2', 'field-3']],
+    });
+    expect(model.props.layout.rows[0].cells[0].items).toEqual(['field-1', 'field-2', 'field-3']);
+  });
+
   it('restores the persisted full layout when current props rows were already truncated', () => {
     const model = engine.createModel<FilterFormGridModel>({
       uid: 'filter-grid-collapse-restore',

package/src/flow/models/blocks/form/FormGridModel.tsx

@@ -8,12 +8,12 @@
  */
 
 import { SettingOutlined } from '@ant-design/icons';
-import { AddSubModelButton, FlowSettingsButton, DragOverlayConfig } from '@nocobase/flow-engine';
+import { AddSubModelButton, DragOverlayConfig, FlowSettingsButton } from '@nocobase/flow-engine';
+import { Skeleton } from 'antd';
 import React from 'react';
 import { FieldModel } from '../../base/FieldModel';
 import { GridModel } from '../../base/GridModel';
 import { FormBlockModel } from './FormBlockModel';
-import { Skeleton } from 'antd';
 
 export type DefaultFormGridStructure = {
   parent: FormBlockModel;
@@ -35,8 +35,8 @@ export class FormGridModel<T extends DefaultFormGridStructure = DefaultFormGridS
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
-      before: { offsetTop: -12, height: 24 },
-      after: { offsetTop: 7, height: 24 },
+      before: { offsetTop: -6, height: 24 },
+      after: { offsetTop: 3, height: 24 },
     },
     // 列边缘
     columnEdge: {
@@ -45,8 +45,8 @@ export class FormGridModel<T extends DefaultFormGridStructure = DefaultFormGridS
     },
     // 行间隙
     rowGap: {
-      above: { offsetTop: 0, height: 24 },
-      below: { offsetTop: -14, height: 24 },
+      above: { offsetTop: -2, height: 24 },
+      below: { offsetTop: -12, height: 24 },
     },
   };
   renderAddSubModelButton() {

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(

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

@@ -314,7 +314,14 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
                   onSuccess: (values) => {
                     const collectionField = this.collection.getField(dataIndex);
                     record[dataIndex] = values[dataIndex];
-                    setNestedValue(this.resource.getData(), recordIndex, record);
+                    if (typeof recordIndex === 'number') {
+                      this.resource.setItem(recordIndex, record);
+                    } else {
+                      const nextData = _.cloneDeep(this.resource.getData());
+                      setNestedValue(nextData, recordIndex, record);
+                      this.resource.setData(nextData);
+                    }
+                    this.resource.emit('refresh');
                     // 仅重渲染单元格
                     const fork: ForkFlowModel = model.subModels.field.createFork({}, `${recordIndex}`);
                     // Provide expandable meta for current row record based on the collection in context

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

@@ -313,6 +313,7 @@ export class TableColumnModel extends DisplayItemModel {
             ? this.fieldPath.replace(`${this.context.prefixFieldPath}.`, '')
             : this.fieldPath;
           const value = get(record, namePath);
+          fork.setProps({ value });
           return (
             <FormItem key={field.uid} {...omit(this.props, 'title')} value={value} noStyle={true}>
               <FieldModelRenderer model={fork} />

package/src/flow/models/blocks/table/__tests__/JSColumnModel.test.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 { FlowEngine } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+import { JSColumnModel } from '../JSColumnModel';
+
+describe('JSColumnModel row refresh', () => {
+  it('changes renderer key and invalidates beforeRender cache when row content changes', () => {
+    const engine = new FlowEngine();
+    const model = new JSColumnModel({
+      uid: 'js-column-row-refresh',
+      flowEngine: engine,
+      props: {
+        width: 200,
+        title: 'JS column',
+      },
+    } as any);
+
+    engine.context.dataSourceManager.getDataSource('main').addCollection({
+      name: 'users',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number' },
+        { name: 'age', type: 'integer', interface: 'integer' },
+        { name: 'workyears', type: 'float', interface: 'number' },
+      ],
+    });
+
+    const collection = engine.context.dataSourceManager.getCollection('main', 'users');
+    model.context.defineProperty('collection', {
+      value: collection,
+    });
+
+    const column = model.getColumnProps();
+    const first = column.render(null, { id: 1, age: 3, workyears: 39.2 }, 0) as any;
+    const fork = model.getFork('1') as any;
+    const invalidateFlowCache = vi.fn();
+    fork.invalidateFlowCache = invalidateFlowCache;
+    const second = column.render(null, { id: 1, age: 37, workyears: 39.2 }, 0) as any;
+
+    expect(first.key).not.toBe(second.key);
+    expect(invalidateFlowCache).toHaveBeenCalledWith('beforeRender');
+  });
+});

package/src/flow/models/blocks/table/__tests__/TableBlockModel.quickEditRefresh.test.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { FlowEngine, MultiRecordResource } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+
+describe('TableBlockModel quick edit refresh', () => {
+  it('updates table data through a new array reference after quick editing a flat row', () => {
+    const engine = new FlowEngine();
+    const resource = engine.context.createResource(MultiRecordResource);
+    const original = [
+      { id: 1, title: 'old title', status: 'draft' },
+      { id: 2, title: 'other title', status: 'published' },
+    ];
+
+    resource.setData(original);
+    const before = resource.getData();
+    const editedRecord = { ...before[0], title: 'new title' };
+
+    resource.setItem(0, editedRecord);
+
+    expect(resource.getData()).not.toBe(before);
+    expect(resource.getData()[0]).toEqual(editedRecord);
+    expect(resource.getData()[1]).toEqual(original[1]);
+  });
+
+  it('notifies mounted JS fields after quick editing local table data', () => {
+    const engine = new FlowEngine();
+    const resource = engine.context.createResource(MultiRecordResource);
+    const original = [{ id: 1, title: 'old title', status: 'draft' }];
+    let refreshCount = 0;
+    resource.on('refresh', () => {
+      refreshCount += 1;
+    });
+
+    resource.setData(original);
+    const editedRecord = { ...resource.getData()[0], title: 'new title' };
+    resource.setItem(0, editedRecord);
+    resource.emit('refresh');
+
+    expect(refreshCount).toBe(1);
+  });
+});