refactor(web): migrate workflow node actions menu (#35785)

Author: lyzno1

web/app/components/workflow/__tests__/node-contextmenu.spec.tsx

@@ -1,15 +1,24 @@
 import type { Node } from '../types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import NodeContextmenu from '../node-contextmenu'
+import { NodeContextmenu } from '../node-contextmenu'
 
-const mockUseClickAway = vi.hoisted(() => vi.fn())
 const mockUseNodes = vi.hoisted(() => vi.fn())
 const mockUsePanelInteractions = vi.hoisted(() => vi.fn())
 const mockUseStore = vi.hoisted(() => vi.fn())
-const mockPanelOperatorPopup = vi.hoisted(() => vi.fn())
-
-vi.mock('ahooks', () => ({
-  useClickAway: (...args: unknown[]) => mockUseClickAway(...args),
+const mockNodeActionsContextMenuContent = vi.hoisted(() => vi.fn())
+const mockContextMenuContent = vi.hoisted(() => vi.fn())
+
+vi.mock('@langgenius/dify-ui/context-menu', () => ({
+  ContextMenu: ({ children, onOpenChange }: { children: React.ReactNode, onOpenChange: (open: boolean) => void }) => (
+    <div>
+      {children}
+      <button type="button" onClick={() => onOpenChange(false)}>close-context-menu</button>
+    </div>
+  ),
+  ContextMenuContent: ({ children, positionerProps, popupClassName }: { children: React.ReactNode, positionerProps?: { anchor?: unknown }, popupClassName?: string }) => {
+    mockContextMenuContent({ positionerProps, popupClassName })
+    return <div>{children}</div>
+  },
 }))
 
 vi.mock('@/app/components/workflow/store/workflow/use-nodes', () => ({
@@ -22,20 +31,19 @@ vi.mock('@/app/components/workflow/hooks', () => ({
 }))
 
 vi.mock('@/app/components/workflow/store', () => ({
-  useStore: (selector: (state: { nodeMenu?: { nodeId: string, left: number, top: number } }) => unknown) => mockUseStore(selector),
+  useStore: (selector: (state: { nodeMenu?: { nodeId: string, clientX: number, clientY: number } }) => unknown) => mockUseStore(selector),
 }))
 
-vi.mock('@/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup', () => ({
-  __esModule: true,
-  default: (props: {
+vi.mock('@/app/components/workflow/node-actions-menu/context-menu-content', () => ({
+  NodeActionsContextMenuContent: (props: {
     id: string
     data: Node['data']
     showHelpLink: boolean
-    onClosePopup: () => void
+    onClose: () => void
   }) => {
-    mockPanelOperatorPopup(props)
+    mockNodeActionsContextMenuContent(props)
     return (
-      <button type="button" onClick={props.onClosePopup}>
+      <button type="button" onClick={props.onClose}>
         {props.id}
         :
         {props.data.title}
@@ -46,9 +54,8 @@ vi.mock('@/app/components/workflow/nodes/_base/components/panel-operator/panel-o
 
 describe('NodeContextmenu', () => {
   const mockHandleNodeContextmenuCancel = vi.fn()
-  let nodeMenu: { nodeId: string, left: number, top: number } | undefined
+  let nodeMenu: { nodeId: string, clientX: number, clientY: number } | undefined
   let nodes: Node[]
-  let clickAwayHandler: (() => void) | undefined
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -63,51 +70,50 @@ describe('NodeContextmenu', () => {
         type: 'code' as never,
       },
     } as Node]
-    clickAwayHandler = undefined
 
-    mockUseClickAway.mockImplementation((handler: () => void) => {
-      clickAwayHandler = handler
-    })
     mockUseNodes.mockImplementation(() => nodes)
     mockUsePanelInteractions.mockReturnValue({
       handleNodeContextmenuCancel: mockHandleNodeContextmenuCancel,
     })
-    mockUseStore.mockImplementation((selector: (state: { nodeMenu?: { nodeId: string, left: number, top: number } }) => unknown) => selector({ nodeMenu }))
+    mockUseStore.mockImplementation((selector: (state: { nodeMenu?: { nodeId: string, clientX: number, clientY: number } }) => unknown) => selector({ nodeMenu }))
   })
 
   it('should stay hidden when the node menu is absent', () => {
     render(<NodeContextmenu />)
 
     expect(screen.queryByRole('button')).not.toBeInTheDocument()
-    expect(mockPanelOperatorPopup).not.toHaveBeenCalled()
+    expect(mockNodeActionsContextMenuContent).not.toHaveBeenCalled()
   })
 
   it('should stay hidden when the referenced node cannot be found', () => {
-    nodeMenu = { nodeId: 'missing-node', left: 80, top: 120 }
+    nodeMenu = { nodeId: 'missing-node', clientX: 80, clientY: 120 }
 
     render(<NodeContextmenu />)
 
     expect(screen.queryByRole('button')).not.toBeInTheDocument()
-    expect(mockPanelOperatorPopup).not.toHaveBeenCalled()
+    expect(mockNodeActionsContextMenuContent).not.toHaveBeenCalled()
   })
 
-  it('should render the popup at the stored position and close on popup/click-away actions', () => {
-    nodeMenu = { nodeId: 'node-1', left: 80, top: 120 }
-    const { container } = render(<NodeContextmenu />)
+  it('should render the context menu at the stored pointer position and close on content/root actions', () => {
+    nodeMenu = { nodeId: 'node-1', clientX: 80, clientY: 120 }
+    render(<NodeContextmenu />)
 
-    expect(screen.getByRole('button')).toHaveTextContent('node-1:Node 1')
-    expect(mockPanelOperatorPopup).toHaveBeenCalledWith(expect.objectContaining({
+    expect(screen.getByText('node-1:Node 1')).toBeInTheDocument()
+    expect(mockNodeActionsContextMenuContent).toHaveBeenCalledWith(expect.objectContaining({
       id: 'node-1',
       data: expect.objectContaining({ title: 'Node 1' }),
       showHelpLink: true,
     }))
-    expect(container.firstChild).toHaveStyle({
-      left: '80px',
-      top: '120px',
-    })
+    expect(mockContextMenuContent).toHaveBeenCalledWith(expect.objectContaining({
+      popupClassName: 'w-[240px] rounded-lg',
+    }))
+    const anchor = mockContextMenuContent.mock.calls[0]![0].positionerProps.anchor as { getBoundingClientRect: () => DOMRect }
+    const rect = anchor.getBoundingClientRect()
+    expect(rect.x).toBe(80)
+    expect(rect.y).toBe(120)
 
-    fireEvent.click(screen.getByRole('button'))
-    clickAwayHandler?.()
+    fireEvent.click(screen.getByText('node-1:Node 1'))
+    fireEvent.click(screen.getByText('close-context-menu'))
 
     expect(mockHandleNodeContextmenuCancel).toHaveBeenCalledTimes(2)
   })

web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx

@@ -297,7 +297,7 @@ vi.mock('../edge-contextmenu', () => ({
 }))
 
 vi.mock('../node-contextmenu', () => ({
-  default: () => null,
+  NodeContextmenu: () => null,
 }))
 
 vi.mock('../nodes', () => ({

web/app/components/workflow/hooks/__tests__/use-panel-interactions.spec.ts

@@ -39,7 +39,7 @@ describe('usePanelInteractions', () => {
   it('handlePaneContextMenu should set panelMenu with computed coordinates when container exists', () => {
     const { result, store } = renderWorkflowHook(() => usePanelInteractions(), {
       initialStoreState: {
-        nodeMenu: { top: 20, left: 40, nodeId: 'n1' },
+        nodeMenu: { clientX: 40, clientY: 20, nodeId: 'n1' },
         selectionMenu: { clientX: 30, clientY: 50 },
         edgeMenu: { clientX: 320, clientY: 180, edgeId: 'e1' },
       },
@@ -116,7 +116,7 @@ describe('usePanelInteractions', () => {
 
   it('handleNodeContextmenuCancel should clear nodeMenu', () => {
     const { result, store } = renderWorkflowHook(() => usePanelInteractions(), {
-      initialStoreState: { nodeMenu: { top: 10, left: 20, nodeId: 'n1' } },
+      initialStoreState: { nodeMenu: { clientX: 20, clientY: 10, nodeId: 'n1' } },
     })
 
     result.current.handleNodeContextmenuCancel()

web/app/components/workflow/hooks/__tests__/use-selection-interactions.spec.ts

@@ -173,7 +173,7 @@ describe('useSelectionInteractions', () => {
 
   it('handleSelectionContextMenu should set menu only when clicking on selection rect', () => {
     const { result, store } = renderSelectionInteractions({
-      nodeMenu: { top: 10, left: 20, nodeId: 'n1' },
+      nodeMenu: { clientX: 20, clientY: 10, nodeId: 'n1' },
       panelMenu: { top: 30, left: 40 },
       edgeMenu: { clientX: 320, clientY: 180, edgeId: 'e1' },
     })

web/app/components/workflow/hooks/use-nodes-interactions.ts

@@ -1700,15 +1700,13 @@ export const useNodesInteractions = () => {
       }
 
       e.preventDefault()
-      const container = document.querySelector('#workflow-container')
-      const { x, y } = container!.getBoundingClientRect()
       workflowStore.setState({
         panelMenu: undefined,
         selectionMenu: undefined,
         edgeMenu: undefined,
         nodeMenu: {
-          top: e.clientY - y,
-          left: e.clientX - x,
+          clientX: e.clientX,
+          clientY: e.clientY,
           nodeId: node.id,
         },
       })

web/app/components/workflow/index.tsx

@@ -95,7 +95,7 @@ import {
 import { HooksStoreContextProvider, useHooksStore } from './hooks-store'
 import { useWorkflowComment } from './hooks/use-workflow-comment'
 import { useWorkflowSearch } from './hooks/use-workflow-search'
-import NodeContextmenu from './node-contextmenu'
+import { NodeContextmenu } from './node-contextmenu'
 import CustomNode from './nodes'
 import useMatchSchemaType from './nodes/_base/components/variable/use-match-schema-type'
 import CustomDataSourceEmptyNode from './nodes/data-source-empty'