@nocobase/flow-engine 2.2.0-alpha.7 → 2.2.0-alpha.8

package/src/components/variables/VariableTag.tsx

@@ -17,9 +17,13 @@ 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,
@@ -28,30 +32,30 @@ const VariableTagComponent: React.FC<VariableTagProps> = ({
   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,34 +74,41 @@ 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 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);
+      if (!value) return { text: String(value), invalid: false };
       const rawPath = parseValueToPath(value);
-      const label = await resolveLabelFromPath(rawPath as any);
-      if (label != null) return label;
-      return Array.isArray(rawPath) ? rawPath.join('/') : String(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] },
   );
@@ -119,13 +130,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 +177,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__/VariableInput.test.tsx

@@ -101,6 +101,81 @@ describe('VariableInput', () => {
     );
   });
 
+  it('renders a variable tag when custom converters resolve a non-ctx workflow variable format', async () => {
+    const flowContext = createTestFlowContext();
+    const workflowMetaTree = [
+      {
+        name: '$context',
+        title: 'Trigger variables',
+        type: 'object',
+        paths: ['$context'],
+        children: [
+          {
+            name: 'data',
+            title: 'Trigger data',
+            type: 'object',
+            paths: ['$context', 'data'],
+            children: [
+              {
+                name: 'updatedAt',
+                title: 'Last updated at',
+                type: 'string',
+                paths: ['$context', 'data', 'updatedAt'],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput
+          value="{{$context.data.updatedAt}}"
+          metaTree={workflowMetaTree}
+          converters={{
+            resolvePathFromValue: (currentValue) =>
+              currentValue === '{{$context.data.updatedAt}}' ? ['$context', 'data', 'updatedAt'] : undefined,
+            resolveValueFromPath: () => undefined,
+          }}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(
+      () => {
+        const variableTag = screen.getByText('Trigger variables/Trigger data/Last updated at');
+        expect(variableTag).toBeInTheDocument();
+        expect(variableTag.closest('.ant-tag')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectorButton = screen.getByRole('button');
+    expect(selectorButton.className).toContain('ant-btn-primary');
+  });
+
+  it('disables custom tag input when rendering a selected variable', async () => {
+    const flowContext = createTestFlowContext();
+    const { container } = render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput value="{{ ctx.user.name }}" metaTree={() => flowContext.getPropertyMetaTree()} />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('User/Name')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toBeInTheDocument();
+    expect(selectElement).not.toHaveClass('ant-select-show-search');
+    expect(container.querySelector('.ant-select-selection-search-input')).toHaveAttribute('readonly');
+  });
+
   it('should render FlowContextSelector button', async () => {
     const flowContext = createTestFlowContext();
     render(
@@ -334,7 +409,24 @@ describe('VariableInput', () => {
     expect(input).toHaveClass('custom-class');
 
     // Note: The disabled prop might not be correctly passed through in the current implementation
-    // This is a known limitation of the current component design
+    expect(input).toBeDisabled();
+  });
+
+  it('disables the rendered variable tag when the input is disabled', async () => {
+    const flowContext = createTestFlowContext();
+    const { container } = render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput value="{{ ctx.user.name }}" metaTree={() => flowContext.getPropertyMetaTree()} disabled />
+      </TestFlowContextWrapper>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('User/Name')).toBeInTheDocument();
+    });
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toHaveClass('ant-select-disabled');
+    expect(container.querySelector('.ant-select-clear')).not.toBeInTheDocument();
   });
 
   it('should handle empty metaTree', async () => {

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

@@ -54,6 +54,44 @@ describe('VariableTag', () => {
     expect(onClear).toBeInstanceOf(Function);
   });
 
+  it('keeps custom tag input enabled by default', async () => {
+    const onClear = vi.fn();
+    const { container } = renderWithCtx(<VariableTag value="{{ ctx.User.Email }}" onClear={onClear} />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('User/Email')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toBeInTheDocument();
+    expect(selectElement).toHaveClass('ant-select-show-search');
+    expect(container.querySelector('.ant-select-selection-search-input')).not.toHaveAttribute('readonly');
+  });
+
+  it('can disable custom tag input while keeping clear enabled', async () => {
+    const onClear = vi.fn();
+    const { container } = renderWithCtx(
+      <VariableTag value="{{ ctx.User.Email }}" onClear={onClear} allowCustomTagInput={false} />,
+    );
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('User/Email')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toBeInTheDocument();
+    expect(selectElement).not.toHaveClass('ant-select-disabled');
+    expect(selectElement).not.toHaveClass('ant-select-show-search');
+    expect(container.querySelector('.ant-select-clear')).toBeInTheDocument();
+    expect(container.querySelector('.ant-select-selection-search-input')).toHaveAttribute('readonly');
+  });
+
   it('should not show close button when onClear is not provided', async () => {
     const { container } = renderWithCtx(<VariableTag value="{{ ctx.User.Name }}" />);
 
@@ -166,6 +204,32 @@ describe('VariableTag', () => {
     }
   });
 
+  it('renders a red failure pill when the variable path cannot be resolved', async () => {
+    renderWithCtx(
+      <VariableTag
+        value="{{ ctx.missing.field }}"
+        metaTree={[
+          {
+            name: 'user',
+            title: 'User',
+            type: 'object',
+            paths: ['user'],
+            children: [{ name: 'name', title: 'Name', type: 'string', paths: ['user', 'name'] }],
+          },
+        ]}
+      />,
+    );
+
+    await waitFor(
+      () => {
+        const tag = screen.getByText('Variable parsing failed');
+        expect(tag).toBeInTheDocument();
+        expect(tag.closest('.ant-tag')).toHaveClass('ant-tag-error');
+      },
+      { timeout: 3000 },
+    );
+  });
+
   it('should render Select component with proper structure', async () => {
     const { container } = render(<VariableTag value="{{ ctx.Test }}" />);
 
@@ -233,6 +297,22 @@ describe('VariableTag', () => {
     expect(selectElement).not.toHaveClass('ant-select-disabled');
   });
 
+  it('does not show clear affordance when disabled even if onClear is provided', async () => {
+    const onClear = vi.fn();
+    const { container } = renderWithCtx(<VariableTag value="{{ ctx.Test }}" onClear={onClear} disabled />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Test')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    const selectElement = container.querySelector('.ant-select.variable');
+    expect(selectElement).toHaveClass('ant-select-disabled');
+    expect(container.querySelector('.ant-select-clear')).not.toBeInTheDocument();
+  });
+
   it('should have proper accessibility attributes for Select component', async () => {
     const { container } = renderWithCtx(<VariableTag value="{{ ctx.Test }}" />);
 

package/src/components/variables/types.ts

@@ -95,6 +95,8 @@ export interface VariableInputProps {
 export interface VariableTagProps {
   value?: string;
   onClear?: () => void;
+  disabled?: boolean;
+  allowCustomTagInput?: boolean;
   className?: string;
   style?: React.CSSProperties;
   metaTreeNode?: MetaTreeNode | null;