refactor(web): migrate workflow panel context menu primitive (#35787)

Author: lyzno1

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

@@ -1,107 +1,63 @@
-import type { ReactNode } from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import PanelContextmenu from '../panel-contextmenu'
+import { BlockEnum } from '../types'
+import { createNode } from './fixtures'
+import { renderWorkflowFlowComponent } from './workflow-test-env'
 
-const mockUseClickAway = vi.hoisted(() => vi.fn())
 const mockUseTranslation = vi.hoisted(() => vi.fn())
-const mockUseStore = vi.hoisted(() => vi.fn())
 const mockUseNodesInteractions = vi.hoisted(() => vi.fn())
 const mockUsePanelInteractions = vi.hoisted(() => vi.fn())
 const mockUseWorkflowStartRun = vi.hoisted(() => vi.fn())
 const mockUseWorkflowMoveMode = vi.hoisted(() => vi.fn())
 const mockUseOperator = vi.hoisted(() => vi.fn())
 const mockUseDSL = vi.hoisted(() => vi.fn())
-
-vi.mock('ahooks', () => ({
-  useClickAway: (...args: unknown[]) => mockUseClickAway(...args),
-}))
+const mockUseNodesReadOnly = vi.hoisted(() => vi.fn())
+const mockUseAvailableBlocks = vi.hoisted(() => vi.fn())
+const mockUseNodesMetaData = vi.hoisted(() => vi.fn())
+const mockUseIsChatMode = vi.hoisted(() => vi.fn())
 
 vi.mock('react-i18next', () => ({
   useTranslation: () => mockUseTranslation(),
 }))
 
-vi.mock('@/app/components/workflow/store', () => ({
-  useStore: (selector: (state: {
-    panelMenu?: { left: number, top: number }
-    clipboardElements: unknown[]
-    pendingComment: null | { pageX: number, pageY: number, elementX: number, elementY: number }
-    setCommentPlacing: (placing: boolean) => void
-    setCommentQuickAdd: (quickAdd: boolean) => void
-    setShowImportDSLModal: (visible: boolean) => void
-  }) => unknown) => mockUseStore(selector),
-}))
-
 vi.mock('@/app/components/workflow/hooks', () => ({
+  useAvailableBlocks: () => mockUseAvailableBlocks(),
+  useDSL: () => mockUseDSL(),
+  useIsChatMode: () => mockUseIsChatMode(),
   useNodesInteractions: () => mockUseNodesInteractions(),
+  useNodesMetaData: () => mockUseNodesMetaData(),
+  useNodesReadOnly: () => mockUseNodesReadOnly(),
   usePanelInteractions: () => mockUsePanelInteractions(),
-  useWorkflowStartRun: () => mockUseWorkflowStartRun(),
   useWorkflowMoveMode: () => mockUseWorkflowMoveMode(),
-  useDSL: () => mockUseDSL(),
+  useWorkflowStartRun: () => mockUseWorkflowStartRun(),
 }))
 
 vi.mock('@/app/components/workflow/operator/hooks', () => ({
   useOperator: () => mockUseOperator(),
 }))
 
-vi.mock('@/app/components/workflow/operator/add-block', () => ({
-  __esModule: true,
-  default: ({ renderTrigger }: { renderTrigger: () => ReactNode }) => (
-    <div data-testid="add-block">{renderTrigger()}</div>
-  ),
-}))
-
-vi.mock('@/app/components/base/divider', () => ({
-  __esModule: true,
-  default: ({ className }: { className?: string }) => <div data-testid="divider" className={className} />,
-}))
-
-vi.mock('@/app/components/workflow/shortcuts-name', () => ({
-  __esModule: true,
-  default: ({ keys }: { keys: string[] }) => <span data-testid={`shortcut-${keys.join('-')}`}>{keys.join('+')}</span>,
-}))
-
 describe('PanelContextmenu', () => {
   const mockHandleNodesPaste = vi.fn()
   const mockHandlePaneContextmenuCancel = vi.fn()
   const mockHandleStartWorkflowRun = vi.fn()
+  const mockHandleWorkflowStartRunInChatflow = vi.fn()
   const mockHandleAddNote = vi.fn()
   const mockExportCheck = vi.fn()
-  const mockSetShowImportDSLModal = vi.fn()
-  const mockSetCommentPlacing = vi.fn()
-  const mockSetCommentQuickAdd = vi.fn()
-  let panelMenu: { left: number, top: number } | undefined
-  let clipboardElements: unknown[]
-  let pendingComment: null | { pageX: number, pageY: number, elementX: number, elementY: number }
-  let clickAwayHandler: (() => void) | undefined
+  const defaultNodesMetaDataMap = {
+    [BlockEnum.Answer]: {
+      defaultValue: {
+        title: 'Answer',
+        desc: '',
+        type: BlockEnum.Answer,
+      },
+    },
+  }
 
   beforeEach(() => {
     vi.clearAllMocks()
-    panelMenu = undefined
-    clipboardElements = []
-    pendingComment = null
-    clickAwayHandler = undefined
-
-    mockUseClickAway.mockImplementation((handler: () => void) => {
-      clickAwayHandler = handler
-    })
     mockUseTranslation.mockReturnValue({
       t: (key: string) => key,
     })
-    mockUseStore.mockImplementation((selector: (state: {
-      panelMenu?: { left: number, top: number }
-      clipboardElements: unknown[]
-      pendingComment: null | { pageX: number, pageY: number, elementX: number, elementY: number }
-      setCommentPlacing: (placing: boolean) => void
-      setCommentQuickAdd: (quickAdd: boolean) => void
-      setShowImportDSLModal: (visible: boolean) => void
-    }) => unknown) => selector({
-      panelMenu,
-      clipboardElements,
-      pendingComment,
-      setCommentPlacing: mockSetCommentPlacing,
-      setCommentQuickAdd: mockSetCommentQuickAdd,
-      setShowImportDSLModal: mockSetShowImportDSLModal,
-    }))
     mockUseNodesInteractions.mockReturnValue({
       handleNodesPaste: mockHandleNodesPaste,
     })
@@ -110,6 +66,7 @@ describe('PanelContextmenu', () => {
     })
     mockUseWorkflowStartRun.mockReturnValue({
       handleStartWorkflowRun: mockHandleStartWorkflowRun,
+      handleWorkflowStartRunInChatflow: mockHandleWorkflowStartRunInChatflow,
     })
     mockUseWorkflowMoveMode.mockReturnValue({
       isCommentModeAvailable: false,
@@ -120,50 +77,86 @@ describe('PanelContextmenu', () => {
     mockUseDSL.mockReturnValue({
       exportCheck: mockExportCheck,
     })
+    mockUseNodesReadOnly.mockReturnValue({
+      nodesReadOnly: false,
+    })
+    mockUseAvailableBlocks.mockReturnValue({
+      availableNextBlocks: [BlockEnum.Answer],
+    })
+    mockUseNodesMetaData.mockReturnValue({
+      nodesMap: defaultNodesMetaDataMap,
+    })
+    mockUseIsChatMode.mockReturnValue(false)
   })
 
   it('should stay hidden when the panel menu is absent', () => {
-    render(<PanelContextmenu />)
+    renderWorkflowFlowComponent(<PanelContextmenu />)
 
-    expect(screen.queryByTestId('add-block')).not.toBeInTheDocument()
+    expect(screen.queryByText('common.addBlock')).not.toBeInTheDocument()
   })
 
-  it('should keep paste disabled when the clipboard is empty', () => {
-    panelMenu = { left: 24, top: 48 }
-
-    render(<PanelContextmenu />)
+  it('should keep paste disabled when the clipboard is empty', async () => {
+    renderWorkflowFlowComponent(<PanelContextmenu />, {
+      initialStoreState: {
+        panelMenu: { clientX: 24, clientY: 48 },
+      },
+      hooksStoreProps: {},
+    })
 
+    await screen.findByText('common.pasteHere')
     fireEvent.click(screen.getByText('common.pasteHere'))
 
     expect(mockHandleNodesPaste).not.toHaveBeenCalled()
     expect(mockHandlePaneContextmenuCancel).not.toHaveBeenCalled()
   })
 
-  it('should render actions, position the menu, and execute each action', () => {
-    panelMenu = { left: 24, top: 48 }
-    clipboardElements = [{ id: 'copied-node' }]
-    const { container } = render(<PanelContextmenu />)
-
-    expect(screen.getByTestId('add-block')).toHaveTextContent('common.addBlock')
-    expect(screen.getByRole('button', { name: /common\.run/i })).toHaveTextContent(/Alt\s*R/)
-    expect(screen.getByRole('button', { name: /common\.pasteHere/i })).toHaveTextContent(/Ctrl\s*V/)
-    expect(container.firstChild).toHaveStyle({
-      left: '24px',
-      top: '48px',
+  it('should render actions and execute enabled actions', async () => {
+    const { store } = renderWorkflowFlowComponent(<PanelContextmenu />, {
+      initialStoreState: {
+        panelMenu: { clientX: 24, clientY: 48 },
+        clipboardElements: [createNode({ id: 'copied-node' })],
+      },
+      hooksStoreProps: {},
     })
 
+    expect(await screen.findByText('common.addBlock')).toBeInTheDocument()
+    expect(screen.getByText('common.run')).toBeInTheDocument()
+    expect(screen.getByText('common.pasteHere')).toBeInTheDocument()
+
     fireEvent.click(screen.getByText('nodes.note.addNote'))
     fireEvent.click(screen.getByText('common.run'))
     fireEvent.click(screen.getByText('common.pasteHere'))
     fireEvent.click(screen.getByText('export'))
     fireEvent.click(screen.getByText('importApp'))
-    clickAwayHandler?.()
-
-    expect(mockHandleAddNote).toHaveBeenCalledTimes(1)
-    expect(mockHandleStartWorkflowRun).toHaveBeenCalledTimes(1)
-    expect(mockHandleNodesPaste).toHaveBeenCalledTimes(1)
-    expect(mockExportCheck).toHaveBeenCalledTimes(1)
-    expect(mockSetShowImportDSLModal).toHaveBeenCalledWith(true)
-    expect(mockHandlePaneContextmenuCancel).toHaveBeenCalledTimes(4)
+
+    await waitFor(() => {
+      expect(mockHandleAddNote).toHaveBeenCalledTimes(1)
+      expect(mockHandleStartWorkflowRun).toHaveBeenCalledTimes(1)
+      expect(mockHandleNodesPaste).toHaveBeenCalledTimes(1)
+      expect(mockExportCheck).toHaveBeenCalledTimes(1)
+      expect(store.getState().showImportDSLModal).toBe(true)
+    })
+  })
+
+  it('should render preview action in chat mode', async () => {
+    mockUseIsChatMode.mockReturnValue(true)
+
+    renderWorkflowFlowComponent(<PanelContextmenu />, {
+      initialStoreState: {
+        panelMenu: { clientX: 24, clientY: 48 },
+      },
+      hooksStoreProps: {},
+    })
+
+    expect(await screen.findByText('common.debugAndPreview')).toBeInTheDocument()
+    expect(screen.queryByText('common.run')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('common.debugAndPreview'))
+
+    await waitFor(() => {
+      expect(mockHandleWorkflowStartRunInChatflow).toHaveBeenCalledTimes(1)
+      expect(mockHandleStartWorkflowRun).not.toHaveBeenCalled()
+      expect(mockHandlePaneContextmenuCancel).toHaveBeenCalled()
+    })
   })
 })

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

@@ -36,7 +36,7 @@ describe('usePanelInteractions', () => {
     container.remove()
   })
 
-  it('handlePaneContextMenu should set panelMenu with computed coordinates when container exists', () => {
+  it('handlePaneContextMenu should set panelMenu with viewport coordinates', () => {
     const { result, store } = renderWorkflowHook(() => usePanelInteractions(), {
       initialStoreState: {
         nodeMenu: { clientX: 40, clientY: 20, nodeId: 'n1' },
@@ -54,28 +54,14 @@ describe('usePanelInteractions', () => {
 
     expect(preventDefault).toHaveBeenCalled()
     expect(store.getState().panelMenu).toEqual({
-      top: 200,
-      left: 250,
+      clientX: 350,
+      clientY: 250,
     })
     expect(store.getState().nodeMenu).toBeUndefined()
     expect(store.getState().selectionMenu).toBeUndefined()
     expect(store.getState().edgeMenu).toBeUndefined()
   })
 
-  it('handlePaneContextMenu should throw when container does not exist', () => {
-    container.remove()
-
-    const { result } = renderWorkflowHook(() => usePanelInteractions())
-
-    expect(() => {
-      result.current.handlePaneContextMenu({
-        preventDefault: vi.fn(),
-        clientX: 350,
-        clientY: 250,
-      } as unknown as React.MouseEvent)
-    }).toThrow()
-  })
-
   it('handlePaneContextMenu should sync clipboard from navigator clipboard', async () => {
     const clipboardNode = createNode({ id: 'clipboard-node' })
     const clipboardEdge = createEdge({
@@ -106,7 +92,7 @@ describe('usePanelInteractions', () => {
 
   it('handlePaneContextmenuCancel should clear panelMenu', () => {
     const { result, store } = renderWorkflowHook(() => usePanelInteractions(), {
-      initialStoreState: { panelMenu: { top: 10, left: 20 } },
+      initialStoreState: { panelMenu: { clientX: 20, clientY: 10 } },
     })
 
     result.current.handlePaneContextmenuCancel()

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

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

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

@@ -22,15 +22,13 @@ export const usePanelInteractions = () => {
         workflowStore.getState().setClipboardData({ nodes, edges })
     })
 
-    const container = document.querySelector('#workflow-container')
-    const { x, y } = container!.getBoundingClientRect()
     workflowStore.setState({
       nodeMenu: undefined,
       selectionMenu: undefined,
       edgeMenu: undefined,
       panelMenu: {
-        top: e.clientY - y,
-        left: e.clientX - x,
+        clientX: e.clientX,
+        clientY: e.clientY,
       },
     })
   }, [workflowStore, appDslVersion])