@nocobase/client-v2 2.4.0-alpha.5 → 2.4.0-alpha.7

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

@@ -47,6 +47,146 @@ class MockFlowModelRepository implements IFlowModelRepository {
 }
 
 describe('assignFieldValuesFlow (editor)', () => {
+  it('shows the deleted-field placeholder for a stale assigned value', 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 } });
+    engine.context.defineProperty('flowSettingsEnabled', { value: true });
+
+    const main = engine.context.dataSourceManager.getDataSource('main');
+    main.addCollection({
+      name: 'users',
+      fields: [{ name: 'nickname', type: 'string', interface: 'input' }],
+    });
+    const users = engine.context.dataSourceManager.getCollection('main', 'users');
+
+    const action = engine.createModel({
+      use: 'FlowModel',
+      uid: 'act-assign-deleted-field',
+    });
+    action.setStepParams('assignSettings', 'assignFieldValues', {
+      assignedValues: { deletedField: 'stale value' },
+    });
+    action.context.defineProperty('blockModel', { value: { collection: users } });
+
+    const step = createAssignFieldValuesStep({ settingsFlowKey: 'assignSettings' });
+    const Editor = step.uiSchema().editor?.['x-component'] as React.ComponentType;
+    const flowSettingsCtx = new FlowRuntimeContext(action, 'assignSettings', 'settings');
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <FlowSettingsContextProvider value={flowSettingsCtx}>
+              <Editor />
+            </FlowSettingsContextProvider>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Fields/ })).toBeInTheDocument();
+      expect(screen.getByText(/deletedField.*may have been deleted/)).toBeInTheDocument();
+      const form = engine.findModelByParentId<AssignFormModel>(action.uid, 'assignForm');
+      expect(form).toBeDefined();
+      expect(form?.subModels.grid.subModels.items || []).toHaveLength(1);
+      expect(form?.getAssignedValues()).toEqual({});
+    });
+  });
+
+  it('shows the standard deleted-field placeholder for a persisted assigned field model', 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 } });
+    engine.context.defineProperty('flowSettingsEnabled', { value: true });
+
+    const main = engine.context.dataSourceManager.getDataSource('main');
+    main.addCollection({
+      name: 'users',
+      fields: [{ name: 'nickname', type: 'string', interface: 'input' }],
+    });
+    const users = engine.context.dataSourceManager.getCollection('main', 'users');
+
+    const action = engine.createModel({
+      use: 'FlowModel',
+      uid: 'act-assign-persisted-deleted-field',
+    });
+    action.setStepParams('assignSettings', 'assignFieldValues', {
+      assignedValues: { deletedField: 'stale value' },
+    });
+    action.context.defineProperty('blockModel', { value: { collection: users } });
+
+    const form = engine.createModel<AssignFormModel>({
+      use: 'AssignFormModel',
+      uid: 'form-assign-persisted-deleted-field',
+      parentId: action.uid,
+      subKey: 'assignForm',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+          },
+        },
+      },
+    });
+    action.setSubModel('assignForm', form);
+    form.subModels.grid.addSubModel('items', {
+      use: 'AssignFormItemModel',
+      uid: 'item-assign-persisted-deleted-field',
+      stepParams: {
+        fieldSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+            fieldPath: 'deletedField',
+          },
+          assignValue: { value: 'stale value' },
+        },
+      },
+    });
+    form.subModels.grid.resetRows(true);
+
+    const step = createAssignFieldValuesStep({ settingsFlowKey: 'assignSettings' });
+    const Editor = step.uiSchema().editor?.['x-component'] as React.ComponentType;
+    const flowSettingsCtx = new FlowRuntimeContext(action, 'assignSettings', 'settings');
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <FlowSettingsContextProvider value={flowSettingsCtx}>
+              <Editor />
+            </FlowSettingsContextProvider>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/deletedField.*may have been deleted/)).toBeInTheDocument();
+      expect(form.subModels.grid.subModels.items).toHaveLength(1);
+      expect(form.getAssignedValues()).toEqual({});
+    });
+  });
+
   it('repairs AssignFormModel resource init and clears cached collection', async () => {
     const engine = new FlowEngine();
     engine.setModelRepository(new MockFlowModelRepository());

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

@@ -21,6 +21,35 @@ describe('FilterFormGridModel.toggleFormFieldsCollapse', () => {
     engine.registerModels({ FilterFormGridModel });
   });
 
+  it.each([false, true])('preserves collapsed fields in mobile layout with settings enabled: %s', (settingsEnabled) => {
+    engine.flowSettings[settingsEnabled ? 'enable' : 'disable']();
+    const rows = {
+      first: [['field-1']],
+      second: [['field-2']],
+      third: [['field-3']],
+    };
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'mobile-filter-grid',
+      use: 'FilterFormGridModel',
+      props: { rows },
+      subModels: {
+        items: ['field-1', 'field-2', 'field-3'].map((uid) => ({ use: 'FlowModel', uid })),
+      },
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, { rows });
+    type VisibleLayoutReader = { getVisibleLayout(): { rows: Record<string, string[][]> } };
+    const renderedItems = () =>
+      Object.values((model as unknown as VisibleLayoutReader).getVisibleLayout().rows).flat(2);
+
+    expect(renderedItems()).toEqual(['field-1', 'field-2', 'field-3']);
+    model.toggleFormFieldsCollapse(true, 1);
+    expect(renderedItems()).toEqual(['field-1']);
+    model.toggleFormFieldsCollapse(false, 1);
+    expect(renderedItems()).toEqual(['field-1', 'field-2', 'field-3']);
+    expect(model.getStepParams(GRID_FLOW_KEY, GRID_STEP).rows).toEqual(rows);
+  });
+
   it('uses rowOrder from the full layout when collapsing after reorder', () => {
     const model = engine.createModel<FilterFormGridModel>({
       uid: 'filter-grid-collapse-order',

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

@@ -351,7 +351,7 @@ export const FieldComponentProps: React.FC<{ fieldModel: string; source: string[
       <FormItem label={t('Options')}>
         <Space direction="vertical" size={8} style={{ width: '100%' }}>
           {options.map((option: any, index: number) => (
-            <Space key={`${option.value}-${index}`} style={{ width: '100%' }} size={8} wrap align="start">
+            <Space key={index} style={{ width: '100%' }} size={8} wrap align="start">
               <Input
                 style={{ flex: 1, minWidth: 120 }}
                 placeholder={t('Option label')}

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/__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/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/SubTableFieldModel/SubTableField.tsx

@@ -8,7 +8,7 @@
  */
 
 import { CloseOutlined, ZoomInOutlined } from '@ant-design/icons';
-import { Table, Form, Space, Button } from 'antd';
+import { Table, Form, Space, Button, theme } from 'antd';
 import { css } from '@emotion/css';
 import { useTranslation } from 'react-i18next';
 import { PlusOutlined } from '@ant-design/icons';
@@ -51,6 +51,7 @@ function shouldRefreshForChangedPaths(fieldPath: unknown, changedPaths: unknown)
 
 export function SubTableField(props) {
   const { t } = useTranslation();
+  const { token } = theme.useToken();
   const {
     onChange,
     columns,
@@ -180,6 +181,9 @@ export function SubTableField(props) {
         // the current array index so Form.Item can rebind after reordering/removal.
         const rowBindingKey = `${rowIdentity}:${pageRowIdx}`;
         const columnKey = col.dataIndex ?? col.key ?? 'cell';
+        if (col.key === '_empty') {
+          return <div style={{ minHeight: token.controlHeight }} />;
+        }
         if (!col.render) {
           return;
         }