@nocobase/flow-engine 2.2.0-beta.14 → 2.2.0-beta.16

package/src/components/variables/VariableInput.tsx

@@ -125,16 +125,19 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
     [onChange],
   );
 
+  const resolvedPath = useMemo(() => {
+    return resolvePathFromValue?.(innerValue);
+  }, [innerValue, resolvePathFromValue]);
+
   const resolvedMetaTreeNode = useMemo(() => {
     if (currentMetaTreeNode) return currentMetaTreeNode;
     if (Array.isArray(resolvedMetaTree)) {
-      const path = resolvePathFromValue?.(innerValue);
-      if (path) {
-        return findMetaTreeNodeByPath(resolvedMetaTree, path);
+      if (resolvedPath) {
+        return findMetaTreeNodeByPath(resolvedMetaTree, resolvedPath);
       }
     }
     return null;
-  }, [currentMetaTreeNode, innerValue, resolvedMetaTree, resolvePathFromValue]);
+  }, [currentMetaTreeNode, resolvedMetaTree, resolvedPath]);
 
   // 当 value 存在但 currentMetaTreeNode 还未恢复，尝试按路径逐级加载（支持 children 为函数的场景）
   useEffect(() => {
@@ -192,14 +195,30 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
     };
 
     restoreFromValue();
-  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode]);
+  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode, value]);
 
   const ValueComponent = useMemo(() => {
     const Component = renderInputComponent?.(resolvedMetaTreeNode);
     const CustomComponent = resolvedMetaTreeNode?.render;
-    const finalComponent = isVariableValue(innerValue) ? VariableTag : Component || CustomComponent || Input;
+    // Some domains (workflow) persist variables as `{{$context...}}` rather than the core `{{ ctx... }}` form.
+    // When a custom converter recognizes such a value as a variable path, render VariableTag even if the path no longer
+    // exists in the current meta tree. VariableTag will then show either the resolved label or the parsing-failed state.
+    const shouldRenderVariableTag =
+      isVariableValue(innerValue) ||
+      (Array.isArray(resolvedPath) && resolvedPath.length > 0 && !Component && !CustomComponent);
+    const finalComponent = shouldRenderVariableTag ? VariableTag : Component || CustomComponent || Input;
     return finalComponent;
-  }, [renderInputComponent, resolvedMetaTreeNode, innerValue]);
+  }, [renderInputComponent, resolvedMetaTreeNode, innerValue, resolvedPath]);
+
+  const isVariableActive = useMemo(() => {
+    return (
+      isVariableValue(innerValue) ||
+      (Array.isArray(resolvedPath) &&
+        resolvedPath.length > 0 &&
+        !renderInputComponent?.(resolvedMetaTreeNode) &&
+        !resolvedMetaTreeNode?.render)
+    );
+  }, [innerValue, renderInputComponent, resolvedMetaTreeNode, resolvedPath]);
 
   useEffect(() => {
     if (!resolvedMetaTreeNode) return;
@@ -303,8 +322,11 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
       return {
         ...baseProps,
         onClear: handleClear,
+        disabled,
+        allowCustomTagInput: false,
         metaTreeNode: resolvedMetaTreeNode,
         metaTree,
+        resolvedPath,
         style: stableProps.style,
       };
     }
@@ -327,6 +349,7 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
     disabled,
     handleClear,
     resolvedMetaTreeNode,
+    resolvedPath,
     metaTree,
     ValueComponent,
     stableProps,
@@ -356,6 +379,8 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
       <FlowContextSelector
         metaTree={resolvedMetaTree}
         value={innerValue}
+        active={isVariableActive}
+        disabled={disabled}
         onChange={handleVariableSelect}
         parseValueToPath={resolvePathFromValue}
         formatPathToValue={resolveValueFromPath}

package/src/components/variables/VariableTag.tsx

@@ -17,41 +17,46 @@ import { useRequest } from 'ahooks';
 import { useFlowContext } from '../../FlowContextProvider';
 import type { MetaTreeNode } from '../../flowContext';
 
+const VARIABLE_PARSING_FAILED_TEXT = 'Variable parsing failed';
+
 const VariableTagComponent: React.FC<VariableTagProps> = ({
   value,
   onClear,
+  disabled = false,
+  allowCustomTagInput = true,
   className,
   style,
   metaTreeNode,
   metaTree,
+  resolvedPath,
 }) => {
   const { resolvedMetaTree } = useResolvedMetaTree(metaTree);
   const ctx = useFlowContext();
 
-  const { data: displayedValue } = useRequest(
+  const { data: displayState } = useRequest(
     async () => {
-      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;
+      const resolveLabelFromPath = async (
+        rawPath?: (string | number)[],
+      ): Promise<{ label: string | null; resolved: boolean; attempted: boolean }> => {
+        if (!rawPath) return { label: null, resolved: false, attempted: false };
+        if (!Array.isArray(rawPath)) return { label: null, resolved: false, attempted: false };
+        if (!Array.isArray(resolvedMetaTree)) return { label: null, resolved: false, attempted: false };
 
         // 兼容 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 '';
+        if (!path.length) return { label: '', resolved: true, attempted: true };
 
         let nodes: MetaTreeNode[] | undefined = resolvedMetaTree as MetaTreeNode[];
         const titleChain: string[] = [];
-        let matchedCount = 0;
 
         for (let i = 0; i < path.length; i++) {
-          if (!nodes) break;
+          if (!nodes) return { label: null, resolved: false, attempted: true };
           const seg = String(path[i]);
           const node = nodes.find((n) => String(n?.name) === seg) as MetaTreeNode | undefined;
-          if (!node) break; // 停在第一个无效段之前
+          if (!node) return { label: null, resolved: false, attempted: true };
 
           titleChain.push(String(node.title ?? node.name ?? seg));
-          matchedCount = i + 1;
 
           if (i < path.length - 1) {
             if (Array.isArray(node.children)) {
@@ -70,36 +75,43 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
           }
         }
 
-        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;
+        return { label: titleChain.map(ctx.t).join('/'), resolved: true, attempted: true };
       };
 
       // 1) 优先使用已解析到的节点（包含完整父标题链）
       if (metaTreeNode?.parentTitles) {
-        return [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join('/');
+        return {
+          text: [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join('/'),
+          invalid: false,
+        };
       }
 
       // 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) ?? '';
+        const rawPath = resolvedPath || parseValueToPath(value) || metaTreeNode.paths;
+        const result = await resolveLabelFromPath(rawPath as any);
+        if (result.resolved && result.label != null) {
+          return { text: result.label, invalid: false };
+        }
+        if (result.attempted) {
+          return { text: VARIABLE_PARSING_FAILED_TEXT, invalid: true, rawValue: String(value ?? '') };
+        }
+        return { text: ctx.t(metaTreeNode.title) ?? '', invalid: false };
       }
 
       // 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);
+      if (!value) return { text: String(value), invalid: false };
+      const rawPath = resolvedPath || parseValueToPath(value);
+      const result = await resolveLabelFromPath(rawPath as any);
+      if (result.resolved && result.label != null) {
+        return { text: result.label, invalid: false };
+      }
+      if (result.attempted) {
+        return { text: VARIABLE_PARSING_FAILED_TEXT, invalid: true, rawValue: String(value ?? '') };
+      }
+      return { text: Array.isArray(rawPath) ? rawPath.join('/') : String(value), invalid: false };
     },
-    { refreshDeps: [resolvedMetaTree, value, metaTreeNode] },
+    { refreshDeps: [resolvedMetaTree, resolvedPath, value, metaTreeNode] },
   );
 
   const { token } = theme.useToken();
@@ -119,13 +131,13 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
   `;
 
   const customTagRender = (props: any) => {
-    const { label } = props;
-    const fullText = typeof label === 'string' ? label : String(label);
+    const fullText = displayState?.text || (typeof props.label === 'string' ? props.label : String(props.label));
+    const tooltipText = displayState?.invalid ? displayState.rawValue || fullText : fullText;
 
     return (
-      <Tooltip title={fullText} placement="top" getPopupContainer={() => document.body}>
+      <Tooltip title={tooltipText} placement="top" getPopupContainer={() => document.body}>
         <Tag
-          color="blue"
+          color={displayState?.invalid ? 'error' : 'blue'}
           style={{
             margin: `0 ${token.marginXXS || token.marginXS}px`,
             borderRadius: token.borderRadiusSM,
@@ -166,12 +178,14 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
         flex: '1 1 auto',
         ...style,
       }}
-      value={displayedValue ? [displayedValue] : []}
-      mode="tags"
+      value={displayState?.text ? [displayState.text] : []}
+      mode={allowCustomTagInput ? 'tags' : 'multiple'}
       open={false}
-      allowClear={!!onClear}
-      onClear={onClear}
-      disabled={!onClear}
+      showSearch={allowCustomTagInput}
+      searchValue={allowCustomTagInput ? undefined : ''}
+      allowClear={!disabled && !!onClear}
+      onClear={disabled ? undefined : onClear}
+      disabled={disabled || !onClear}
       variant="outlined"
       suffixIcon={null}
       tagRender={customTagRender}

package/src/components/variables/__tests__/FlowContextSelector.test.tsx

@@ -67,6 +67,23 @@ describe('FlowContextSelector', () => {
     });
   });
 
+  it('uses explicit active=false to keep the default trigger unhighlighted even when value parses to a path', async () => {
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector
+          metaTree={() => flowContext.getPropertyMetaTree()}
+          value="{{ ctx.user.name }}"
+          active={false}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    const button = await screen.findByRole('button');
+    expect(button.className).not.toContain('ant-btn-primary');
+  });
+
   it('should support function metaTree loading', async () => {
     const flowContext = createTestFlowContext();
     const metaTreeFn = vi.fn(() => flowContext.getPropertyMetaTree());
@@ -267,6 +284,43 @@ describe('FlowContextSelector', () => {
     });
   });
 
+  it('shows enabled variable item tooltip above the menu item', async () => {
+    const flowContext = createTestFlowContext();
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$system',
+        title: 'System variables',
+        type: '',
+        paths: ['$system'],
+        children: [
+          {
+            name: 'instanceId',
+            title: 'Instance ID',
+            type: '',
+            paths: ['$system', 'instanceId'],
+            options: { tooltip: 'The ID of current server instance' },
+          },
+        ],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector metaTree={metaTree} />
+      </TestFlowContextWrapper>,
+    );
+
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(await screen.findByText('System variables'));
+
+    expect(await screen.findByText('Instance ID')).toBeInTheDocument();
+    const tooltipIcon = screen.getByLabelText('Instance ID tooltip');
+    fireEvent.mouseEnter(tooltipIcon);
+
+    const tooltip = await screen.findByText('The ID of current server instance');
+    expect(tooltip.closest('.ant-tooltip')).toHaveClass('ant-tooltip-placement-top');
+  });
+
   it('should support inline search input when children is null and keep lazy expand', async () => {
     const flowContext = createTestFlowContext();
     const loadOrgChildren = vi.fn(async () => [
@@ -405,10 +459,13 @@ describe('FlowContextSelector', () => {
 
     const clearIcon = document.querySelector('.ant-input-clear-icon') as HTMLElement | null;
     expect(clearIcon).toBeInTheDocument();
+    if (!clearIcon) {
+      throw new Error('Expected inline clear icon to be present');
+    }
 
-    fireEvent.mouseDown(clearIcon!);
-    fireEvent.mouseUp(clearIcon!);
-    fireEvent.click(clearIcon!);
+    fireEvent.mouseDown(clearIcon);
+    fireEvent.mouseUp(clearIcon);
+    fireEvent.click(clearIcon);
 
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith('', undefined);

package/src/components/variables/__tests__/VariableHybridInput.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * 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.
+ */
+
+/**
+ * Pins how a `{{ … }}` reference renders as its label when the label lives below a lazily-loaded meta-tree level (e.g. a workflow node's output fields under `$jobsMapByNodeKey.<nodeKey>`). `buildLabelMap` only pre-walks already-loaded (array) children into a memoized map, so the two real user flows each need their own resolution path, both pinned here:
+ *   - after reload  — the value is already a deep reference at mount, its level still an unresolved thunk → the preload effect resolves it.
+ *   - after picking — the user drills into a lazy level (cascader resolves it IN PLACE, no tree-ref change) then picks a leaf → the live walk of the tree's current contents resolves it on the same render.
+ * Plus the top-level (already-loaded) and not-in-tree (raw-token fallback) cases.
+ */
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { VariableHybridInput, type VariableHybridInputConverters } from '../VariableHybridInput';
+import type { MetaTreeNode } from '../../../flowContext';
+import { createTestFlowContext, TestFlowContextWrapper } from './test-utils';
+
+// Workflow-style converters: `{{$root.a.b}}` (dotted path, no inner spaces).
+const VARIABLE_REGEXP = /\{\{\s*([^{}]+?)\s*\}\}/g;
+const workflowConverters: VariableHybridInputConverters = {
+  formatPathToValue: (item?: MetaTreeNode) => {
+    const path = item?.paths ?? [];
+    return path.length ? `{{${path.join('.')}}}` : '';
+  },
+  parseValueToPath: (value?: string) => {
+    if (typeof value !== 'string') return undefined;
+    const match = value.trim().match(/^\{\{\s*(.+?)\s*\}\}$/);
+    return match ? match[1].split('.') : undefined;
+  },
+  variableRegExp: VARIABLE_REGEXP,
+};
+
+const TAG_SELECTOR = '.nb-variable-tag';
+
+describe('VariableHybridInput — saved reference labels', () => {
+  it('renders a top-level (already-loaded) reference as its label, not the raw token', async () => {
+    const flowContext = createTestFlowContext();
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$user',
+        title: 'User',
+        type: '',
+        paths: ['$user'],
+        children: [{ name: 'name', title: 'Name', type: 'string', paths: ['$user', 'name'] }],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableHybridInput value="{{$user.name}}" metaTree={metaTree} converters={workflowConverters} />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(() => {
+      const tag = document.querySelector(TAG_SELECTOR);
+      expect(tag).toBeTruthy();
+      expect(tag?.textContent).toBe('User/Name');
+    });
+  });
+
+  it('shows the label after reload: a deep reference present at mount preloads its lazy level', async () => {
+    const flowContext = createTestFlowContext();
+    // The node's output fields are behind a lazy `children` thunk — exactly the `$jobsMapByNodeKey.<nodeKey>` shape produced by the workflow adapter.
+    const loadChildren = vi.fn(
+      async (): Promise<MetaTreeNode[]> => [
+        { name: 'name', title: 'Name', type: 'string', paths: ['$jobsMapByNodeKey', 'node1', 'name'] },
+      ],
+    );
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$jobsMapByNodeKey',
+        title: 'Node result',
+        type: '',
+        paths: ['$jobsMapByNodeKey'],
+        children: [
+          {
+            name: 'node1',
+            title: 'Query',
+            type: '',
+            paths: ['$jobsMapByNodeKey', 'node1'],
+            children: loadChildren,
+          },
+        ],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableHybridInput
+          value="{{$jobsMapByNodeKey.node1.name}}"
+          metaTree={metaTree}
+          converters={workflowConverters}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    // The lazy thunk is invoked by the preload, and the deep label appears.
+    await waitFor(() => {
+      expect(loadChildren).toHaveBeenCalled();
+      const tag = document.querySelector(TAG_SELECTOR);
+      expect(tag?.textContent).toBe('Node result/Query/Name');
+    });
+    // It must NOT leave the raw token visible.
+    expect(document.body.textContent).not.toContain('{{$jobsMapByNodeKey.node1.name}}');
+  });
+
+  it('shows the label after picking: a level expanded in place then selected resolves live', async () => {
+    // Reproduces drilling into a lazy level in the cascader: that resolves the node's `children` onto the SAME meta-tree object in place — WITHOUT changing the tree reference — then the user picks a leaf, so `value` updates. The memoized `labelMap` (keyed on the tree reference) still misses the freshly loaded leaf; only a live walk of the tree's current contents resolves it.
+    const flowContext = createTestFlowContext();
+    const node1: MetaTreeNode = {
+      name: 'node1',
+      title: 'Query',
+      type: '',
+      paths: ['$jobsMapByNodeKey', 'node1'],
+      // Starts WITHOUT children (an unexpanded branch). No thunk — so the preload effect/`loadedFlag` path does not fire; the fix must come from the live walk.
+    };
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$jobsMapByNodeKey',
+        title: 'Node result',
+        type: '',
+        paths: ['$jobsMapByNodeKey'],
+        children: [node1],
+      },
+    ];
+
+    // Mount with no reference yet — the deep level is not loaded.
+    const { rerender } = render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableHybridInput value="" metaTree={metaTree} converters={workflowConverters} />
+      </TestFlowContextWrapper>,
+    );
+
+    // Simulate the cascader's loadData: resolve node1's children in place on the SAME tree object (no new reference, no thunk).
+    node1.children = [
+      { name: 'name', title: 'Role name', type: 'string', paths: ['$jobsMapByNodeKey', 'node1', 'name'] },
+    ];
+
+    // The user picks the leaf → value updates to the deep reference.
+    rerender(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableHybridInput
+          value="{{$jobsMapByNodeKey.node1.name}}"
+          metaTree={metaTree}
+          converters={workflowConverters}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(() => {
+      const tag = document.querySelector(TAG_SELECTOR);
+      expect(tag?.textContent).toBe('Node result/Query/Role name');
+    });
+    expect(document.body.textContent).not.toContain('{{$jobsMapByNodeKey.node1.name}}');
+  });
+
+  it('falls back to the raw token when the reference is not in the tree', async () => {
+    const flowContext = createTestFlowContext();
+    const metaTree: MetaTreeNode[] = [{ name: '$user', title: 'User', type: '', paths: ['$user'], children: [] }];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableHybridInput value="{{$missing.field}}" metaTree={metaTree} converters={workflowConverters} />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(() => {
+      const tag = document.querySelector(TAG_SELECTOR);
+      expect(tag?.textContent).toBe('{{$missing.field}}');
+    });
+  });
+
+  it('keeps the selector enabled when only the editor is read-only', async () => {
+    const flowContext = createTestFlowContext();
+    const onChange = vi.fn();
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$user',
+        title: 'User',
+        type: '',
+        paths: ['$user'],
+        children: [{ name: 'name', title: 'Name', type: 'string', paths: ['$user', 'name'] }],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableHybridInput
+          readOnly
+          value=""
+          onChange={onChange}
+          metaTree={metaTree}
+          converters={workflowConverters}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    const editor = screen.getByRole('textbox');
+    expect(editor).toHaveAttribute('contenteditable', 'false');
+    expect(editor).toHaveAttribute('aria-readonly', 'true');
+
+    fireEvent.input(editor, { currentTarget: { textContent: 'manual' } });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByRole('button')).not.toBeDisabled();
+  });
+});