@nocobase/client-v2 2.1.0-beta.43 → 2.1.0-beta.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-beta.43",
+  "version": "2.1.0-beta.44",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.1.0-beta.43",
-    "@nocobase/flow-engine": "2.1.0-beta.43",
-    "@nocobase/sdk": "2.1.0-beta.43",
-    "@nocobase/shared": "2.1.0-beta.43",
-    "@nocobase/utils": "2.1.0-beta.43",
+    "@nocobase/evaluators": "2.1.0-beta.44",
+    "@nocobase/flow-engine": "2.1.0-beta.44",
+    "@nocobase/sdk": "2.1.0-beta.44",
+    "@nocobase/shared": "2.1.0-beta.44",
+    "@nocobase/utils": "2.1.0-beta.44",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -45,5 +45,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "6d7750e2373bf2451d246de88cc1f62491685e18"
+  "gitHead": "540d4897b1696cc24c0754521b0b766978b4933c"
 }

package/src/flow/admin-shell/admin-layout/AdminLayoutMenuModels.tsx

@@ -55,6 +55,15 @@ const insertPositionToMethod = {
   afterEnd: 'insertAfter',
 } as const;
 
+const omitMenuRuntimeProps = (props: Record<string, unknown> = {}) => {
+  const persistableProps = { ...props };
+  delete persistableProps.item;
+  delete persistableProps.dom;
+  delete persistableProps.options;
+  delete persistableProps.renderType;
+  return persistableProps;
+};
+
 export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStructure> {
   private creationPersisted = false;
   private persistedStateHydrated = false;
@@ -261,6 +270,12 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
     return currentFlowCount > 0 || initialFlowCount > 0;
   }
 
+  serialize(): ReturnType<FlowModel['serialize']> {
+    const data = super.serialize();
+    data.props = omitMenuRuntimeProps(data.props);
+    return data;
+  }
+
   setHidden(value: boolean) {
     const previous = this.hidden;
     super.setHidden(value);
@@ -698,7 +713,6 @@ AdminLayoutMenuItemModel.registerFlow({
 AdminLayoutMenuItemModel.registerFlow({
   key: 'menuSettings',
   title: 'Menu settings',
-  manual: true,
   steps: {
     edit: {
       title: 'Edit',

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutMenuModels.test.ts

@@ -950,6 +950,73 @@ describe('AdminLayoutModel menu items', () => {
     });
   });
 
+  it('should save menu linkage rules without serializing runtime render props', async () => {
+    type SerializedFlowModel = Record<string, unknown> & {
+      props?: Record<string, unknown>;
+      subModels?: unknown;
+    };
+    const save = vi.fn(
+      async (targetModel: { serialize: () => SerializedFlowModel }, options?: { onlyStepParams?: boolean }) => {
+        const data = targetModel.serialize();
+        if (options?.onlyStepParams) {
+          delete data.subModels;
+        }
+
+        expect(data.props?.item).toBeUndefined();
+        expect(data.props?.dom).toBeUndefined();
+        expect(data.props?.options).toBeUndefined();
+        expect(data.props?.renderType).toBeUndefined();
+        expect(() => JSON.stringify(data)).not.toThrow();
+        return data;
+      },
+    );
+    const updateRoute = vi.fn().mockResolvedValue(undefined);
+    engine.setModelRepository({ save } as Parameters<FlowEngine['setModelRepository']>[0]);
+    engine.context.routeRepository.updateRoute = updateRoute;
+
+    const route = createRoute();
+    const model = engine.createModel<AdminLayoutMenuItemModel>({
+      uid: 'menu-item-linkage-runtime-props',
+      use: AdminLayoutMenuItemModel,
+      props: {
+        route,
+      },
+    });
+    const item = {
+      name: 'Page 1',
+      path: '/admin/page-1',
+      _route: route,
+      _model: model,
+    };
+
+    model.setProps({
+      item,
+      dom: React.createElement('span', null, 'Page 1'),
+      renderType: 'item',
+      options: { collapsed: false },
+    });
+    model.setStepParams('menuSettings', 'linkageRules', {
+      value: [
+        {
+          key: 'r1',
+          title: 'Hide menu item',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ key: 'a1', name: 'linkageSetMenuItemProps', params: { value: 'hidden' } }],
+        },
+      ],
+    });
+
+    await model.saveStepParams();
+
+    expect(save).toHaveBeenCalledWith(model, { onlyStepParams: true });
+    expect(updateRoute).toHaveBeenCalledWith(1, {
+      options: {
+        hasPersistedMenuInstanceFlow: true,
+      },
+    });
+  });
+
   it('should clear persisted menu linkage rules when no persisted state remains', async () => {
     const saveModel = vi.spyOn(engine, 'saveModel').mockResolvedValue(undefined as any);
     const destroy = vi.fn().mockResolvedValue(true);

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__/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/form/__tests__/FormBlockModel.test.tsx

@@ -221,6 +221,23 @@ describe('FlowModel core behaviors (collected)', () => {
     expect(i1).toEqual({ ping: 1 });
   });
 
+  it('unchanged stepParams do not trigger a beforeRender rerun', async () => {
+    vi.useFakeTimers();
+    const spy = vi.fn().mockResolvedValue([]);
+    (engine as any).executor.dispatchEvent = spy;
+    const model = engine.createModel<FlowModel>({
+      use: 'FlowModel',
+      uid: 'm-flow-3-noop',
+      stepParams: { anyFlow: { anyStep: { x: 1 } } },
+    });
+
+    await model.dispatchEvent('beforeRender', { ping: 1 });
+    model.setStepParams('anyFlow', 'anyStep', { x: 1 });
+    await vi.advanceTimersByTimeAsync(150);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
   it('applyFlow delegates to executor.runFlow', async () => {
     const spyRun = vi.fn().mockResolvedValue('ok');
     (engine as any).executor.runFlow = spyRun;

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

@@ -15,6 +15,7 @@ import { observable } from '@formily/reactive';
 import { get as lodashGet, merge as lodashMerge, set as lodashSet } from 'lodash';
 import { FlowContext, JSRunner } from '@nocobase/flow-engine';
 import { FormValueRuntime } from '..';
+import type { FormInstance } from 'antd';
 
 function createFormStub(initialValues: any = {}) {
   const store: any = JSON.parse(JSON.stringify(initialValues || {}));
@@ -121,6 +122,34 @@ function createFieldContext(runtime: FormValueRuntime) {
 }
 
 describe('FormValueRuntime (default rules)', () => {
+  it('skips object patches when values are unchanged', async () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({ name: 'old' });
+    const dispatchEvent = vi.fn();
+
+    const blockModel = {
+      uid: 'form-noop-patch',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent,
+      getAclActionName: () => 'create',
+    } as ConstructorParameters<typeof FormValueRuntime>[0]['model'];
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as unknown as FormInstance });
+    runtime.mount({ sync: true });
+
+    const blockCtx = createFieldContext(runtime);
+    await runtime.setFormValues(blockCtx, { name: 'old' }, { source: 'system' });
+
+    expect(dispatchEvent).not.toHaveBeenCalled();
+
+    await runtime.setFormValues(blockCtx, { name: 'new' }, { source: 'system' });
+
+    expect(formStub.getFieldValue(['name'])).toBe('new');
+    expect(dispatchEvent).toHaveBeenCalledTimes(1);
+  });
+
   it('recomputes default on dependency change when current equals last default; user change disables default permanently', async () => {
     const engineEmitter = new EventEmitter();
     const blockEmitter = new EventEmitter();

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

@@ -846,7 +846,11 @@ export class FormValueRuntime {
       const changedPaths: NamePath[] = [];
 
       if (!Array.isArray(patch)) {
-        const patchEntries = Object.entries(patch || {}).filter(([pathKey]) => !shouldSkipByLinkageScope(pathKey));
+        const patchEntries = Object.entries(patch || {}).filter(([pathKey, rawValue]) => {
+          if (shouldSkipByLinkageScope(pathKey)) return false;
+          const value = isObservable(rawValue) ? toJS(rawValue) : rawValue;
+          return !_.isEqual(this.getFormValueAtPath([pathKey]), value);
+        });
         const patchToApply = Object.fromEntries(patchEntries);
         const patchKeys = patchEntries.map(([pathKey]) => pathKey);
         if (!patchKeys.length) {

package/src/flow/models/fields/mobile-components/MobileLazySelect.tsx

@@ -10,7 +10,7 @@
 import { useFlowModelContext } from '@nocobase/flow-engine';
 import { Select } from 'antd';
 import type { CSSProperties } from 'react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, CheckList, Popup, SearchBar, SpinLoading } from 'antd-mobile';
 import { css } from '@emotion/css';
 import {
@@ -51,7 +51,7 @@ function deriveRecordsFromValue(
 ) {
   if (isMultiple) {
     if (Array.isArray(value)) {
-      return (value.filter(Boolean) as any[]).map((item) => {
+      return (value.filter((item) => item !== null && item !== undefined) as any[]).map((item) => {
         if (valueMode === 'value') {
           return optionMap.get(item) ?? { [valueKey]: item };
         }
@@ -113,11 +113,13 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
   );
 
   const [selectedRecords, setSelectedRecords] = useState<AssociationOption[]>(() => derivedRecords);
+  const wasVisibleRef = useRef(visible);
 
   useEffect(() => {
-    if (visible) {
+    if (visible && !wasVisibleRef.current) {
       setSelectedRecords(derivedRecords);
     }
+    wasVisibleRef.current = visible;
   }, [derivedRecords, visible]);
 
   useEffect(() => {

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { beforeEach, describe, it, expect, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@nocobase/test/client';
+import { MobileLazySelect } from '../MobileLazySelect';
 import { MobileSelect } from '../MobileSelect';
 
 const DEFAULT_OPTIONS = [
@@ -17,6 +18,11 @@ const DEFAULT_OPTIONS = [
   { label: 'Option B', value: 'b' },
 ];
 
+const RELATION_OPTIONS = [
+  { uuid: '05f6a3b4-bfb7-7943-578a-3819e2687a7e' },
+  { uuid: 'c7d99828-a1de-9e70-4c2d-b0139abdf02e' },
+];
+
 const mockState = vi.hoisted(() => ({
   selectProps: undefined as any,
   popupProps: undefined as any,
@@ -44,6 +50,13 @@ function openPopup() {
   expect(screen.getByTestId('popup')).toBeInTheDocument();
 }
 
+function openLazyPopup() {
+  act(() => {
+    mockState.selectProps?.onClick?.();
+  });
+  expect(screen.getByTestId('popup')).toBeInTheDocument();
+}
+
 function selectValues(values: string[]) {
   act(() => {
     mockState.checklistProps?.onChange?.(values);
@@ -73,6 +86,30 @@ function renderMobileSelect(props: Record<string, any> = {}) {
   return { onChange, onChangeComplete };
 }
 
+function renderMobileLazySelect(props: Record<string, any> = {}) {
+  const onChange = props.onChange ?? vi.fn();
+  const renderComponent = (nextProps: Record<string, any> = {}) => (
+    <MobileLazySelect
+      fieldNames={{ label: 'uuid', value: 'uuid' }}
+      value={[]}
+      multiple
+      allowMultiple
+      options={RELATION_OPTIONS}
+      {...props}
+      {...nextProps}
+      onChange={onChange}
+    />
+  );
+
+  const result = render(renderComponent());
+
+  return {
+    ...result,
+    onChange,
+    rerender: (nextProps: Record<string, any> = {}) => result.rerender(renderComponent(nextProps)),
+  };
+}
+
 vi.mock('@nocobase/flow-engine', async () => {
   const actual = await vi.importActual<any>('@nocobase/flow-engine');
   return {
@@ -80,6 +117,12 @@ vi.mock('@nocobase/flow-engine', async () => {
     useFlowModelContext: () => ({
       t: (value: string) => value,
     }),
+    useFlowModel: () => ({
+      context: {
+        collectionField: {},
+      },
+      subModels: {},
+    }),
   };
 });
 
@@ -240,3 +283,30 @@ describe('MobileSelect in SubForm/SubTable containers', () => {
     expect(onCommit).toHaveBeenNthCalledWith(2, ['a', 'b']);
   });
 });
+
+describe('MobileLazySelect', () => {
+  beforeEach(() => {
+    resetMockState();
+  });
+
+  it('keeps pending relation records selected until confirm', () => {
+    const { onChange, rerender } = renderMobileLazySelect();
+
+    openLazyPopup();
+    expect(mockState.checklistProps?.value).toEqual([]);
+
+    selectValues(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+    expect(mockState.checklistProps?.value).toEqual(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+
+    rerender({
+      options: RELATION_OPTIONS.map((item) => ({ ...item })),
+    });
+
+    expect(mockState.checklistProps?.value).toEqual(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+
+    confirmSelection();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith([RELATION_OPTIONS[1]]);
+  });
+});