@nocobase/client-v2 2.1.0-alpha.45 → 2.1.0-alpha.47

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/GridModel.tsx

@@ -1006,7 +1006,7 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
           <Space
             ref={this.gridContainerRef}
             direction={'vertical'}
-            style={{ width: '100%', marginBottom: this.props.rowGap }}
+            style={{ width: '100%', marginBottom: this.props.rowGap, display: 'flex' }}
             size={this.props.rowGap}
           >
             <DndProvider

package/src/flow/models/base/PageModel/ChildPageModel.tsx

@@ -49,7 +49,11 @@ export class ChildPageModel extends PageModel {
       throw new Error('Invalid drag event');
     }
 
-    this.flowEngine.moveModel(event.active.id, event.over.id);
+    if (event.active.id === event.over.id) {
+      return;
+    }
+
+    await this.flowEngine.moveModel(event.active.id, event.over.id);
   }
 
   render() {

package/src/flow/models/base/PageModel/__tests__/ChildPageModel.test.ts

@@ -107,6 +107,18 @@ describe('ChildPageModel', () => {
       expect(mockFlowEngine.moveModel).toHaveBeenCalledWith('active-model-id', 'over-model-id');
     });
 
+    it('should ignore self-drop', async () => {
+      await childPageModel.handleDragEnd({
+        ...mockDragEndEvent,
+        over: {
+          ...(mockDragEndEvent.over as NonNullable<DragEndEvent['over']>),
+          id: 'active-model-id',
+        },
+      });
+
+      expect(mockFlowEngine.moveModel).not.toHaveBeenCalled();
+    });
+
     it('should handle case when over is null', async () => {
       const eventWithNullOver = {
         ...mockDragEndEvent,

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/base/__tests__/GridModel.render.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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, FlowEngineProvider } from '@nocobase/flow-engine';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { GridModel } from '../GridModel';
+
+describe('GridModel.render', () => {
+  let engine: FlowEngine;
+
+  beforeEach(async () => {
+    engine = new FlowEngine();
+    engine.registerModels({ GridModel });
+    await engine.flowSettings.disable();
+  });
+
+  it('renders the Space wrapper as block-level flex to avoid inline baseline spacing', () => {
+    const item = engine.createModel({ use: 'FlowModel', uid: 'item-1' });
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-render',
+      props: {
+        rows: {
+          row1: [['item-1']],
+        },
+        sizes: {
+          row1: [24],
+        },
+        rowGap: 16,
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = { items: [item] };
+
+    expect(Object.keys((model as any).getVisibleLayout().rows)).toEqual(['row1']);
+
+    const { container } = render(<FlowEngineProvider engine={engine}>{model.render()}</FlowEngineProvider>);
+    const space = container.querySelector('.ant-space') as HTMLElement;
+
+    expect(space).toBeTruthy();
+    expect(space.style.width).toBe('100%');
+    expect(space.style.marginBottom).toBe('16px');
+    expect(space.style.display).toBe('flex');
+  });
+});

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;
@@ -111,7 +122,7 @@ export class AssignFormGridModel extends FormGridModel {
       return;
     }
     const fieldModel = binding.modelName;
-    const created = this.flowEngine.createModel({
+    const created = this.addSubModel('items', {
       use: 'AssignFormItemModel',
       stepParams: {
         fieldSettings: {
@@ -137,8 +148,6 @@ export class AssignFormGridModel extends FormGridModel {
           },
         },
       },
-      parentId: this.uid,
-      subKey: 'items',
     });
     created['assignValue'] = value;
   }

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

@@ -86,6 +86,14 @@ function getAssignFormTempFieldRefreshKey(originField: AssignFormTempOriginField
   ].join('|');
 }
 
+function normalizeAssignFormInputValue(value: unknown) {
+  if (!value || typeof value !== 'object' || !('target' in value)) {
+    return value;
+  }
+  const target = (value as { target?: { value?: unknown } }).target;
+  return target && 'value' in target ? target.value : value;
+}
+
 /**
  * 使用 FormItemModel 的“表单项”包装，内部渲染 VariableInput，并将“常量”映射到临时字段模型。
  */
@@ -230,7 +238,6 @@ export class AssignFormItemModel extends FormItemModel {
         fm?.setProps?.({
           disabled: false,
           readPretty: false,
-          pattern: 'editable',
           updateAssociation: false,
           multiple: multi,
         });
@@ -260,9 +267,12 @@ export class AssignFormItemModel extends FormItemModel {
           if (fm) {
             fm.setProps?.({
               value: inputProps?.value,
-              onChange: (...args: any[]) => {
-                const next = args && args.length ? args[0] : undefined;
-                inputProps?.onChange?.(next);
+              onChange: (...args: unknown[]) => {
+                const nextArg = args && args.length ? args[0] : undefined;
+                const nextValue = normalizeAssignFormInputValue(nextArg);
+                fm.setProps?.({ value: nextValue });
+                this.assignValue = nextValue;
+                inputProps?.onChange?.(nextValue);
               },
             });
           }

package/src/flow/models/blocks/assign-form/__tests__/assignFieldValuesFlow.editor.test.tsx

@@ -0,0 +1,216 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { App, ConfigProvider } from 'antd';
+import { describe, expect, it } from 'vitest';
+import { render, screen, userEvent, waitFor } from '@nocobase/test/client';
+import {
+  FlowEngine,
+  FlowEngineProvider,
+  FlowRuntimeContext,
+  FlowSettingsContextProvider,
+  type FlowModel,
+  type IFlowModelRepository,
+} from '@nocobase/flow-engine';
+import { AssignFormGridModel } from '../AssignFormGridModel';
+import { AssignFormItemModel } from '../AssignFormItemModel';
+import { AssignFormModel } from '../AssignFormModel';
+import { createAssignFieldValuesStep } from '../assignFieldValuesFlow';
+import { InputFieldModel } from '../../../fields/InputFieldModel';
+import { VariableFieldFormModel } from '../../../fields/VariableFieldFormModel';
+
+class MockFlowModelRepository implements IFlowModelRepository {
+  async findOne(): Promise<Record<string, any> | null> {
+    return null;
+  }
+
+  async save(model: FlowModel): Promise<Record<string, any>> {
+    return { uid: model.uid };
+  }
+
+  async destroy(): Promise<boolean> {
+    return true;
+  }
+
+  async move(): Promise<void> {}
+
+  async duplicate(): Promise<Record<string, any> | null> {
+    return null;
+  }
+}
+
+describe('assignFieldValuesFlow (editor)', () => {
+  it('repairs AssignFormModel resource init and clears cached collection', async () => {
+    const engine = new FlowEngine();
+    engine.setModelRepository(new MockFlowModelRepository());
+    engine.registerModels({
+      AssignFormModel,
+      AssignFormGridModel,
+      AssignFormItemModel,
+      InputFieldModel,
+      VariableFieldFormModel,
+    });
+    engine.context.defineProperty('location', { value: { search: '' } });
+    engine.context.defineProperty('themeToken', { value: { marginLG: 24 } });
+
+    const dsm = engine.context.dataSourceManager;
+    const main = dsm.getDataSource('main');
+    main.addCollection({
+      name: 'users',
+      fields: [{ name: 'nickname', type: 'string', interface: 'input' }],
+    });
+    const users = dsm.getCollection('main', 'users');
+    expect(users?.name).toBe('users');
+
+    const action = engine.createModel({
+      use: 'FlowModel',
+      uid: 'act-assign',
+    });
+    action.setStepParams('assignSettings', 'assignFieldValues', { assignedValues: { nickname: '1111' } });
+
+    const existing = engine.createModel<AssignFormModel>({
+      use: 'AssignFormModel',
+      uid: 'form-assign',
+      parentId: action.uid,
+      subKey: 'assignForm',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'missing',
+          },
+        },
+      },
+    });
+    expect(existing.context.collection).toBeUndefined();
+
+    action.context.defineProperty('blockModel', { value: { collection: users } });
+
+    const step = createAssignFieldValuesStep({ settingsFlowKey: 'assignSettings' });
+    const schema = step.uiSchema();
+    const Editor = schema.editor?.['x-component'] as React.ComponentType;
+    expect(Editor).toBeTypeOf('function');
+
+    const flowSettingsCtx = new FlowRuntimeContext(action as any, 'assignSettings', 'settings');
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <FlowSettingsContextProvider value={flowSettingsCtx}>
+              <Editor />
+            </FlowSettingsContextProvider>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      const form = engine.findModelByParentId<AssignFormModel>(action.uid, 'assignForm');
+      expect(form?.getStepParams('resourceSettings', 'init')).toEqual({
+        dataSourceKey: 'main',
+        collectionName: 'users',
+      });
+      expect(form?.context.collection?.name).toBe('users');
+      expect(form?.context.collection?.getFields?.().length).toBeGreaterThan(0);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('nickname')).toBeInTheDocument();
+      const form = engine.findModelByParentId<AssignFormModel>(action.uid, 'assignForm');
+      expect(form?.subModels.grid.subModels.items.length).toBe(1);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue('1111')).toBeInTheDocument();
+    });
+
+    const input = screen.getByDisplayValue('1111') as HTMLInputElement;
+    await userEvent.clear(input);
+    await userEvent.type(input, '2222');
+
+    await waitFor(() => {
+      const form = engine.findModelByParentId<AssignFormModel>(action.uid, 'assignForm');
+      expect(form?.getAssignedValues()).toEqual({ nickname: '2222' });
+    });
+  });
+
+  it('does not clear delegated parent resource cache when repairing AssignFormModel init', async () => {
+    const engine = new FlowEngine();
+    engine.setModelRepository(new MockFlowModelRepository());
+    engine.registerModels({ AssignFormModel, AssignFormGridModel, AssignFormItemModel, InputFieldModel });
+    engine.context.defineProperty('location', { value: { search: '' } });
+    engine.context.defineProperty('themeToken', { value: { marginLG: 24 } });
+
+    const dsm = engine.context.dataSourceManager;
+    const main = dsm.getDataSource('main');
+    main.addCollection({
+      name: 'users',
+      fields: [{ name: 'nickname', type: 'string', interface: 'input' }],
+    });
+    const users = dsm.getCollection('main', 'users');
+
+    const action = engine.createModel({
+      use: 'FlowModel',
+      uid: 'act-assign-parent-resource',
+    });
+
+    let resourceCreateCount = 0;
+    action.context.defineProperty('resource', {
+      get: () => ({ id: ++resourceCreateCount }),
+    });
+    const cachedResource = action.context.resource;
+
+    engine.createModel<AssignFormModel>({
+      use: 'AssignFormModel',
+      uid: 'form-assign-parent-resource',
+      parentId: action.uid,
+      subKey: 'assignForm',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'missing',
+          },
+        },
+      },
+    });
+
+    action.context.defineProperty('blockModel', { value: { collection: users } });
+
+    const step = createAssignFieldValuesStep({ settingsFlowKey: 'assignSettings' });
+    const schema = step.uiSchema();
+    const Editor = schema.editor?.['x-component'] as React.ComponentType;
+    const flowSettingsCtx = new FlowRuntimeContext(action as any, 'assignSettings', 'settings');
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <FlowSettingsContextProvider value={flowSettingsCtx}>
+              <Editor />
+            </FlowSettingsContextProvider>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      const form = engine.findModelByParentId<AssignFormModel>(action.uid, 'assignForm');
+      expect(form?.getStepParams('resourceSettings', 'init')).toEqual({
+        dataSourceKey: 'main',
+        collectionName: 'users',
+      });
+    });
+
+    expect(action.context.resource).toBe(cachedResource);
+    expect(resourceCreateCount).toBe(1);
+  });
+});