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

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

@@ -74,9 +74,7 @@ describe('AddExternalAPIModal', () => {
 
     it('should render close button', () => {
       render(<AddExternalAPIModal {...defaultProps} />)
-      // Close button is rendered in a portal
-      const closeButton = document.body.querySelector('.action-btn')
-      expect(closeButton)!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
     })
   })
 
@@ -388,9 +386,7 @@ describe('AddExternalAPIModal', () => {
       const onCancel = vi.fn()
       render(<AddExternalAPIModal {...defaultProps} onCancel={onCancel} />)
 
-      // Close button is rendered in a portal
-      const closeButton = document.body.querySelector('.action-btn')!
-      fireEvent.click(closeButton)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(onCancel).toHaveBeenCalledTimes(1)
     })

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

@@ -1,4 +1,3 @@
-import type { FC } from 'react'
 import type { CreateExternalAPIReq, FormSchema } from '../declarations'
 import {
   AlertDialog,
@@ -13,7 +12,6 @@ import { Button } from '@langgenius/dify-ui/button'
 import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { toast } from '@langgenius/dify-ui/toast'
-import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remixicon/react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
@@ -66,14 +64,14 @@ const emptyExternalAPIFormData: CreateExternalAPIReq = {
   },
 }
 
-const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({
+const AddExternalAPIModal = ({
   data,
   onSave,
   onCancel,
   datasetBindings,
   isEditMode,
   onEdit,
-}) => {
+}: AddExternalAPIModalProps) => {
   const { t } = useTranslation()
   const [loading, setLoading] = useState(false)
   const [showConfirm, setShowConfirm] = useState(false)
@@ -154,7 +152,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({
                           type="button"
                           className="flex size-3.5 items-center justify-center rounded-sm outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
                         >
-                          <RiInformation2Line className="size-3.5" />
+                          <span aria-hidden className="i-ri-information-2-line size-3.5" />
                         </button>
                       }
                     />
@@ -171,7 +169,10 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({
                             key={binding.id}
                             className="flex items-center gap-1 self-stretch px-2 py-1"
                           >
-                            <RiBook2Line className="size-4 text-text-secondary" />
+                            <span
+                              aria-hidden
+                              className="i-ri-book-2-line size-4 text-text-secondary"
+                            />
                             <div className="system-sm-medium text-text-secondary">
                               {binding.name}
                             </div>
@@ -184,8 +185,12 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({
               </div>
             )}
           </div>
-          <ActionButton className="absolute top-5 right-5" onClick={onCancel}>
-            <RiCloseLine className="h-4.5 w-4.5 shrink-0 text-text-tertiary" />
+          <ActionButton
+            aria-label={t(($) => $['operation.close'], { ns: 'common' })}
+            className="absolute top-5 right-5"
+            onClick={onCancel}
+          >
+            <span aria-hidden className="i-ri-close-line h-4.5 w-4.5 shrink-0 text-text-tertiary" />
           </ActionButton>
           <Form
             value={formData}
@@ -211,7 +216,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({
             </Button>
           </div>
           <div className="flex shrink-0 items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 system-xs-regular text-text-tertiary">
-            <RiLock2Fill className="size-3 text-text-quaternary" />
+            <span aria-hidden className="i-ri-lock-2-fill size-3 text-text-quaternary" />
             {t(($) => $['externalAPIForm.encrypted.front'], { ns: 'dataset' })}
             <a
               className="text-text-accent"