fix(web): name workflow debug actions (#40273)

web/app/components/workflow/panel/debug-and-preview/__tests__/debug-and-preview.spec.tsx

@@ -0,0 +1,95 @@
+import type { Ref } from 'react'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useImperativeHandle } from 'react'
+import { renderWorkflowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
+import DebugAndPreview from '../index'
+
+const mockHandleRestart = vi.fn()
+const mockHandleNodeCancelRunningStatus = vi.fn()
+const mockHandleEdgeCancelRunningStatus = vi.fn()
+
+vi.mock('reactflow', () => ({
+  useNodes: () => [
+    {
+      data: {
+        type: 'start',
+        variables: [{ label: 'Topic', variable: 'topic' }],
+      },
+      id: 'start',
+    },
+  ],
+}))
+
+vi.mock('../../../hooks/use-workflow-panel-interactions', () => ({
+  useWorkflowInteractions: () => ({
+    handleCancelDebugAndPreviewPanel: vi.fn(),
+  }),
+}))
+
+vi.mock('../../../hooks/use-nodes-interactions-without-sync', () => ({
+  useNodesInteractionsWithoutSync: () => ({
+    handleNodeCancelRunningStatus: mockHandleNodeCancelRunningStatus,
+  }),
+}))
+
+vi.mock('../../../hooks/use-edges-interactions-without-sync', () => ({
+  useEdgesInteractionsWithoutSync: () => ({
+    handleEdgeCancelRunningStatus: mockHandleEdgeCancelRunningStatus,
+  }),
+}))
+
+vi.mock('../../../nodes/_base/hooks/use-resize-panel', () => ({
+  useResizePanel: () => ({
+    containerRef: vi.fn(),
+    triggerRef: vi.fn(),
+  }),
+}))
+
+vi.mock('../../../persistence/local-storage-options', () => ({
+  useSetDebugPreviewPanelWidth: () => vi.fn(),
+}))
+
+vi.mock('../chat-wrapper', () => ({
+  default: function MockChatWrapper({ ref }: { ref: Ref<{ handleRestart: () => void }> }) {
+    useImperativeHandle(ref, () => ({ handleRestart: mockHandleRestart }))
+    return <div>Chat</div>
+  },
+}))
+
+describe('DebugAndPreview', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('exposes and invokes the restart action by name', async () => {
+    const user = userEvent.setup()
+    renderWorkflowComponent(<DebugAndPreview />, {
+      initialStoreState: {
+        previewPanelWidth: 400,
+      },
+    })
+
+    await user.click(screen.getByRole('button', { name: /operation\.refresh/ }))
+
+    expect(mockHandleNodeCancelRunningStatus).toHaveBeenCalledTimes(1)
+    expect(mockHandleEdgeCancelRunningStatus).toHaveBeenCalledTimes(1)
+    expect(mockHandleRestart).toHaveBeenCalledTimes(1)
+  })
+
+  it('exposes the user input field toggle state by name', async () => {
+    const user = userEvent.setup()
+    renderWorkflowComponent(<DebugAndPreview />, {
+      initialStoreState: {
+        previewPanelWidth: 400,
+      },
+    })
+    const toggle = screen.getByRole('button', { name: /panel\.userInputField/ })
+
+    expect(toggle).toHaveAttribute('aria-pressed', 'true')
+
+    await user.click(toggle)
+
+    expect(toggle).toHaveAttribute('aria-pressed', 'false')
+  })
+})

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -33,6 +33,8 @@ const DebugAndPreview = () => {
   const startNode = nodes.find((node) => node.data.type === BlockEnum.Start)
   const variables = startNode?.data.variables || []
   const visibleVariables = variables
+  const restartLabel = t(($) => $['operation.refresh'], { ns: 'common' })
+  const userInputFieldLabel = t(($) => $['panel.userInputField'], { ns: 'workflow' })
 
   const [showConversationVariableModal, setShowConversationVariableModal] = useState(false)
 
@@ -94,12 +96,12 @@ const DebugAndPreview = () => {
             <Tooltip>
               <TooltipTrigger
                 render={
-                  <ActionButton onClick={() => handleRestartChat()}>
-                    <RefreshCcw01 className="size-4" />
+                  <ActionButton aria-label={restartLabel} onClick={() => handleRestartChat()}>
+                    <RefreshCcw01 aria-hidden="true" className="size-4" />
                   </ActionButton>
                 }
               />
-              <TooltipContent>{t(($) => $['operation.refresh'], { ns: 'common' })}</TooltipContent>
+              <TooltipContent>{restartLabel}</TooltipContent>
             </Tooltip>
             {visibleVariables.length > 0 && (
               <div className="relative">
@@ -107,16 +109,16 @@ const DebugAndPreview = () => {
                   <TooltipTrigger
                     render={
                       <ActionButton
+                        aria-label={userInputFieldLabel}
+                        aria-pressed={expanded}
                         state={expanded ? ActionButtonState.Active : undefined}
                         onClick={() => setExpanded(!expanded)}
                       >
-                        <RiEqualizer2Line className="size-4" />
+                        <RiEqualizer2Line aria-hidden="true" className="size-4" />
                       </ActionButton>
                     }
                   />
-                  <TooltipContent>
-                    {t(($) => $['panel.userInputField'], { ns: 'workflow' })}
-                  </TooltipContent>
+                  <TooltipContent>{userInputFieldLabel}</TooltipContent>
                 </Tooltip>
                 {expanded && (
                   <div className="absolute right-1.25 -bottom-4.25 z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />