Support OAuth Integration for Plugin Tools (#22550)
Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: Yeuoly <admin@srmxy.cn>
This commit is contained in:
Maries
@@ -3,9 +3,6 @@ import type { FC } from 'react'
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
RiArrowLeftLine,
|
||||
} from '@remixicon/react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
@@ -15,24 +12,17 @@ import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selec
|
||||
import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
|
||||
import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
|
||||
import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Indicator from '@/app/components/header/indicator'
|
||||
import ToolCredentialForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import TabSlider from '@/app/components/base/tab-slider-plain'
|
||||
import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
|
||||
import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
|
||||
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import {
|
||||
useAllBuiltInTools,
|
||||
useAllCustomTools,
|
||||
useAllMCPTools,
|
||||
useAllWorkflowTools,
|
||||
useInvalidateAllBuiltInTools,
|
||||
useUpdateProviderCredentials,
|
||||
} from '@/service/use-tools'
|
||||
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
|
||||
import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
|
||||
@@ -46,6 +36,10 @@ import { MARKETPLACE_API_PREFIX } from '@/config'
|
||||
import type { Node } from 'reactflow'
|
||||
import type { NodeOutPutVar } from '@/app/components/workflow/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import {
|
||||
AuthCategory,
|
||||
PluginAuthInAgent,
|
||||
} from '@/app/components/plugins/plugin-auth'
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean
|
||||
@@ -196,23 +190,6 @@ const ToolSelector: FC<Props> = ({
|
||||
} as any)
|
||||
}
|
||||
|
||||
// authorization
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
const [isShowSettingAuth, setShowSettingAuth] = useState(false)
|
||||
const handleCredentialSettingUpdate = () => {
|
||||
invalidateAllBuiltinTools()
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
setShowSettingAuth(false)
|
||||
onShowChange(false)
|
||||
}
|
||||
|
||||
const { mutate: updatePermission } = useUpdateProviderCredentials({
|
||||
onSuccess: handleCredentialSettingUpdate,
|
||||
})
|
||||
|
||||
// install from marketplace
|
||||
const currentTool = useMemo(() => {
|
||||
return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
|
||||
@@ -226,6 +203,12 @@ const ToolSelector: FC<Props> = ({
|
||||
invalidateAllBuiltinTools()
|
||||
invalidateInstalledPluginList()
|
||||
}
|
||||
const handleAuthorizationItemClick = (id: string) => {
|
||||
onSelect({
|
||||
...value,
|
||||
credential_id: id,
|
||||
} as any)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -264,7 +247,6 @@ const ToolSelector: FC<Props> = ({
|
||||
onSwitchChange={handleEnabledChange}
|
||||
onDelete={onDelete}
|
||||
noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
|
||||
onAuth={() => setShowSettingAuth(true)}
|
||||
uninstalled={!currentProvider && inMarketPlace}
|
||||
versionMismatch={currentProvider && inMarketPlace && !currentTool}
|
||||
installInfo={manifest?.latest_package_identifier}
|
||||
@@ -284,171 +266,131 @@ const ToolSelector: FC<Props> = ({
|
||||
)}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent>
|
||||
<div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
|
||||
{!isShowSettingAuth && (
|
||||
<>
|
||||
<div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t(`plugin.detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`)}</div>
|
||||
{/* base form */}
|
||||
<div className='flex flex-col gap-3 px-4 py-2'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
|
||||
<ToolPicker
|
||||
placement='bottom'
|
||||
offset={offset}
|
||||
trigger={
|
||||
<ToolTrigger
|
||||
open={panelShowState || isShowChooseTool}
|
||||
value={value}
|
||||
provider={currentProvider}
|
||||
/>
|
||||
}
|
||||
isShow={panelShowState || isShowChooseTool}
|
||||
onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
|
||||
disabled={false}
|
||||
supportAddCustomTool
|
||||
onSelect={handleSelectTool}
|
||||
onSelectMultiple={handleSelectMultipleTool}
|
||||
scope={scope}
|
||||
selectedTools={selectedTools}
|
||||
canChooseMCPTool={canChooseMCPTool}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
|
||||
<Textarea
|
||||
className='resize-none'
|
||||
placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
|
||||
value={value?.extra?.description || ''}
|
||||
onChange={handleDescriptionChange}
|
||||
disabled={!value?.provider_name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* authorization */}
|
||||
{currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
|
||||
<>
|
||||
<Divider className='my-1 w-full' />
|
||||
<div className='px-4 py-2'>
|
||||
{!currentProvider.is_team_authorization && (
|
||||
<Button
|
||||
variant='primary'
|
||||
className={cn('w-full shrink-0')}
|
||||
onClick={() => setShowSettingAuth(true)}
|
||||
disabled={!isCurrentWorkspaceManager}
|
||||
>
|
||||
{t('tools.auth.unauthorized')}
|
||||
</Button>
|
||||
)}
|
||||
{currentProvider.is_team_authorization && (
|
||||
<Button
|
||||
variant='secondary'
|
||||
className={cn('w-full shrink-0')}
|
||||
onClick={() => setShowSettingAuth(true)}
|
||||
disabled={!isCurrentWorkspaceManager}
|
||||
>
|
||||
<Indicator className='mr-2' color={'green'} />
|
||||
{t('tools.auth.authorized')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{/* tool settings */}
|
||||
{(currentToolSettings.length > 0 || currentToolParams.length > 0) && currentProvider?.is_team_authorization && (
|
||||
<>
|
||||
<Divider className='my-1 w-full' />
|
||||
{/* tabs */}
|
||||
{nodeId && showTabSlider && (
|
||||
<TabSlider
|
||||
className='mt-1 shrink-0 px-4'
|
||||
itemClassName='py-3'
|
||||
noBorderBottom
|
||||
smallItem
|
||||
value={currType}
|
||||
onChange={(value) => {
|
||||
setCurrType(value)
|
||||
}}
|
||||
options={[
|
||||
{ value: 'settings', text: t('plugin.detailPanel.toolSelector.settings')! },
|
||||
{ value: 'params', text: t('plugin.detailPanel.toolSelector.params')! },
|
||||
]}
|
||||
<div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', 'overflow-y-auto pb-2')}>
|
||||
<>
|
||||
<div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t(`plugin.detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`)}</div>
|
||||
{/* base form */}
|
||||
<div className='flex flex-col gap-3 px-4 py-2'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
|
||||
<ToolPicker
|
||||
placement='bottom'
|
||||
offset={offset}
|
||||
trigger={
|
||||
<ToolTrigger
|
||||
open={panelShowState || isShowChooseTool}
|
||||
value={value}
|
||||
provider={currentProvider}
|
||||
/>
|
||||
)}
|
||||
{nodeId && showTabSlider && currType === 'params' && (
|
||||
<div className='px-4 py-2'>
|
||||
}
|
||||
isShow={panelShowState || isShowChooseTool}
|
||||
onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
|
||||
disabled={false}
|
||||
supportAddCustomTool
|
||||
onSelect={handleSelectTool}
|
||||
onSelectMultiple={handleSelectMultipleTool}
|
||||
scope={scope}
|
||||
selectedTools={selectedTools}
|
||||
canChooseMCPTool={canChooseMCPTool}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
|
||||
<Textarea
|
||||
className='resize-none'
|
||||
placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
|
||||
value={value?.extra?.description || ''}
|
||||
onChange={handleDescriptionChange}
|
||||
disabled={!value?.provider_name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* authorization */}
|
||||
{currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
|
||||
<>
|
||||
<Divider className='my-1 w-full' />
|
||||
<div className='px-4 py-2'>
|
||||
<PluginAuthInAgent
|
||||
pluginPayload={{
|
||||
provider: currentProvider.name,
|
||||
category: AuthCategory.tool,
|
||||
}}
|
||||
credentialId={value?.credential_id}
|
||||
onAuthorizationItemClick={handleAuthorizationItemClick}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{/* tool settings */}
|
||||
{(currentToolSettings.length > 0 || currentToolParams.length > 0) && currentProvider?.is_team_authorization && (
|
||||
<>
|
||||
<Divider className='my-1 w-full' />
|
||||
{/* tabs */}
|
||||
{nodeId && showTabSlider && (
|
||||
<TabSlider
|
||||
className='mt-1 shrink-0 px-4'
|
||||
itemClassName='py-3'
|
||||
noBorderBottom
|
||||
smallItem
|
||||
value={currType}
|
||||
onChange={(value) => {
|
||||
setCurrType(value)
|
||||
}}
|
||||
options={[
|
||||
{ value: 'settings', text: t('plugin.detailPanel.toolSelector.settings')! },
|
||||
{ value: 'params', text: t('plugin.detailPanel.toolSelector.params')! },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{nodeId && showTabSlider && currType === 'params' && (
|
||||
<div className='px-4 py-2'>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
|
||||
</div>
|
||||
)}
|
||||
{/* user settings only */}
|
||||
{userSettingsOnly && (
|
||||
<div className='p-4 pb-1'>
|
||||
<div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.settings')}</div>
|
||||
</div>
|
||||
)}
|
||||
{/* reasoning config only */}
|
||||
{nodeId && reasoningConfigOnly && (
|
||||
<div className='mb-1 p-4 pb-1'>
|
||||
<div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.params')}</div>
|
||||
<div className='pb-1'>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
|
||||
</div>
|
||||
)}
|
||||
{/* user settings only */}
|
||||
{userSettingsOnly && (
|
||||
<div className='p-4 pb-1'>
|
||||
<div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.settings')}</div>
|
||||
</div>
|
||||
)}
|
||||
{/* reasoning config only */}
|
||||
{nodeId && reasoningConfigOnly && (
|
||||
<div className='mb-1 p-4 pb-1'>
|
||||
<div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.params')}</div>
|
||||
<div className='pb-1'>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* user settings form */}
|
||||
{(currType === 'settings' || userSettingsOnly) && (
|
||||
<div className='px-4 py-2'>
|
||||
<ToolForm
|
||||
inPanel
|
||||
readOnly={false}
|
||||
nodeId={nodeId}
|
||||
schema={settingsFormSchemas as any}
|
||||
value={getPlainValue(value?.settings || {})}
|
||||
onChange={handleSettingsFormChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* reasoning config form */}
|
||||
{nodeId && (currType === 'params' || reasoningConfigOnly) && (
|
||||
<ReasoningConfigForm
|
||||
value={value?.parameters || {}}
|
||||
onChange={handleParamsFormChange}
|
||||
schemas={paramsFormSchemas as any}
|
||||
nodeOutputVars={nodeOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
</div>
|
||||
)}
|
||||
{/* user settings form */}
|
||||
{(currType === 'settings' || userSettingsOnly) && (
|
||||
<div className='px-4 py-2'>
|
||||
<ToolForm
|
||||
inPanel
|
||||
readOnly={false}
|
||||
nodeId={nodeId}
|
||||
schema={settingsFormSchemas as any}
|
||||
value={getPlainValue(value?.settings || {})}
|
||||
onChange={handleSettingsFormChange}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* authorization panel */}
|
||||
{isShowSettingAuth && currentProvider && (
|
||||
<>
|
||||
<div className='relative flex flex-col gap-1 pt-3.5'>
|
||||
<div className='absolute -top-2 left-2 w-[345px] rounded-t-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-2 backdrop-blur-sm'></div>
|
||||
<div
|
||||
className='system-xs-semibold-uppercase flex h-6 cursor-pointer items-center gap-1 px-3 text-text-accent-secondary'
|
||||
onClick={() => setShowSettingAuth(false)}
|
||||
>
|
||||
<RiArrowLeftLine className='h-4 w-4' />
|
||||
BACK
|
||||
</div>
|
||||
<div className='system-xl-semibold px-4 text-text-primary'>{t('tools.auth.setupModalTitle')}</div>
|
||||
<div className='system-xs-regular px-4 text-text-tertiary'>{t('tools.auth.setupModalTitleDescription')}</div>
|
||||
</div>
|
||||
<ToolCredentialForm
|
||||
collection={currentProvider}
|
||||
onCancel={() => setShowSettingAuth(false)}
|
||||
onSaved={async value => updatePermission({
|
||||
providerName: currentProvider.name,
|
||||
credentials: value,
|
||||
})}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* reasoning config form */}
|
||||
{nodeId && (currType === 'params' || reasoningConfigOnly) && (
|
||||
<ReasoningConfigForm
|
||||
value={value?.parameters || {}}
|
||||
onChange={handleParamsFormChange}
|
||||
schemas={paramsFormSchemas as any}
|
||||
nodeOutputVars={nodeOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
nodeId={nodeId}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
|
||||
@@ -30,7 +30,6 @@ type Props = {
|
||||
onSwitchChange?: (value: boolean) => void
|
||||
onDelete?: () => void
|
||||
noAuth?: boolean
|
||||
onAuth?: () => void
|
||||
isError?: boolean
|
||||
errorTip?: any
|
||||
uninstalled?: boolean
|
||||
@@ -38,6 +37,7 @@ type Props = {
|
||||
onInstall?: () => void
|
||||
versionMismatch?: boolean
|
||||
open: boolean
|
||||
authRemoved?: boolean
|
||||
canChooseMCPTool?: boolean,
|
||||
}
|
||||
|
||||
@@ -53,13 +53,13 @@ const ToolItem = ({
|
||||
onSwitchChange,
|
||||
onDelete,
|
||||
noAuth,
|
||||
onAuth,
|
||||
uninstalled,
|
||||
installInfo,
|
||||
onInstall,
|
||||
isError,
|
||||
errorTip,
|
||||
versionMismatch,
|
||||
authRemoved,
|
||||
canChooseMCPTool,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation()
|
||||
@@ -125,11 +125,17 @@ const ToolItem = ({
|
||||
<McpToolNotSupportTooltip />
|
||||
)}
|
||||
{!isError && !uninstalled && !versionMismatch && noAuth && (
|
||||
<Button variant='secondary' size='small' onClick={onAuth}>
|
||||
<Button variant='secondary' size='small'>
|
||||
{t('tools.notAuthorized')}
|
||||
<Indicator className='ml-2' color='orange' />
|
||||
</Button>
|
||||
)}
|
||||
{!isError && !uninstalled && !versionMismatch && authRemoved && (
|
||||
<Button variant='secondary' size='small'>
|
||||
{t('plugin.auth.authRemoved')}
|
||||
<Indicator className='ml-2' color='red' />
|
||||
</Button>
|
||||
)}
|
||||
{!isError && !uninstalled && versionMismatch && installInfo && (
|
||||
<div onClick={e => e.stopPropagation()}>
|
||||
<SwitchPluginVersion
|
||||
|
||||
Reference in New Issue
Block a user