refactor(web): remove external retrieval React.FC

web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx

@@ -2,14 +2,6 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import ModifyExternalRetrievalModal from '../modify-external-retrieval-modal'
 
-vi.mock('@/app/components/base/action-button', () => ({
-  default: ({ children, onClick }: { children: React.ReactNode; onClick: () => void }) => (
-    <button data-testid="action-button" onClick={onClick}>
-      {children}
-    </button>
-  ),
-}))
-
 vi.mock('../../external-knowledge-base/create/RetrievalSettings', () => ({
   default: ({
     topK,
@@ -67,7 +59,7 @@ describe('ModifyExternalRetrievalModal', () => {
 
   it('should call onClose when close button clicked', () => {
     render(<ModifyExternalRetrievalModal {...defaultProps} />)
-    fireEvent.click(screen.getByTestId('action-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
     expect(defaultProps.onClose).toHaveBeenCalled()
   })
 

web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@langgenius/dify-ui/button'
-import { RiCloseLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
@@ -17,13 +16,13 @@ type ModifyExternalRetrievalModalProps = {
   initialScoreThresholdEnabled: boolean
 }
 
-const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps> = ({
+const ModifyExternalRetrievalModal = ({
   onClose,
   onSave,
   initialTopK,
   initialScoreThreshold,
   initialScoreThresholdEnabled,
-}) => {
+}: ModifyExternalRetrievalModalProps) => {
   const { t } = useTranslation()
   const [topK, setTopK] = useState(initialTopK)
   const [scoreThreshold, setScoreThreshold] = useState(initialScoreThreshold)
@@ -55,8 +54,12 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
         <div className="grow system-xl-semibold text-text-primary">
           {t(($) => $.settingTitle, { ns: 'datasetHitTesting' })}
         </div>
-        <ActionButton className="ml-auto" onClick={onClose}>
-          <RiCloseLine className="size-4 shrink-0" />
+        <ActionButton
+          aria-label={t(($) => $['operation.close'], { ns: 'common' })}
+          className="ml-auto"
+          onClick={onClose}
+        >
+          <span aria-hidden className="i-ri-close-line size-4 shrink-0" />
         </ActionButton>
       </div>
       <div className="flex flex-col items-start justify-center gap-4 self-stretch p-4 pt-2">