refactor(web): migrate external knowledge input (#41278)

oxlint-suppressions.json

@@ -2268,11 +2268,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/formatted-text/flavours/__tests__/edit-slice.spec.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1

web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx

@@ -1,6 +1,6 @@
+import { Input } from '@langgenius/dify-ui/input'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
 
 type KnowledgeBaseInfoProps = {
   name: string
@@ -10,40 +10,36 @@ type KnowledgeBaseInfoProps = {
 
 const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description, onChange }) => {
   const { t } = useTranslation()
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange({ name: e.target.value })
-  }
-
-  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onChange({ description: e.target.value })
-  }
+  const nameInputId = React.useId()
+  const descriptionInputId = React.useId()
 
   return (
-    <form className="flex flex-col gap-4 self-stretch">
+    <div className="flex flex-col gap-4 self-stretch">
       <div className="flex flex-col gap-4 self-stretch">
         <div className="flex flex-col gap-1 self-stretch">
           <div className="flex flex-col justify-center self-stretch">
-            <label className="system-sm-semibold text-text-secondary">
+            <label htmlFor={nameInputId} className="system-sm-semibold text-text-secondary">
               {t(($) => $.externalKnowledgeName, { ns: 'dataset' })}
             </label>
           </div>
           <Input
+            id={nameInputId}
             value={name}
-            onChange={handleNameChange}
+            onValueChange={(nextValue) => onChange({ name: nextValue })}
             placeholder={t(($) => $.externalKnowledgeNamePlaceholder, { ns: 'dataset' }) ?? ''}
           />
         </div>
         <div className="flex flex-col gap-1 self-stretch">
           <div className="flex flex-col justify-center self-stretch">
-            <label className="system-sm-semibold text-text-secondary">
+            <label htmlFor={descriptionInputId} className="system-sm-semibold text-text-secondary">
               {t(($) => $.externalKnowledgeDescription, { ns: 'dataset' })}
             </label>
           </div>
           <div className="flex flex-col gap-1 self-stretch">
             <textarea
+              id={descriptionInputId}
               value={description}
-              onChange={(e) => handleDescriptionChange(e)}
+              onChange={(e) => onChange({ description: e.target.value })}
               placeholder={
                 t(($) => $.externalKnowledgeDescriptionPlaceholder, { ns: 'dataset' }) ?? ''
               }
@@ -52,7 +48,7 @@ const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description
           </div>
         </div>
       </div>
-    </form>
+    </div>
   )
 }
 

web/app/components/datasets/external-knowledge-base/create/__tests__/index.spec.tsx

@@ -117,10 +117,12 @@ describe('ExternalKnowledgeBaseCreate', () => {
     it('should render KnowledgeBaseInfo component with correct labels', () => {
       renderComponent()
 
-      // KnowledgeBaseInfo renders these labels
-      // KnowledgeBaseInfo renders these labels
-      expect(screen.getByText('dataset.externalKnowledgeName'))!.toBeInTheDocument()
-      expect(screen.getByText('dataset.externalKnowledgeDescription'))!.toBeInTheDocument()
+      expect(
+        screen.getByRole('textbox', { name: 'dataset.externalKnowledgeName' }),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole('textbox', { name: 'dataset.externalKnowledgeDescription' }),
+      ).toBeInTheDocument()
     })
 
     it('should render ExternalApiSelection component', () => {