@nocobase/flow-engine 2.1.0-alpha.3 → 2.1.0-alpha.31

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

@@ -134,6 +134,17 @@ const openStepSettingsDialog = async ({
   };
 
   const openView = model.context.viewer[mode].bind(model.context.viewer);
+  const resolvedUiModeProps = toJS(uiModeProps) || {};
+  const { zIndex: uiModeZIndex, ...restUiModeProps } = resolvedUiModeProps;
+  const resolveDialogZIndex = (rawZIndex?: number) => {
+    const nextZIndex =
+      typeof model.context.viewer?.getNextZIndex === 'function'
+        ? model.context.viewer.getNextZIndex()
+        : (model.context.themeToken?.zIndexPopupBase || 1000) + 1;
+    const inputZIndex = Number(rawZIndex) || 0;
+    return Math.max(nextZIndex, inputZIndex);
+  };
+  const mergedZIndex = resolveDialogZIndex(uiModeZIndex);
 
   const form = createForm({
     initialValues: compileUiSchema(scopes, initialValues),
@@ -152,7 +163,8 @@ const openStepSettingsDialog = async ({
     title: dialogTitle || t(title),
     width: dialogWidth,
     destroyOnClose: true,
-    ...toJS(uiModeProps),
+    ...restUiModeProps,
+    zIndex: mergedZIndex,
     // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
     inputArgs,
     onClose: () => {
@@ -165,7 +177,11 @@ const openStepSettingsDialog = async ({
         useEffect(() => {
           return autorun(() => {
             const dynamicProps = toJS(uiModeProps);
-            currentDialog.update(dynamicProps);
+            const { zIndex, ...restDynamicProps } = dynamicProps || {};
+            currentDialog.update({
+              ...restDynamicProps,
+              zIndex: resolveDialogZIndex(zIndex),
+            });
           });
         }, []);
 

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

@@ -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(() => {
@@ -322,7 +324,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 +418,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 +614,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,
+      );
     });
   });
 
@@ -714,4 +813,91 @@ describe('DefaultSettingsIcon - extra menu items', () => {
       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-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?.();
+    }
+  });
 });