@nocobase/flow-engine 2.2.0-beta.1 → 2.2.0-beta.10

package/src/__tests__/flowEngine.dataSourceDirty.test.ts

@@ -11,6 +11,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { FlowEngine } from '../flowEngine';
 import { MultiRecordResource } from '../resources/multiRecordResource';
 import { SingleRecordResource } from '../resources/singleRecordResource';
+import { DATA_SOURCE_DIRTY_EVENT } from '../views/viewEvents';
 
 describe('FlowEngine dataSource dirty registry', () => {
   it('tracks versions per dataSourceKey + resourceName', () => {
@@ -60,4 +61,54 @@ describe('FlowEngine dataSource dirty registry', () => {
     // plus root collection (safety)
     expect(markSpy).toHaveBeenCalledWith('main', 'users');
   });
+
+  it('marks dirty once for record write helpers when using the dirty-aware context api', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn(async () => ({ data: { data: { id: 1 }, meta: {} } }));
+    const dirtyEvents: Array<{ dataSourceKey: string; resourceNames: string[] }> = [];
+    engine.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request,
+        resource: vi.fn(),
+      },
+    });
+    engine.emitter.on(DATA_SOURCE_DIRTY_EVENT, (event) => dirtyEvents.push(event));
+
+    const multi = engine.createResource(MultiRecordResource);
+    multi.setDataSourceKey('main').setResourceName('posts');
+    await multi.create({ title: 't' } as any, { refresh: false });
+
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(dirtyEvents).toEqual([{ dataSourceKey: 'main', resourceNames: ['posts'] }]);
+
+    const single = engine.createResource(SingleRecordResource);
+    single.setDataSourceKey('main').setResourceName('posts').setFilterByTk(1);
+    await single.save({ title: 'u' } as any, { refresh: false });
+
+    expect(request).toHaveBeenCalledTimes(2);
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(2);
+    expect(dirtyEvents).toEqual([
+      { dataSourceKey: 'main', resourceNames: ['posts'] },
+      { dataSourceKey: 'main', resourceNames: ['posts'] },
+    ]);
+  });
+
+  it('still marks dirty for direct runAction writes', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request: vi.fn(async () => ({ data: { data: { id: 1 }, meta: {} } })),
+        resource: vi.fn(),
+      },
+    });
+
+    const multi = engine.createResource(MultiRecordResource);
+    multi.setDataSourceKey('main').setResourceName('posts');
+    await multi.runAction('create', { data: { title: 't' } });
+
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+  });
 });

package/src/__tests__/flowModel.openView.navigation.test.ts

@@ -104,4 +104,32 @@ describe('FlowModelContext.openView - navigation enforcement', () => {
     expect(child.dispatchEvent).toHaveBeenCalledTimes(1);
     expect(child.dispatchEvent.mock.calls[0][0]).toBe('click');
   });
+
+  it('inherits current model input args when opening an external popup', async () => {
+    const { parent, child } = setup();
+    parent['getInputArgs'] = vi.fn(() => ({
+      filterByTk: 2,
+      sourceId: 10,
+      defaultInputKeys: ['filterByTk', 'sourceId'],
+    }));
+
+    await (parent.context as any).openView('child-uid', { mode: 'dialog' });
+
+    expect(child.dispatchEvent).toHaveBeenCalledTimes(1);
+    expect(child.dispatchEvent.mock.calls[0][1]).toMatchObject({
+      mode: 'dialog',
+      filterByTk: 2,
+      sourceId: 10,
+    });
+    expect(child.dispatchEvent.mock.calls[0][1]).not.toHaveProperty('defaultInputKeys');
+  });
+
+  it('does not debounce external popup dispatches', async () => {
+    const { parent, child } = setup();
+
+    await (parent.context as any).openView('child-uid', { mode: 'dialog', filterByTk: 1 });
+
+    expect(child.dispatchEvent).toHaveBeenCalledTimes(1);
+    expect(child.dispatchEvent.mock.calls[0][2]).toBeUndefined();
+  });
 });

package/src/__tests__/flowSettings.test.ts

@@ -557,6 +557,78 @@ describe('FlowSettings', () => {
     });
   });
 
+  describe('Dynamic Flow Source Providers', () => {
+    test('should return current model as the default dynamic flow source', async () => {
+      const model = new FlowModel({ uid: 'source-model', flowEngine: engine });
+
+      const sources = await flowSettings.getDynamicFlowSources(model);
+
+      expect(sources).toHaveLength(1);
+      expect(sources[0].key).toBe('self');
+      expect(sources[0].label).toBe('Current block');
+      expect(sources[0].model).toBe(model);
+    });
+
+    test('should register, resolve, and dispose dynamic flow source providers', async () => {
+      const model = new FlowModel({ uid: 'source-model', flowEngine: engine });
+      const target = new FlowModel({ uid: 'target-model', flowEngine: engine });
+
+      const dispose = flowSettings.registerDynamicFlowSourceProvider({
+        key: 'test-provider',
+        visible: (m) => m.uid === model.uid,
+        getSources: () => [{ key: 'target', label: 'Target model', model: target, sort: 10 }],
+      });
+
+      expect(flowSettings.hasDynamicFlowSourceProvider(model)).toBe(true);
+      expect(flowSettings.hasDynamicFlowSourceProvider(target)).toBe(false);
+
+      const sources = await flowSettings.getDynamicFlowSources(model);
+      expect(sources.map((source) => source.key)).toEqual(['self', 'target']);
+
+      dispose();
+
+      expect(flowSettings.hasDynamicFlowSourceProvider(model)).toBe(false);
+      await expect(flowSettings.getDynamicFlowSources(model)).resolves.toHaveLength(1);
+    });
+
+    test('should skip duplicate dynamic flow source keys and model uids', async () => {
+      const model = new FlowModel({ uid: 'source-model', flowEngine: engine });
+      const target = new FlowModel({ uid: 'target-model', flowEngine: engine });
+
+      flowSettings.registerDynamicFlowSourceProvider({
+        key: 'test-provider',
+        getSources: () => [
+          { key: 'target', label: 'Target model', model: target },
+          { key: 'target', label: 'Duplicate key', model: new FlowModel({ uid: 'other-model', flowEngine: engine }) },
+          { key: 'duplicate-uid', label: 'Duplicate uid', model: target },
+        ],
+      });
+
+      const sources = await flowSettings.getDynamicFlowSources(model);
+
+      expect(sources.map((source) => source.key)).toEqual(['self', 'target']);
+    });
+
+    test('should ignore failing dynamic flow source providers', async () => {
+      const model = new FlowModel({ uid: 'source-model', flowEngine: engine });
+
+      flowSettings.registerDynamicFlowSourceProvider({
+        key: 'failing-provider',
+        getSources: () => {
+          throw new Error('provider failed');
+        },
+      });
+
+      const sources = await flowSettings.getDynamicFlowSources(model);
+
+      expect(sources.map((source) => source.key)).toEqual(['self']);
+      expect(consoleSpy.warn).toHaveBeenCalledWith(
+        "FlowSettings: Dynamic flow source provider 'failing-provider' failed.",
+        expect.any(Error),
+      );
+    });
+  });
+
   describe('Step Settings Dialog', () => {
     test('should call openStepSettingsDialog with correct parameters', async () => {
       const { openStepSettingsDialog } = await import('../components/settings/wrappers/contextual/StepSettingsDialog');

package/src/__tests__/runjsRuntimeFeatures.test.ts

@@ -8,9 +8,9 @@
  */
 
 import { describe, it, expect, beforeAll, vi } from 'vitest';
-import { FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { FlowContext, FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { RUNJS_OPEN_VIEW_ROUTE_STATE } from '../utils/openViewRouteState';
 import { FlowEngine } from '../flowEngine';
-import { FlowContext } from '../flowContext';
 import { setupRunJSContexts } from '../runjs-context/setup';
 import { createJSRunnerWithVersion } from '..';
 import { RunJSContextRegistry } from '../runjs-context/registry';
@@ -267,6 +267,19 @@ describe('RunJS Runtime Features', () => {
       expect(runCtx.libs.dayjs).toBeDefined();
       expect(runCtx.libs.antdIcons).toBeDefined();
     });
+
+    it('should mark ctx.openView calls with route state only when RunJS passes display overrides', async () => {
+      const parentCtx = new FlowContext();
+      const openView = vi.fn(async () => undefined);
+      parentCtx.defineMethod('openView', openView);
+
+      const runCtx = new FlowRunJSContext(parentCtx);
+      await (runCtx as any).openView('popup', { mode: 'dialog', size: 'large' });
+      await (runCtx as any).openView('popup', { filterByTk: 1 });
+
+      expect(openView.mock.calls[0][1][RUNJS_OPEN_VIEW_ROUTE_STATE]).toEqual({ mode: 'dialog', size: 'large' });
+      expect(Object.prototype.hasOwnProperty.call(openView.mock.calls[1][1], RUNJS_OPEN_VIEW_ROUTE_STATE)).toBe(false);
+    });
   });
 
   describe('Actual code execution', () => {

package/src/__tests__/viewScopedFlowEngine.test.ts

@@ -340,9 +340,9 @@ describe('ViewScopedFlowEngine', () => {
     const repository = new DirtyPageRepository();
     root.setModelRepository(repository);
 
-    class ParentModel extends FlowModel {}
-    class PageModel extends FlowModel {}
     class BlockModel extends FlowModel {}
+    class PageModel extends FlowModel<{ parent?: FlowModel; subModels: { items: BlockModel[] } }> {}
+    class ParentModel extends FlowModel<{ parent?: FlowModel; subModels: { page?: PageModel } }> {}
     root.registerModels({ ParentModel, PageModel, BlockModel });
 
     const parent = root.createModel<ParentModel>({ use: 'ParentModel', uid: 'popup-action' });
@@ -357,7 +357,10 @@ describe('ViewScopedFlowEngine', () => {
         items: [{ use: 'BlockModel', uid: 'stale-block' }],
       },
     });
-    const staleBlock = stalePage.findSubModel('items' as any, (item) => item.uid === 'stale-block') as FlowModel;
+    const staleBlock = stalePage.findSubModel('items', (item) => item.uid === 'stale-block');
+    if (!staleBlock) {
+      throw new Error('Expected stale block to be loaded');
+    }
     parent.setSubModel('page', stalePage);
     oldScoped.unlinkFromStack();
 
@@ -372,7 +375,7 @@ describe('ViewScopedFlowEngine', () => {
       },
     };
 
-    root.flowSettings.enable();
+    await root.flowSettings.enable();
     await staleBlock.saveStepParams();
     root.flowSettings.disable();
     repository.findOneCalls = 0;
@@ -388,8 +391,8 @@ describe('ViewScopedFlowEngine', () => {
 
     expect(repository.findOneCalls).toBe(1);
     expect(loaded).not.toBe(stalePage);
-    expect((parent.subModels as any).page).toBe(loaded);
-    expect(loaded?.mapSubModels('items' as any, (item) => item.uid)).toEqual(['fresh-block']);
+    expect(parent.subModels.page).toBe(loaded);
+    expect(loaded?.mapSubModels('items', (item) => item.uid)).toEqual(['fresh-block']);
 
     repository.findOneCalls = 0;
     const nextRuntimeScoped = createViewScopedEngine(root);
@@ -405,6 +408,69 @@ describe('ViewScopedFlowEngine', () => {
     expect(loadedAgain?.uid).toBe('popup-page');
   });
 
+  it('reloads a page after it was loaded in flow settings mode', async () => {
+    const root = new FlowEngine();
+    const repository = new DirtyPageRepository();
+    root.setModelRepository(repository);
+
+    class ParentModel extends FlowModel {}
+    class PageModel extends FlowModel {}
+    class BlockModel extends FlowModel {}
+    root.registerModels({ ParentModel, PageModel, BlockModel });
+
+    const parent = root.createModel<ParentModel>({ use: 'ParentModel', uid: 'settings-popup-action' });
+    repository.data = {
+      use: 'PageModel',
+      uid: 'settings-popup-page',
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      subModels: {
+        items: [{ use: 'BlockModel', uid: 'stale-settings-block' }],
+      },
+    };
+
+    await root.flowSettings.enable();
+    const designScoped = createViewScopedEngine(root);
+    const designLoaded = await designScoped.loadOrCreateModel<PageModel>({
+      async: true,
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      use: 'PageModel',
+    });
+    expect(repository.findOneCalls).toBe(1);
+    expect(designLoaded?.mapSubModels('items', (item) => item.uid)).toEqual(['stale-settings-block']);
+    designScoped.unlinkFromStack();
+
+    repository.data = {
+      use: 'PageModel',
+      uid: 'settings-popup-page',
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      subModels: {
+        items: [{ use: 'BlockModel', uid: 'fresh-settings-block' }],
+      },
+    };
+    root.flowSettings.disable();
+    repository.findOneCalls = 0;
+
+    const runtimeScoped = createViewScopedEngine(root);
+    const runtimeLoaded = await runtimeScoped.loadOrCreateModel<PageModel>({
+      async: true,
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      use: 'PageModel',
+    });
+
+    expect(repository.findOneCalls).toBe(1);
+    expect(runtimeLoaded).not.toBe(designLoaded);
+    expect(parent.subModels.page).toBe(runtimeLoaded);
+    expect(runtimeLoaded?.mapSubModels('items', (item) => item.uid)).toEqual(['fresh-settings-block']);
+  });
+
   it('does not bypass loaded page cache after a non-config save', async () => {
     const root = new FlowEngine();
     const repository = new DirtyPageRepository();

package/src/components/FieldModelRenderer.tsx

@@ -10,7 +10,7 @@
 import type { FlowModelRendererProps } from './FlowModelRenderer';
 import { FlowModelRenderer } from './FlowModelRenderer';
 import _ from 'lodash';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
   'model',
@@ -28,49 +28,63 @@ const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
 ];
 
 export function FieldModelRenderer(props: any) {
-  const { model, ...rest } = props;
+  const { model, onChange, ...rest } = props;
   const composingRef = useRef(false);
 
-  const handleChange = (e: any) => {
-    let val;
-    if (e && e.target && typeof e.target.value !== 'undefined') {
-      val = e.target.value;
-    } else if (
-      typeof e === 'string' ||
-      typeof e === 'number' ||
-      typeof e === 'boolean' ||
-      (typeof e === 'object' && !(e instanceof Event))
-    ) {
-      val = e;
-    } else {
-      val = null;
-    }
+  const handleChange = useCallback(
+    (e: any) => {
+      let val;
+      if (e && e.target && typeof e.target.value !== 'undefined') {
+        val = e.target.value;
+      } else if (
+        typeof e === 'string' ||
+        typeof e === 'number' ||
+        typeof e === 'boolean' ||
+        (typeof e === 'object' && !(e instanceof Event))
+      ) {
+        val = e;
+      } else {
+        val = null;
+      }
 
-    model.setProps({ value: val });
-    if (!composingRef.current) {
-      props.onChange?.(val);
-    }
-  };
-  const handleCompositionStart = () => {
+      const isComposing = composingRef.current || e?.nativeEvent?.isComposing;
+      if (isComposing) {
+        return;
+      }
+
+      model.setProps({ value: val });
+      if (!composingRef.current) {
+        onChange?.(val);
+      }
+    },
+    [model, onChange],
+  );
+  const handleCompositionStart = useCallback(() => {
     composingRef.current = true;
-  };
+  }, []);
 
-  const handleCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
-    composingRef.current = false;
-    if (flag) {
-      props.onChange(e);
-    }
-  };
+  const handleCompositionEnd = useCallback(
+    (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
+      composingRef.current = false;
+      if (flag) {
+        handleChange(e);
+      }
+    },
+    [handleChange],
+  );
 
-  const modelProps = {
-    onCompositionStart: handleCompositionStart,
-    onCompositionEnd: handleCompositionEnd,
-    ..._.omit(rest, flowModelRendererPropKeys),
-    onChange: handleChange,
-  };
+  const modelProps = useMemo(
+    () => ({
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      ..._.omit(rest, flowModelRendererPropKeys),
+      onChange: handleChange,
+    }),
+    [handleChange, handleCompositionEnd, handleCompositionStart, rest],
+  );
   useEffect(() => {
     model && model.setProps(modelProps);
-  }, [modelProps]);
+  }, [model, modelProps]);
 
   return <FlowModelRenderer model={model} {...rest} />;
 }

package/src/components/MobilePopup.style.ts

@@ -11,7 +11,7 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { merge } from '@formily/shared';
 import type { ComponentTokenMap } from 'antd/es/theme/interface';
-import { useMemo, useContext } from 'react';
+import { useContext, useRef } from 'react';
 import { ConfigProvider, theme } from 'antd';
 
 const usePrefixCls = (
@@ -83,6 +83,10 @@ type UseComponentStyleResult = {
   componentCls: string;
   rootPrefixCls: string;
 };
+type WrapSSRCache = {
+  deps: unknown[];
+  wrapSSR: ReturnType<typeof useStyleRegister>;
+};
 
 const genStyleHook = <ComponentName extends OverrideComponent>(
   component: ComponentName,
@@ -122,9 +126,18 @@ const genStyleHook = <ComponentName extends OverrideComponent>(
 
     // useStyleRegister 有 BUG，会导致重复渲染，所以这里做了一层缓存
     // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
-    const memoizedWrapSSR = useMemo(() => {
-      return wrapSSR;
-    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    const wrapSSRDeps = [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props];
+    const wrapSSRCacheRef = useRef<WrapSSRCache>();
+    const currentCache = wrapSSRCacheRef.current;
+    let memoizedWrapSSR: ReturnType<typeof useStyleRegister> = currentCache?.wrapSSR || wrapSSR;
+
+    if (!currentCache || wrapSSRDeps.some((dep, index) => dep !== currentCache.deps[index])) {
+      wrapSSRCacheRef.current = {
+        deps: wrapSSRDeps,
+        wrapSSR,
+      };
+      memoizedWrapSSR = wrapSSR;
+    }
 
     return {
       wrapSSR: memoizedWrapSSR,
@@ -140,14 +153,14 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
   return {
     [componentCls]: {
       '.nb-mobile-action-drawer-header': {
-        height: 'var(--nb-mobile-page-header-height)',
+        height: 'var(--nb-mobile-page-header-height, 46px)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         borderBottom: `1px solid ${token.colorSplit}`,
         position: 'sticky',
         top: 0,
-        backgroundColor: 'white',
+        backgroundColor: token.colorBgContainer,
         zIndex: 1000,
 
         // to match the button named 'Add block'
@@ -159,19 +172,33 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-placeholder': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         visibility: 'hidden',
       },
 
+      '.nb-mobile-action-drawer-title': {
+        flex: '1 1 auto',
+        minWidth: 0,
+        overflow: 'hidden',
+        textAlign: 'center',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+
       '.nb-mobile-action-drawer-close-icon': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         cursor: 'pointer',
       },
 
       '.nb-mobile-action-drawer-body': {
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
-        maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+        maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+        '@supports (height: 100dvh)': {
+          maxHeight: 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))',
+        },
         overflowY: 'auto',
         overflowX: 'hidden',
         backgroundColor: token.colorBgLayout,

package/src/components/MobilePopup.tsx

@@ -8,7 +8,7 @@
  */
 
 import { ConfigProvider } from 'antd';
-import React, { FC, ReactNode, useMemo } from 'react';
+import React, { FC, ReactNode, useCallback, useMemo } from 'react';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
 import { lazy } from '../lazy-helper';
@@ -31,11 +31,33 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
-  const style = useMemo(() => {
+  const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const popupStyle = useMemo(() => {
     return {
-      minHeight,
+      minHeight: bodyStyles?.minHeight ?? minHeight,
+      height: bodyStyles?.height,
+      maxHeight: bodyStyles?.maxHeight,
     };
-  }, [minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, minHeight]);
+
+  const bodyStyle = useMemo(() => {
+    return {
+      padding: 0,
+      ...bodyStyles,
+    };
+  }, [bodyStyles]);
+
+  const handleCloseKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup],
+  );
 
   const theme = useMemo(() => {
     return {
@@ -57,11 +79,8 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
         onClose={closePopup}
         onMaskClick={closePopup}
         bodyClassName="nb-mobile-action-drawer-body"
-        bodyStyle={{
-          padding: 0,
-        }}
-        maskStyle={style}
-        style={style}
+        bodyStyle={bodyStyle}
+        style={popupStyle}
         destroyOnClose
       >
         <div className="nb-mobile-action-drawer-header">
@@ -69,13 +88,14 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
           <span className="nb-mobile-action-drawer-placeholder">
             <CloseOutline />
           </span>
-          <span>{title}</span>
+          <span className="nb-mobile-action-drawer-title">{title}</span>
           <span
             className="nb-mobile-action-drawer-close-icon"
             onClick={closePopup}
             role="button"
             tabIndex={0}
             aria-label={t('Close')}
+            onKeyDown={handleCloseKeyDown}
           >
             <CloseOutline />
           </span>