refactor(web): remove variable inspect panel React.FC

web/app/components/workflow/variable-inspect/__tests__/panel.spec.tsx

@@ -131,9 +131,10 @@ describe('VariableInspect Panel', () => {
   })
 
   it('should render the listening state and stop the workflow on demand', () => {
-    renderPanel({
+    const { store } = renderPanel({
       isListening: true,
       listeningTriggerType: BlockEnum.TriggerWebhook,
+      showVariableInspectPanel: true,
     })
 
     fireEvent.click(
@@ -144,6 +145,9 @@ describe('VariableInspect Panel', () => {
     expect(mockEmit).toHaveBeenCalledWith({
       type: EVENT_WORKFLOW_STOP,
     })
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
+    expect(store.getState().showVariableInspectPanel).toBe(false)
   })
 
   it('should render the empty state and close the panel from the header action', () => {
@@ -151,7 +155,7 @@ describe('VariableInspect Panel', () => {
       showVariableInspectPanel: true,
     })
 
-    fireEvent.click(screen.getAllByRole('button')[0]!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
     expect(screen.getByText('workflow.debug.variableInspect.emptyTip'))!.toBeInTheDocument()
     expect(store.getState().showVariableInspectPanel).toBe(false)

web/app/components/workflow/variable-inspect/panel.tsx

@@ -1,8 +1,6 @@
-import type { FC } from 'react'
 import type { NodeProps } from '../types'
 import type { VarInInspect } from '@/types/workflow'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiCloseLine } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
@@ -26,7 +24,7 @@ export type currentVarType = {
   nodeData: NodeProps['data']
 }
 
-const Panel: FC = () => {
+const Panel = () => {
   const { t } = useTranslation()
 
   const bottomPanelWidth = useStore((s) => s.bottomPanelWidth)
@@ -175,8 +173,11 @@ const Panel: FC = () => {
           <div className="system-sm-semibold-uppercase text-text-primary">
             {t(($) => $['debug.variableInspect.title'], { ns: 'workflow' })}
           </div>
-          <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
-            <RiCloseLine className="size-4" />
+          <ActionButton
+            aria-label={t(($) => $['operation.close'], { ns: 'common' })}
+            onClick={() => setShowVariableInspectPanel(false)}
+          >
+            <span aria-hidden className="i-ri-close-line size-4" />
           </ActionButton>
         </div>
         <div className="grow p-2">
@@ -193,8 +194,11 @@ const Panel: FC = () => {
           <div className="system-sm-semibold-uppercase text-text-primary">
             {t(($) => $['debug.variableInspect.title'], { ns: 'workflow' })}
           </div>
-          <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
-            <RiCloseLine className="size-4" />
+          <ActionButton
+            aria-label={t(($) => $['operation.close'], { ns: 'common' })}
+            onClick={() => setShowVariableInspectPanel(false)}
+          >
+            <span aria-hidden className="i-ri-close-line size-4" />
           </ActionButton>
         </div>
         <div className="grow p-2">