From ff0260e564b7e14b21c1e10722f5347ee6e6b306 Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Thu, 26 Sep 2024 10:23:06 +0800
Subject: [PATCH] fix: minor issues

---
 .../external-api/external-api-modal/index.tsx | 12 +++----
 .../create/ExternalApiSelection.tsx           |  8 ++++-
 .../create/KnowledgeBaseInfo.tsx              | 35 +++----------------
 .../external-knowledge-base/create/index.tsx  |  8 +++--
 4 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/web/app/components/datasets/external-api/external-api-modal/index.tsx b/web/app/components/datasets/external-api/external-api-modal/index.tsx
index b79f81199e..09f761cda4 100644
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -130,13 +130,13 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                         <div className='p-1'>
                           <div className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch'>
                             <div className='text-text-tertiary system-xs-medium-uppercase'>{`${datasetBindings?.length} ${t('dataset.editExternalAPITooltipTitle')}`}</div>
-                            {datasetBindings?.map(binding => (
-                              <div key={binding.id} className='flex px-2 py-1 items-center gap-1 self-stretch'>
-                                <RiBook2Line className='w-4 h-4 text-text-secondary' />
-                                <div className='text-text-secondary system-sm-medium'>{binding.name}</div>
-                              </div>
-                            ))}
                           </div>
+                          {datasetBindings?.map(binding => (
+                            <div key={binding.id} className='flex px-2 py-1 items-center gap-1 self-stretch'>
+                              <RiBook2Line className='w-4 h-4 text-text-secondary' />
+                              <div className='text-text-secondary system-sm-medium'>{binding.name}</div>
+                            </div>
+                          ))}
                         </div>
                       }
                       asChild={false}
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
index 63fe315b70..b353f6e237 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Select from '@/app/components/base/select'
 import Input from '@/app/components/base/input'
@@ -8,7 +9,7 @@ type ExternalApiSelectionProps = {
   onChange: (data: { external_knowledge_api_id?: string; external_knowledge_id?: string }) => void
 }
 
-const ExternalApiSelection = ({ external_knowledge_api_id, external_knowledge_id, onChange }: ExternalApiSelectionProps) => {
+const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_knowledge_api_id, external_knowledge_id, onChange }) => {
   const { t } = useTranslation()
   const { externalKnowledgeApiList } = useExternalKnowledgeApi()
 
@@ -17,6 +18,11 @@ const ExternalApiSelection = ({ external_knowledge_api_id, external_knowledge_id
     name: api.name,
   }))
 
+  useEffect(() => {
+    if (!external_knowledge_api_id && apiItems.length > 0)
+      onChange({ external_knowledge_api_id: apiItems[0].value, external_knowledge_id })
+  }, [])
+
   return (
     <form className='flex flex-col gap-4 self-stretch'>
       <div className='flex flex-col gap-1 self-stretch'>
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 edd8554f53..b0a8566a23 100644
--- a/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx
@@ -1,43 +1,23 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { RiBookOpenLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 
 type KnowledgeBaseInfoProps = {
   name: string
-  description: string
+  description?: string
   onChange: (data: { name?: string; description?: string }) => void
 }
 
-const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name: initialName, description: initialDescription, onChange }) => {
+const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description, onChange }) => {
   const { t } = useTranslation()
-  const [name, setName] = useState(initialName)
-  const [description, setDescription] = useState(initialDescription)
-
-  useEffect(() => {
-    const savedName = localStorage.getItem('knowledgeBaseName')
-    const savedDescription = localStorage.getItem('knowledgeBaseDescription')
-
-    if (savedName)
-      setName(savedName)
-    if (savedDescription)
-      setDescription(savedDescription)
-
-    onChange({ name: savedName || initialName, description: savedDescription || initialDescription })
-  }, [])
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newName = e.target.value
-    setName(newName)
-    localStorage.setItem('knowledgeBaseName', newName)
-    onChange({ name: newName })
+    onChange({ name: e.target.value })
   }
 
   const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newDescription = e.target.value
-    setDescription(newDescription)
-    localStorage.setItem('knowledgeBaseDescription', newDescription)
-    onChange({ description: newDescription })
+    onChange({ description: e.target.value })
   }
 
   return (
@@ -77,9 +57,4 @@ const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name: initialName
   )
 }
 
-export const clearKnowledgeBaseInfo = () => {
-  localStorage.removeItem('knowledgeBaseName')
-  localStorage.removeItem('knowledgeBaseDescription')
-}
-
 export default KnowledgeBaseInfo
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.tsx b/web/app/components/datasets/external-knowledge-base/create/index.tsx
index 3f36d1fefb..ceada10a4e 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -38,7 +38,6 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
 
   const handleFormChange = (newData: CreateKnowledgeBaseReq) => {
     setFormData(newData)
-    console.log(formData)
   }
 
   const isFormValid = formData.name !== ''
@@ -94,7 +93,12 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
               <Button variant='secondary' onClick={navBackHandle}>
                 <div className='text-components-button-secondary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.cancel')}</div>
               </Button>
-              <Button variant='primary' onClick={() => onConnect(formData)} disabled={!isFormValid}>
+              <Button
+                variant='primary'
+                onClick={() => {
+                  onConnect(formData)
+                  navBackHandle()
+                }} disabled={!isFormValid}>
                 <div className='text-components-button-primary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.connect')}</div>
                 <RiArrowRightLine className='w-4 h-4 text-components-button-primary-text' />
               </Button>