@nocobase/flow-engine 2.0.0-beta.9 → 2.0.0

package/src/components/settings/wrappers/contextual/FlowsContextMenu.tsx

@@ -7,14 +7,19 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DeleteOutlined, ExclamationCircleOutlined, SettingOutlined } from '@ant-design/icons';
+import { DeleteOutlined, ExclamationCircleOutlined, QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Alert, Dropdown, Modal } from 'antd';
+import { Alert, Dropdown, Modal, Tooltip, theme } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FlowRuntimeContext } from '../../../../flowContext';
 import { useFlowModelById } from '../../../../hooks';
 import { FlowModel } from '../../../../models';
-import { getT, setupRuntimeContextSteps, shouldHideStepInSettings } from '../../../../utils';
+import {
+  getT,
+  resolveStepDisabledInSettings,
+  setupRuntimeContextSteps,
+  shouldHideStepInSettings,
+} from '../../../../utils';
 import { openStepSettingsDialog } from './StepSettingsDialog';
 import { ActionDefinition } from '../../../../types';
 import { observer } from '../../../../reactive';
@@ -74,6 +79,21 @@ const FlowsContextMenu: React.FC<FlowsContextMenuProps> = (props) => {
 const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
   ({ model, children, enabled = true, position = 'right', showDeleteButton = true }) => {
     const t = getT(model);
+    const { token } = theme.useToken();
+    const disabledIconColor = token?.colorTextTertiary || token?.colorTextDescription || token?.colorTextSecondary;
+    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = useState<any[]>([]);
+    const isStepMenuItemDisabled = useCallback(
+      (key: string) => {
+        const [flowKey, stepKey] = key.split(':');
+        if (!flowKey || !stepKey) return false;
+        return configurableFlowsAndSteps.some(({ flow, steps }) => {
+          if (flow.key !== flowKey) return false;
+          return steps.some((stepInfo) => stepInfo.stepKey === stepKey && !!stepInfo.disabled);
+        });
+      },
+      [configurableFlowsAndSteps],
+    );
+
     const handleMenuClick = useCallback(
       ({ key }: { key: string }) => {
         if (key === 'delete') {
@@ -99,6 +119,9 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
             },
           });
         } else {
+          if (isStepMenuItemDisabled(key)) {
+            return;
+          }
           // 处理step配置，key格式为 "flowKey:stepKey"
           const [flowKey, stepKey] = key.split(':');
           try {
@@ -127,7 +150,7 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
           }
         }
       },
-      [model],
+      [isStepMenuItemDisabled, model],
     );
 
     if (!model) {
@@ -156,6 +179,7 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
                 if (await shouldHideStepInSettings(model as FlowModel, flow, actionStep)) {
                   return null;
                 }
+                const disabledState = await resolveStepDisabledInSettings(model as FlowModel, flow, actionStep);
 
                 // 从step获取uiSchema（如果存在）
                 const stepUiSchema: ActionDefinition['uiSchema'] = actionStep.uiSchema || {};
@@ -191,6 +215,8 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
                   step: actionStep,
                   uiSchema: mergedUiSchema,
                   title: actionStep.title || stepKey,
+                  disabled: disabledState.disabled,
+                  disabledReason: disabledState.reason,
                 };
               }),
             ).then((steps) => steps.filter(Boolean));
@@ -206,8 +232,6 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
       }
     }, [model]);
 
-    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = useState<any[]>([]);
-
     useEffect(() => {
       let mounted = true;
       (async () => {
@@ -243,7 +267,17 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
           menuItems.push({
             key: `${flow.key}:${stepInfo.stepKey}`,
             icon: <SettingOutlined />,
-            label: stepInfo.title,
+            label: stepInfo.disabled ? (
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                {stepInfo.title}
+                <Tooltip title={stepInfo.disabledReason} placement="right" destroyTooltipOnHide>
+                  <QuestionCircleOutlined style={{ color: disabledIconColor }} />
+                </Tooltip>
+              </span>
+            ) : (
+              stepInfo.title
+            ),
+            disabled: !!stepInfo.disabled,
           });
         });
       });

package/src/components/settings/wrappers/contextual/StepSettingsDialog.tsx

@@ -14,7 +14,15 @@ import { Button, Space } from 'antd';
 import React, { useEffect } from 'react';
 import { FlowSettingsContextProvider, useFlowSettingsContext } from '../../../../hooks/useFlowSettingsContext';
 import { StepSettingsDialogProps } from '../../../../types';
-import { compileUiSchema, FlowExitException, getT, resolveDefaultParams, resolveStepUiSchema } from '../../../../utils';
+import {
+  compileUiSchema,
+  FlowExitException,
+  getT,
+  resolveDefaultParams,
+  resolveStepUiSchema,
+  FlowCancelSaveException,
+} from '../../../../utils';
+import { FlowExitAllException } from '../../../../utils/exceptions';
 import { observer } from '../../../../reactive';
 
 const SchemaField = createSchemaField();
@@ -203,7 +211,10 @@ const openStepSettingsDialog = async ({
                           await afterParamsSave(flowRuntimeContext, currentValues, previousParams);
                         }
                       } catch (error) {
-                        if (error instanceof FlowExitException) {
+                        if (error instanceof FlowCancelSaveException) {
+                          return;
+                        }
+                        if (error instanceof FlowExitException || error instanceof FlowExitAllException) {
                           currentDialog.close();
                           return;
                         }

package/src/components/settings/wrappers/contextual/__tests__/DefaultSettingsIcon.test.tsx

@@ -18,6 +18,7 @@ import { DefaultSettingsIcon } from '../DefaultSettingsIcon';
 
 // ---- Mock antd to capture Dropdown menu props ----
 const dropdownMenus: any[] = [];
+const mockColorTextTertiary = '#8c8c8c';
 vi.mock('antd', async (importOriginal) => {
   const messageApi = {
     success: vi.fn(),
@@ -35,6 +36,7 @@ vi.mock('antd', async (importOriginal) => {
   const Dropdown = (props: any) => {
     (globalThis as any).__lastDropdownMenu = props.menu;
     (globalThis as any).__lastDropdownOnOpenChange = props.onOpenChange;
+    (globalThis as any).__lastDropdownOpen = props.open;
     dropdownMenus.push(props.menu);
     return React.createElement('span', { 'data-testid': 'dropdown' }, props.children);
   };
@@ -71,6 +73,7 @@ vi.mock('antd', async (importOriginal) => {
   const Alert = (props: any) => React.createElement('div', { role: 'alert' }, props.message ?? 'Alert');
   const Button = (props: any) => React.createElement('button', props, props.children ?? 'Button');
   const Result = (props: any) => React.createElement('div', null, props.children ?? 'Result');
+  const Tooltip = ({ children }: any) => React.createElement('span', null, children);
 
   // Keep other components from original mock/default
   return {
@@ -89,15 +92,46 @@ vi.mock('antd', async (importOriginal) => {
     Alert,
     Button,
     Result,
-    theme: { useToken: () => ({}) },
+    Tooltip,
+    theme: { useToken: () => ({ token: { colorTextTertiary: mockColorTextTertiary } }) },
   };
 });
 
+const findElement = (node: any, predicate: (element: React.ReactElement) => boolean): React.ReactElement | null => {
+  if (!node) return null;
+
+  if (React.isValidElement(node)) {
+    if (predicate(node)) {
+      return node;
+    }
+
+    const children = React.Children.toArray(node.props?.children);
+    for (const child of children) {
+      const matched = findElement(child, predicate);
+      if (matched) {
+        return matched;
+      }
+    }
+  }
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const matched = findElement(child, predicate);
+      if (matched) {
+        return matched;
+      }
+    }
+  }
+
+  return null;
+};
+
 describe('DefaultSettingsIcon - only static flows are shown', () => {
   beforeEach(() => {
     dropdownMenus.length = 0;
     (globalThis as any).__lastDropdownMenu = undefined;
     (globalThis as any).__lastDropdownOnOpenChange = undefined;
+    (globalThis as any).__lastDropdownOpen = undefined;
   });
 
   afterEach(() => {
@@ -239,6 +273,67 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
     });
   });
 
+  it('keeps disabled legacy step visible with tooltip and blocks click', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-disabled', flowEngine: engine });
+    const openSpy = vi.spyOn(model, 'openFlowSettings').mockResolvedValue(undefined as any);
+    const disabledReason = 'This setting has been moved to: Form block settings > Field values';
+
+    TestFlowModel.registerFlow({
+      key: 'flowDisabled',
+      title: 'Flow Disabled',
+      steps: {
+        legacyDefault: {
+          title: 'Default value',
+          disabledInSettings: true,
+          disabledReasonInSettings: disabledReason,
+          uiSchema: { f: { type: 'string', 'x-component': 'Input' } },
+        },
+      },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    let disabledItem: any;
+    await waitFor(() => {
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      disabledItem = items.find((it) => String(it.key || '') === 'flowDisabled:legacyDefault');
+      expect(disabledItem).toBeTruthy();
+      expect(disabledItem.disabled).toBe(true);
+    });
+
+    const resolvedLabel =
+      React.isValidElement(disabledItem.label) && typeof disabledItem.label.type === 'function'
+        ? (disabledItem.label.type as any)(disabledItem.label.props)
+        : disabledItem.label;
+
+    const tooltipElement = findElement(
+      resolvedLabel,
+      (element) =>
+        Object.prototype.hasOwnProperty.call(element.props || {}, 'title') && element.props.title === disabledReason,
+    );
+    expect(tooltipElement).toBeTruthy();
+
+    const iconElement = React.isValidElement(tooltipElement) ? tooltipElement.props.children : null;
+    expect(React.isValidElement(iconElement)).toBe(true);
+    expect((iconElement as any).props?.style?.color).toBe(mockColorTextTertiary);
+
+    const menu = (globalThis as any).__lastDropdownMenu;
+    await act(async () => {
+      menu.onClick?.({ key: 'flowDisabled:legacyDefault' });
+    });
+
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+
   it('clicking a step item opens flow settings with correct args', async () => {
     class TestFlowModel extends FlowModel {}
     const engine = new FlowEngine();
@@ -265,10 +360,60 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
     });
     const menu = (globalThis as any).__lastDropdownMenu;
-    menu.onClick?.({ key: 'flowC:general' });
+    await act(async () => {
+      menu.onClick?.({ key: 'flowC:general' });
+    });
     expect(openSpy).toHaveBeenCalledWith({ flowKey: 'flowC', stepKey: 'general' });
   });
 
+  it('closes dropdown when opening flow settings modal', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-close', flowEngine: engine });
+    vi.spyOn(model, 'openFlowSettings').mockResolvedValue(undefined as any);
+
+    TestFlowModel.registerFlow({
+      key: 'flowClose',
+      title: 'Flow Close',
+      steps: {
+        general: { title: 'General', uiSchema: { f: { type: 'string', 'x-component': 'Input' } } },
+      },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
+      expect((globalThis as any).__lastDropdownOnOpenChange).toBeTruthy();
+    });
+
+    // open dropdown
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+    });
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownOpen).toBe(true);
+    });
+
+    const menu = (globalThis as any).__lastDropdownMenu;
+
+    // click config item to open modal
+    await act(async () => {
+      menu.onClick?.({ key: 'flowClose:general' });
+    });
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownOpen).toBe(false);
+    });
+  });
+
   it('copy UID action writes model uid to clipboard', async () => {
     class TestFlowModel extends FlowModel {}
     const engine = new FlowEngine();
@@ -298,7 +443,9 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
     });
     const menu = (globalThis as any).__lastDropdownMenu;
-    menu.onClick?.({ key: 'copy-uid' });
+    await act(async () => {
+      menu.onClick?.({ key: 'copy-uid' });
+    });
     expect((navigator as any).clipboard.writeText).toHaveBeenCalledWith('m-copy');
   });
 
@@ -326,7 +473,9 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
     });
     const menu = (globalThis as any).__lastDropdownMenu;
-    menu.onClick?.({ key: 'delete' });
+    await act(async () => {
+      menu.onClick?.({ key: 'delete' });
+    });
     expect(destroySpy).toHaveBeenCalled();
   });
 
@@ -556,8 +705,11 @@ describe('DefaultSettingsIcon - extra menu items', () => {
       });
 
       const menu = (globalThis as any).__lastDropdownMenu;
-      menu.onClick?.({ key: 'extra-action' });
+      await act(async () => {
+        menu.onClick?.({ key: 'extra-action' });
+      });
       expect(onClick).toHaveBeenCalled();
+      expect((globalThis as any).__lastDropdownOpen).toBe(false);
     } finally {
       dispose?.();
     }

package/src/components/variables/VariableInput.tsx

@@ -204,8 +204,10 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
   useEffect(() => {
     if (!resolvedMetaTreeNode) return;
     if (!Array.isArray(resolvedMetaTree) || innerValue == null) return;
-    const finalValue = resolveValueFromPath?.(resolvedMetaTreeNode) || innerValue;
-    emitChange(finalValue, resolvedMetaTreeNode);
+    // During initial restoration, `innerValue` already represents the persisted value.
+    // Do NOT override it with `resolveValueFromPath`, otherwise truthy defaults (e.g. RunJSValue objects)
+    // may accidentally wipe persisted content when reopening.
+    emitChange(innerValue, resolvedMetaTreeNode);
     setCurrentMetaTreeNode(resolvedMetaTreeNode);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [resolvedMetaTreeNode]);
@@ -241,12 +243,18 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
 
   const handleVariableSelect = useCallback(
     (variableValue: string, metaTreeNode?: MetaTreeNode) => {
+      if (!metaTreeNode && variableValue === '') {
+        const cleared = clearValue !== undefined ? clearValue : null;
+        setInnerValue(cleared);
+        emitChange(cleared as any);
+        return;
+      }
       setCurrentMetaTreeNode(metaTreeNode);
       const finalValue = resolveValueFromPath?.(metaTreeNode) || variableValue;
       setInnerValue(finalValue);
       emitChange(finalValue, metaTreeNode);
     },
-    [emitChange, resolveValueFromPath],
+    [emitChange, resolveValueFromPath, clearValue],
   );
 
   const { disabled } = restProps;
@@ -286,7 +294,7 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
 
   const inputProps = useMemo(() => {
     const baseProps = {
-      value: innerValue ?? '',
+      value: ValueComponent === Input ? innerValue ?? '' : innerValue,
       onChange: handleInputChange,
       disabled,
     };

package/src/components/variables/VariableTag.tsx

@@ -30,65 +30,74 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
 
   const { data: displayedValue } = useRequest(
     async () => {
-      // 1) 优先使用已解析到的节点（包含完整父标题链）
-      if (metaTreeNode) {
-        return metaTreeNode.parentTitles
-          ? [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join('/')
-          : ctx.t(metaTreeNode.title) || '';
-      }
+      const resolveLabelFromPath = async (rawPath?: (string | number)[]): Promise<string | null> => {
+        if (!rawPath) return null;
+        if (!Array.isArray(rawPath)) return null;
+        if (!Array.isArray(resolvedMetaTree)) return null;
 
-      // 2) 无 metaTreeNode 时，尝试从值还原路径，并在 metaTree 中寻找“最深前缀节点”，
-      //    即便最后一段无效，也能显示前缀的翻译标题。
-      if (!value) return String(value);
-      const rawPath = parseValueToPath(value);
-      if (!rawPath || !Array.isArray(resolvedMetaTree)) {
-        return Array.isArray(rawPath) ? rawPath.join('/') : String(value);
-      }
+        // 兼容 metaTree 为子树：顶层不含首段时，裁剪首段
+        const topNames = new Set((resolvedMetaTree || []).map((n: any) => String(n?.name)));
+        const path = !topNames.has(String(rawPath[0])) ? rawPath.slice(1) : rawPath;
+        if (!path.length) return '';
+
+        let nodes: MetaTreeNode[] | undefined = resolvedMetaTree as MetaTreeNode[];
+        const titleChain: string[] = [];
+        let matchedCount = 0;
+
+        for (let i = 0; i < path.length; i++) {
+          if (!nodes) break;
+          const seg = String(path[i]);
+          const node = nodes.find((n) => String(n?.name) === seg) as MetaTreeNode | undefined;
+          if (!node) break; // 停在第一个无效段之前
+
+          titleChain.push(String(node.title ?? node.name ?? seg));
+          matchedCount = i + 1;
 
-      // 兼容 metaTree 为子树：顶层不含首段时，裁剪首段
-      const topNames = new Set((resolvedMetaTree || []).map((n: any) => String(n?.name)));
-      const path = !topNames.has(String(rawPath[0])) ? rawPath.slice(1) : rawPath;
-      if (!path.length) return '';
-
-      let nodes: MetaTreeNode[] | undefined = resolvedMetaTree as MetaTreeNode[];
-      let deepest: MetaTreeNode | null = null;
-      let matchedCount = 0;
-      for (let i = 0; i < path.length; i++) {
-        if (!nodes) break;
-        const seg = String(path[i]);
-        const node = nodes.find((n) => String(n?.name) === seg) as MetaTreeNode | undefined;
-        if (!node) break; // 停在第一个无效段之前
-        deepest = node;
-        matchedCount = i + 1;
-        if (i < path.length - 1) {
-          if (Array.isArray(node.children)) {
-            nodes = node.children as any;
-          } else if (typeof node.children === 'function') {
-            try {
-              const childNodes = await (node.children as any)();
-              (node as any).children = childNodes;
-              nodes = childNodes as any;
-            } catch {
+          if (i < path.length - 1) {
+            if (Array.isArray(node.children)) {
+              nodes = node.children as any;
+            } else if (typeof node.children === 'function') {
+              try {
+                const childNodes = await (node.children as any)();
+                (node as any).children = childNodes;
+                nodes = childNodes as any;
+              } catch {
+                nodes = undefined;
+              }
+            } else {
               nodes = undefined;
             }
-          } else {
-            nodes = undefined;
           }
         }
-      }
 
-      if (deepest) {
-        const titles = deepest.parentTitles ? [...deepest.parentTitles, deepest.title] : [deepest.title];
-        let label = titles.map(ctx.t).join('/');
+        if (matchedCount === 0) return null;
+
+        let label = titleChain.map(ctx.t).join('/');
         if (matchedCount < path.length) {
           const tail = path.slice(matchedCount).join('/');
           label = tail ? `${label}/${tail}` : label;
         }
         return label;
+      };
+
+      // 1) 优先使用已解析到的节点（包含完整父标题链）
+      if (metaTreeNode?.parentTitles) {
+        return [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join('/');
       }
 
-      // 3) 完全找不到任何前缀时，退回原始路径字符串
-      return path.join('/');
+      // 2) metaTreeNode 存在但缺少 parentTitles：尝试根据 value/metaTreeNode.paths 从 metaTree 还原完整路径
+      if (metaTreeNode) {
+        const rawPath = parseValueToPath(value) || metaTreeNode.paths;
+        const label = await resolveLabelFromPath(rawPath as any);
+        return label ?? ctx.t(metaTreeNode.title) ?? '';
+      }
+
+      // 3) 无 metaTreeNode：从 value 还原路径并拼接标题链；若找不到任何前缀则回退原始路径字符串
+      if (!value) return String(value);
+      const rawPath = parseValueToPath(value);
+      const label = await resolveLabelFromPath(rawPath as any);
+      if (label != null) return label;
+      return Array.isArray(rawPath) ? rawPath.join('/') : String(value);
     },
     { refreshDeps: [resolvedMetaTree, value, metaTreeNode] },
   );