Commit 3b029f23 authored by Joel's avatar Joel

feat: tool auth

parent 6d6afe8f
...@@ -16,14 +16,16 @@ type Props = { ...@@ -16,14 +16,16 @@ type Props = {
collection: Collection collection: Collection
onCancel: () => void onCancel: () => void
onSaved: (value: Record<string, any>) => void onSaved: (value: Record<string, any>) => void
onRemove: () => void isHideRemoveBtn?: boolean
onRemove?: () => void
} }
const ConfigCredential: FC<Props> = ({ const ConfigCredential: FC<Props> = ({
collection, collection,
onCancel, onCancel,
onSaved, onSaved,
onRemove, isHideRemoveBtn,
onRemove = () => { },
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [credentialSchema, setCredentialSchema] = useState<any>(null) const [credentialSchema, setCredentialSchema] = useState<any>(null)
...@@ -74,9 +76,9 @@ const ConfigCredential: FC<Props> = ({ ...@@ -74,9 +76,9 @@ const ConfigCredential: FC<Props> = ({
</a>) </a>)
: null} : 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> <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onRemove}>{t('common.operation.remove')}</Button>
) )
} }
......
...@@ -9,6 +9,8 @@ import Button from '@/app/components/base/button' ...@@ -9,6 +9,8 @@ import Button from '@/app/components/base/button'
import Field from '@/app/components/workflow/nodes/_base/components/field' import Field from '@/app/components/workflow/nodes/_base/components/field'
import type { NodePanelProps } from '@/app/components/workflow/types' import type { NodePanelProps } from '@/app/components/workflow/types'
import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form' 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' const i18nPrefix = 'workflow.nodes.tool'
...@@ -26,26 +28,39 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({ ...@@ -26,26 +28,39 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
toolSettingSchema, toolSettingSchema,
toolSettingValue, toolSettingValue,
setToolSettingValue, setToolSettingValue,
currCollection,
isShowAuthBtn,
showSetAuth,
showSetAuthModal,
hideSetAuthModal,
handleSaveAuth,
isLoading,
} = useConfig(id, data) } = useConfig(id, data)
if (isLoading) {
return <div className='flex h-[200px] items-center justify-center'>
<Loading />
</div>
}
return ( return (
<div className='mt-2'> <div className='mt-2'>
{!readOnly && ( {!readOnly && isShowAuthBtn && (
<> <>
<div className='px-4 pb-3'> <div className='px-4 pb-3'>
<Button <Button
type='primary' type='primary'
className='w-full !h-8'> className='w-full !h-8'
onClick={showSetAuthModal}
>
{t(`${i18nPrefix}.toAuthorize`)} {t(`${i18nPrefix}.toAuthorize`)}
</Button> </Button>
</div> </div>
<Split className='mb-2' />
</> </>
)} )}
{!isShowAuthBtn && <>
<div className='px-4 pb-4 space-y-4'> <div className='px-4 pb-4 space-y-4'>
{toolInputVarSchema.length > 0 && ( {toolInputVarSchema.length > 0 && (
<>
<Field <Field
title={t(`${i18nPrefix}.inputVars`)} title={t(`${i18nPrefix}.inputVars`)}
> >
...@@ -56,24 +71,36 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({ ...@@ -56,24 +71,36 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
onChange={setInputVar} onChange={setInputVar}
/> />
</Field> </Field>
)}
{toolInputVarSchema.length > 0 && toolSettingSchema.length > 0 && (
<Split /> <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 {showSetAuth && (
className='space-y-4' <ConfigCredential
itemClassName='!py-0' collection={currCollection!}
fieldLabelClassName='!text-[13px] !font-semibold !text-gray-700 uppercase' onCancel={hideSetAuthModal}
value={toolSettingValue} onSaved={handleSaveAuth}
onChange={setToolSettingValue} isHideRemoveBtn
formSchemas={toolSettingSchema as any}
isEditMode={false}
showOnVariableMap={{}}
validating={false}
inputClassName='!bg-gray-50'
readonly={readOnly}
/> />
</div> )}
</div> </div>
) )
} }
......
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import type { ToolNodeType, ToolVarInput } from './types' import type { ToolNodeType, ToolVarInput } from './types'
import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud' 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 { 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 useConfig = (id: string, payload: ToolNodeType) => {
const { t } = useTranslation()
const { inputs, setInputs } = useNodeCrud<ToolNodeType>(id, payload) const { inputs, setInputs } = useNodeCrud<ToolNodeType>(id, payload)
const { provider_id, provider_name, provider_type, tool_name, tool_parameters } = inputs const { provider_id, provider_name, provider_type, tool_name, tool_parameters } = inputs
const isBuiltIn = provider_type === CollectionType.builtIn 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 [currTool, setCurrTool] = useState<Tool | null>(null)
const formSchemas = currTool ? toolParametersToFormSchemas(currTool.parameters) : [] const formSchemas = currTool ? toolParametersToFormSchemas(currTool.parameters) : []
// use setting // use setting
...@@ -34,6 +74,8 @@ const useConfig = (id: string, payload: ToolNodeType) => { ...@@ -34,6 +74,8 @@ const useConfig = (id: string, payload: ToolNodeType) => {
}) })
}, [inputs, setInputs]) }, [inputs, setInputs])
const isLoading = currTool && (isBuiltIn ? !currCollection : false)
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const list = isBuiltIn ? await fetchBuiltInToolList(provider_name || provider_id) : await fetchCustomToolList(provider_name) const list = isBuiltIn ? await fetchBuiltInToolList(provider_name || provider_id) : await fetchCustomToolList(provider_name)
...@@ -42,6 +84,7 @@ const useConfig = (id: string, payload: ToolNodeType) => { ...@@ -42,6 +84,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
setCurrTool(currTool) setCurrTool(currTool)
})() })()
}, [provider_name]) }, [provider_name])
return { return {
inputs, inputs,
currTool, currTool,
...@@ -50,6 +93,13 @@ const useConfig = (id: string, payload: ToolNodeType) => { ...@@ -50,6 +93,13 @@ const useConfig = (id: string, payload: ToolNodeType) => {
setToolSettingValue, setToolSettingValue,
toolInputVarSchema, toolInputVarSchema,
setInputVar, setInputVar,
currCollection,
isShowAuthBtn,
showSetAuth,
showSetAuthModal,
hideSetAuthModal,
handleSaveAuth,
isLoading,
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment