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

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

@@ -11,6 +11,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import * as FlowContextSelectorModule from '../../FlowContextSelector';
+import type { MetaTreeNode } from '../../../flowContext';
 import { createTestFlowContext, TestFlowContextWrapper } from './test-utils';
 
 const FlowContextSelector = FlowContextSelectorModule.FlowContextSelector;
@@ -176,13 +177,242 @@ describe('FlowContextSelector', () => {
     const cascader = screen.getByRole('button');
     fireEvent.click(cascader);
 
+    const searchInput = await screen.findByPlaceholderText('Search');
+
     await waitFor(() => {
       expect(screen.getByText('User')).toBeInTheDocument();
     });
 
-    // Search functionality is enabled via showSearch prop
-    // The actual search input behavior depends on antd's internal implementation
-    // This test verifies that showSearch prop is accepted
+    fireEvent.change(searchInput, { target: { value: 'config' } });
+
+    await waitFor(() => {
+      expect(screen.getByText('Config')).toBeInTheDocument();
+      expect(screen.queryByText('User')).not.toBeInTheDocument();
+    });
+
+    fireEvent.change(searchInput, { target: { value: '' } });
+
+    await waitFor(() => {
+      expect(screen.getByText('User')).toBeInTheDocument();
+    });
+  });
+
+  it('should not render search input when search is disabled', async () => {
+    const flowContext = createTestFlowContext();
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector metaTree={() => flowContext.getPropertyMetaTree()} showSearch={false} />
+      </TestFlowContextWrapper>,
+    );
+
+    fireEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(screen.getByText('User')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByPlaceholderText('Search')).not.toBeInTheDocument();
+  });
+
+  it('should load and expand lazy relation node after searching', async () => {
+    const flowContext = createTestFlowContext();
+    const loadOrgChildren = vi.fn(async () => [
+      {
+        name: 'org_name',
+        title: 'Org Name',
+        type: 'string',
+        paths: ['org_oho', 'org_name'],
+        parentTitles: ['org_oho'],
+      },
+    ]);
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: 'org_oho',
+        title: 'org_oho',
+        type: 'object',
+        paths: ['org_oho'],
+        children: loadOrgChildren,
+      },
+      {
+        name: 'staff',
+        title: 'staff',
+        type: 'string',
+        paths: ['staff'],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector metaTree={metaTree} showSearch onlyLeafSelectable={true} />
+      </TestFlowContextWrapper>,
+    );
+
+    fireEvent.click(screen.getByRole('button'));
+    const searchInput = await screen.findByPlaceholderText('Search');
+
+    fireEvent.change(searchInput, { target: { value: 'oho' } });
+
+    await waitFor(() => {
+      expect(screen.getByText('org_oho')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('org_oho'));
+
+    await waitFor(() => {
+      expect(loadOrgChildren).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Org Name')).toBeInTheDocument();
+    });
+  });
+
+  it('should support inline search input when children is null and keep lazy expand', async () => {
+    const flowContext = createTestFlowContext();
+    const loadOrgChildren = vi.fn(async () => [
+      {
+        name: 'org_name',
+        title: 'Org Name',
+        type: 'string',
+        paths: ['org_oho', 'org_name'],
+        parentTitles: ['org_oho'],
+      },
+    ]);
+
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: 'org_oho',
+        title: 'org_oho',
+        type: 'object',
+        paths: ['org_oho'],
+        children: loadOrgChildren,
+      },
+      {
+        name: 'staff',
+        title: 'staff',
+        type: 'string',
+        paths: ['staff'],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector metaTree={metaTree} onlyLeafSelectable={true}>
+          {null}
+        </FlowContextSelector>
+      </TestFlowContextWrapper>,
+    );
+
+    const inlineInput = screen.getByRole('textbox');
+    fireEvent.focus(inlineInput);
+    fireEvent.change(inlineInput, { target: { value: 'oho' } });
+
+    await waitFor(() => {
+      expect(screen.getByText('org_oho')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('org_oho'));
+
+    await waitFor(() => {
+      expect(loadOrgChildren).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Org Name')).toBeInTheDocument();
+    });
+  });
+
+  it('should keep dropdown open on first pointer click in inline input mode', async () => {
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector metaTree={() => flowContext.getPropertyMetaTree()}>{null}</FlowContextSelector>
+      </TestFlowContextWrapper>,
+    );
+
+    const inlineInput = await screen.findByRole('textbox');
+
+    fireEvent.mouseDown(inlineInput);
+    fireEvent.focus(inlineInput);
+    fireEvent.mouseUp(inlineInput);
+    fireEvent.click(inlineInput);
+
+    await waitFor(() => {
+      expect(screen.getByText('User')).toBeInTheDocument();
+    });
+  });
+
+  it('should show selected path text when inline input dropdown is closed', async () => {
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector metaTree={() => flowContext.getPropertyMetaTree()} value="{{ ctx.user.name }}">
+          {null}
+        </FlowContextSelector>
+      </TestFlowContextWrapper>,
+    );
+
+    const inlineInput = screen.getByRole('textbox') as HTMLInputElement;
+
+    await waitFor(() => {
+      expect(inlineInput.value).toBe('User / Name');
+    });
+  });
+
+  it('should clear selected value when clearing inline input while dropdown is closed', async () => {
+    const onChange = vi.fn();
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector
+          metaTree={() => flowContext.getPropertyMetaTree()}
+          value="{{ ctx.user.name }}"
+          onChange={onChange}
+        >
+          {null}
+        </FlowContextSelector>
+      </TestFlowContextWrapper>,
+    );
+
+    const inlineInput = screen.getByRole('textbox');
+    fireEvent.change(inlineInput, { target: { value: '' } });
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith('', undefined);
+    });
+  });
+
+  it('should clear selected value when clicking inline clear icon while dropdown is closed', async () => {
+    const onChange = vi.fn();
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector
+          metaTree={() => flowContext.getPropertyMetaTree()}
+          value="{{ ctx.user.name }}"
+          onChange={onChange}
+        >
+          {null}
+        </FlowContextSelector>
+      </TestFlowContextWrapper>,
+    );
+
+    await screen.findByRole('textbox');
+
+    const clearIcon = document.querySelector('.ant-input-clear-icon') as HTMLElement | null;
+    expect(clearIcon).toBeInTheDocument();
+
+    fireEvent.mouseDown(clearIcon!);
+    fireEvent.mouseUp(clearIcon!);
+    fireEvent.click(clearIcon!);
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith('', undefined);
+    });
   });
 
   it('should handle FlowContext metaTree', async () => {
@@ -456,6 +686,33 @@ describe('FlowContextSelector', () => {
       });
     });
 
+    it('should handle non-array parsed path in inline input mode', async () => {
+      const flowContext = createTestFlowContext();
+      const customParseValueToPath = vi.fn().mockReturnValue('' as any);
+
+      render(
+        <TestFlowContextWrapper context={flowContext}>
+          <FlowContextSelector
+            metaTree={() => flowContext.getPropertyMetaTree()}
+            value="invalid.path"
+            parseValueToPath={customParseValueToPath as any}
+          >
+            {null}
+          </FlowContextSelector>
+        </TestFlowContextWrapper>,
+      );
+
+      const inlineInput = await screen.findByRole('textbox');
+      expect(inlineInput).toBeInTheDocument();
+      expect((inlineInput as HTMLInputElement).value).toBe('');
+
+      fireEvent.focus(inlineInput);
+
+      await waitFor(() => {
+        expect(screen.getByText('User')).toBeInTheDocument();
+      });
+    });
+
     it('should handle metaTree function returning non-array', async () => {
       const invalidMetaTree = vi.fn().mockResolvedValue(null);
       const flowContext = createTestFlowContext();

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

@@ -272,6 +272,56 @@ describe('VariableTag', () => {
     );
   });
 
+  it('should display full path when metaTreeNode has no parentTitles but metaTree is provided', async () => {
+    const metaTree = [
+      {
+        name: 'item',
+        title: 'Current item',
+        type: 'object',
+        paths: ['item'],
+        children: [
+          {
+            name: 'value',
+            title: 'Attributes',
+            type: 'object',
+            paths: ['item', 'value'],
+            children: [
+              {
+                name: 'nickname',
+                title: 'Nickname',
+                type: 'string',
+                paths: ['item', 'value', 'nickname'],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const mockMetaTreeNode = {
+      name: 'nickname',
+      title: 'Nickname',
+      type: 'string',
+      paths: ['item', 'value', 'nickname'],
+      // 没有 parentTitles 属性
+    };
+
+    renderWithCtx(
+      <VariableTag
+        value="{{ ctx.item.value.nickname }}"
+        metaTreeNode={mockMetaTreeNode as any}
+        metaTree={metaTree as any}
+      />,
+    );
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Current item/Attributes/Nickname')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+  });
+
   it('should handle function type metaTree gracefully', async () => {
     const mockMetaTreeFunction = () => [
       {

package/src/components/variables/__tests__/utils.test.ts

@@ -13,6 +13,7 @@ import {
   formatPathToValue,
   loadMetaTreeChildren,
   searchInLoadedNodes,
+  filterLoadedContextSelectorItems,
   buildContextSelectorItems,
   isVariableValue,
   createDefaultConverters,
@@ -150,6 +151,83 @@ describe('Variable Utils', () => {
     });
   });
 
+  describe('filterLoadedContextSelectorItems', () => {
+    const loadedChildren = [
+      {
+        label: 'Org Name',
+        value: 'org_name',
+        paths: ['org', 'org_name'],
+        isLeaf: true,
+      },
+      {
+        label: 'Org Code',
+        value: 'org_code',
+        paths: ['org', 'org_code'],
+        isLeaf: true,
+      },
+    ] satisfies ContextSelectorItem[];
+
+    const asyncChildLoader = async () => [];
+
+    const mockOptions: ContextSelectorItem[] = [
+      {
+        label: 'Organization',
+        value: 'org',
+        paths: ['org'],
+        children: loadedChildren,
+      },
+      {
+        label: 'Staff',
+        value: 'staff',
+        paths: ['staff'],
+        meta: {
+          name: 'staff',
+          title: 'Staff',
+          type: 'object',
+          paths: ['staff'],
+          children: asyncChildLoader,
+        } satisfies MetaTreeNode,
+      },
+      {
+        label: 'Config',
+        value: 'config',
+        paths: ['config'],
+        isLeaf: true,
+      },
+    ];
+
+    it('should keep original tree when keyword is empty', () => {
+      const result = filterLoadedContextSelectorItems(mockOptions, '  ');
+      expect(result).toBe(mockOptions);
+    });
+
+    it('should keep parent node reference when parent matches', () => {
+      const result = filterLoadedContextSelectorItems(mockOptions, 'orga');
+      expect(result).toHaveLength(1);
+      expect(result[0]).toBe(mockOptions[0]);
+      expect(result[0].children).toBe(loadedChildren);
+    });
+
+    it('should keep tree shape and trim children when only child matches', () => {
+      const result = filterLoadedContextSelectorItems(mockOptions, 'code');
+      expect(result).toHaveLength(1);
+      expect(result[0]).not.toBe(mockOptions[0]);
+      expect(result[0].value).toBe('org');
+      expect(result[0].children).toHaveLength(1);
+      expect(result[0].children?.[0]).toBe(loadedChildren[1]);
+    });
+
+    it('should not recurse into unloaded children', () => {
+      const result = filterLoadedContextSelectorItems(mockOptions, 'staff child');
+      expect(result).toHaveLength(0);
+    });
+
+    it('should return empty array when no node matches', () => {
+      const result = filterLoadedContextSelectorItems(mockOptions, 'not-exists');
+      expect(result).toEqual([]);
+    });
+  });
+
   describe('buildContextSelectorItems', () => {
     it('should convert MetaTreeNode[] to ContextSelectorItem[]', () => {
       const metaTree: MetaTreeNode[] = [
@@ -234,9 +312,9 @@ describe('Variable Utils', () => {
     it('should handle invalid metaTree input', () => {
       const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
 
-      expect(buildContextSelectorItems(null as any)).toEqual([]);
-      expect(buildContextSelectorItems(undefined as any)).toEqual([]);
-      expect(buildContextSelectorItems({} as any)).toEqual([]);
+      expect(buildContextSelectorItems(null as unknown as MetaTreeNode[])).toEqual([]);
+      expect(buildContextSelectorItems(undefined as unknown as MetaTreeNode[])).toEqual([]);
+      expect(buildContextSelectorItems({} as unknown as MetaTreeNode[])).toEqual([]);
 
       expect(consoleSpy).toHaveBeenCalledTimes(3);
       consoleSpy.mockRestore();

package/src/components/variables/utils.ts

@@ -13,6 +13,18 @@ import type { MetaTreeNode } from '../../flowContext';
 import type { ContextSelectorItem, Converters } from './types';
 import { isVariableExpression } from '../../utils';
 
+const getContextSelectorLabelText = (node: ContextSelectorItem) => {
+  if (typeof node.label === 'string') {
+    return node.label;
+  }
+
+  if (typeof node.meta?.title === 'string') {
+    return node.meta.title;
+  }
+
+  return node.value;
+};
+
 export const parseValueToPath = (value: string): string[] | undefined => {
   if (typeof value !== 'string') return undefined;
 
@@ -66,12 +78,7 @@ export const searchInLoadedNodes = (
       const nodePath = [...currentPath, node.value];
 
       // 计算可搜索的纯文本标签
-      const labelText =
-        typeof node.label === 'string'
-          ? node.label
-          : typeof node.meta?.title === 'string'
-            ? node.meta!.title
-            : String(node.value);
+      const labelText = getContextSelectorLabelText(node);
 
       // 检查节点标签是否匹配搜索文本
       if (labelText.toLowerCase().includes(lowerSearchText)) {
@@ -89,6 +96,60 @@ export const searchInLoadedNodes = (
   return results;
 };
 
+/**
+ * 仅在“已加载节点”范围内按关键字过滤 options（保留树结构）。
+ * - 匹配父节点：保留原节点引用（含原 children），避免不必要的实体重建。
+ * - 匹配子节点：返回裁剪后的父节点副本，children 仅包含命中分支。
+ * - 未加载 children（即 children 不为数组）不会递归搜索。
+ */
+export const filterLoadedContextSelectorItems = (
+  options: ContextSelectorItem[] | undefined,
+  keyword: string,
+): ContextSelectorItem[] => {
+  if (!Array.isArray(options) || options.length === 0) return [];
+
+  const normalizedKeyword = keyword.trim().toLowerCase();
+  if (!normalizedKeyword) {
+    return options;
+  }
+
+  const filterNode = (node: ContextSelectorItem): ContextSelectorItem | null => {
+    const labelText = getContextSelectorLabelText(node).toLowerCase();
+    const selfMatched = labelText.includes(normalizedKeyword);
+
+    if (selfMatched) {
+      return node;
+    }
+
+    if (!Array.isArray(node.children) || node.children.length === 0) {
+      return null;
+    }
+
+    const filteredChildren = node.children
+      .map((child) => filterNode(child))
+      .filter((item): item is ContextSelectorItem => item !== null);
+
+    if (filteredChildren.length === 0) {
+      return null;
+    }
+
+    // 所有子节点都保留原引用时，直接复用父节点对象。
+    if (
+      filteredChildren.length === node.children.length &&
+      filteredChildren.every((child, idx) => child === node.children![idx])
+    ) {
+      return node;
+    }
+
+    return {
+      ...node,
+      children: filteredChildren,
+    };
+  };
+
+  return options.map((node) => filterNode(node)).filter((item): item is ContextSelectorItem => item !== null);
+};
+
 export const buildContextSelectorItems = (metaTree: MetaTreeNode[]): ContextSelectorItem[] => {
   if (!metaTree || !Array.isArray(metaTree)) {
     console.warn('buildContextSelectorItems received invalid metaTree:', metaTree);