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

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

@@ -0,0 +1,175 @@
+/**
+ * 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 { act, render, screen, waitFor, cleanup } from '@testing-library/react';
+import { Form, Input } from 'antd';
+import { afterEach, expect, it, vi } from 'vitest';
+import { FlowEngine, SingleRecordResource } from '@nocobase/flow-engine';
+import { generateFlowModelRdFromToken } from '@nocobase/utils/client';
+import { CreateFormModel, EditFormModel, FormGridModel, FormItemModel, FormComponent } from '../../../..';
+import { fieldLinkageRules, linkageAssignField } from '../../../../actions/linkageRules';
+
+afterEach(cleanup);
+
+it.each([
+  { use: 'CreateFormModel', mode: 'default', expected: 'STAFF-001' },
+  { use: 'EditFormModel', mode: 'default', expected: '' },
+  { use: 'EditFormModel', mode: 'override', expected: 'STAFF-001' },
+])('$use respects $mode linkage after a delayed popup variable response', async ({ use, mode, expected }) => {
+  const uid = `popup-${use}-${mode}`;
+  const engine = new FlowEngine();
+  engine.registerModels({ CreateFormModel, EditFormModel, FormGridModel, FormItemModel });
+  engine.registerActions({ fieldLinkageRules, linkageAssignField });
+  engine.context.dataSourceManager.getDataSource('main').addCollection({
+    name: 't1_user',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number' },
+      { name: 'staffseq', type: 'string', interface: 'input' },
+      { name: 'staffname', type: 'string', interface: 'input' },
+    ],
+  });
+  const form = engine.createModel<CreateFormModel | EditFormModel>({
+    uid,
+    use,
+    stepParams: { resourceSettings: { init: { dataSourceKey: 'main', collectionName: 't1_user', filterByTk: 1 } } },
+    subModels: {
+      grid: {
+        uid: `${uid}-grid`,
+        use: 'FormGridModel',
+        subModels: {
+          items: [
+            {
+              uid: `${uid}-staffname`,
+              use: 'FormItemModel',
+              props: { name: 'staffname' },
+              stepParams: {
+                fieldSettings: { init: { dataSourceKey: 'main', collectionName: 't1_user', fieldPath: 'staffname' } },
+              },
+            },
+          ],
+        },
+      },
+    },
+  });
+  const configured = '{{ ctx.popup.record.staffseq }}';
+  const rules = {
+    value: [
+      {
+        key: 'rule',
+        title: 'Rule',
+        enable: true,
+        condition: { logic: '$and', items: [] },
+        actions: [
+          {
+            key: 'assign',
+            name: 'linkageAssignField',
+            params: {
+              value: [
+                {
+                  key: 'field',
+                  enable: true,
+                  mode,
+                  condition: { logic: '$and', items: [] },
+                  targetPath: 'staffname',
+                  value: configured,
+                },
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  };
+  form.setStepParams('eventSettings', 'linkageRules', rules);
+  const saved = JSON.parse(JSON.stringify(form.serialize()));
+  expect(saved.subModels.grid.stepParams.eventSettings.linkageRules).toEqual(rules);
+  expect(saved.stepParams.eventSettings?.linkageRules).toBeUndefined();
+
+  const token = `test.${Buffer.from(JSON.stringify({ userId: 2, signInTime: 'member-form' })).toString('base64url')}.sig`;
+  type Item = { id: string; rd: string; template: unknown; contextParams: unknown };
+  let resolveResponse: (() => void) | undefined;
+  const responseReady = new Promise<void>((resolve) => {
+    resolveResponse = resolve;
+  });
+  const request = vi.fn(async ({ data }: { data: { values: { batch: Item[] } } }) => {
+    const batch = data.values.batch;
+    expect(batch[0].rd).toBe(generateFlowModelRdFromToken(form.uid, token));
+    expect(batch[0].contextParams).toEqual({
+      'popup.record': { collection: 't1_user', dataSourceKey: 'main', filterByTk: '1' },
+    });
+    await responseReady;
+    return {
+      data: {
+        data: {
+          results: batch.map((item) => ({
+            id: item.id,
+            data: JSON.parse(JSON.stringify(item.template).replaceAll(configured, 'STAFF-001')),
+          })),
+        },
+      },
+    };
+  });
+  engine.context.defineProperty('api', { value: { auth: { token, role: 'member' }, request } });
+  form.context.defineProperty('popup', {
+    value: { record: { id: 1 } },
+    resolveOnServer: true,
+    meta: {
+      type: 'object',
+      buildVariablesParams: () => ({ record: { collection: 't1_user', dataSourceKey: 'main', filterByTk: '1' } }),
+    },
+  });
+  const resource = form.resource as SingleRecordResource;
+  resource.setData(use === 'EditFormModel' ? { id: 1, staffname: null } : {});
+  function View() {
+    form.useHooksBeforeRender();
+    return (
+      <FormComponent model={form}>
+        <Form.Item name="staffname">
+          <Input aria-label="staffname" />
+        </Form.Item>
+      </FormComponent>
+    );
+  }
+  const dispatchEvent = vi.spyOn(form, 'dispatchEvent');
+  const view = render(<View />);
+  try {
+    form.formValueRuntime?.mount({ sync: true });
+    // Simulate the field mounting, without involving the page layout and field-renderer plugins.
+    engine.emitter.emit('model:mounted', { model: form.subModels.grid.subModels.items[0] });
+    let pending: Promise<unknown> | undefined;
+    await act(async () => {
+      pending = form.applyFlow('eventSettings');
+    });
+    await waitFor(() => expect(request).toHaveBeenCalled());
+    await act(async () => {
+      resolveResponse?.();
+      await pending;
+    });
+    if (mode === 'default') {
+      // Resolving a default value must not overwrite an existing edit record.
+      expect(form.subModels.grid.subModels.items[0].props.initialValue).toBe('STAFF-001');
+    }
+    await waitFor(() => expect((screen.getByLabelText('staffname') as HTMLInputElement).value).toBe(expected));
+    expect(form.form.getFieldValue('staffname')).toBe(expected || null);
+  } finally {
+    resolveResponse?.();
+    await act(async () => {
+      view.unmount();
+      form.formValueRuntime?.dispose();
+      // Drain automatic linkage refreshes before another engine starts its variable batch.
+      await Promise.all(
+        dispatchEvent.mock.results.filter((result) => result.type === 'return').map((result) => result.value),
+      );
+    });
+    dispatchEvent.mockRestore();
+    engine.disposeScheduler();
+  }
+});

package/src/flow/models/blocks/js-block/JSBlock.tsx

@@ -152,6 +152,7 @@ const JSBlockPlainHost = ({
   afterContent,
   contentRef,
   marginBlock,
+  minHeight,
   ...rest
 }: React.HTMLAttributes<HTMLDivElement> & {
   uid: string;
@@ -161,6 +162,7 @@ const JSBlockPlainHost = ({
   afterContent?: React.ReactNode;
   contentRef: React.RefObject<HTMLDivElement>;
   marginBlock: number;
+  minHeight: number;
 }) => {
   const hostRef = React.useRef<HTMLDivElement | null>(null);
   const resolvedHeight = usePlainHostHeight({ height, heightMode, hostRef, marginBlock });
@@ -175,7 +177,7 @@ const JSBlockPlainHost = ({
         display: 'flex',
         flexDirection: 'column',
         height: resolvedHeight ?? undefined,
-        minHeight: 0,
+        minHeight,
         overflow: 'auto',
         ...(style || {}),
       }}
@@ -228,6 +230,8 @@ export class JSBlockModel extends BlockModel {
           afterContent={afterContent}
           contentRef={this.context.ref}
           marginBlock={this.context.themeToken?.marginBlock ?? 0}
+          // Keep empty blocks reachable by the settings overlay while the UI editor is active.
+          minHeight={this.context.flowSettingsEnabled ? this.context.themeToken?.controlHeightLG ?? 40 : 0}
         />
       );
     }

package/src/flow/models/blocks/js-block/__tests__/JSBlockModel.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { App, ConfigProvider } from 'antd';
-import { render } from '@nocobase/test/client';
+import { act, render, waitFor } from '@nocobase/test/client';
 import { describe, expect, it, vi } from 'vitest';
 import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { JSBlockModel } from '../JSBlock';
@@ -78,6 +78,28 @@ describe('JSBlockModel', () => {
     expect(model.context.ref.current).toBe(host?.firstElementChild);
   });
 
+  it('keeps an empty cardless block reachable only while the UI editor is active', async () => {
+    const { engine, model } = createJSBlock('js-block-empty-without-card', false, { style: undefined });
+    await engine.flowSettings.disable();
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-empty-without-card') as HTMLElement;
+    const content = model.context.ref.current;
+
+    expect(host.style.minHeight).toBe('0');
+    await act(async () => {
+      await engine.flowSettings.enable();
+    });
+    await waitFor(() => expect(host.style.minHeight).toBe('40px'));
+    expect(model.context.ref.current).toBe(content);
+    expect(container.querySelector('.ant-card')).toBeNull();
+
+    await act(async () => {
+      await engine.flowSettings.disable();
+    });
+    await waitFor(() => expect(host.style.minHeight).toBe('0'));
+    expect(model.context.ref.current).toBe(content);
+  });
+
   it('keeps cardless specified-height content scrollable inside the plain host', () => {
     const { engine, model } = createJSBlock('js-block-without-card-height', false, {
       heightMode: 'specifyValue',

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

@@ -37,6 +37,7 @@ import { getRowKey } from './utils';
 import { getSavedAssociationTitleField, getTableColumnSortField } from './sortUtils';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../../../internal/utils/rebuildFieldSubModel';
 import { getSavedDateTimeFormatParams, resolveDateTimeDisplayProps } from '../../../utils/dateTimeDisplayProps';
+import { QuickEditDataScopeInput, resolveQuickEditDataScopeStep } from '../../../internal/utils/quickEditDataScope';
 
 export function FieldDeletePlaceholder(props: any) {
   const { t } = useTranslation();
@@ -542,6 +543,36 @@ TableColumnModel.registerFlow({
         ctx.model.setProps('editable', ctx.model.associationPathName ? false : params.editable);
       },
     },
+    quickEditDataScope: {
+      title: tExpr('Data scope'),
+      uiMode: {
+        type: 'dialog',
+        props: {
+          width: 800,
+        },
+      },
+      uiSchema: {
+        filter: {
+          type: 'object',
+          'x-decorator': 'FormItem',
+          'x-component': QuickEditDataScopeInput,
+        },
+      },
+      useRawParams: true,
+      defaultParams: {
+        filter: { logic: '$and', items: [] },
+      },
+      hideInSettings(ctx) {
+        if (ctx.model.associationPathName || !ctx.model.props.editable) {
+          return true;
+        }
+        return !resolveQuickEditDataScopeStep(ctx, ctx.collectionField);
+      },
+      handler() {
+        // Settings-only step. The filter is kept raw on the column and handed to the editor model that
+        // QuickEditFormModel builds when the popover opens, so there is nothing to apply to the column itself.
+      },
+    },
     model: {
       title: tExpr('Field component'),
       use: 'displayFieldComponent',

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

@@ -9,8 +9,36 @@
 
 import { FlowEngine } from '@nocobase/flow-engine';
 import { describe, expect, it, vi } from 'vitest';
+// Prime the model module graph so the editable field bindings used by the quick edit data scope setting are registered.
+import '../../../index';
+import { RecordSelectFieldModel } from '../../../fields/AssociationFieldModel/RecordSelectFieldModel';
 import { TableColumnModel } from '../TableColumnModel';
 
+const createQuickEditDataScopeCtx = (
+  overrides: { associationPathName?: string; editable?: boolean; isAssociation?: boolean } = {},
+) => {
+  const engine = new FlowEngine();
+  engine.registerModels({ RecordSelectFieldModel });
+  const { associationPathName, editable = true, isAssociation = true } = overrides;
+  return {
+    engine,
+    model: {
+      associationPathName,
+      props: { editable },
+    },
+    collectionField: {
+      interface: isAssociation ? 'm2o' : 'input',
+      isAssociationField: () => isAssociation,
+      targetCollection: isAssociation ? { template: 'general' } : undefined,
+    },
+  };
+};
+
+const getQuickEditDataScopeStep = (engine: FlowEngine) => {
+  const model = new TableColumnModel({ uid: 'table-column-quick-edit-data-scope', flowEngine: engine } as any);
+  return model.getFlow('tableColumnSettings')?.steps?.quickEditDataScope as any;
+};
+
 describe('TableColumnModel sorter settings', () => {
   it('clamps custom column width to the minimum value', () => {
     const engine = new FlowEngine();
@@ -30,6 +58,42 @@ describe('TableColumnModel sorter settings', () => {
     expect(setProps).toHaveBeenCalledWith('width', 10);
   });
 
+  it('offers the quick edit data scope on an editable association column', async () => {
+    const engine = new FlowEngine();
+    const step = getQuickEditDataScopeStep(engine);
+
+    const hidden = await step.hideInSettings(createQuickEditDataScopeCtx());
+
+    expect(hidden).toBe(false);
+  });
+
+  it('hides the quick edit data scope when quick edit is off', async () => {
+    const engine = new FlowEngine();
+    const step = getQuickEditDataScopeStep(engine);
+
+    const hidden = await step.hideInSettings(createQuickEditDataScopeCtx({ editable: false }));
+
+    expect(hidden).toBe(true);
+  });
+
+  it('hides the quick edit data scope for non-association columns', async () => {
+    const engine = new FlowEngine();
+    const step = getQuickEditDataScopeStep(engine);
+
+    const hidden = await step.hideInSettings(createQuickEditDataScopeCtx({ isAssociation: false }));
+
+    expect(hidden).toBe(true);
+  });
+
+  it('hides the quick edit data scope for relation path columns', async () => {
+    const engine = new FlowEngine();
+    const step = getQuickEditDataScopeStep(engine);
+
+    const hidden = await step.hideInSettings(createQuickEditDataScopeCtx({ associationPathName: 'department' }));
+
+    expect(hidden).toBe(true);
+  });
+
   it('hides quick edit setting for relation path columns added from association groups', async () => {
     const engine = new FlowEngine();
     const model = new TableColumnModel({ uid: 'table-column-relation-path-quick-edit', flowEngine: engine } as any);

package/src/flow/models/fields/AssociationFieldModel/CascadeSelectFieldModel.tsx

@@ -25,6 +25,7 @@ import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable }
 import { CSS } from '@dnd-kit/utilities';
 import { AssociationFieldModel } from './AssociationFieldModel';
 import { transformNestedData } from '../ClickableFieldModel';
+import { syncQuickEditPreventClose } from '../../../internal/utils/quickEditViewContainer';
 
 type CascadeHydrateStatus = 'pending' | 'done';
 
@@ -373,7 +374,12 @@ export class CascadeSelectInnerFieldModel extends AssociationFieldModel {
     this.setProps({ onPopupScroll: fn });
   }
   set onDropdownVisibleChange(fn) {
-    this.setProps({ onDropdownVisibleChange: fn });
+    this.setProps({
+      onDropdownVisibleChange: (visible: boolean) => {
+        syncQuickEditPreventClose(this, visible);
+        fn(visible);
+      },
+    });
   }
   set onSearch(fn) {
     this.setProps({ onSearch: fn });
@@ -745,7 +751,10 @@ async function originalHandler(ctx, params) {
 
     const targetInterface = targetLabelField.getInterfaceOptions();
 
-    const operator = targetInterface?.filterable?.operators?.[0]?.value || '$includes';
+    const operator =
+      targetLabelField.type === 'string' || targetLabelField.dataType === 'string'
+        ? '$includes'
+        : targetInterface?.filterable?.operators?.[0]?.value || '$includes';
 
     const searchText = ctx.inputArgs.searchText?.trim();
     const resource = ctx.model.resource;

package/src/flow/models/fields/AssociationFieldModel/PopupSubTableFieldModel/PopupSubTableFieldModel.tsx

@@ -19,7 +19,7 @@ import {
   createCurrentRecordMetaFactory,
   useFlowModel,
 } from '@nocobase/flow-engine';
-import { Table, Button, Space } from 'antd';
+import { Table, Button, Space, theme } from 'antd';
 import { uid } from '@formily/shared';
 import classNames from 'classnames';
 import { DragEndEvent } from '@dnd-kit/core';
@@ -190,6 +190,7 @@ const AddFieldColumn = ({ model }) => {
 };
 
 const DisplayTable = (props) => {
+  const { token } = theme.useToken();
   const {
     pageSize,
     value,
@@ -269,7 +270,7 @@ const DisplayTable = (props) => {
           },
         },
         ...baseColumns,
-        { key: 'empty' },
+        { key: 'empty', render: () => <div style={{ minHeight: token.controlHeight }} /> },
       ].filter(Boolean),
     ) as any[];
 
@@ -283,7 +284,7 @@ const DisplayTable = (props) => {
     }
 
     return cols;
-  }, [baseColumns, enableIndexColumn, currentPage, currentPageSize, isConfigMode, model]);
+  }, [baseColumns, enableIndexColumn, currentPage, currentPageSize, isConfigMode, model, token.controlHeight]);
   return (
     <Table
       tableLayout="fixed"

package/src/flow/models/fields/AssociationFieldModel/RecordPickerFieldModel.tsx

@@ -35,6 +35,7 @@ import {
 import {
   buildOpenerUids,
   LabelByField,
+  normalizeAssociationFieldNames,
   type AssociationFieldNames,
   useAssociationValueHydration,
 } from './recordSelectShared';
@@ -331,6 +332,7 @@ function RecordPickerField(props) {
   const { fieldNames, onClick, disabled } = props;
   const ctx = useFlowContext();
   const allowMultiple = canRecordPickerSelectMultiple(ctx.collectionField, props.allowMultiple);
+  const normalizedFieldNames = normalizeAssociationFieldNames(fieldNames, ctx.collectionField?.targetCollection);
   useEffect(() => {
     ctx.model.selectedRows.value = props.value;
   }, [ctx.model.selectedRows, props.value]);
@@ -338,22 +340,23 @@ function RecordPickerField(props) {
     model: ctx.model,
     value: props.value,
     isMultiple: allowMultiple,
-    fieldNames,
+    fieldNames: normalizedFieldNames,
     onChange: props.onChange,
   });
 
   return (
     <Select
       {...props}
+      fieldNames={normalizedFieldNames}
       open={false}
       onClick={(e) => {
         if (!disabled) {
           onClick(e);
         }
       }}
-      value={normalizeRecordPickerValue(props.value, fieldNames, allowMultiple)}
+      value={normalizeRecordPickerValue(props.value, normalizedFieldNames, allowMultiple)}
       labelRender={(item) => {
-        return <LabelByField option={item} fieldNames={fieldNames} />;
+        return <LabelByField option={item} fieldNames={normalizedFieldNames} />;
       }}
       labelInValue
       mode={allowMultiple ? 'multiple' : undefined}

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -41,6 +41,7 @@ import { BlockSceneEnum } from '../../base/BlockModel';
 import { ActionWithoutPermission } from '../../base/ActionModel';
 import { EditFormModel } from '../../blocks';
 import { hasAncestorModel } from './recordSelectSettingsUtils';
+import { syncQuickEditPreventClose } from '../../../internal/utils/quickEditViewContainer';
 
 function RemoteModelRenderer({ options }) {
   const ctx = useFlowViewContext();
@@ -65,6 +66,11 @@ function RemoteModelRenderer({ options }) {
 
 export function CreateContent({ model, toOne = false }) {
   const ctx = useFlowContext();
+  // Quick-create popups isolate business context but must retain the field's configuration mode.
+  ctx.defineProperty('flowSettingsEnabled', {
+    get: () => model.context.flowSettingsEnabled,
+    cache: false,
+  });
   const { Header, type } = ctx.view;
   model._closeView = ctx.view.close;
   return (
@@ -308,6 +314,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
             }
             setKeepOpenRuntime({ preventCloseOnSelect: false, open });
           }
+          syncQuickEditPreventClose(model, open);
           others.onDropdownVisibleChange?.(open);
         }}
         optionRender={({ data }) => {
@@ -583,7 +590,10 @@ async function originalHandler(ctx, params) {
 
     const targetInterface = targetLabelField.getInterfaceOptions();
 
-    const operator = targetInterface?.filterable?.operators?.[0]?.value || '$includes';
+    const operator =
+      targetLabelField.type === 'string' || targetLabelField.dataType === 'string'
+        ? '$includes'
+        : targetInterface?.filterable?.operators?.[0]?.value || '$includes';
 
     const searchText = ctx.inputArgs.searchText?.trim();
 
@@ -874,6 +884,8 @@ RecordSelectFieldModel.registerFlow({
             dataSourceKey: ctx.collection.dataSourceKey,
             collectionName: ctx.collectionField?.target,
             ...(associationName && sourceId != null ? { associationName, sourceId } : {}),
+            // 上级记录暂无主键（如审批配置态表单）时不能传 associationName，否则弹窗内新建的区块会绑定到关联资源；改传 sourceAssociationName，仅用于展示“当前弹窗上级记录”变量
+            ...(associationName && sourceId == null ? { sourceAssociationName: associationName } : {}),
             collectionField: ctx.collectionField,
             openerUids,
             onChange: (e) => {