@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.3

package/src/flow/components/FieldAssignRulesEditor.tsx

@@ -28,7 +28,7 @@ import { buildFieldAssignCascaderOptionsFromCollection, type FieldAssignCascader
 import { isRunJSValue, isVariableExpression, type MetaTreeNode } from '@nocobase/flow-engine';
 import { isToManyAssociationField } from '../internal/utils/modelUtils';
 
-export type AssignMode = 'default' | 'assign';
+export type AssignMode = 'default' | 'assign' | 'override';
 
 type CollectionFieldLike = {
   name?: unknown;
@@ -89,6 +89,8 @@ export interface FieldAssignRulesEditorProps {
   defaultMode?: AssignMode;
   /** 固定 mode：用于“仅默认值/仅赋值”的场景 */
   fixedMode?: AssignMode;
+  /** 可选 mode 列表；fixedMode 优先级更高 */
+  allowedModes?: AssignMode[];
   /** 是否显示 condition */
   showCondition?: boolean;
   /** 是否显示 enable 开关 */
@@ -109,6 +111,65 @@ export interface FieldAssignRulesEditorProps {
   maxAssociationFieldDepth?: number;
 }
 
+const ALL_ASSIGN_MODES: AssignMode[] = ['default', 'override', 'assign'];
+
+function cloneCascaderOption(option: FieldAssignCascaderOption): FieldAssignCascaderOption {
+  return {
+    ...option,
+    children: option.children?.map((child) => cloneCascaderOption(child)),
+  };
+}
+
+function mergeCascaderOptionInto(options: FieldAssignCascaderOption[], source: FieldAssignCascaderOption) {
+  const value = source?.value ? String(source.value) : '';
+  if (!value) return;
+
+  const existing = options.find((item) => String(item?.value || '') === value);
+  if (!existing) {
+    options.push(cloneCascaderOption(source));
+    return;
+  }
+
+  if (!existing.label && source.label) {
+    existing.label = source.label;
+  }
+  if (source.isLeaf === false || existing.children?.length || source.children?.length) {
+    existing.isLeaf = false;
+  }
+  if (source.loading) {
+    existing.loading = source.loading;
+  }
+  if (source.children?.length) {
+    existing.children = mergeCascaderOptions(existing.children || [], source.children);
+  }
+}
+
+function mergeCascaderOptions(
+  configured: FieldAssignCascaderOption[],
+  allFields: FieldAssignCascaderOption[],
+): FieldAssignCascaderOption[] {
+  const result = (Array.isArray(configured) ? configured : []).map((item) => cloneCascaderOption(item));
+  for (const item of Array.isArray(allFields) ? allFields : []) {
+    mergeCascaderOptionInto(result, item);
+  }
+  return result;
+}
+
+function isAssignMode(mode: unknown): mode is AssignMode {
+  return mode === 'default' || mode === 'override' || mode === 'assign';
+}
+
+function normalizeAssignModes(modes?: AssignMode[]): AssignMode[] {
+  const source = Array.isArray(modes) && modes.length ? modes : ALL_ASSIGN_MODES;
+  const out: AssignMode[] = [];
+  for (const mode of source) {
+    if (!isAssignMode(mode)) continue;
+    if (out.includes(mode)) continue;
+    out.push(mode);
+  }
+  return out.length ? out : ALL_ASSIGN_MODES;
+}
+
 export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (props) => {
   const {
     t,
@@ -118,6 +179,7 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
     onChange,
     defaultMode = 'assign',
     fixedMode,
+    allowedModes: rawAllowedModes,
     showCondition = true,
     showEnable = true,
     showValueEditorWhenNoField = false,
@@ -129,13 +191,43 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
   } = props;
 
   const value = React.useMemo(() => (Array.isArray(rawValue) ? rawValue : []), [rawValue]);
+  const allowedModes = React.useMemo(
+    () => normalizeAssignModes(fixedMode ? [fixedMode] : rawAllowedModes),
+    [fixedMode, rawAllowedModes],
+  );
+  const getDefaultMode = React.useCallback((): AssignMode => {
+    if (fixedMode) return fixedMode;
+    if (isAssignMode(defaultMode) && allowedModes.includes(defaultMode)) return defaultMode;
+    return allowedModes[0] || 'assign';
+  }, [allowedModes, defaultMode, fixedMode]);
+  const normalizeItemMode = React.useCallback(
+    (item: FieldAssignRuleItem): FieldAssignRuleItem => {
+      const mode = isAssignMode(item?.mode) && allowedModes.includes(item.mode) ? item.mode : getDefaultMode();
+      return item?.mode === mode ? item : { ...item, mode };
+    },
+    [allowedModes, getDefaultMode],
+  );
+  const emitChange = React.useCallback(
+    (next: FieldAssignRuleItem[]) => {
+      onChange?.(next.map((item) => normalizeItemMode(item)));
+    },
+    [normalizeItemMode, onChange],
+  );
+
+  const normalizeFieldOptions = React.useCallback((options: FieldAssignRulesEditorProps['fieldOptions']) => {
+    return Array.isArray(options)
+      ? (options as FieldAssignCascaderOption[]).map((option) => cloneCascaderOption(option))
+      : [];
+  }, []);
   const [cascaderOptions, setCascaderOptions] = React.useState<FieldAssignCascaderOption[]>(() =>
-    Array.isArray(fieldOptions) ? (fieldOptions as FieldAssignCascaderOption[]) : [],
+    normalizeFieldOptions(fieldOptions),
   );
+  const loadedCascaderOptionsRef = React.useRef<WeakSet<FieldAssignCascaderOption>>(new WeakSet());
 
   React.useEffect(() => {
-    setCascaderOptions(Array.isArray(fieldOptions) ? (fieldOptions as FieldAssignCascaderOption[]) : []);
-  }, [fieldOptions]);
+    loadedCascaderOptionsRef.current = new WeakSet();
+    setCascaderOptions(normalizeFieldOptions(fieldOptions));
+  }, [fieldOptions, normalizeFieldOptions, rootCollection, maxAssociationFieldDepth]);
 
   const getRuleKey = React.useCallback((item: FieldAssignRuleItem, index: number) => item?.key || String(index), []);
   const [titleFieldDraftMap, setTitleFieldDraftMap] = React.useState<Record<string, string | undefined>>({});
@@ -312,7 +404,7 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
 
   const patchItem = (index: number, patch: Partial<FieldAssignRuleItem>) => {
     const next = value.map((it, i) => (i === index ? { ...it, ...patch } : it));
-    onChange?.(next);
+    emitChange(next);
   };
 
   const removeItem = (index: number) => {
@@ -334,7 +426,7 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
       setSyncingRuleKey(null);
     }
     const next = value.filter((_, i) => i !== index);
-    onChange?.(next);
+    emitChange(next);
   };
 
   const moveItem = (index: number, direction: 'up' | 'down') => {
@@ -343,7 +435,7 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
     if (targetIndex < 0 || targetIndex >= next.length) return;
     const [item] = next.splice(index, 1);
     next.splice(targetIndex, 0, item);
-    onChange?.(next);
+    emitChange(next);
   };
 
   const addItem = () => {
@@ -352,29 +444,33 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
       {
         key: uid(),
         enable: true,
-        mode: fixedMode || defaultMode,
+        mode: getDefaultMode(),
         condition: { logic: '$and', items: [] },
         targetPath: undefined,
         value: undefined,
       },
     ];
-    onChange?.(next);
+    emitChange(next);
   };
 
   const getEffectiveMode = (item: FieldAssignRuleItem): AssignMode => {
     if (fixedMode) return fixedMode;
-    return item?.mode === 'default' ? 'default' : 'assign';
+    if (isAssignMode(item?.mode) && allowedModes.includes(item.mode)) return item.mode;
+    return getDefaultMode();
   };
 
   const renderAssignModeLabel = React.useCallback(
     (mode: AssignMode) => {
-      const modeText = mode === 'default' ? t('Default value') : t('Fixed value');
+      const modeText =
+        mode === 'default' ? t('Default value') : mode === 'override' ? t('Override value') : t('Fixed value');
       const modeHelpText =
         mode === 'default'
           ? t(
               'A pre-filled value. Editable, for new entries only, and won’t affect existing data (including empty values).',
             )
-          : t('A system-set value. Read-only.');
+          : mode === 'override'
+            ? t('Overrides existing values until the user edits it.')
+            : t('A system-set value. Read-only.');
 
       const preventModeToggle = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
@@ -551,23 +647,26 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
       const opts = selectedOptions || [];
       const target = opts[opts.length - 1];
       if (!target) return;
-      if (target.children && Array.isArray(target.children) && target.children.length) return;
       if (target.isLeaf) return;
+      if (loadedCascaderOptionsRef.current.has(target)) return;
 
       const segments = opts.map((o) => String(o?.value)).filter(Boolean);
       const targetCollection = resolveTargetCollectionBySegments(segments);
       if (!targetCollection) {
-        target.isLeaf = true;
+        target.isLeaf = !(target.children && target.children.length);
+        loadedCascaderOptionsRef.current.add(target);
         setCascaderOptions((prev) => [...prev]);
         return;
       }
 
       const children = buildChildrenFromCollection(targetCollection, segments.length);
       if (!children.length) {
-        target.isLeaf = true;
+        target.isLeaf = !(target.children && target.children.length);
       } else {
-        target.children = children;
+        target.children = mergeCascaderOptions(target.children || [], children);
+        target.isLeaf = false;
       }
+      loadedCascaderOptionsRef.current.add(target);
       setCascaderOptions((prev) => [...prev]);
     },
     [buildChildrenFromCollection, resolveTargetCollectionBySegments],
@@ -583,12 +682,14 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
         const hit = options.find((o) => String(o?.value) === seg);
         if (!hit) return;
         selected.push(hit);
+        if (!hit.isLeaf && !loadedCascaderOptionsRef.current.has(hit)) {
+          await loadCascaderData(selected);
+        }
         if (hit.children?.length) {
           options = hit.children;
           continue;
         }
         if (hit.isLeaf) return;
-        await loadCascaderData(selected);
         options = hit.children || [];
       }
     },
@@ -619,7 +720,9 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
         await preloadCascaderPath(segs);
       }
     };
-    void run();
+    run().catch((error) => {
+      console.warn('[FieldAssignRulesEditor] Failed to preload cascader path', error);
+    });
     return () => {
       cancelled = true;
     };
@@ -627,7 +730,8 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
 
   const renderPanelHeader = (item: FieldAssignRuleItem, index: number) => {
     const mode = getEffectiveMode(item);
-    const modeText = mode === 'default' ? t('Default value') : t('Fixed value');
+    const modeText =
+      mode === 'default' ? t('Default value') : mode === 'override' ? t('Override value') : t('Fixed value');
     const fieldLabel = getFieldLabel(item.targetPath);
     const title = fieldLabel ? String(fieldLabel) : t('Please select field');
 
@@ -935,8 +1039,11 @@ export const FieldAssignRulesEditor: React.FC<FieldAssignRulesEditorProps> = (pr
                 onChange={(event) => patchItem(index, { mode: event.target.value as AssignMode })}
               >
                 <Space size={16}>
-                  <Radio value="default">{renderAssignModeLabel('default')}</Radio>
-                  <Radio value="assign">{renderAssignModeLabel('assign')}</Radio>
+                  {allowedModes.map((allowedMode) => (
+                    <Radio key={allowedMode} value={allowedMode}>
+                      {renderAssignModeLabel(allowedMode)}
+                    </Radio>
+                  ))}
                 </Space>
               </Radio.Group>
             </div>

package/src/flow/components/FieldAssignValueInput.tsx

@@ -341,6 +341,8 @@ interface Props {
    * 默认 false，保持历史行为。
    */
   enableDateVariableAsConstant?: boolean;
+  /** 是否允许在变量选择器中使用 RunJS。默认 true，保持历史行为。 */
+  allowRunJS?: boolean;
   maxAssociationFieldDepth?: number;
 }
 
@@ -712,6 +714,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
   preferFormItemFieldModel,
   associationFieldNamesOverride,
   enableDateVariableAsConstant = false,
+  allowRunJS = true,
   maxAssociationFieldDepth = 2,
 }) => {
   const flowCtx = useFlowContext<FlowModelContext>();
@@ -1417,11 +1420,13 @@ export const FieldAssignValueInput: React.FC<Props> = ({
           render: ConstantEditor,
         },
         { title: tExpr('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
-        { title: tExpr('RunJS'), name: 'runjs', type: 'object', paths: ['runjs'], render: RunJSComponent },
+        ...(allowRunJS
+          ? [{ title: tExpr('RunJS'), name: 'runjs', type: 'object', paths: ['runjs'], render: RunJSComponent }]
+          : []),
         ...limitedBase,
       ];
     };
-  }, [flowCtx, ConstantEditor, NullComponent, RunJSComponent, maxAssociationFieldDepth]);
+  }, [flowCtx, ConstantEditor, NullComponent, RunJSComponent, allowRunJS, maxAssociationFieldDepth]);
 
   const displayValue = React.useMemo(() => {
     if (!useDateVariableConstant) {
@@ -1465,7 +1470,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
           const firstPath = meta?.paths?.[0];
           if (firstPath === 'constant') return ConstantEditor;
           if (firstPath === 'null') return NullComponent;
-          if (firstPath === 'runjs') return RunJSComponent;
+          if (allowRunJS && firstPath === 'runjs') return RunJSComponent;
           return null;
         },
         resolveValueFromPath: (item) => {
@@ -1474,12 +1479,12 @@ export const FieldAssignValueInput: React.FC<Props> = ({
             return useDateVariableConstant ? { type: 'today' } : '';
           }
           if (firstPath === 'null') return null;
-          if (firstPath === 'runjs') return { code: '', version: 'v2' };
+          if (allowRunJS && firstPath === 'runjs') return { code: '', version: 'v2' };
           return undefined;
         },
         resolvePathFromValue: (currentValue) => {
           if (currentValue === null) return ['null'];
-          if (isRunJSValue(currentValue)) return ['runjs'];
+          if (allowRunJS && isRunJSValue(currentValue)) return ['runjs'];
           if (useDateVariableConstant && isCtxDateExpression(currentValue)) {
             return ['constant'];
           }

package/src/flow/components/FlowRoute.tsx

@@ -28,6 +28,13 @@ type FlowRouteGuardState = {
 
 export type LegacyPageBehavior = 'redirect' | 'notFound' | 'bridge';
 
+type FlowRouteLayoutContext = {
+  authCheck?: boolean;
+  routePath?: string;
+  routeName?: string;
+  uid?: string;
+};
+
 export type FlowRouteProps = {
   pageUid?: string;
   active?: boolean;
@@ -38,7 +45,7 @@ export type FlowRouteProps = {
 const getDefaultAdminLayoutModel = (flowEngine: FlowEngine) =>
   getAdminLayoutModel<AdminLayoutModel>(flowEngine, { required: true });
 
-const getDefaultLayoutModel = (flowEngine: FlowEngine, contextLayout?: any) => {
+const getDefaultLayoutModel = (flowEngine: FlowEngine, contextLayout?: FlowRouteLayoutContext) => {
   const layout = contextLayout || flowEngine.context.layout;
 
   if (layout?.uid) {
@@ -48,7 +55,10 @@ const getDefaultLayoutModel = (flowEngine: FlowEngine, contextLayout?: any) => {
   return getDefaultAdminLayoutModel(flowEngine);
 };
 
-const getDefaultLegacyPageBehavior = (flowEngine: FlowEngine, contextLayout?: any): LegacyPageBehavior => {
+const getDefaultLegacyPageBehavior = (
+  flowEngine: FlowEngine,
+  contextLayout?: FlowRouteLayoutContext,
+): LegacyPageBehavior => {
   const layout = contextLayout || flowEngine.context.layout;
 
   if (layout?.routeName && layout.routeName !== 'admin') {
@@ -58,6 +68,8 @@ const getDefaultLegacyPageBehavior = (flowEngine: FlowEngine, contextLayout?: an
   return 'redirect';
 };
 
+const shouldRequireAccessibleRoute = (contextLayout?: FlowRouteLayoutContext) => contextLayout?.authCheck !== false;
+
 const hasFlowModel = async (flowEngine: FlowEngine, pageUid: string) => {
   if (flowEngine.getModel(pageUid)) {
     return true;
@@ -148,18 +160,46 @@ const BridgeFlowRoute = ({
  * @throws {Error} 当缺少 `route.params.name` 时抛出异常
  */
 const FlowRoute = (props: FlowRouteProps = {}) => {
+  const {
+    active,
+    getLayoutModel: getLayoutModelProp,
+    legacyPageBehavior: legacyPageBehaviorProp,
+    pageUid: pageUidProp,
+  } = props;
   const flowEngine = useFlowEngine();
-  const flowContext = useFlowContext<any>();
+  const flowContext = useFlowContext<{ layout?: FlowRouteLayoutContext }>();
   const contextLayout = flowContext?.layout;
+  const propsLayoutModel = useMemo(() => getLayoutModelProp?.(flowEngine), [flowEngine, getLayoutModelProp]);
+  const rawRouteLayout = contextLayout || propsLayoutModel?.layout;
+  const routeLayoutUid = rawRouteLayout?.uid;
+  const routeLayoutRouteName = rawRouteLayout?.routeName;
+  const routeLayoutRoutePath = rawRouteLayout?.routePath;
+  const routeLayoutAuthCheck = rawRouteLayout?.authCheck;
+  const routeLayout = useMemo(() => {
+    if (
+      !routeLayoutUid &&
+      !routeLayoutRouteName &&
+      !routeLayoutRoutePath &&
+      typeof routeLayoutAuthCheck === 'undefined'
+    ) {
+      return undefined;
+    }
+    return {
+      authCheck: routeLayoutAuthCheck,
+      routeName: routeLayoutRouteName,
+      routePath: routeLayoutRoutePath,
+      uid: routeLayoutUid,
+    };
+  }, [routeLayoutAuthCheck, routeLayoutRouteName, routeLayoutRoutePath, routeLayoutUid]);
   const getLayoutModel = useMemo(
-    () => props.getLayoutModel || ((engine: FlowEngine) => getDefaultLayoutModel(engine, contextLayout)),
-    [contextLayout, props.getLayoutModel],
+    () => getLayoutModelProp || ((engine: FlowEngine) => getDefaultLayoutModel(engine, routeLayout)),
+    [getLayoutModelProp, routeLayout],
   );
-  const legacyPageBehavior = props.legacyPageBehavior || getDefaultLegacyPageBehavior(flowEngine, contextLayout);
+  const legacyPageBehavior = legacyPageBehaviorProp || getDefaultLegacyPageBehavior(flowEngine, routeLayout);
   const app = useApp();
   const routeRepository = flowEngine.context.routeRepository;
   const params = useParams();
-  const pageUid = props.pageUid || params?.name;
+  const pageUid = pageUidProp || params?.name;
   const skipRouteRepositoryCheck = !routeRepository;
   const [guardState, setGuardState] = useState<FlowRouteGuardState>({
     pending: true,
@@ -196,6 +236,11 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
       }
 
       const route = skipRouteRepositoryCheck ? undefined : routeRepository?.getRouteBySchemaUid?.(pageUid);
+      if (!route && !skipRouteRepositoryCheck && shouldRequireAccessibleRoute(routeLayout)) {
+        setGuardState({ pending: false, allowBridge: false, notFound: true });
+        return;
+      }
+
       if (!route && legacyPageBehavior === 'notFound') {
         const flowModelExists = await hasFlowModel(flowEngine, pageUid);
         if (active && requestId === requestIdRef.current) {
@@ -245,12 +290,12 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
       }
     };
 
-    void run();
+    run();
 
     return () => {
       active = false;
     };
-  }, [app, flowEngine, legacyPageBehavior, pageUid, routeRepository, skipRouteRepositoryCheck]);
+  }, [app, flowEngine, legacyPageBehavior, pageUid, routeLayout, routeRepository, skipRouteRepositoryCheck]);
 
   const content = useMemo(() => {
     if (guardState.pending) {
@@ -265,8 +310,8 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
       return null;
     }
 
-    return <BridgeFlowRoute pageUid={pageUid} active={props.active} getLayoutModel={getLayoutModel} />;
-  }, [getLayoutModel, guardState.allowBridge, guardState.notFound, guardState.pending, pageUid, props.active]);
+    return <BridgeFlowRoute pageUid={pageUid} active={active} getLayoutModel={getLayoutModel} />;
+  }, [active, getLayoutModel, guardState.allowBridge, guardState.notFound, guardState.pending, pageUid]);
 
   return content;
 };

package/src/flow/components/__tests__/DynamicFlowsIcon.test.tsx

@@ -10,19 +10,24 @@
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, userEvent, waitFor } from '@nocobase/test/client';
-import { ActionScene, FlowEngine, FlowModel, GLOBAL_EMBED_CONTAINER_ID } from '@nocobase/flow-engine';
+import { ActionScene, FlowEngine, FlowModel, GLOBAL_EMBED_CONTAINER_ID, useFlowContext } from '@nocobase/flow-engine';
 import { DynamicFlowsIcon } from '../DynamicFlowsIcon';
 
 const mockState = vi.hoisted(() => ({
   capturedSelectProps: [] as any[],
+  capturedTabsProps: [] as any[],
   flowContextValue: undefined as any,
 }));
 
 vi.mock('@nocobase/flow-engine', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
+  const React = await import('react');
   return {
     ...actual,
-    useFlowContext: () => mockState.flowContextValue,
+    useFlowContext: () => {
+      const context = React.useContext(actual.FlowReactContext);
+      return context?.view ? context : mockState.flowContextValue;
+    },
   };
 });
 
@@ -62,6 +67,33 @@ vi.mock('antd', async (importOriginal) => {
       return <div data-testid={String(props.placeholder || 'select')} />;
     },
     Space: ({ children }: any) => <div>{children}</div>,
+    Tabs: (props: any) => {
+      mockState.capturedTabsProps.push(props);
+      const { items, activeKey, onChange, tabBarStyle } = props;
+      const currentKey = activeKey || items?.[0]?.key;
+      return (
+        <div data-testid="dynamic-flow-source-tabs">
+          <div role="tablist" style={tabBarStyle}>
+            {items?.map((item: any) => (
+              <button
+                key={item.key}
+                role="tab"
+                aria-selected={item.key === currentKey}
+                type="button"
+                onClick={() => onChange?.(item.key)}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+          {items?.map((item: any) => (
+            <div key={item.key} hidden={item.key !== currentKey}>
+              {item.children}
+            </div>
+          ))}
+        </div>
+      );
+    },
     Tooltip: ({ children }: any) => <>{children}</>,
   };
 });
@@ -83,6 +115,8 @@ const openDynamicFlowsEditor = async (model: FlowModel) => {
   expect(trigger).not.toBeNull();
   await userEvent.click(trigger as Element);
 
+  await waitFor(() => expect(model.context.viewer.embed).toHaveBeenCalled());
+
   const embedCall = (model.context.viewer.embed as any).mock.calls.at(-1)?.[0];
   expect(embedCall?.content).toBeTruthy();
 
@@ -163,6 +197,38 @@ const createModel = (options: { preventClose?: boolean; hiddenClose?: boolean; s
   return model;
 };
 
+const createPeerModel = (model: FlowModel, uid: string, saveStepParams = vi.fn(async () => undefined)) => {
+  const PeerModel = model.constructor as typeof FlowModel;
+  const peer = new PeerModel({
+    uid,
+    use: PeerModel,
+    flowEngine: model.flowEngine,
+    stepParams: {},
+    subModels: {},
+    flowRegistry: {
+      flow1: {
+        title: 'Template event flow',
+        on: 'click',
+        steps: {
+          notifyStep: {
+            use: 'notify',
+          },
+        },
+      },
+    },
+  } as any);
+
+  peer.context.defineProperty('message', {
+    value: {
+      error: vi.fn(),
+      success: vi.fn(),
+    },
+  });
+  vi.spyOn(peer, 'saveStepParams').mockImplementation(saveStepParams);
+
+  return peer;
+};
+
 const createView = () => {
   let destroyed = false;
   let closingPromise: Promise<boolean | void> | undefined;
@@ -189,6 +255,9 @@ const createView = () => {
       destroyed = true;
     }),
     beforeClose: undefined as any,
+    inputArgs: {
+      pageActive: true,
+    },
   };
   return view;
 };
@@ -196,6 +265,7 @@ const createView = () => {
 describe('DynamicFlowsIcon', () => {
   beforeEach(() => {
     mockState.capturedSelectProps.length = 0;
+    mockState.capturedTabsProps.length = 0;
     mockState.flowContextValue = {
       modal: {
         confirm: vi.fn(),
@@ -377,4 +447,80 @@ describe('DynamicFlowsIcon', () => {
     expect(view.destroy).toHaveBeenCalledTimes(1);
     expect(model.context.message.success).toHaveBeenCalledWith('Configuration saved');
   });
+
+  it('renders source tabs and closes the editor when saving one source', async () => {
+    const model = createModel();
+    const targetSaveStepParams = vi.fn(async () => undefined);
+    const target = createPeerModel(model, 'target-model', targetSaveStepParams);
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    const { view } = await openDynamicFlowsEditor(model);
+
+    expect(screen.getByRole('tab', { name: 'Current block' })).toHaveAttribute('aria-selected', 'true');
+    expect(mockState.capturedTabsProps.at(-1)?.tabBarStyle?.paddingLeft).toBeGreaterThan(0);
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(targetSaveStepParams).toHaveBeenCalledTimes(1);
+    expect(target.flowRegistry.getFlows().size).toBe(2);
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(target.context.message.success).toHaveBeenCalledWith('Configuration saved');
+  });
+
+  it('saves all dirty sources without discard confirmation', async () => {
+    const saveStepParams = vi.fn(async () => undefined);
+    const model = createModel({ saveStepParams });
+    const targetSaveStepParams = vi.fn(async () => undefined);
+    const target = createPeerModel(model, 'target-model', targetSaveStepParams);
+    mockState.flowContextValue.modal.confirm.mockResolvedValue(false);
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-unsaved-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    const { view } = await openDynamicFlowsEditor(model);
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Current block' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(saveStepParams).toHaveBeenCalledTimes(1);
+    expect(targetSaveStepParams).toHaveBeenCalledTimes(1);
+    expect(mockState.flowContextValue.modal.confirm).not.toHaveBeenCalled();
+    expect(view.close).toHaveBeenCalledTimes(1);
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(model.flowRegistry.getFlows().size).toBe(2);
+    expect(target.flowRegistry.getFlows().size).toBe(2);
+  });
+
+  it('provides the active source model context inside source tabs', async () => {
+    const model = createModel();
+    const target = createPeerModel(model, 'target-model');
+    const seenModelUids: string[] = [];
+    const ContextProbe = () => {
+      const ctx = useFlowContext<any>();
+      seenModelUids.push(ctx?.model?.uid);
+      return null;
+    };
+    model.flowEngine.flowSettings.renderStepForm = vi.fn(() => <ContextProbe />) as any;
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-context-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    await openDynamicFlowsEditor(model);
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+
+    await waitFor(() => expect(seenModelUids).toContain('target-model'));
+  });
 });