fix: tool authorization setting panel not validate required fields (#6387)

web/app/components/tools/setting/build-in/config-credentials.tsx

@@ -7,11 +7,12 @@ import type { Collection } from '../../types'
 import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
 import Loading from '@/app/components/base/loading'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
-import { useAppContext } from '@/context/app-context'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 type Props = {
   collection: Collection
@@ -29,8 +30,8 @@ const ConfigCredential: FC<Props> = ({
   onRemove = () => { },
 }) => {
   const { t } = useTranslation()
+  const language = useLanguage()
   const [credentialSchema, setCredentialSchema] = useState<any>(null)
-  const { isCurrentWorkspaceManager } = useAppContext()
   const { name: collectionName } = collection
   const [tempCredential, setTempCredential] = React.useState<any>({})
   useEffect(() => {
@@ -44,6 +45,16 @@ const ConfigCredential: FC<Props> = ({
     })
   }, [])
 
+  const handleSave = () => {
+    for (const field of credentialSchema) {
+      if (field.required && !tempCredential[field.name]) {
+        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
+        return
+      }
+    }
+    onSaved(tempCredential)
+  }
+
   return (
     <Drawer
       isShow
@@ -91,7 +102,7 @@ const ConfigCredential: FC<Props> = ({
                   }
                   < div className='flex space-x-2'>
                     <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
-                    <Button variant='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
+                    <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
                   </div>
                 </div>
               </>