@nocobase/client-v2 2.1.0-beta.44 → 2.1.0-beta.45

package/src/flow/components/filter/__tests__/metaTreeAssociationDepth.test.ts

@@ -0,0 +1,60 @@
+/**
+ * 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 } from 'vitest';
+import type { MetaTreeNode } from '@nocobase/flow-engine';
+import { limitAssociationMetaTree } from '../metaTreeAssociationDepth';
+
+describe('limitAssociationMetaTree', () => {
+  it('keeps relation / relation / normal field and removes deeper relation fields', async () => {
+    const tree: MetaTreeNode[] = [
+      {
+        name: 'user',
+        title: 'User',
+        type: 'object',
+        interface: 'm2o',
+        options: { target: 'users' },
+        paths: ['collection', 'user'],
+        children: async () => [
+          {
+            name: 'department',
+            title: 'Department',
+            type: 'object',
+            interface: 'm2o',
+            options: { target: 'departments' },
+            paths: ['collection', 'user', 'department'],
+            children: async () => [
+              {
+                name: 'name',
+                title: 'Name',
+                type: 'string',
+                interface: 'input',
+                paths: ['collection', 'user', 'department', 'name'],
+              },
+              {
+                name: 'company',
+                title: 'Company',
+                type: 'object',
+                interface: 'm2o',
+                options: { target: 'companies' },
+                paths: ['collection', 'user', 'department', 'company'],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const limited = limitAssociationMetaTree(tree);
+    const userChildren = await (limited[0].children as () => Promise<MetaTreeNode[]>)();
+    const departmentChildren = await (userChildren[0].children as () => Promise<MetaTreeNode[]>)();
+
+    expect(departmentChildren.map((node) => node.name)).toEqual(['name']);
+  });
+});

package/src/flow/components/filter/fieldsToOptions.ts

@@ -59,10 +59,15 @@ const field2option = (field: CollectionField, depth, nonfilterable, t) => {
     option['children'] = children;
   }
   if (nested) {
-    const targetFields = field.getFields().filter((f) => {
-      // 过滤掉附件字段，因为会报错：Target collection attachments not found for field xxx
-      return f.target !== 'attachments' && f.interface !== 'formula';
-    });
+    let targetFields: CollectionField[] = [];
+    try {
+      targetFields = field.getFields().filter((f) => {
+        // 过滤掉附件字段，因为会报错：Target collection attachments not found for field xxx
+        return f.target !== 'attachments' && f.interface !== 'formula';
+      });
+    } catch {
+      targetFields = [];
+    }
     const options = fieldsToOptions(targetFields, depth + 1, nonfilterable, t).filter(Boolean);
     option['children'] = option['children'] || [];
     option['children'].push(...options);

package/src/flow/components/filter/metaTreeAssociationDepth.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 { MetaTreeNode } from '@nocobase/flow-engine';
+
+const ASSOCIATION_FIELD_INTERFACES = new Set(['m2o', 'o2o', 'oho', 'obo', 'o2m', 'm2m', 'linkTo']);
+
+function isAssociationMetaNode(node: MetaTreeNode) {
+  const options = (node as any)?.options || {};
+  return Boolean(
+    options.target ||
+      options.targetCollection ||
+      options.foreignKey ||
+      options.through ||
+      ASSOCIATION_FIELD_INTERFACES.has(String(node?.interface || '')),
+  );
+}
+
+function limitNodeAssociationDepth(node: MetaTreeNode, associationDepth: number, maxAssociationDepth: number) {
+  const isAssociation = isAssociationMetaNode(node);
+  const nextAssociationDepth = associationDepth + (isAssociation ? 1 : 0);
+
+  if (isAssociation && nextAssociationDepth > maxAssociationDepth) {
+    return null;
+  }
+
+  const wrapChildren = (children: MetaTreeNode[] | (() => Promise<MetaTreeNode[]>)) => {
+    if (Array.isArray(children)) {
+      return limitAssociationMetaTree(children, {
+        associationDepth: nextAssociationDepth,
+        maxAssociationDepth,
+      });
+    }
+
+    return async () => {
+      const loaded = await children();
+      return limitAssociationMetaTree(Array.isArray(loaded) ? loaded : [], {
+        associationDepth: nextAssociationDepth,
+        maxAssociationDepth,
+      });
+    };
+  };
+
+  return {
+    ...node,
+    children: node.children ? wrapChildren(node.children as any) : undefined,
+  } as MetaTreeNode;
+}
+
+export function limitAssociationMetaTree(
+  nodes: MetaTreeNode[] | undefined,
+  options: {
+    associationDepth?: number;
+    maxAssociationDepth?: number;
+  } = {},
+): MetaTreeNode[] {
+  const { associationDepth = 0, maxAssociationDepth = 2 } = options;
+  if (!Array.isArray(nodes)) return [];
+
+  return nodes
+    .map((node) => limitNodeAssociationDepth(node, associationDepth, maxAssociationDepth))
+    .filter(Boolean) as MetaTreeNode[];
+}

package/src/flow/internal/utils/operatorSchemaHelper.ts

@@ -7,24 +7,131 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React, { type ComponentType, type CSSProperties, type ReactNode } from 'react';
 import { DateFilterDynamicComponent } from '../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent';
 
+type OperatorMeta = {
+  value?: string;
+  schema?: {
+    'x-component'?: string;
+    'x-component-props'?: Record<string, unknown>;
+  };
+};
+
+type ComponentRegistry = {
+  getComponent?: (name: string) => ComponentType<Record<string, unknown>> | undefined;
+};
+
+type OperatorComponentFieldModel = {
+  props?: Record<string, unknown>;
+  render?: () => ReactNode;
+  __originalRender?: () => ReactNode;
+};
+
+type OperatorComponentRenderOptions = {
+  app?: ComponentRegistry;
+  fieldModel: unknown;
+  operator: string;
+  operators?: OperatorMeta[];
+  propsPriority?: 'field' | 'operator';
+  style?: CSSProperties;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function pickOperatorStyle(value: unknown): CSSProperties | undefined {
+  return isRecord(value) ? (value as CSSProperties) : undefined;
+}
+
+function getFieldModel(fieldModel: unknown) {
+  return fieldModel as OperatorComponentFieldModel & {
+    _reactiveWrapperCache?: unknown;
+    setupReactiveRender?: () => void;
+  };
+}
+
+function rewrapReactiveRender(fieldModel: unknown) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  mutableFieldModel._reactiveWrapperCache = undefined;
+  mutableFieldModel.setupReactiveRender?.();
+}
+
 /**
  * 根据操作符的 schema 定位组件及其 props。
  */
-export function resolveOperatorComponent(app: any, operator: string, operators?: Array<any>) {
+export function resolveOperatorComponent(
+  app: ComponentRegistry | undefined,
+  operator: string,
+  operators?: OperatorMeta[],
+) {
   if (!operators || !Array.isArray(operators)) return null;
   const op = operators.find((item) => item?.value === operator);
   const schema = op?.schema;
   const xComp = schema?.['x-component'];
   if (!xComp) return null;
-  let Comp;
+  let Comp: ComponentType<Record<string, unknown>> | undefined;
   if (xComp === 'DateFilterDynamicComponent') {
-    Comp = DateFilterDynamicComponent;
+    Comp = DateFilterDynamicComponent as ComponentType<Record<string, unknown>>;
   } else {
-    Comp = app?.getComponent?.(xComp as any);
+    Comp = app?.getComponent?.(xComp);
   }
   if (!Comp) return null;
-  const props = (schema?.['x-component-props'] as Record<string, any>) || {};
+  const props = isRecord(schema?.['x-component-props']) ? schema['x-component-props'] : {};
   return { Comp, props };
 }
+
+export function restoreOperatorComponentRender(fieldModel?: unknown) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  if (!mutableFieldModel || typeof mutableFieldModel.__originalRender !== 'function') {
+    return false;
+  }
+
+  mutableFieldModel.render = mutableFieldModel.__originalRender;
+  rewrapReactiveRender(mutableFieldModel);
+  return true;
+}
+
+export function applyOperatorComponentRender({
+  app,
+  fieldModel,
+  operator,
+  operators,
+  propsPriority = 'field',
+  style,
+}: OperatorComponentRenderOptions) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  const resolved = resolveOperatorComponent(app, operator, operators);
+  if (!resolved) {
+    restoreOperatorComponentRender(mutableFieldModel);
+    return false;
+  }
+
+  if (!mutableFieldModel.__originalRender && typeof mutableFieldModel.render === 'function') {
+    mutableFieldModel.__originalRender = mutableFieldModel.render;
+  }
+
+  const { Comp, props: operatorProps } = resolved;
+  const operatorStyle = pickOperatorStyle(operatorProps.style);
+
+  mutableFieldModel.render = () => {
+    const fieldProps = mutableFieldModel.props || {};
+    const fieldStyle = pickOperatorStyle(fieldProps.style);
+    const componentProps =
+      propsPriority === 'operator' ? { ...fieldProps, ...operatorProps } : { ...operatorProps, ...fieldProps };
+    const componentStyle =
+      propsPriority === 'operator' ? { ...fieldStyle, ...operatorStyle } : { ...operatorStyle, ...fieldStyle };
+    const mergedStyle = { ...(style || {}), ...componentStyle };
+
+    return React.createElement(Comp, {
+      ...componentProps,
+      ...(Object.keys(mergedStyle).length > 0 ? { style: mergedStyle } : {}),
+      onCompositionStart: null,
+      onCompositionEnd: null,
+    });
+  };
+
+  rewrapReactiveRender(mutableFieldModel);
+  return true;
+}

package/src/flow/models/actions/FilterActionModel.tsx

@@ -75,7 +75,12 @@ export class FilterActionModel extends ActionModel {
                 value={this.props.filterValue || this.props.defaultFilterValue}
                 ctx={this.context}
                 FilterItem={(props) => (
-                  <VariableFilterItem {...props} model={this} ignoreFieldNames={this.getIgnoreFieldNames()} />
+                  <VariableFilterItem
+                    {...props}
+                    model={this}
+                    ignoreFieldNames={this.getIgnoreFieldNames()}
+                    maxAssociationFieldDepth={2}
+                  />
                 )}
               />
               <div style={{ height: 150 }}></div>
@@ -94,7 +99,12 @@ export class FilterActionModel extends ActionModel {
             value={this.props.filterValue || this.props.defaultFilterValue}
             ctx={this.context}
             FilterItem={(props) => (
-              <VariableFilterItem {...props} model={this} ignoreFieldNames={this.getIgnoreFieldNames()} />
+              <VariableFilterItem
+                {...props}
+                model={this}
+                ignoreFieldNames={this.getIgnoreFieldNames()}
+                maxAssociationFieldDepth={2}
+              />
             )}
           />
         }
@@ -187,7 +197,9 @@ FilterActionModel.registerFlow({
             return (
               <FilterGroup
                 value={props.value || {}}
-                FilterItem={(props) => <VariableFilterItem {...props} model={modelInstance} />}
+                FilterItem={(props) => (
+                  <VariableFilterItem {...props} model={modelInstance} maxAssociationFieldDepth={2} />
+                )}
               />
             );
           },

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

@@ -11,13 +11,20 @@ import { Collection, DisplayItemModel, FlowModel, FlowModelContext } from '@noco
 
 export class AssociationFieldGroupModel extends FlowModel {
   static itemModelName = 'DetailsItemModel';
+  static maxAssociationFieldDepth = 2;
   static defineChildren(ctx: FlowModelContext) {
     const itemModel = this.itemModelName;
-    const displayAssociationFields = (targetCollection: Collection, fieldPath = '') => {
+    const maxAssociationFieldDepth = this.maxAssociationFieldDepth ?? 2;
+    const displayAssociationFields = (targetCollection: Collection, fieldPath = '', associationDepth = 0) => {
+      if (associationDepth >= maxAssociationFieldDepth) {
+        return [];
+      }
+
       return targetCollection
         .getToOneAssociationFields()
         .map((field) => {
           const fPath = fieldPath ? `${fieldPath}.${field.name}` : field.name;
+          const nextAssociationDepth = associationDepth + 1;
           if (!field.targetCollection) {
             console.error(
               `AssociationFieldGroupModel: target collection ${field.target} not found for field ${field.name}`,
@@ -37,6 +44,12 @@ export class AssociationFieldGroupModel extends FlowModel {
                   children: field.targetCollection
                     .getFields()
                     .map((f) => {
+                      if (
+                        nextAssociationDepth >= maxAssociationFieldDepth &&
+                        (f.isAssociationField?.() || f.target || f.targetCollection)
+                      ) {
+                        return;
+                      }
                       const fp = `${fPath}.${f.name}`;
                       const binding = DisplayItemModel.getDefaultBindingByField(ctx, f, {
                         fallbackToTargetTitleField: true,
@@ -81,9 +94,13 @@ export class AssociationFieldGroupModel extends FlowModel {
                   key: `${fPath}-children-associationField`,
                   label: 'Display association fields',
                   type: 'group',
-                  children: (displayAssociationFields(field.targetCollection, fPath) || []).filter(Boolean),
+                  children: (
+                    displayAssociationFields(field.targetCollection, fPath, nextAssociationDepth) || []
+                  ).filter(Boolean),
                 },
-              ];
+              ].filter((item) => {
+                return item.key !== `${fPath}-children-associationField` || (item.children as any[])?.length > 0;
+              });
             },
           };
         })

package/src/flow/models/base/__tests__/AssociationFieldGroupModel.test.ts

@@ -0,0 +1,86 @@
+/**
+ * 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 { afterEach, describe, expect, it, vi } from 'vitest';
+import { DisplayItemModel } from '@nocobase/flow-engine';
+import { AssociationFieldGroupModel } from '../AssociationFieldGroupModel';
+
+function createCollection(name: string, fields: any[]) {
+  return {
+    name,
+    dataSourceKey: 'main',
+    getFields: () => fields,
+    getToOneAssociationFields: () => fields.filter((field) => field?.type === 'belongsTo' || field?.type === 'hasOne'),
+  };
+}
+
+describe('AssociationFieldGroupModel', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('limits display association fields to relation / relation / field', () => {
+    vi.spyOn(DisplayItemModel, 'getDefaultBindingByField').mockReturnValue({ modelName: 'InputFieldModel' } as any);
+
+    const companies = createCollection('companies', [
+      { name: 'title', title: 'Company title', interface: 'input', type: 'string' },
+    ]);
+    const departments = createCollection('departments', [
+      { name: 'name', title: 'Department name', interface: 'input', type: 'string' },
+      {
+        name: 'company',
+        title: 'Company',
+        interface: 'm2o',
+        type: 'belongsTo',
+        target: 'companies',
+        targetCollection: companies,
+        isAssociationField: () => true,
+      },
+    ]);
+    const users = createCollection('users', [
+      {
+        name: 'department',
+        title: 'Department',
+        interface: 'm2o',
+        type: 'belongsTo',
+        target: 'departments',
+        targetCollection: departments,
+        isAssociationField: () => true,
+      },
+    ]);
+    const posts = createCollection('posts', [
+      {
+        name: 'user',
+        title: 'User',
+        interface: 'm2o',
+        type: 'belongsTo',
+        target: 'users',
+        targetCollection: users,
+        isAssociationField: () => true,
+      },
+    ]);
+
+    const ctx = {
+      collection: posts,
+      t: (key: string) => key,
+    } as any;
+
+    const firstLevel = AssociationFieldGroupModel.defineChildren(ctx) as any[];
+    const firstChildren = firstLevel[0].children();
+    const firstAssociationGroup = firstChildren.find((item) => item.key === 'user-children-associationField');
+    const secondLevel = firstAssociationGroup.children;
+    const secondChildren = secondLevel[0].children();
+    const secondFieldsGroup = secondChildren.find((item) => item.key === 'user.department-children-collectionField');
+
+    expect(secondChildren.map((item) => item.key)).toContain('user.department-children-collectionField');
+    expect(secondChildren.map((item) => item.key)).not.toContain('user.department-children-associationField');
+    expect(secondFieldsGroup.children.map((item) => item.key)).toContain('c-user.department.name');
+    expect(secondFieldsGroup.children.map((item) => item.key)).not.toContain('c-user.department.company');
+  });
+});

package/src/flow/models/blocks/assign-form/AssignFormGridModel.tsx

@@ -12,11 +12,16 @@ import { AddSubModelButton, FlowSettingsButton, tExpr, EditableItemModel } from
 import { SettingOutlined } from '@ant-design/icons';
 import { FormGridModel } from '../form/FormGridModel';
 
+const MAX_ASSIGN_FORM_ASSOCIATION_FIELD_DEPTH = 2;
+
 // 使用范型准确标注 subModels.items 的类型
 export class AssignFormGridModel extends FormGridModel {
   renderAddSubModelButton() {
     const collection = (this.context as any)?.collection;
     const fields = collection?.getFields?.() || [];
+    const associationDepth = this.context.prefixFieldPath
+      ? this.context.prefixFieldPath.split('.').filter(Boolean).length
+      : 0;
     // 过滤主键/过滤键字段，避免产生“更新主键”的无效配置
     const pk = typeof collection?.getPrimaryKey === 'function' ? collection.getPrimaryKey() : undefined;
     const filterKey = collection?.filterTargetKey;
@@ -29,6 +34,12 @@ export class AssignFormGridModel extends FormGridModel {
     };
     const items = fields
       .filter((field: any) => !isForbidden(field?.name))
+      .filter((field: any) => {
+        if (associationDepth < MAX_ASSIGN_FORM_ASSOCIATION_FIELD_DEPTH) {
+          return true;
+        }
+        return !(field?.isAssociationField?.() || field?.target || field?.targetCollection);
+      })
       .map((field: any) => {
         const fullName = field.name as string;
         const label = field.title || field.name;

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

@@ -22,7 +22,12 @@ import { CollectionBlockModel, FieldModel } from '../../base';
 import { RecordSelectFieldModel } from '../../fields/AssociationFieldModel/RecordSelectFieldModel';
 import { normalizeAssociationFieldNames } from '../../fields/AssociationFieldModel/recordSelectShared';
 import { FilterManager } from '../filter-manager';
-import { getAllDataModels, getDefaultOperator, isFilterValueEmpty } from '../filter-manager/utils';
+import {
+  getAllDataModels,
+  getDefaultOperator,
+  getFilterFormOperatorMeta,
+  isFilterValueEmpty,
+} from '../filter-manager/utils';
 import { FilterFormFieldModel } from './fields';
 import { normalizeFilterValueByOperator } from './valueNormalization';
 
@@ -51,7 +56,11 @@ const getTargetFilterableFields = (field: any, collection?: Collection, model?:
   return (targetCollection.getFields() || []).filter((childField: any) => childField?.filterable);
 };
 
-const MAX_ASSOCIATION_DEPTH = 5;
+const MAX_ASSOCIATION_DEPTH = 2;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
 
 const normalizeAssociationDefaultFilterValue = (value: any, fieldModel: any) => {
   const collectionField = fieldModel?.context?.collectionField;
@@ -449,15 +458,7 @@ export class FilterFormItemModel extends FilterableItemModel<{
 
   private getCurrentOperatorMeta() {
     const operator = getDefaultOperator(this);
-    if (!operator) return null;
-
-    const operatorList = this.collectionField?.filterable?.operators;
-
-    if (!Array.isArray(operatorList)) {
-      return null;
-    }
-
-    return operatorList.find((op) => op.value === operator) || null;
+    return getFilterFormOperatorMeta(this, operator);
   }
 
   onInit(options: any) {
@@ -530,7 +531,8 @@ export class FilterFormItemModel extends FilterableItemModel<{
     rawValue = this.normalizeAssociationFilterValue(rawValue, fieldModel);
     const operatorMeta = this.getCurrentOperatorMeta();
     if (operatorMeta?.noValue) {
-      const options = operatorMeta?.schema?.['x-component-props']?.options;
+      const componentProps = operatorMeta?.schema?.['x-component-props'];
+      const options = isRecord(componentProps) ? componentProps.options : undefined;
       if (Array.isArray(options)) {
         return rawValue;
       }

package/src/flow/models/blocks/filter-form/__tests__/FilterFormItemModel.defineChildren.test.ts

@@ -136,9 +136,13 @@ describe('FilterFormItemModel defineChildren association fields', () => {
     );
     const managerGroups = await managerAssociation.children();
     const managerFieldsGroup = managerGroups.find((group: any) => group.key === 'department.manager-fields');
+    const managerAssociationGroup = managerGroups.find(
+      (group: any) => group.key === 'department.manager-relation-fields',
+    );
 
     const managerFieldKeys = (managerFieldsGroup?.children || []).map((item: any) => item.key);
     expect(managerFieldKeys).toContain('department.manager.name');
+    expect(managerAssociationGroup).toBeUndefined();
 
     const targetItem = managerFieldsGroup?.children?.find((item: any) => item.key === 'department.manager.name');
     const createOptions = await targetItem.createModelOptions();
@@ -200,7 +204,8 @@ describe('FilterFormItemModel defineChildren association fields', () => {
     });
 
     const ds = engine.dataSourceManager.getDataSource('main');
-    ds!.addCollection({
+    expect(ds).toBeTruthy();
+    ds?.addCollection({
       name: 'users',
       filterTargetKey: 'id',
       fields: [{ name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } }],

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

@@ -9,7 +9,7 @@
 
 import { describe, expect, it, vi } from 'vitest';
 
-import { getDefaultOperator } from '../utils';
+import { getDefaultOperator, getFilterFormOperatorList } from '../utils';
 
 describe('getDefaultOperator', () => {
   it('returns model.operator when it exists', () => {
@@ -66,4 +66,38 @@ describe('getDefaultOperator', () => {
     expect(result).toBe('$includes');
     expect(getStepParams).toHaveBeenCalledWith('filterFormItemSettings', 'defaultOperator');
   });
+
+  it('falls back to field interface operators when field operators are empty', () => {
+    const getStepParams = vi.fn().mockReturnValue(undefined);
+    const model = {
+      getStepParams,
+      subModels: {},
+      collectionField: {
+        interface: 'id',
+        type: 'bigInt',
+        filterable: { operators: [] },
+      },
+      context: {
+        dataSourceManager: {
+          collectionFieldInterfaceManager: {
+            getFieldInterface: vi.fn(() => ({
+              filterable: {
+                operators: [
+                  { label: 'is', value: '$eq', selected: true },
+                  {
+                    label: 'is any of',
+                    value: '$in',
+                    schema: { 'x-component': 'MultipleKeywordsInput' },
+                  },
+                ],
+              },
+            })),
+          },
+        },
+      },
+    } as any;
+
+    expect(getDefaultOperator(model)).toBe('$eq');
+    expect(getFilterFormOperatorList(model).map((item) => item.value)).toEqual(['$eq', '$in']);
+  });
 });