@nocobase/client-v2 2.3.0-beta.2 → 2.3.0-beta.21

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

@@ -0,0 +1,61 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { createForm } from '@formily/core';
+import { Field, FormProvider } from '@formily/react';
+import { render, screen } from '@nocobase/test/client';
+import userEvent from '@testing-library/user-event';
+import { FlowEngine, FlowEngineProvider, FlowModel, FlowModelProvider } from '@nocobase/flow-engine';
+import { FieldComponentProps } from '../FieldComponentProps';
+
+class HostModel extends FlowModel {
+  render() {
+    return null;
+  }
+}
+
+describe.each(['RadioGroupFieldModel', 'CheckboxGroupFieldModel', 'SelectFieldModel'])('%s options', (fieldModel) => {
+  it('keeps focus while editing option values and preserves remaining rows after removal', async () => {
+    const form = createForm();
+    const engine = new FlowEngine();
+    engine.registerModels({ HostModel });
+    const model = engine.createModel<HostModel>({ use: 'HostModel' });
+    render(
+      <FlowEngineProvider engine={engine}>
+        <FlowModelProvider model={model}>
+          <FormProvider form={form}>
+            <Field name="props" component={[FieldComponentProps, { fieldModel, source: [] }]} />
+          </FormProvider>
+        </FlowModelProvider>
+      </FlowEngineProvider>,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'plus Add' }));
+    const valueInput = screen.getByPlaceholderText('Option value');
+    await userEvent.type(valueInput, 'abcdef');
+    expect(screen.getByPlaceholderText('Option value')).toHaveValue('abcdef');
+    expect(valueInput).toHaveFocus();
+
+    await userEvent.keyboard('{Backspace}{Backspace}xy');
+    expect(valueInput).toHaveValue('abcdxy');
+    expect(valueInput).toHaveFocus();
+    await userEvent.type(screen.getByPlaceholderText('Option label'), 'First');
+    await userEvent.click(screen.getByRole('button', { name: 'plus Add' }));
+    await userEvent.type(screen.getAllByPlaceholderText('Option label')[1], 'Second');
+    await userEvent.type(screen.getAllByPlaceholderText('Option value')[1], 'second');
+    await userEvent.click(screen.getAllByRole('button', { name: 'close' })[0]);
+    expect(screen.getByPlaceholderText('Option label')).toHaveValue('Second');
+    expect(screen.getByPlaceholderText('Option value')).toHaveValue('second');
+    await userEvent.type(screen.getByPlaceholderText('Option value'), '2');
+    expect(screen.getByPlaceholderText('Option value')).toHaveFocus();
+    expect(form.values.props.options).toEqual([{ label: 'Second', value: 'second2' }]);
+  });
+});

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

@@ -399,20 +399,41 @@ export class FormBlockModel<
           if (Array.isArray(topValue) && topValue.length === 0) return false;
 
           // 本地优先：支持对多关系的 dot 聚合路径（例如 assignees.name）。
-          // lodash.get 对数组聚合路径会返回 undefined（如 _.get({ assignees:[{name:'A'}] }, 'assignees.name')），
-          // 因而这里先用 getValuesByPath 做一次前端可解析性检查，命中则直接前端解析。
+          // 关联字段只有在本地值包含目标标题字段时才算完整；标量外键或仅含主键的轻量对象仍需服务端补全。
           const formValuesSnapshot = runtime.getFormValuesSnapshot();
+          let shouldResolveAssociationValueOnServer = false;
           if (formValuesSnapshot && typeof formValuesSnapshot === 'object') {
-            const localResolved = getValuesByPath(formValuesSnapshot as Record<string, any>, subPath);
+            const localResolved = getValuesByPath(formValuesSnapshot as Record<string, unknown>, subPath);
             if (typeof localResolved !== 'undefined') {
-              return false;
+              const fieldPath = subPath
+                .replace(/\[\d+\]/g, '')
+                .split('.')
+                .filter((segment) => !/^\d+$/.test(segment))
+                .join('.');
+              const resolvedField = this.collection?.getFieldByPath?.(fieldPath);
+              const titleFieldName = resolvedField?.targetCollectionTitleFieldName;
+              const isLoadedAssociationRecord = (value: unknown) => {
+                if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+                if (!titleFieldName) return true;
+                return typeof (value as Record<string, unknown>)[titleFieldName] !== 'undefined';
+              };
+              const isAssociationValueLoaded =
+                localResolved === null ||
+                (Array.isArray(localResolved)
+                  ? localResolved.length === 0 ||
+                    localResolved.every((value) => value === null || isLoadedAssociationRecord(value))
+                  : isLoadedAssociationRecord(localResolved));
+              if (!resolvedField?.isAssociationField?.() || isAssociationValueLoaded) {
+                return false;
+              }
+              shouldResolveAssociationValueOnServer = true;
             }
           }
 
           // 已配置字段：仅关联字段的子路径按需服务端补全（保持现有语义）
           const assocResolver = createAssociationSubpathResolver(
             () => this.collection,
-            () => runtime.getFormValuesSnapshot(),
+            shouldResolveAssociationValueOnServer ? undefined : () => runtime.getFormValuesSnapshot(),
           );
           return assocResolver(subPath);
         }

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

@@ -23,6 +23,7 @@ import {
 } from '@nocobase/flow-engine';
 import { Button, Form, Skeleton, Space } from 'antd';
 import React from 'react';
+import { findDataScopeStep, getQuickEditDataScopeFilter } from '../../../internal/utils/quickEditDataScope';
 import { FieldModel } from '../../base/FieldModel';
 import { FormComponent } from './FormBlockModel';
 import { FormItemModel } from './FormItemModel';
@@ -36,6 +37,14 @@ const QUICK_EDIT_MOBILE_CONTENT_PADDING = '8px var(--nb-mobile-page-tabs-content
 const QUICK_EDIT_MOBILE_ACTIONS_PADDING =
   '8px var(--nb-mobile-page-tabs-content-padding, 12px) calc(80px + env(safe-area-inset-bottom, 0px))';
 const QUICK_EDIT_MOBILE_MEDIA_QUERY = '(max-width: 768px)';
+// Dropdown-style editors open upwards inside the desktop popover so the option list does not cover the Submit and
+// Cancel buttons rendered right below the field. antd still flips the list downwards when there is no room above.
+const QUICK_EDIT_DROPDOWN_UP_MODELS = [
+  'SelectFieldModel',
+  'RecordSelectFieldModel',
+  'CascadeSelectFieldModel',
+  'CascadeSelectListFieldModel',
+];
 
 type QuickEditViewBeforeClosePayload = {
   result?: unknown;
@@ -159,6 +168,7 @@ export class QuickEditFormModel extends FlowModel {
   __onSubmitSuccess;
   _fieldProps: any;
   _onOk: any;
+  _dataScopeFilter: Record<string, any> | undefined;
 
   get form() {
     return this.context.form;
@@ -212,6 +222,7 @@ export class QuickEditFormModel extends FlowModel {
       },
       sourceFieldModel ? { delegate: sourceFieldModel.context } : undefined,
     ) as QuickEditFormModel;
+    model._dataScopeFilter = getQuickEditDataScopeFilter(sourceFieldModel);
 
     const bodyStyles = {
       maxHeight: QUICK_EDIT_POPOVER_MAX_HEIGHT,
@@ -410,6 +421,13 @@ QuickEditFormModel.registerFlow({
         resource.setDataSourceKey(dataSourceKey);
         resource.setResourceName(collectionName);
         ctx.model.resource = resource;
+        // Seed the edited row before dispatching the field model's flows. An association data scope resolves
+        // `ctx.record` while the field renders, and so does the foreign key filter that one-to-one and one-to-many
+        // editors build, so the record has to be in place first.
+        if (ctx.inputArgs.filterByTk || ctx.inputArgs.record) {
+          resource.setFilterByTk(ctx.inputArgs.filterByTk);
+          resource.setData(ctx.inputArgs.record);
+        }
         const collectionField = ctx.model.collection.getField(fieldPath) as CollectionField;
         if (collectionField) {
           const binding = FormItemModel.getDefaultBindingByField(ctx, collectionField);
@@ -417,24 +435,42 @@ QuickEditFormModel.registerFlow({
             return;
           }
           const use = binding.modelName;
+          const stepParams: Record<string, Record<string, Record<string, unknown>>> = {
+            fieldSettings: {
+              init: {
+                dataSourceKey,
+                collectionName,
+                fieldPath,
+              },
+            },
+          };
+          const dataScopeFilter = ctx.model._dataScopeFilter;
+          if (dataScopeFilter) {
+            const dataScopeStep = findDataScopeStep(ctx.engine.getModelClass(use));
+            if (dataScopeStep) {
+              stepParams[dataScopeStep.flowKey] = {
+                ...stepParams[dataScopeStep.flowKey],
+                [dataScopeStep.stepKey]: { filter: dataScopeFilter },
+              };
+            }
+          }
           const fieldModel = ctx.model.addSubModel<FieldModel>('fields', {
             use,
             props:
               typeof binding.defaultProps === 'function'
                 ? binding.defaultProps(ctx, collectionField)
                 : binding.defaultProps,
-            stepParams: {
-              fieldSettings: {
-                init: {
-                  dataSourceKey,
-                  collectionName,
-                  fieldPath,
-                },
-              },
-            },
+            stepParams,
           });
           fieldModel.setProps(getQuickEditFieldProps(collectionField, ctx.model._fieldProps));
           fieldModel.setProps({ sourceFieldModelUid: ctx.inputArgs.sourceFieldModelUid });
+          if (
+            !ctx.model.context.isMobileLayout &&
+            QUICK_EDIT_DROPDOWN_UP_MODELS.includes(use) &&
+            fieldModel.props.placement == null
+          ) {
+            fieldModel.setProps({ placement: 'topLeft' });
+          }
           ctx.model.context.defineProperty('collectionField', {
             get: () => collectionField,
           });
@@ -442,8 +478,6 @@ QuickEditFormModel.registerFlow({
           await fieldModel.dispatchEvent('beforeRender');
         }
         if (ctx.inputArgs.filterByTk || ctx.inputArgs.record) {
-          resource.setFilterByTk(ctx.inputArgs.filterByTk);
-          resource.setData(ctx.inputArgs.record);
           ctx.model.form?.setFieldsValue(resource.getData());
         }
       },

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

@@ -77,6 +77,7 @@ async function setupFormModel() {
   ds.addCollection({
     name: 'levels',
     filterTargetKey: 'id',
+    titleField: 'name',
     fields: [
       { name: 'id', type: 'integer', interface: 'number' },
       { name: 'name', type: 'string', interface: 'text' },
@@ -549,6 +550,150 @@ describe('FormBlockModel (form/formValues injection & server resolve anchors)',
     expect(api.request).toHaveBeenCalledTimes(1);
   });
 
+  it('resolves a configured nested association from the server when the local value is only its key', async () => {
+    const model = await setupFormModel();
+    const api = {
+      request: vi.fn(async (config: any) => {
+        const batch = config?.data?.values?.batch || [];
+        const item = batch[0] || {};
+        expect(item.template).toEqual({ level: '{{ ctx.formValues.customer.level }}' });
+        expect(Object.keys(item.contextParams || {})).toEqual(['formValues.customer']);
+        expect(item.contextParams['formValues.customer']).toMatchObject({
+          collection: 'customers',
+          filterByTk: 9,
+        });
+        return {
+          data: {
+            data: {
+              results: [{ id: item.id, data: { level: { id: 'level-1', name: 'Level 1' } } }],
+            },
+          },
+        } as any;
+      }),
+    } as any;
+    (model.flowEngine.context as any).defineProperty('api', { value: api });
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+
+    const mem: Record<string, any> = {};
+    const fakeForm = {
+      setFieldsValue: (values: Record<string, any>) => Object.assign(mem, values),
+      getFieldsValue: () => ({ ...mem }),
+      getFieldValue: (namePath: any) => getByPath(mem, namePath),
+      setFieldValue: (key: string, value: any) => (mem[key] = value),
+    };
+    (model.context as any).defineProperty('form', { value: fakeForm });
+    fakeForm.setFieldsValue({ customer: { id: 9, level: 'level-1' } });
+    mockFormGridEnabledFields(model, ['customer']);
+
+    const output = await (model.context as any).resolveJsonTemplate({
+      level: '{{ ctx.formValues.customer.level }}',
+    });
+
+    expect(api.request).toHaveBeenCalledTimes(1);
+    expect(output).toEqual({ level: { id: 'level-1', name: 'Level 1' } });
+  });
+
+  it('resolves a configured nested association when its local record does not include the title field', async () => {
+    const model = await setupFormModel();
+    const api = {
+      request: vi.fn(async (config: any) => {
+        const item = config?.data?.values?.batch?.[0] || {};
+        return {
+          data: {
+            data: {
+              results: [{ id: item.id, data: { level: { id: 'level-1', name: 'Level 1' } } }],
+            },
+          },
+        } as any;
+      }),
+    } as any;
+    (model.flowEngine.context as any).defineProperty('api', { value: api });
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+
+    const mem: Record<string, any> = {};
+    const fakeForm = {
+      setFieldsValue: (values: Record<string, any>) => Object.assign(mem, values),
+      getFieldsValue: () => ({ ...mem }),
+      getFieldValue: (namePath: any) => getByPath(mem, namePath),
+      setFieldValue: (key: string, value: any) => (mem[key] = value),
+    };
+    (model.context as any).defineProperty('form', { value: fakeForm });
+    fakeForm.setFieldsValue({ customer: { id: 9, level: { id: 'level-1' } } });
+    mockFormGridEnabledFields(model, ['customer']);
+
+    const output = await (model.context as any).resolveJsonTemplate({
+      level: '{{ ctx.formValues.customer.level }}',
+    });
+
+    expect(api.request).toHaveBeenCalledTimes(1);
+    expect(output).toEqual({ level: { id: 'level-1', name: 'Level 1' } });
+  });
+
+  it('uses a configured nested association locally when its record is already loaded', async () => {
+    const model = await setupFormModel();
+    const api = { request: vi.fn(async () => ({ data: {} }) as any) } as any;
+    (model.flowEngine.context as any).defineProperty('api', { value: api });
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+
+    const mem: Record<string, any> = {};
+    const fakeForm = {
+      setFieldsValue: (values: Record<string, any>) => Object.assign(mem, values),
+      getFieldsValue: () => ({ ...mem }),
+      getFieldValue: (namePath: any) => getByPath(mem, namePath),
+      setFieldValue: (key: string, value: any) => (mem[key] = value),
+    };
+    (model.context as any).defineProperty('form', { value: fakeForm });
+    const level = { id: 'level-1', name: 'Level 1' };
+    fakeForm.setFieldsValue({ customer: { id: 9, level } });
+    mockFormGridEnabledFields(model, ['customer']);
+
+    const output = await (model.context as any).resolveJsonTemplate({
+      level: '{{ ctx.formValues.customer.level }}',
+    });
+
+    expect(output).toEqual({ level });
+    expect(api.request).not.toHaveBeenCalled();
+  });
+
+  it('keeps indexed paths local when the nested association record is already loaded', async () => {
+    const model = await setupFormModel();
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+
+    const mem: Record<string, any> = {};
+    const fakeForm = {
+      setFieldsValue: (values: Record<string, any>) => Object.assign(mem, values),
+      getFieldsValue: () => ({ ...mem }),
+      getFieldValue: (namePath: any) => getByPath(mem, namePath),
+      setFieldValue: (key: string, value: any) => (mem[key] = value),
+    };
+    (model.context as any).defineProperty('form', { value: fakeForm });
+    fakeForm.setFieldsValue({ assignees: [{ id: 3, org: { id: 1, name: 'Org 1' } }] });
+    mockFormGridEnabledFields(model, ['assignees']);
+
+    const options = (model.context as any).getPropertyOptions('formValues');
+    expect(options.resolveOnServer('assignees[0].org.name')).toBe(false);
+  });
+
   it('configured toMany dot aggregation path uses local value and skips server', async () => {
     const model = await setupFormModel();
 

package/src/flow/models/blocks/form/__tests__/QuickEditFormModel.quickEdit.test.ts

@@ -9,7 +9,11 @@
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { FlowEngine, FlowModel, SingleRecordResource } from '@nocobase/flow-engine';
+import '../../../index';
 import { QuickEditFormModel } from '../QuickEditFormModel';
+import { dataScope } from '../../../../actions/dataScope';
+import { RecordSelectFieldModel } from '../../../fields/AssociationFieldModel/RecordSelectFieldModel';
+import { SelectFieldModel } from '../../../fields/SelectFieldModel';
 
 describe('QuickEditFormModel - quick edit save triggers API (regression)', () => {
   let engine: FlowEngine;
@@ -55,6 +59,54 @@ describe('QuickEditFormModel - quick edit save triggers API (regression)', () =>
     });
   };
 
+  const addMemberCollections = () => {
+    const ds = engine.context.dataSourceManager.getDataSource('main');
+    ds.addCollection({
+      name: 'departments',
+      filterTargetKey: 'id',
+      titleField: 'name',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number' },
+        { name: 'name', type: 'string', interface: 'input', uiSchema: { title: 'Name' } },
+        { name: 'level', type: 'string', interface: 'input', uiSchema: { title: 'Level' } },
+      ],
+    });
+    ds.addCollection({
+      name: 'members',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number' },
+        { name: 'level', type: 'string', interface: 'input', uiSchema: { title: 'Level' } },
+        {
+          name: 'department',
+          type: 'belongsTo',
+          interface: 'm2o',
+          target: 'departments',
+          targetKey: 'id',
+          uiSchema: { title: 'Department' },
+        },
+      ],
+    });
+  };
+
+  const openQuickEditForAssociation = async (dataScopeFilter?: Record<string, unknown>) => {
+    engine.registerModels({ QuickEditFormModel, RecordSelectFieldModel });
+    engine.registerActions({ dataScope });
+    addMemberCollections();
+    const model = engine.createModel<QuickEditFormModel>({
+      use: QuickEditFormModel,
+      uid: `qe-association-${dataScopeFilter ? 'scoped' : 'plain'}`,
+      stepParams: {
+        quickEditFormSettings: {
+          init: { dataSourceKey: 'main', collectionName: 'members', fieldPath: 'department' },
+        },
+      },
+    });
+    model._dataScopeFilter = dataScopeFilter;
+    await model.applyFlow('quickEditFormSettings', { filterByTk: 7, record: { id: 7, level: 'senior' } });
+    return model;
+  };
+
   it('uses source field context when opening quick edit', async () => {
     engine.registerModels({ QuickEditFormModel });
     engine.context.defineProperty('pageActive', { value: { value: false } });
@@ -414,4 +466,72 @@ describe('QuickEditFormModel - quick edit save triggers API (regression)', () =>
 
     expect(api.request).toHaveBeenCalledTimes(1);
   });
+
+  it('opens dropdown editors upwards in the desktop popover so they do not cover the actions', async () => {
+    engine.registerModels({ QuickEditFormModel, SelectFieldModel });
+    const ds = engine.context.dataSourceManager.getDataSource('main');
+    ds.addCollection({
+      name: 'users',
+      fields: [
+        {
+          name: 'tags',
+          type: 'array',
+          interface: 'multipleSelect',
+          uiSchema: { title: 'Tags', enum: [{ label: 'A', value: 'a' }] },
+        },
+      ],
+    });
+
+    const desktopModel = engine.createModel<QuickEditFormModel>({
+      use: QuickEditFormModel,
+      uid: 'qe-desktop',
+      stepParams: {
+        quickEditFormSettings: {
+          init: { dataSourceKey: 'main', collectionName: 'users', fieldPath: 'tags' },
+        },
+      },
+    });
+    await desktopModel.applyFlow('quickEditFormSettings', { record: {} });
+    const desktopField = desktopModel.subModels.fields[0];
+    expect(desktopField.use).toBe('SelectFieldModel');
+    expect(desktopField.props.placement).toBe('topLeft');
+
+    const mobileModel = engine.createModel<QuickEditFormModel>({
+      use: QuickEditFormModel,
+      uid: 'qe-mobile',
+      stepParams: {
+        quickEditFormSettings: {
+          init: { dataSourceKey: 'main', collectionName: 'users', fieldPath: 'tags' },
+        },
+      },
+    });
+    mobileModel.context.defineProperty('isMobileLayout', { value: true });
+    await mobileModel.applyFlow('quickEditFormSettings', { record: {} });
+    expect(mobileModel.subModels.fields[0].props.placement).toBeUndefined();
+  });
+
+  it('hands the column data scope to the association editor built for the popover', async () => {
+    const filter = { logic: '$and', items: [{ path: 'level', operator: 'eq', value: '{{ctx.record.level}}' }] };
+
+    const model = await openQuickEditForAssociation(filter);
+
+    const fieldModel = model.subModels.fields[0];
+    expect(fieldModel.use).toBe('RecordSelectFieldModel');
+    expect(fieldModel.getStepParams('selectSettings', 'dataScope')).toEqual({ filter });
+  });
+
+  it('leaves the association editor unscoped when the column has no data scope', async () => {
+    const model = await openQuickEditForAssociation();
+
+    expect(model.subModels.fields[0].getStepParams('selectSettings', 'dataScope')).toBeUndefined();
+  });
+
+  it('seeds the edited row before the editor flows run so record variables resolve', async () => {
+    const filter = { logic: '$and', items: [{ path: 'level', operator: 'eq', value: '{{ctx.record.level}}' }] };
+
+    const model = await openQuickEditForAssociation(filter);
+
+    expect(model.resource.getData()).toMatchObject({ id: 7, level: 'senior' });
+    expect(JSON.stringify(model.subModels.fields[0].resource.getFilter() ?? null)).toContain('senior');
+  });
 });