@nocobase/client-v2 2.1.0-alpha.30 → 2.1.0-alpha.31

package/src/flow/models/blocks/filter-form/__tests__/FilterFormGridModel.toggleFormFieldsCollapse.test.ts

@@ -8,7 +8,7 @@
  */
 
 import { beforeEach, describe, expect, it } from 'vitest';
-import { FlowEngine } from '@nocobase/flow-engine';
+import { FlowEngine, projectLayoutToLegacyRows } from '@nocobase/flow-engine';
 import '../../../../index';
 import { GRID_FLOW_KEY, GRID_STEP } from '../../../base';
 import { FilterFormGridModel } from '../FilterFormGridModel';
@@ -147,6 +147,71 @@ describe('FilterFormGridModel.toggleFormFieldsCollapse', () => {
     expect(model.props.layout.rows[0].cells[0].items).toEqual(['field-1', 'field-2', 'field-3']);
   });
 
+  it('keeps nested columns inside the first visible row when collapsing a v2 layout', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-nested-v2',
+      use: 'FilterFormGridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'first',
+              cells: [
+                {
+                  id: 'first-cell',
+                  rows: [
+                    {
+                      id: 'first-nested-row',
+                      cells: [
+                        { id: 'first-nested-cell-1', items: ['field-1'] },
+                        { id: 'first-nested-cell-2', items: ['field-2'] },
+                      ],
+                      sizes: [12, 12],
+                    },
+                  ],
+                },
+              ],
+              sizes: [24],
+            },
+            {
+              id: 'second',
+              cells: [{ id: 'second-cell', items: ['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);
+
+    const collapsedNestedRow = model.props.layout.rows[0].cells[0].rows?.[0];
+    expect(collapsedNestedRow?.cells.map((cell) => cell.items)).toEqual([['field-1'], ['field-2']]);
+    expect(collapsedNestedRow?.sizes).toEqual([12, 12]);
+    expect(model.props.layout.rows).toHaveLength(1);
+
+    model.toggleFormFieldsCollapse(false, 1);
+
+    expect(model.props.layout.rows).toHaveLength(2);
+    expect(model.props.layout.rows[0].cells[0].rows?.[0].cells.map((cell) => cell.items)).toEqual([
+      ['field-1'],
+      ['field-2'],
+    ]);
+  });
+
   it('restores the persisted full layout when current props rows were already truncated', () => {
     const model = engine.createModel<FilterFormGridModel>({
       uid: 'filter-grid-collapse-restore',
@@ -185,4 +250,208 @@ describe('FilterFormGridModel.toggleFormFieldsCollapse', () => {
     });
     expect(model.props.rowOrder).toEqual(['first', 'second', 'third']);
   });
+
+  it('does not reinsert collapsed items when the render layout is normalized again', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-visible-item-uids',
+      use: 'FilterFormGridModel',
+      props: {
+        rows: {
+          first: [['field-1']],
+          second: [['field-2']],
+          third: [['field-3']],
+        },
+        rowOrder: ['first', 'second', 'third'],
+      },
+      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, {
+      rows: {
+        first: [['field-1']],
+        second: [['field-2']],
+        third: [['field-3']],
+      },
+      rowOrder: ['first', 'second', 'third'],
+    });
+
+    model.toggleFormFieldsCollapse(true, 1);
+
+    expect(projectLayoutToLegacyRows(model.getGridLayout()).rows).toEqual({
+      first: [['field-1']],
+    });
+
+    model.toggleFormFieldsCollapse(false, 1);
+
+    expect(projectLayoutToLegacyRows(model.getGridLayout()).rows).toEqual({
+      first: [['field-1']],
+      second: [['field-2']],
+      third: [['field-3']],
+    });
+  });
+
+  it('keeps the persisted layout intact when resetRows runs during collapsed mode', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-reset-rows',
+      use: 'FilterFormGridModel',
+      props: {
+        rows: {
+          first: [['field-1']],
+          second: [['field-2']],
+          third: [['field-3']],
+        },
+        rowOrder: ['first', 'second', 'third'],
+      },
+      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, {
+      rows: {
+        first: [['field-1']],
+        second: [['field-2']],
+        third: [['field-3']],
+      },
+      rowOrder: ['first', 'second', 'third'],
+    });
+
+    model.toggleFormFieldsCollapse(true, 1);
+    model.resetRows(true);
+
+    const persistedLayout = model.getStepParams(GRID_FLOW_KEY, GRID_STEP).layout;
+    const persistedRows = projectLayoutToLegacyRows(persistedLayout).rows;
+    const persistedItems = Object.values(persistedRows).flat().flat().sort();
+    expect(persistedItems).toEqual(['field-1', 'field-2', 'field-3']);
+    expect(projectLayoutToLegacyRows(model.getGridLayout()).rows).toEqual({
+      first: [['field-1']],
+    });
+  });
+
+  it('uses the full layout for flow-settings layout reads during collapsed mode', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-settings-full-layout',
+      use: 'FilterFormGridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'first',
+              cells: [{ id: 'first-cell', items: ['field-1'] }],
+              sizes: [24],
+            },
+            {
+              id: 'second',
+              cells: [
+                { id: 'second-cell-1', items: ['field-2'] },
+                { id: 'second-cell-2', items: ['field-3'] },
+              ],
+              sizes: [12, 12],
+            },
+          ],
+        },
+      },
+      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.context as any).flowSettingsEnabled = true;
+
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, {
+      layout: model.props.layout,
+    });
+
+    model.toggleFormFieldsCollapse(true, 1);
+
+    expect(projectLayoutToLegacyRows((model as any).normalizeLayoutFromSource()).rows).toEqual({
+      first: [['field-1']],
+    });
+    expect(projectLayoutToLegacyRows(model.getGridLayout()).rows).toEqual({
+      first: [['field-1']],
+      second: [['field-2'], ['field-3']],
+    });
+
+    model.saveGridLayout(model.getGridLayout());
+
+    expect(projectLayoutToLegacyRows(model.getStepParams(GRID_FLOW_KEY, GRID_STEP).layout).rows).toEqual({
+      first: [['field-1']],
+      second: [['field-2'], ['field-3']],
+    });
+  });
+
+  it('restores the latest saved full layout after editing while collapsed in flow settings', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-settings-latest-layout',
+      use: 'FilterFormGridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'first',
+              cells: [{ id: 'first-cell', items: ['field-1'] }],
+              sizes: [24],
+            },
+            {
+              id: 'second',
+              cells: [{ id: 'second-cell', items: ['field-2'] }],
+              sizes: [24],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = {
+      items: [
+        engine.createModel({ use: 'FlowModel', uid: 'field-1' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-2' }),
+      ],
+    };
+    (model.context as any).flowSettingsEnabled = true;
+
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, {
+      layout: model.props.layout,
+    });
+    model.toggleFormFieldsCollapse(true, 1);
+
+    const editedLayout = {
+      version: 2 as const,
+      rows: [
+        {
+          id: 'first',
+          cells: [
+            { id: 'first-cell-1', items: ['field-1'] },
+            { id: 'first-cell-2', items: ['field-2'] },
+          ],
+          sizes: [12, 12],
+        },
+      ],
+    };
+
+    model.saveGridLayout(editedLayout);
+    model.toggleFormFieldsCollapse(false, 1);
+
+    expect(projectLayoutToLegacyRows(model.props.layout).rows).toEqual({
+      first: [['field-1'], ['field-2']],
+    });
+  });
 });

package/src/flow/models/blocks/filter-form/__tests__/customFieldOperators.test.tsx

@@ -37,6 +37,8 @@ function createEngineWithCollections() {
     fields: [
       { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
       { name: 'uid', type: 'string', interface: 'input', filterable: { operators: [] } },
+      { name: 'status', type: 'string', interface: 'select', filterable: { operators: [] } },
+      { name: 'tags', type: 'array', interface: 'multipleSelect', filterable: { operators: [] } },
       { name: 'createdAt', type: 'date', interface: 'datetime', filterable: { operators: [] } },
       {
         name: 'pluginInSource',
@@ -106,6 +108,27 @@ describe('custom field operators', () => {
     expect(checkboxGroupOps.some((item) => item.value === '$match')).toBe(true);
   });
 
+  it('uses multi-value scalar operators for multiple select custom fields bound to scalar source fields', () => {
+    const engine = createEngineWithCollections();
+
+    const scalarSourceOps = resolveCustomFieldOperatorList({
+      flowEngine: engine,
+      fieldModel: 'SelectFieldModel',
+      fieldModelProps: { mode: 'multiple' },
+      source: ['main', 'users', 'status'],
+    });
+    expect(scalarSourceOps[0]?.value).toBe('$in');
+    expect(scalarSourceOps.some((item) => item.value === '$match')).toBe(false);
+
+    const arraySourceOps = resolveCustomFieldOperatorList({
+      flowEngine: engine,
+      fieldModel: 'SelectFieldModel',
+      fieldModelProps: { mode: 'multiple' },
+      source: ['main', 'users', 'tags'],
+    });
+    expect(arraySourceOps[0]?.value).toBe('$match');
+  });
+
   it('resolves record select operators by value field and multiple mode', () => {
     const engine = createEngineWithCollections();
 

package/src/flow/models/blocks/filter-form/customFieldOperators.ts

@@ -8,6 +8,7 @@
  */
 
 import { operators } from '../../../../flow-compat';
+import { isArrayLikeField } from '../shared/filterOperators';
 
 type OperatorMeta = {
   label: string;
@@ -186,12 +187,22 @@ function resolveByModelOrSource(params: ResolveOperatorParams): { operatorList:
     return resolveByRecordSelect(params);
   }
 
+  const sourceField = getSourceField(flowEngine, source);
+  if (fieldModel === 'SelectFieldModel' && fieldModelProps?.mode === 'multiple' && sourceField) {
+    const sourceOperators = getFieldOperators(sourceField);
+    return {
+      operatorList: isArrayLikeField(sourceField)
+        ? getOperatorListByModel(fieldModel, fieldModelProps)
+        : toMultiValueOperators(sourceOperators),
+      meta: sourceField,
+    };
+  }
+
   const modelOperators = getOperatorListByModel(fieldModel, fieldModelProps);
   if (modelOperators.length > 0) {
     return { operatorList: modelOperators, meta: { fieldModel } };
   }
 
-  const sourceField = getSourceField(flowEngine, source);
   return {
     operatorList: getFieldOperators(sourceField),
     meta: sourceField,

package/src/flow/models/blocks/filter-form/fields/FieldComponentProps.tsx

@@ -14,7 +14,11 @@ import { Input, Radio, Checkbox, Space, Button, Select } from 'antd';
 import { PlusOutlined, CloseOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { FilterableItemModel, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
-import { isTitleField } from '../../../../../flow-compat';
+import {
+  getFlowFieldInterfaceOptions,
+  hasFlowFieldInterfaceLookup,
+  isTitleFieldInterface,
+} from '../../../../../flow-compat';
 
 const RECORD_SELECT_DATA_SOURCE_KEY = 'recordSelectDataSourceKey';
 const RECORD_SELECT_COLLECTION_KEY = 'recordSelectTargetCollection';
@@ -36,7 +40,12 @@ export const FieldComponentProps: React.FC<{ fieldModel: string; source: string[
   const resolvedFieldModel = fieldModel || propsValue?.fieldModel;
   const flowEngine = useFlowEngine();
   const ctx = useFlowContext();
-  const appDataSourceManager = ctx?.app?.dataSourceManager;
+  const dataSourceManager = ctx?.dataSourceManager || flowEngine?.dataSourceManager || ctx?.app?.dataSourceManager;
+  const hasFieldInterfaceLookup = hasFlowFieldInterfaceLookup(dataSourceManager);
+  const getFieldInterface = useCallback(
+    (interfaceName: string | undefined) => getFlowFieldInterfaceOptions(interfaceName, dataSourceManager),
+    [dataSourceManager],
+  );
 
   const getCurrentValue = () => field.value || {};
   const updateProps = (key: string, value: any) => {
@@ -165,15 +174,20 @@ export const FieldComponentProps: React.FC<{ fieldModel: string; source: string[
   }, [activeDataSource, translateLabel]);
   const titleFieldOptions = useMemo(() => {
     if (!activeCollection?.getFields) return [];
-    const shouldKeep = (fieldItem: any) =>
-      appDataSourceManager ? isTitleField(appDataSourceManager, fieldItem.options) : true;
+    const shouldKeep = (fieldItem: any) => {
+      if (!hasFieldInterfaceLookup) {
+        return true;
+      }
+      const fieldOptions = fieldItem?.options || fieldItem;
+      return isTitleFieldInterface(getFieldInterface(fieldOptions?.interface));
+    };
     return (activeCollection.getFields() || [])
       .filter((fieldItem: any) => shouldKeep(fieldItem))
       .map((fieldItem: any) => ({
         label: translateLabel(fieldItem.options?.uiSchema?.title) || translateLabel(fieldItem.title) || fieldItem.name,
         value: fieldItem.name,
       }));
-  }, [activeCollection, appDataSourceManager, translateLabel]);
+  }, [activeCollection, getFieldInterface, hasFieldInterfaceLookup, translateLabel]);
   const valueFieldOptions = useMemo(() => {
     if (!activeCollection?.getFields) return [];
     const shouldKeep = (fieldItem: any) => {
@@ -182,8 +196,8 @@ export const FieldComponentProps: React.FC<{ fieldModel: string; source: string[
       if (fieldOptions.filterable === false || !interfaceName) {
         return false;
       }
-      if (appDataSourceManager) {
-        const fieldInterface = appDataSourceManager.collectionFieldInterfaceManager?.getFieldInterface?.(interfaceName);
+      if (hasFieldInterfaceLookup) {
+        const fieldInterface = getFieldInterface(interfaceName);
         if (!fieldInterface?.filterable) {
           return false;
         }
@@ -197,7 +211,7 @@ export const FieldComponentProps: React.FC<{ fieldModel: string; source: string[
         label: translateLabel(fieldItem.options?.uiSchema?.title) || translateLabel(fieldItem.title) || fieldItem.name,
         value: fieldItem.name,
       }));
-  }, [activeCollection, appDataSourceManager, translateLabel]);
+  }, [activeCollection, getFieldInterface, hasFieldInterfaceLookup, translateLabel]);
 
   useEffect(() => {
     if (resolvedFieldModel !== 'FilterFormCustomRecordSelectFieldModel') return;

package/src/flow/models/blocks/filter-form/fields/__tests__/FilterFormCustomFieldModel.recordSelect.test.tsx

@@ -222,6 +222,17 @@ describe('FilterForm custom field record select', () => {
   it('hides association fields from value field options', async () => {
     const engine = new FlowEngine();
     engine.registerModels({ HostModel, FilterFormCustomRecordSelectFieldModel });
+    engine.dataSourceManager.setCollectionFieldInterfaceManager({
+      getFieldInterface: vi.fn((name: string) => {
+        if (['input', 'number'].includes(name)) {
+          return { titleUsable: true, filterable: { operators: [] } };
+        }
+        if (name === 'm2m') {
+          return { filterable: { operators: [] } };
+        }
+        return undefined;
+      }),
+    });
 
     const ds = engine.dataSourceManager.getDataSource('main');
     ds?.addCollection({
@@ -242,6 +253,12 @@ describe('FilterForm custom field record select', () => {
           title: 'Hidden text',
           filterable: false,
         },
+        {
+          name: 'jsonPayload',
+          type: 'json',
+          interface: 'json',
+          title: 'JSON payload',
+        },
         {
           name: 'roles',
           type: 'belongsToMany',
@@ -298,6 +315,7 @@ describe('FilterForm custom field record select', () => {
       );
       expect(optionTexts).toContain('nickname');
       expect(optionTexts).not.toContain('Hidden text');
+      expect(optionTexts).not.toContain('JSON payload');
       expect(optionTexts).not.toContain('Roles relation');
     });
   });

package/src/flow/models/blocks/filter-manager/FilterManager.ts

@@ -10,6 +10,7 @@
 import { FilterGroup, FilterItem, FlowModel } from '@nocobase/flow-engine';
 import _ from 'lodash';
 import { CollectionBlockModel } from '../../base/CollectionBlockModel';
+import { isArrayLikeField } from '../shared/filterOperators';
 import { getDefaultOperator, isFilterValueEmpty } from './utils';
 
 type FilterConfig = {
@@ -23,6 +24,13 @@ type FilterConfig = {
   operator?: string;
 };
 
+const ARRAY_FIELD_OPERATORS_TO_SCALAR_OPERATORS: Record<string, string> = {
+  $match: '$in',
+  $anyOf: '$in',
+  $notMatch: '$notIn',
+  $noneOf: '$notIn',
+};
+
 export type ConnectFieldsConfig = {
   targets: {
     /** 数据区块或者图表区块的 model uid */
@@ -32,6 +40,44 @@ export type ConnectFieldsConfig = {
   }[];
 };
 
+function getTargetField(targetModel: any, fieldPath: string) {
+  const dataSourceManager = targetModel?.context?.dataSourceManager;
+  const collection = targetModel?.collection;
+  if (!dataSourceManager || !collection?.dataSourceKey || !collection?.name || !fieldPath) {
+    return;
+  }
+
+  let collectionName = collection.name;
+  const fieldNames = fieldPath.split('.').filter(Boolean);
+  for (let index = 0; index < fieldNames.length; index += 1) {
+    const field = dataSourceManager.getCollectionField?.(
+      `${collection.dataSourceKey}.${collectionName}.${fieldNames[index]}`,
+    );
+    if (!field || index === fieldNames.length - 1) {
+      return field;
+    }
+
+    collectionName = field.target || field.targetCollection?.name;
+    if (!collectionName) {
+      return;
+    }
+  }
+}
+
+function normalizeOperatorForTargetField(operator: string, targetModel: any, fieldPath: string) {
+  const scalarOperator = ARRAY_FIELD_OPERATORS_TO_SCALAR_OPERATORS[operator];
+  if (!scalarOperator) {
+    return operator;
+  }
+
+  const targetField = getTargetField(targetModel, fieldPath);
+  if (!targetField || isArrayLikeField(targetField)) {
+    return operator;
+  }
+
+  return scalarOperator;
+}
+
 export class FilterManager {
   private filterConfigs: FilterConfig[];
   private readonly gridModel: FlowModel;
@@ -300,7 +346,11 @@ export class FilterManager {
       // 构建筛选条件
       const filterConditions = config.filterPaths.map((fieldPath) => ({
         path: fieldPath,
-        operator: config.operator || getDefaultOperator(filterModel),
+        operator: normalizeOperatorForTargetField(
+          config.operator || getDefaultOperator(filterModel),
+          targetModel,
+          fieldPath,
+        ),
         value: filterValue,
       }));
 

package/src/flow/models/blocks/filter-manager/__tests__/FilterManager.test.ts

@@ -496,6 +496,81 @@ describe('FilterManager', () => {
       expect(mockTargetModel2.resource.refresh).toHaveBeenCalledTimes(1);
     });
 
+    it('should normalize array operators when the target field is scalar', async () => {
+      const filterConfigs = [
+        {
+          filterId: 'filter-1',
+          targetId: 'target-scalar',
+          filterPaths: ['status'],
+          operator: '$match',
+        },
+        {
+          filterId: 'filter-1',
+          targetId: 'target-array',
+          filterPaths: ['tags'],
+          operator: '$match',
+        },
+        {
+          filterId: 'filter-1',
+          targetId: 'target-deep-array',
+          filterPaths: ['org.company.tags'],
+          operator: '$match',
+        },
+      ];
+
+      (filterManager as any).filterConfigs = filterConfigs;
+
+      const createTargetModel = (getCollectionField: any) => ({
+        collection: {
+          dataSourceKey: 'main',
+          name: 'users',
+        },
+        context: {
+          dataSourceManager: {
+            getCollectionField,
+          },
+        },
+        resource: {
+          addFilterGroup: vi.fn(),
+          removeFilterGroup: vi.fn(),
+          refresh: vi.fn().mockResolvedValue(undefined),
+        },
+        setFilterActive: vi.fn(),
+        getDataLoadingMode: vi.fn().mockReturnValue('auto'),
+      });
+      const mockScalarTargetModel = createTargetModel(vi.fn().mockReturnValue({ interface: 'select', type: 'string' }));
+      const mockArrayTargetModel = createTargetModel(
+        vi.fn().mockReturnValue({ interface: 'multipleSelect', type: 'array' }),
+      );
+      const mockDeepArrayTargetModel = createTargetModel(
+        vi.fn((key: string) => {
+          const fields = {
+            'main.users.org': { target: 'orgs' },
+            'main.orgs.company': { target: 'companies' },
+            'main.companies.tags': { interface: 'multipleSelect', type: 'array' },
+          };
+          return fields[key];
+        }),
+      );
+      const mockFilterModel = {
+        getFilterValue: vi.fn().mockReturnValue(['a1']),
+      };
+
+      (mockFlowModel.flowEngine.getModel as any).mockImplementation((uid: string) => {
+        if (uid === 'target-scalar') return mockScalarTargetModel;
+        if (uid === 'target-array') return mockArrayTargetModel;
+        if (uid === 'target-deep-array') return mockDeepArrayTargetModel;
+        if (uid === 'filter-1') return mockFilterModel;
+        return null;
+      });
+
+      await filterManager.refreshTargetsByFilter('filter-1');
+
+      expect(mockScalarTargetModel.resource.addFilterGroup.mock.calls[0][1].options.operator).toBe('$in');
+      expect(mockArrayTargetModel.resource.addFilterGroup.mock.calls[0][1].options.operator).toBe('$match');
+      expect(mockDeepArrayTargetModel.resource.addFilterGroup.mock.calls[0][1].options.operator).toBe('$match');
+    });
+
     it('should process multiple filterIds successfully', async () => {
       // Setup filter configs
       const filterConfigs = [