feat: tool auth

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

@@ -16,14 +16,16 @@ type Props = {
   collection: Collection
   onCancel: () => void
   onSaved: (value: Record<string, any>) => void
-  onRemove: () => void
+  isHideRemoveBtn?: boolean
+  onRemove?: () => void
 }
 
 const ConfigCredential: FC<Props> = ({
   collection,
   onCancel,
   onSaved,
-  onRemove,
+  isHideRemoveBtn,
+  onRemove = () => { },
 }) => {
   const { t } = useTranslation()
   const [credentialSchema, setCredentialSchema] = useState<any>(null)
@@ -74,9 +76,9 @@ const ConfigCredential: FC<Props> = ({
                     </a>)
                     : null}
                 />
-                <div className={cn(collection.is_team_authorization ? 'justify-between' : 'justify-end', 'mt-2 flex ')} >
+                <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex ')} >
                   {
-                    collection.is_team_authorization && (
+                    (collection.is_team_authorization && !isHideRemoveBtn) && (
                       <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onRemove}>{t('common.operation.remove')}</Button>
                     )
                   }

web/app/components/workflow/nodes/tool/panel.tsx

@@ -9,6 +9,8 @@ import Button from '@/app/components/base/button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
+import Loading from '@/app/components/base/loading'
 
 const i18nPrefix = 'workflow.nodes.tool'
 
@@ -26,26 +28,39 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     toolSettingSchema,
     toolSettingValue,
     setToolSettingValue,
+    currCollection,
+    isShowAuthBtn,
+    showSetAuth,
+    showSetAuthModal,
+    hideSetAuthModal,
+    handleSaveAuth,
+    isLoading,
   } = useConfig(id, data)
 
+  if (isLoading) {
+    return <div className='flex h-[200px] items-center justify-center'>
+      <Loading />
+    </div>
+  }
+
   return (
     <div className='mt-2'>
-      {!readOnly && (
+      {!readOnly && isShowAuthBtn && (
         <>
           <div className='px-4 pb-3'>
             <Button
               type='primary'
-              className='w-full !h-8'>
+              className='w-full !h-8'
+              onClick={showSetAuthModal}
+            >
               {t(`${i18nPrefix}.toAuthorize`)}
             </Button>
           </div>
-          <Split className='mb-2' />
         </>
       )}
-
-      <div className='px-4 pb-4 space-y-4'>
-        {toolInputVarSchema.length > 0 && (
-          <>
+      {!isShowAuthBtn && <>
+        <div className='px-4 pb-4 space-y-4'>
+          {toolInputVarSchema.length > 0 && (
             <Field
               title={t(`${i18nPrefix}.inputVars`)}
             >
@@ -56,24 +71,36 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
                 onChange={setInputVar}
               />
             </Field>
+          )}
+
+          {toolInputVarSchema.length > 0 && toolSettingSchema.length > 0 && (
             <Split />
-          </>
-        )}
+          )}
+
+          <Form
+            className='space-y-4'
+            itemClassName='!py-0'
+            fieldLabelClassName='!text-[13px] !font-semibold !text-gray-700 uppercase'
+            value={toolSettingValue}
+            onChange={setToolSettingValue}
+            formSchemas={toolSettingSchema as any}
+            isEditMode={false}
+            showOnVariableMap={{}}
+            validating={false}
+            inputClassName='!bg-gray-50'
+            readonly={readOnly}
+          />
+        </div>
+      </>}
 
-        <Form
-          className='space-y-4'
-          itemClassName='!py-0'
-          fieldLabelClassName='!text-[13px] !font-semibold !text-gray-700 uppercase'
-          value={toolSettingValue}
-          onChange={setToolSettingValue}
-          formSchemas={toolSettingSchema as any}
-          isEditMode={false}
-          showOnVariableMap={{}}
-          validating={false}
-          inputClassName='!bg-gray-50'
-          readonly={readOnly}
+      {showSetAuth && (
+        <ConfigCredential
+          collection={currCollection!}
+          onCancel={hideSetAuthModal}
+          onSaved={handleSaveAuth}
+          isHideRemoveBtn
         />
-      </div>
+      )}
     </div>
   )
 }

web/app/components/workflow/nodes/tool/use-config.ts

 import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
 import type { ToolNodeType, ToolVarInput } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
-import { fetchBuiltInToolList, fetchCustomToolList } from '@/service/tools'
-import type { Tool } from '@/app/components/tools/types'
-import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
-
 import { CollectionType } from '@/app/components/tools/types'
+import type { Collection, Tool } from '@/app/components/tools/types'
+import { fetchBuiltInToolList, fetchCollectionList, fetchCustomToolList } from '@/service/tools'
+import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import Toast from '@/app/components/base/toast'
 
 const useConfig = (id: string, payload: ToolNodeType) => {
+  const { t } = useTranslation()
+
   const { inputs, setInputs } = useNodeCrud<ToolNodeType>(id, payload)
   const { provider_id, provider_name, provider_type, tool_name, tool_parameters } = inputs
   const isBuiltIn = provider_type === CollectionType.builtIn
+  const [currCollection, setCurrCollection] = useState<Collection | null | undefined>(null)
+  const fetchCurrCollection = useCallback(async () => {
+    if (!provider_id)
+      return
+    const res = await fetchCollectionList()
+    const currCollection = res.find(item => item.id === provider_id)
+    setCurrCollection(currCollection)
+  }, [provider_id])
+
+  useEffect(() => {
+    if (!provider_id || !isBuiltIn)
+      return
+
+    fetchCurrCollection()
+  }, [provider_id])
+
+  // Auth
+  const needAuth = !!currCollection?.allow_delete
+  const isAuthed = !!currCollection?.is_team_authorization
+  const isShowAuthBtn = isBuiltIn && needAuth && !isAuthed
+  const [showSetAuth, {
+    setTrue: showSetAuthModal,
+    setFalse: hideSetAuthModal,
+  }] = useBoolean(false)
+
+  const handleSaveAuth = useCallback(async (value: any) => {
+    // await updateBuiltInToolCredential(currCollection?.name, value)
+
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    await fetchCurrCollection()
+    hideSetAuthModal()
+  }, [currCollection])
+
   const [currTool, setCurrTool] = useState<Tool | null>(null)
   const formSchemas = currTool ? toolParametersToFormSchemas(currTool.parameters) : []
   // use setting
@@ -34,6 +74,8 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     })
   }, [inputs, setInputs])
 
+  const isLoading = currTool && (isBuiltIn ? !currCollection : false)
+
   useEffect(() => {
     (async () => {
       const list = isBuiltIn ? await fetchBuiltInToolList(provider_name || provider_id) : await fetchCustomToolList(provider_name)
@@ -42,6 +84,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
         setCurrTool(currTool)
     })()
   }, [provider_name])
+
   return {
     inputs,
     currTool,
@@ -50,6 +93,13 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     setToolSettingValue,
     toolInputVarSchema,
     setInputVar,
+    currCollection,
+    isShowAuthBtn,
+    showSetAuth,
+    showSetAuthModal,
+    hideSetAuthModal,
+    handleSaveAuth,
+    isLoading,
   }
 }