@nocobase/flow-engine 2.1.0-beta.9 → 2.1.1

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

@@ -7,10 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, cleanup, waitFor, act } from '@testing-library/react';
+import { act, cleanup, render, waitFor } from '@testing-library/react';
 import { App, ConfigProvider } from 'antd';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { FlowEngine } from '../../../../../flowEngine';
 import { FlowModel } from '../../../../../models/flowModel';
@@ -37,6 +37,7 @@ vi.mock('antd', async (importOriginal) => {
     (globalThis as any).__lastDropdownMenu = props.menu;
     (globalThis as any).__lastDropdownOnOpenChange = props.onOpenChange;
     (globalThis as any).__lastDropdownOpen = props.open;
+    (globalThis as any).__lastDropdownGetPopupContainer = props.getPopupContainer;
     dropdownMenus.push(props.menu);
     return React.createElement('span', { 'data-testid': 'dropdown' }, props.children);
   };
@@ -105,7 +106,7 @@ const findElement = (node: any, predicate: (element: React.ReactElement) => bool
       return node;
     }
 
-    const children = React.Children.toArray(node.props?.children);
+    const children = React.Children.toArray((node as React.ReactElement<any>).props?.children);
     for (const child of children) {
       const matched = findElement(child, predicate);
       if (matched) {
@@ -132,6 +133,7 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
     (globalThis as any).__lastDropdownMenu = undefined;
     (globalThis as any).__lastDropdownOnOpenChange = undefined;
     (globalThis as any).__lastDropdownOpen = undefined;
+    (globalThis as any).__lastDropdownGetPopupContainer = undefined;
   });
 
   afterEach(() => {
@@ -139,6 +141,86 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
     vi.clearAllMocks();
   });
 
+  it('defers nested configurable step resolution and clears stale config while closed', async () => {
+    class TestFlowModel extends FlowModel {}
+
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'model-lazy-settings', flowEngine: engine });
+    const hideInSettings = vi.fn((ctx) => !!ctx.getStepParams('general')?.hidden);
+    const uiSchema = vi.fn(() => ({
+      field: { type: 'string', 'x-component': 'Input' },
+    }));
+
+    TestFlowModel.registerFlow({
+      key: 'lazyFlow',
+      title: 'Lazy Flow',
+      steps: {
+        general: {
+          title: 'General',
+          hideInSettings,
+          uiSchema,
+        },
+      },
+    });
+
+    const { getByLabelText } = render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(
+          App as any,
+          null,
+          React.createElement(DefaultSettingsIcon as any, { model, menuLevels: 2 }),
+        ),
+      ),
+    );
+
+    expect(getByLabelText('flows-settings')).toBeTruthy();
+    expect(hideInSettings).not.toHaveBeenCalled();
+    expect(uiSchema).not.toHaveBeenCalled();
+
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+    });
+
+    await waitFor(() => {
+      expect(hideInSettings).toHaveBeenCalledTimes(1);
+      expect(uiSchema).toHaveBeenCalledTimes(1);
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      expect(items.some((it) => String(it.key || '') === 'lazyFlow:general')).toBe(true);
+    });
+
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(false, { source: 'trigger' });
+    });
+
+    await waitFor(() => {
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      expect(items.some((it) => String(it.key || '') === 'lazyFlow:general')).toBe(false);
+    });
+
+    await act(async () => {
+      model.setStepParams('lazyFlow', 'general', { hidden: true });
+    });
+
+    expect(hideInSettings).toHaveBeenCalledTimes(1);
+    expect(uiSchema).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+    });
+
+    await waitFor(() => {
+      expect(hideInSettings).toHaveBeenCalledTimes(2);
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      expect(items.some((it) => String(it.key || '') === 'lazyFlow:general')).toBe(false);
+    });
+    expect(uiSchema).toHaveBeenCalledTimes(1);
+  });
+
   it('excludes instance (dynamic) flows from the settings menu', async () => {
     class TestFlowModel extends FlowModel {}
 
@@ -322,7 +404,9 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
     );
     expect(tooltipElement).toBeTruthy();
 
-    const iconElement = React.isValidElement(tooltipElement) ? tooltipElement.props.children : null;
+    const iconElement = React.isValidElement(tooltipElement)
+      ? (tooltipElement as React.ReactElement<any>).props.children
+      : null;
     expect(React.isValidElement(iconElement)).toBe(true);
     expect((iconElement as any).props?.style?.color).toBe(mockColorTextTertiary);
 
@@ -414,6 +498,99 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
     });
   });
 
+  it('prefers the local toolbar container as popup host inside contextual toolbars', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-toolbar-popup-host', flowEngine: engine });
+    const externalPopupRoot = document.createElement('div');
+    externalPopupRoot.id = 'external-popup-root';
+    document.body.appendChild(externalPopupRoot);
+
+    TestFlowModel.registerFlow({
+      key: 'flowPopupHost',
+      title: 'Flow Popup Host',
+      steps: {
+        general: { title: 'General', uiSchema: { f: { type: 'string', 'x-component': 'Input' } } },
+      },
+    });
+
+    const { getByTestId, unmount } = render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(
+          App as any,
+          null,
+          React.createElement(
+            'div',
+            { className: 'nb-toolbar-container' },
+            React.createElement(
+              'div',
+              { className: 'nb-toolbar-container-icons' },
+              React.createElement(DefaultSettingsIcon as any, {
+                model,
+                getPopupContainer: () => externalPopupRoot,
+              }),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownGetPopupContainer).toBeTruthy();
+    });
+
+    const popupContainer = (globalThis as any).__lastDropdownGetPopupContainer?.(getByTestId('dropdown'));
+    expect(popupContainer).toBeTruthy();
+    expect(popupContainer?.className).toContain('nb-toolbar-container-icons');
+
+    unmount();
+    externalPopupRoot.remove();
+  });
+
+  it('falls back to the provided popup host outside contextual toolbars', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-external-popup-host', flowEngine: engine });
+    const externalPopupRoot = document.createElement('div');
+    externalPopupRoot.id = 'external-popup-root';
+    document.body.appendChild(externalPopupRoot);
+
+    TestFlowModel.registerFlow({
+      key: 'flowExternalPopupHost',
+      title: 'Flow External Popup Host',
+      steps: {
+        general: { title: 'General', uiSchema: { f: { type: 'string', 'x-component': 'Input' } } },
+      },
+    });
+
+    const { getByTestId, unmount } = render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(
+          App as any,
+          null,
+          React.createElement(DefaultSettingsIcon as any, {
+            model,
+            getPopupContainer: () => externalPopupRoot,
+          }),
+        ),
+      ),
+    );
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownGetPopupContainer).toBeTruthy();
+    });
+
+    const popupContainer = (globalThis as any).__lastDropdownGetPopupContainer?.(getByTestId('dropdown'));
+    expect(popupContainer).toBe(externalPopupRoot);
+
+    unmount();
+    externalPopupRoot.remove();
+  });
+
   it('copy UID action writes model uid to clipboard', async () => {
     class TestFlowModel extends FlowModel {}
     const engine = new FlowEngine();
@@ -517,7 +694,9 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       const items = (menu?.items || []) as any[];
       const subMenu = items.find((it) => Array.isArray(it?.children));
       expect(subMenu).toBeTruthy();
-      expect(subMenu!.children.some((it: any) => String(it.key).startsWith('items[0]:childFlow:cstep'))).toBe(true);
+      expect((subMenu?.children || []).some((it: any) => String(it.key).startsWith('items[0]:childFlow:cstep'))).toBe(
+        true,
+      );
     });
   });
 
@@ -621,6 +800,10 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       ),
     );
 
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+    });
+
     await waitFor(() => {
       const menu = (globalThis as any).__lastDropdownMenu;
       expect(menu).toBeTruthy();
@@ -701,17 +884,170 @@ describe('DefaultSettingsIcon - extra menu items', () => {
       await waitFor(() => {
         const menu = (globalThis as any).__lastDropdownMenu;
         const items = (menu?.items || []) as any[];
-        expect(items.some((it) => String(it.key || '') === 'extra-action')).toBe(true);
+        const extraActionItem = items.find((it) => String(it.key || '') === 'extra-action');
+        expect(extraActionItem).toBeTruthy();
+        expect(extraActionItem.onClick).toBeUndefined();
       });
 
       const menu = (globalThis as any).__lastDropdownMenu;
       await act(async () => {
         menu.onClick?.({ key: 'extra-action' });
       });
-      expect(onClick).toHaveBeenCalled();
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect((globalThis as any).__lastDropdownOpen).toBe(false);
+    } finally {
+      dispose?.();
+    }
+  });
+
+  it('supports nested extra menu items with sorting and disabled states', async () => {
+    const onInsertBefore = vi.fn();
+    const onInsertAfter = vi.fn();
+
+    class TestFlowModel extends FlowModel {}
+    const dispose = TestFlowModel.registerExtraMenuItems({
+      group: 'common-actions',
+      sort: 10,
+      items: [
+        {
+          key: 'insert-actions',
+          label: 'Insert actions',
+          children: [
+            { key: 'insert-after', label: 'Insert after', sort: 20, onClick: onInsertAfter },
+            { key: 'insert-before', label: 'Insert before', sort: 10, onClick: onInsertBefore },
+            { key: 'insert-inner', label: 'Insert inner', sort: 30, disabled: true, onClick: vi.fn() },
+          ],
+        },
+      ],
+    });
+
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-extra-nested', flowEngine: engine });
+
+    TestFlowModel.registerFlow({
+      key: 'flow',
+      title: 'Flow',
+      steps: { s: { title: 'S', uiSchema: { f: { type: 'string', 'x-component': 'Input' } } } },
+    });
+
+    try {
+      render(
+        React.createElement(
+          ConfigProvider as any,
+          null,
+          React.createElement(
+            App as any,
+            null,
+            React.createElement(DefaultSettingsIcon as any, {
+              model,
+              showCopyUidButton: false,
+              showDeleteButton: false,
+            }),
+          ),
+        ),
+      );
+
+      await waitFor(() => {
+        expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
+        expect((globalThis as any).__lastDropdownOnOpenChange).toBeTruthy();
+      });
+
+      await act(async () => {
+        (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+      });
+
+      await waitFor(() => {
+        const menu = (globalThis as any).__lastDropdownMenu;
+        const items = (menu?.items || []) as any[];
+        const nested = items.find((it) => String(it.key || '') === 'insert-actions');
+        expect(nested).toBeTruthy();
+        expect((nested.children || []).map((it) => String(it.key || ''))).toEqual([
+          'insert-before',
+          'insert-after',
+          'insert-inner',
+        ]);
+        expect((nested.children || []).find((it) => String(it.key || '') === 'insert-before')?.onClick).toBeUndefined();
+        expect((nested.children || []).find((it) => String(it.key || '') === 'insert-inner')?.disabled).toBe(true);
+      });
+
+      const menu = (globalThis as any).__lastDropdownMenu;
+      await act(async () => {
+        menu.onClick?.({ key: 'insert-inner' });
+      });
+      expect(onInsertBefore).not.toHaveBeenCalled();
+      expect(onInsertAfter).not.toHaveBeenCalled();
+      expect((globalThis as any).__lastDropdownOpen).toBe(true);
+
+      await act(async () => {
+        menu.onClick?.({ key: 'insert-before' });
+      });
+      expect(onInsertBefore).toHaveBeenCalledTimes(1);
       expect((globalThis as any).__lastDropdownOpen).toBe(false);
     } finally {
       dispose?.();
     }
   });
+
+  it('uses common extra actions to defer nested configurable step resolution', async () => {
+    const onClick = vi.fn();
+
+    class TestFlowModel extends FlowModel {}
+    const dispose = TestFlowModel.registerExtraMenuItems({
+      group: 'common-actions',
+      sort: 10,
+      items: [{ key: 'extra-action', label: 'Extra Action', onClick }],
+    });
+
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-extra-lazy', flowEngine: engine });
+    const uiSchema = vi.fn(() => ({
+      f: { type: 'string', 'x-component': 'Input' },
+    }));
+
+    TestFlowModel.registerFlow({
+      key: 'flow',
+      title: 'Flow',
+      steps: { s: { title: 'S', uiSchema } },
+    });
+
+    try {
+      const { getByLabelText } = render(
+        React.createElement(
+          ConfigProvider as any,
+          null,
+          React.createElement(
+            App as any,
+            null,
+            React.createElement(DefaultSettingsIcon as any, {
+              model,
+              menuLevels: 2,
+              showCopyUidButton: false,
+              showDeleteButton: false,
+            }),
+          ),
+        ),
+      );
+
+      await waitFor(() => {
+        expect(getByLabelText('flows-settings')).toBeTruthy();
+        const menu = (globalThis as any).__lastDropdownMenu;
+        const items = (menu?.items || []) as any[];
+        expect(items.some((it) => String(it.key || '') === 'extra-action')).toBe(true);
+      });
+      expect(uiSchema).not.toHaveBeenCalled();
+
+      await act(async () => {
+        (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+      });
+
+      await waitFor(() => {
+        expect(uiSchema).toHaveBeenCalledTimes(1);
+        const menu = (globalThis as any).__lastDropdownMenu;
+        const items = (menu?.items || []) as any[];
+        expect(items.some((it) => String(it.key || '') === 'flow:s')).toBe(true);
+      });
+    } finally {
+      dispose?.();
+    }
+  });
 });