@nocobase/client-v2 2.1.0-alpha.24 → 2.1.0-alpha.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-alpha.24",
+  "version": "2.1.0-alpha.26",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -24,9 +24,9 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/flow-engine": "2.1.0-alpha.24",
-    "@nocobase/sdk": "2.1.0-alpha.24",
-    "@nocobase/shared": "2.1.0-alpha.24",
+    "@nocobase/flow-engine": "2.1.0-alpha.26",
+    "@nocobase/sdk": "2.1.0-alpha.26",
+    "@nocobase/shared": "2.1.0-alpha.26",
     "antd": "5.24.2",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.10",
@@ -35,5 +35,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "effaf56a9b9ea2d40200c4c10854a84d9622f071"
+  "gitHead": "e6e6518030175b58080218bb4357642398bcb54a"
 }

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

@@ -8,11 +8,21 @@
  */
 
 import { PlusOutlined } from '@ant-design/icons';
-import { AddSubModelButton, DragOverlayConfig, FlowSettingsButton } from '@nocobase/flow-engine';
+import {
+  AddSubModelButton,
+  DragOverlayConfig,
+  FlowSettingsButton,
+  buildSubModelGroups,
+  buildSubModelItems,
+  type SubModelItem,
+  type SubModelItemsType,
+} from '@nocobase/flow-engine';
 import React from 'react';
 import { FilterManager } from '../blocks/filter-manager/FilterManager';
 import { GridModel } from './GridModel';
 
+const SELECT_SCENE_ALLOWED_OTHER_BLOCK_MODELS = ['JSBlockModel', 'IframeBlockModel', 'MarkdownBlockModel'] as const;
+
 export class BlockGridModel extends GridModel {
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
@@ -53,6 +63,36 @@ export class BlockGridModel extends GridModel {
     return this.context.filterManager;
   }
 
+  get addBlockItems(): SubModelItemsType | undefined {
+    if (this.context.view?.inputArgs?.scene !== 'select') {
+      return undefined;
+    }
+
+    return async (ctx) => {
+      const items = await buildSubModelGroups(['DataBlockModel', 'FilterBlockModel'])(ctx);
+      const allowedOtherBlockModels = SELECT_SCENE_ALLOWED_OTHER_BLOCK_MODELS.filter((modelName) =>
+        Boolean(ctx.engine.getModelClass(modelName)),
+      );
+      const otherBlockItems = (
+        await Promise.all(allowedOtherBlockModels.map((modelName) => buildSubModelItems(modelName)(ctx)))
+      )
+        .flat()
+        .sort((a, b) => (a.sort ?? 1000) - (b.sort ?? 1000));
+
+      if (otherBlockItems.length > 0) {
+        items.push({
+          key: 'select-scene-other-blocks',
+          type: 'group',
+          label: ctx.t('Other blocks'),
+          sort: 1000,
+          children: otherBlockItems,
+        } satisfies SubModelItem);
+      }
+
+      return items;
+    };
+  }
+
   serialize() {
     const data = super.serialize();
     data['filterManager'] = this.filterManager.getFilterConfigs();
@@ -60,8 +100,14 @@ export class BlockGridModel extends GridModel {
   }
 
   renderAddSubModelButton() {
+    const items = this.addBlockItems;
     return (
-      <AddSubModelButton model={this} subModelKey="items" subModelBaseClasses={this.subModelBaseClasses}>
+      <AddSubModelButton
+        model={this}
+        subModelKey="items"
+        items={items}
+        subModelBaseClasses={items ? undefined : this.subModelBaseClasses}
+      >
         <FlowSettingsButton icon={<PlusOutlined />} data-flow-add-block>
           {this.context.t('Add block')}
         </FlowSettingsButton>

package/src/flow/models/base/__tests__/BlockGridModel.selectSceneAddBlock.test.ts

@@ -0,0 +1,83 @@
+/**
+ * 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, FlowModel } from '@nocobase/flow-engine';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { BlockGridModel } from '../BlockGridModel';
+
+class BlockModel extends FlowModel {}
+BlockModel.define({ label: 'Other blocks' });
+
+class DataBlockModel extends BlockModel {}
+DataBlockModel.define({ label: 'Data blocks' });
+
+class FilterBlockModel extends BlockModel {}
+FilterBlockModel.define({ label: 'Filter blocks' });
+
+class SelectTableBlockModel extends DataBlockModel {}
+SelectTableBlockModel.define({ label: 'Table', children: false });
+
+class SelectFilterBlockModel extends FilterBlockModel {}
+SelectFilterBlockModel.define({ label: 'Filter', children: false });
+
+class JSBlockModel extends BlockModel {}
+JSBlockModel.define({ label: 'JS block' });
+
+class IframeBlockModel extends BlockModel {}
+IframeBlockModel.define({ label: 'Iframe' });
+
+class MarkdownBlockModel extends BlockModel {}
+MarkdownBlockModel.define({ label: 'Markdown' });
+
+class ActionPanelBlockModel extends BlockModel {}
+ActionPanelBlockModel.define({ label: 'Action panel' });
+
+class ReferenceBlockModel extends BlockModel {}
+ReferenceBlockModel.define({ label: 'Block template' });
+
+describe('BlockGridModel - select scene add block menu', () => {
+  let engine: FlowEngine;
+
+  beforeEach(() => {
+    engine = new FlowEngine();
+    engine.registerModels({
+      BlockModel,
+      DataBlockModel,
+      FilterBlockModel,
+      BlockGridModel,
+      SelectTableBlockModel,
+      SelectFilterBlockModel,
+      JSBlockModel,
+      IframeBlockModel,
+      MarkdownBlockModel,
+      ActionPanelBlockModel,
+      ReferenceBlockModel,
+    });
+  });
+
+  it('keeps only JS, iframe and markdown under other blocks in select scene', async () => {
+    engine.context.defineProperty('view', { value: { inputArgs: { scene: 'select' } } });
+    const model = engine.createModel<BlockGridModel>({ use: 'BlockGridModel' });
+
+    const itemsSource = model.addBlockItems;
+    expect(typeof itemsSource).toBe('function');
+
+    const items = await itemsSource!(model.context);
+    const otherBlocks = items.find((item) => item.key === 'select-scene-other-blocks');
+
+    expect(otherBlocks).toBeTruthy();
+    expect(otherBlocks?.type).toBe('group');
+    expect(Array.isArray(otherBlocks?.children)).toBe(true);
+
+    const childKeys = (otherBlocks?.children as any[]).map((item) => item.key);
+    expect(childKeys).toEqual(['JSBlockModel', 'IframeBlockModel', 'MarkdownBlockModel']);
+    expect(childKeys).not.toContain('ActionPanelBlockModel');
+    expect(childKeys).not.toContain('ReferenceBlockModel');
+  });
+});

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

@@ -28,6 +28,18 @@ import { FieldModel } from '../../base/FieldModel';
 import { FormComponent } from './FormBlockModel';
 import { FormItemModel } from './FormItemModel';
 
+export const QUICK_EDIT_POPOVER_MAX_HEIGHT = 'calc(100vh - 96px)';
+export const QUICK_EDIT_FORM_MAX_HEIGHT = 'calc(100vh - 160px)';
+export const QUICK_EDIT_MARKDOWN_HEIGHT = 'min(480px, calc(100vh - 320px))';
+
+export function getQuickEditFieldProps(collectionField: CollectionField, fieldProps?: Record<string, any>) {
+  const nextProps = { ...collectionField.getComponentProps(), ...(fieldProps || {}) };
+  if (['markdown', 'vditor'].includes(collectionField.interface) && nextProps.height == null) {
+    nextProps.height = QUICK_EDIT_MARKDOWN_HEIGHT;
+  }
+  return nextProps;
+}
+
 export class QuickEditFormModel extends FlowModel {
   fieldPath: string;
 
@@ -99,7 +111,10 @@ export class QuickEditFormModel extends FlowModel {
       placement: 'rightTop',
       styles: {
         body: {
-          width: 400,
+          width: 420,
+          maxHeight: QUICK_EDIT_POPOVER_MAX_HEIGHT,
+          overflowY: 'auto',
+          overscrollBehavior: 'contain',
         },
       },
       content: (popover) => {
@@ -160,20 +175,28 @@ export class QuickEditFormModel extends FlowModel {
 
     return (
       <FormComponent model={this}>
-        {this.mapSubModels('fields', (field) => {
-          return (
-            <FormItem
-              showLabel={false}
-              name={this.fieldPath}
-              key={field.uid}
-              initialValue={this.context.record?.[this.fieldPath]}
-              {...this.props}
-            >
-              <FieldModelRenderer model={field} fallback={<Skeleton.Input size="small" />} />
-            </FormItem>
-          );
-        })}
-        <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <div
+          style={{
+            minHeight: 0,
+            overflowY: 'auto',
+            maxHeight: QUICK_EDIT_FORM_MAX_HEIGHT,
+          }}
+        >
+          {this.mapSubModels('fields', (field) => {
+            return (
+              <FormItem
+                showLabel={false}
+                name={this.fieldPath}
+                key={field.uid}
+                initialValue={this.context.record?.[this.fieldPath]}
+                {...this.props}
+              >
+                <FieldModelRenderer model={field} fallback={<Skeleton.Input size="small" />} />
+              </FormItem>
+            );
+          })}
+        </div>
+        <Space style={{ display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}>
           <Button
             onClick={() => {
               this.viewContainer.close();
@@ -257,7 +280,7 @@ QuickEditFormModel.registerFlow({
               },
             },
           });
-          fieldModel.setProps({ ...collectionField.getComponentProps(), ...ctx.model._fieldProps });
+          fieldModel.setProps(getQuickEditFieldProps(collectionField, ctx.model._fieldProps));
           fieldModel.setProps({ sourceFieldModelUid: ctx.inputArgs.sourceFieldModelUid });
           ctx.model.context.defineProperty('collectionField', {
             get: () => collectionField,

package/src/flow/models/blocks/form/value-runtime/__tests__/runtime.test.ts

@@ -1706,6 +1706,299 @@ describe('FormValueRuntime (form assign rules)', () => {
     expect(formStub.getFieldValue(['users', 0, 'name'])).toBe('');
   });
 
+  it('clears explicit state for deleted to-many rows even when allValues is stale', () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({
+      roles: [{ title: 'Z', __is_new__: true }],
+    });
+
+    const blockModel: any = {
+      uid: 'form-assign-default-create-readd-row',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent: vi.fn(),
+      getAclActionName: () => 'create',
+    };
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as any });
+    runtime.mount({ sync: true });
+
+    lodashSet((formStub as any).__store, ['roles', 0, 'title'], 'custom');
+    runtime.handleFormFieldsChange([{ name: ['roles', 0, 'title'], touched: true } as any]);
+    expect((runtime as any).findExplicitHit('roles[0].title')).toBe('roles[0].title');
+
+    const staleAllValues = { roles: [{ title: 'custom', __is_new__: true }] };
+    lodashSet((formStub as any).__store, ['roles'], []);
+    runtime.handleFormValuesChange({ roles: [] }, staleAllValues);
+
+    expect((runtime as any).findExplicitHit('roles[0].title')).toBeNull();
+  });
+
+  it('moves explicit state with filterTargetKey identified to-many rows after deleting a preceding row', () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({
+      roles: [
+        { code: 'admin', title: 'same-title' },
+        { code: 'editor', title: 'custom' },
+      ],
+    });
+
+    const blockModel: any = {
+      uid: 'form-assign-default-create-shift-row',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent: vi.fn(),
+      getAclActionName: () => 'create',
+    };
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as any });
+    runtime.mount({ sync: true });
+
+    const blockCtx = createFieldContext(runtime);
+    const roleRowCollection: any = { getField: () => null, filterTargetKey: 'code' };
+    const rolesField: any = { type: 'hasMany', isAssociationField: () => true, targetCollection: roleRowCollection };
+    const rootCollection: any = { getField: (name: string) => (name === 'roles' ? rolesField : null) };
+    blockCtx.defineProperty('collection', { value: rootCollection });
+    blockModel.context = blockCtx;
+
+    lodashSet((formStub as any).__store, ['roles', 1, 'title'], 'same-title');
+    runtime.handleFormFieldsChange([{ name: ['roles', 1, 'title'], touched: true } as any]);
+    expect((runtime as any).findExplicitHit('roles[1].title')).toBe('roles[1].title');
+
+    const shiftedRow = formStub.getFieldValue(['roles', 1]);
+    lodashSet((formStub as any).__store, ['roles'], [shiftedRow]);
+    runtime.handleFormValuesChange({ roles: [shiftedRow] }, formStub.getFieldsValue());
+
+    expect((runtime as any).findExplicitHit('roles[1].title')).toBeNull();
+    expect((runtime as any).findExplicitHit('roles[0].title')).toBe('roles[0].title');
+  });
+
+  it('moves observable binding writes with filterTargetKey identified rows after deleting a preceding row', async () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({
+      roles: [{ code: 'admin' }, { code: 'editor' }],
+    });
+
+    const blockModel: any = {
+      uid: 'form-assign-default-observable-shift-row',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent: vi.fn(),
+      getAclActionName: () => 'create',
+    };
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as any });
+    runtime.mount({ sync: true });
+
+    const blockCtx = createFieldContext(runtime);
+    const roleRowCollection: any = { getField: () => null, filterTargetKey: 'code' };
+    const rolesField: any = { type: 'hasMany', isAssociationField: () => true, targetCollection: roleRowCollection };
+    const rootCollection: any = { getField: (name: string) => (name === 'roles' ? rolesField : null) };
+    blockCtx.defineProperty('collection', { value: rootCollection });
+    blockCtx.defineProperty('fieldIndex', { value: ['roles:1'] });
+    blockModel.context = blockCtx;
+
+    const defaultMeta = observable({ label: 'Editor' });
+    await runtime.setFormValues(blockCtx, [{ path: 'roles.meta', value: defaultMeta }], {
+      source: 'linkage',
+      markExplicit: false,
+    });
+
+    expect(formStub.getFieldValue(['roles', 1, 'meta'])).toEqual({ label: 'Editor' });
+
+    const shiftedRow = formStub.getFieldValue(['roles', 1]);
+    lodashSet((formStub as any).__store, ['roles'], [shiftedRow]);
+    runtime.handleFormValuesChange({ roles: [shiftedRow] }, formStub.getFieldsValue());
+
+    defaultMeta.label = 'Updated';
+
+    await waitFor(() => expect(formStub.getFieldValue(['roles', 0, 'meta'])).toEqual({ label: 'Updated' }));
+    expect(formStub.getFieldValue(['roles', 1])).toBeUndefined();
+  });
+
+  it('skips stale to-many row rules after the row index is out of bounds', async () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({
+      roles: [{ title: 'Z', __is_new__: true, __index__: 'row-1' }],
+    });
+
+    const blockModel: any = {
+      uid: 'form-assign-default-stale-row',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent: vi.fn(),
+      getAclActionName: () => 'create',
+    };
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as any });
+    runtime.mount({ sync: true });
+
+    const blockCtx = createFieldContext(runtime);
+    const roleRowCollection: any = { getField: () => null };
+    const rolesField: any = { type: 'hasMany', isAssociationField: () => true, targetCollection: roleRowCollection };
+    const rootCollection: any = { getField: (name: string) => (name === 'roles' ? rolesField : null) };
+    blockCtx.defineProperty('collection', { value: rootCollection });
+    blockModel.context = blockCtx;
+
+    const masterModel: any = {
+      uid: 'roles.title',
+      subModels: { field: {} },
+      getStepParams(flowKey: string, stepKey: string) {
+        if (flowKey === 'fieldSettings' && stepKey === 'init') {
+          return { fieldPath: 'roles.title' };
+        }
+        return undefined;
+      },
+    };
+    const masterCtx = createFieldContext(runtime);
+    masterCtx.defineProperty('blockModel', { value: blockModel });
+    masterCtx.defineProperty('model', { value: masterModel });
+    masterModel.context = masterCtx;
+
+    const staleRow: any = {
+      uid: 'roles.title',
+      isFork: true,
+      forkId: 'roles:stale',
+      subModels: { field: {} },
+      getStepParams(flowKey: string, stepKey: string) {
+        if (flowKey === 'fieldSettings' && stepKey === 'init') {
+          return { fieldPath: 'roles.title' };
+        }
+        return undefined;
+      },
+    };
+    const staleCtx = createFieldContext(runtime);
+    staleCtx.defineProperty('blockModel', { value: blockModel });
+    staleCtx.defineProperty('fieldIndex', { value: ['roles:1'] });
+    staleCtx.defineProperty('item', {
+      value: {
+        index: 1,
+        length: 1,
+        __is_new__: true,
+        value: { title: 'Z', __is_new__: true, __index__: 'row-1' },
+      },
+    });
+    staleCtx.defineProperty('model', { value: staleRow });
+    staleRow.context = staleCtx;
+    masterModel.forks = new Set([staleRow]);
+
+    blockCtx.defineProperty('engine', {
+      value: {
+        forEachModel: (cb: any) => {
+          cb(masterModel);
+        },
+      },
+    });
+
+    runtime.syncAssignRules([
+      {
+        key: 'r1',
+        enable: true,
+        targetPath: 'roles.title',
+        mode: 'default',
+        condition: { logic: '$and', items: [] },
+        value: 'Z',
+      },
+    ]);
+
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(formStub.getFieldValue(['roles'])).toHaveLength(1);
+    expect(formStub.getFieldValue(['roles', 1])).toBeUndefined();
+  });
+
+  it('skips to-many row rules when filterTargetKey identity does not match the current row at that index', async () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({
+      roles: [{ code: 'admin', title: '' }],
+    });
+
+    const blockModel: any = {
+      uid: 'form-assign-default-mismatched-row',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent: vi.fn(),
+      getAclActionName: () => 'create',
+    };
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as any });
+    runtime.mount({ sync: true });
+
+    const blockCtx = createFieldContext(runtime);
+    const roleRowCollection: any = { getField: () => null, filterTargetKey: 'code' };
+    const rolesField: any = { type: 'hasMany', isAssociationField: () => true, targetCollection: roleRowCollection };
+    const rootCollection: any = { getField: (name: string) => (name === 'roles' ? rolesField : null) };
+    blockCtx.defineProperty('collection', { value: rootCollection });
+    blockModel.context = blockCtx;
+
+    const masterModel: any = {
+      uid: 'roles.title',
+      subModels: { field: {} },
+      getStepParams(flowKey: string, stepKey: string) {
+        if (flowKey === 'fieldSettings' && stepKey === 'init') {
+          return { fieldPath: 'roles.title' };
+        }
+        return undefined;
+      },
+    };
+    const masterCtx = createFieldContext(runtime);
+    masterCtx.defineProperty('blockModel', { value: blockModel });
+    masterCtx.defineProperty('model', { value: masterModel });
+    masterModel.context = masterCtx;
+
+    const mismatchedRow: any = {
+      uid: 'roles.title',
+      isFork: true,
+      forkId: 'roles:mismatched',
+      subModels: { field: {} },
+      getStepParams(flowKey: string, stepKey: string) {
+        if (flowKey === 'fieldSettings' && stepKey === 'init') {
+          return { fieldPath: 'roles.title' };
+        }
+        return undefined;
+      },
+    };
+    const rowCtx = createFieldContext(runtime);
+    rowCtx.defineProperty('blockModel', { value: blockModel });
+    rowCtx.defineProperty('fieldIndex', { value: ['roles:0'] });
+    rowCtx.defineProperty('item', {
+      value: {
+        index: 0,
+        length: 1,
+        value: { code: 'editor', title: 'custom' },
+      },
+    });
+    rowCtx.defineProperty('model', { value: mismatchedRow });
+    mismatchedRow.context = rowCtx;
+    masterModel.forks = new Set([mismatchedRow]);
+
+    blockCtx.defineProperty('engine', {
+      value: {
+        forEachModel: (cb: any) => {
+          cb(masterModel);
+        },
+      },
+    });
+
+    runtime.syncAssignRules([
+      {
+        key: 'r1',
+        enable: true,
+        targetPath: 'roles.title',
+        mode: 'default',
+        condition: { logic: '$and', items: [] },
+        value: 'Z',
+      },
+    ]);
+
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(formStub.getFieldValue(['roles', 0, 'title'])).toBe('');
+  });
+
   it('keeps default-disabled for edited to-many leaf when onValuesChange only provides top-level path', async () => {
     const engineEmitter = new EventEmitter();
     const blockEmitter = new EventEmitter();

package/src/flow/models/blocks/form/value-runtime/__tests__/subtable-nested.test.ts

@@ -82,8 +82,9 @@ describe('SubTableColumnModel (nested subform)', () => {
       parentFieldIndex: ['users:0'],
     });
 
-    const rowFork = column.getFork('row:users:0:1');
-    expect(rowFork?.context?.fieldIndex).toEqual(['users:0', 'roles:1']);
+    const [rowFork] = Array.from(column.forks ?? []);
+    expect(rowFork).toBeDefined();
+    expect((rowFork as any)?.context?.fieldIndex).toEqual(['users:0', 'roles:1']);
 
     runtime.syncAssignRules([
       {