refactor(web): remove external API panel React.FC

web/app/components/datasets/external-api/external-api-panel/__tests__/index.spec.tsx

@@ -105,10 +105,8 @@ describe('ExternalAPIPanel', () => {
     })
 
     it('should render close button', () => {
-      const { container } = render(<ExternalAPIPanel {...defaultProps} />)
-      const closeButton =
-        container.querySelector('[class*="action-button"]') || screen.getAllByRole('button')[0]
-      expect(closeButton)!.toBeInTheDocument()
+      render(<ExternalAPIPanel {...defaultProps} />)
+      expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
     })
   })
 
@@ -171,11 +169,7 @@ describe('ExternalAPIPanel', () => {
     it('should call onClose when close button is clicked', () => {
       const onClose = vi.fn()
       render(<ExternalAPIPanel canManageExternalKnowledgeApi={true} onClose={onClose} />)
-      // Find the close button (ActionButton with close icon)
-      const buttons = screen.getAllByRole('button')
-      const closeButton =
-        buttons.find((btn) => btn.querySelector('svg[class*="ri-close"]')) || buttons[0]
-      fireEvent.click(closeButton!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
       expect(onClose).toHaveBeenCalledTimes(1)
     })
 

web/app/components/datasets/external-api/external-api-panel/index.tsx

@@ -1,8 +1,6 @@
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiAddLine, RiBookOpenLine, RiCloseLine } from '@remixicon/react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Loading from '@/app/components/base/loading'
@@ -16,10 +14,7 @@ type ExternalAPIPanelProps = {
   onClose: () => void
 }
 
-const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({
-  canManageExternalKnowledgeApi,
-  onClose,
-}) => {
+const ExternalAPIPanel = ({ canManageExternalKnowledgeApi, onClose }: ExternalAPIPanelProps) => {
   const { t } = useTranslation()
   const docLink = useDocLink()
   const { setShowExternalKnowledgeAPIModal } = useModalContext()
@@ -64,15 +59,18 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({
               href={docLink('/use-dify/knowledge/external-knowledge-api')}
               target="_blank"
             >
-              <RiBookOpenLine className="size-3 text-text-accent" />
+              <span aria-hidden className="i-ri-book-open-line size-3 text-text-accent" />
               <div className="grow body-xs-regular text-text-accent">
                 {t(($) => $.externalAPIPanelDocumentation, { ns: 'dataset' })}
               </div>
             </a>
           </div>
           <div className="flex items-center">
-            <ActionButton onClick={() => onClose()}>
-              <RiCloseLine className="size-4 text-text-tertiary" />
+            <ActionButton
+              aria-label={t(($) => $['operation.close'], { ns: 'common' })}
+              onClick={() => onClose()}
+            >
+              <span aria-hidden className="i-ri-close-line size-4 text-text-tertiary" />
             </ActionButton>
           </div>
         </div>
@@ -83,7 +81,10 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({
               className="flex items-center justify-center px-3 py-2"
               onClick={handleOpenExternalAPIModal}
             >
-              <RiAddLine className="size-4 text-components-button-primary-text" />
+              <span
+                aria-hidden
+                className="i-ri-add-line size-4 text-components-button-primary-text"
+              />
               <div className="system-sm-medium text-components-button-primary-text">
                 {t(($) => $.createExternalAPI, { ns: 'dataset' })}
               </div>