From 0a1ce09dfbc3273ed24240ebee4b54ef92d30293 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 26 Aug 2026 04:44:52 +0000
Subject: [PATCH] refactor(web): migrate external knowledge input (#41278)

---
 oxlint-suppressions.json                      |  5 ----
 .../create/KnowledgeBaseInfo.tsx              | 26 ++++++++-----------
 .../create/__tests__/index.spec.tsx           | 10 ++++---
 3 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 3bf5bc706e8..984b6311532 100644
--- a/oxlint-suppressions.json
+++ b/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
diff --git a/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx b/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx
index dc8aeac203a..319b0c82cc0 100644
--- a/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx
+++ b/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>
   )
 }
 
diff --git a/web/app/components/datasets/external-knowledge-base/create/__tests__/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/__tests__/index.spec.tsx
index 521d9d3dcd5..db476ec812c 100644
--- a/web/app/components/datasets/external-knowledge-base/create/__tests__/index.spec.tsx
+++ b/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', () => {