datasource oauth
zxhlyh
8 months ago
parent
039a053027
commit
caa2de3344
@ -0,0 +1,2 @@
|
||||
export * from './use-marketplace-all-plugins'
|
||||
export * from './use-data-source-auth-update'
|
||||
@ -0,0 +1,16 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useInvalidDataSourceListAuth } from '@/service/use-datasource'
|
||||
import { useInvalidDataSourceList } from '@/service/use-pipeline'
|
||||
|
||||
export const useDataSourceAuthUpdate = () => {
|
||||
const invalidateDataSourceListAuth = useInvalidDataSourceListAuth()
|
||||
const invalidateDataSourceList = useInvalidDataSourceList()
|
||||
const handleAuthUpdate = useCallback(() => {
|
||||
invalidateDataSourceListAuth()
|
||||
invalidateDataSourceList()
|
||||
}, [invalidateDataSourceListAuth, invalidateDataSourceList])
|
||||
|
||||
return {
|
||||
handleAuthUpdate,
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import {
|
||||
memo,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiEqualizer2Line } from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Indicator from '@/app/components/header/indicator'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type AuthorizedInDataSourceNodeProps = {
|
||||
authorizationsNum: number
|
||||
onJumpToDataSourcePage: () => void
|
||||
}
|
||||
const AuthorizedInDataSourceNode = ({
|
||||
authorizationsNum,
|
||||
onJumpToDataSourcePage,
|
||||
}: AuthorizedInDataSourceNodeProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Button
|
||||
size='small'
|
||||
onClick={onJumpToDataSourcePage}
|
||||
>
|
||||
<Indicator
|
||||
className='mr-1.5'
|
||||
color='green'
|
||||
/>
|
||||
{
|
||||
authorizationsNum > 1
|
||||
? t('plugin.auth.authorizations')
|
||||
: t('plugin.auth.authorization')
|
||||
}
|
||||
<RiEqualizer2Line
|
||||
className={cn(
|
||||
'h-3.5 w-3.5 text-components-button-ghost-text',
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(AuthorizedInDataSourceNode)
|
||||
@ -0,0 +1,124 @@
|
||||
import {
|
||||
useCallback,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
import type { PluginPayload } from '../types'
|
||||
import {
|
||||
useDeletePluginCredentialHook,
|
||||
useSetPluginDefaultCredentialHook,
|
||||
useUpdatePluginCredentialHook,
|
||||
} from '../hooks/use-credential'
|
||||
|
||||
export const usePluginAuthAction = (
|
||||
pluginPayload: PluginPayload,
|
||||
onUpdate?: () => void,
|
||||
) => {
|
||||
const { t } = useTranslation()
|
||||
const { notify } = useToastContext()
|
||||
const pendingOperationCredentialId = useRef<string | null>(null)
|
||||
const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
|
||||
const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
|
||||
const openConfirm = useCallback((credentialId?: string) => {
|
||||
if (credentialId)
|
||||
pendingOperationCredentialId.current = credentialId
|
||||
|
||||
setDeleteCredentialId(pendingOperationCredentialId.current)
|
||||
}, [])
|
||||
const closeConfirm = useCallback(() => {
|
||||
setDeleteCredentialId(null)
|
||||
pendingOperationCredentialId.current = null
|
||||
}, [])
|
||||
const [doingAction, setDoingAction] = useState(false)
|
||||
const doingActionRef = useRef(doingAction)
|
||||
const handleSetDoingAction = useCallback((doing: boolean) => {
|
||||
doingActionRef.current = doing
|
||||
setDoingAction(doing)
|
||||
}, [])
|
||||
const handleConfirm = useCallback(async () => {
|
||||
if (doingActionRef.current)
|
||||
return
|
||||
if (!pendingOperationCredentialId.current) {
|
||||
setDeleteCredentialId(null)
|
||||
return
|
||||
}
|
||||
try {
|
||||
handleSetDoingAction(true)
|
||||
await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
|
||||
notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
onUpdate?.()
|
||||
setDeleteCredentialId(null)
|
||||
pendingOperationCredentialId.current = null
|
||||
}
|
||||
finally {
|
||||
handleSetDoingAction(false)
|
||||
}
|
||||
}, [deletePluginCredential, onUpdate, notify, t, handleSetDoingAction])
|
||||
const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
|
||||
const handleEdit = useCallback((id: string, values: Record<string, any>) => {
|
||||
pendingOperationCredentialId.current = id
|
||||
setEditValues(values)
|
||||
}, [])
|
||||
const handleRemove = useCallback(() => {
|
||||
setDeleteCredentialId(pendingOperationCredentialId.current)
|
||||
}, [])
|
||||
const { mutateAsync: setPluginDefaultCredential } = useSetPluginDefaultCredentialHook(pluginPayload)
|
||||
const handleSetDefault = useCallback(async (id: string) => {
|
||||
if (doingActionRef.current)
|
||||
return
|
||||
try {
|
||||
handleSetDoingAction(true)
|
||||
await setPluginDefaultCredential(id)
|
||||
notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
onUpdate?.()
|
||||
}
|
||||
finally {
|
||||
handleSetDoingAction(false)
|
||||
}
|
||||
}, [setPluginDefaultCredential, onUpdate, notify, t, handleSetDoingAction])
|
||||
const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
|
||||
const handleRename = useCallback(async (payload: {
|
||||
credential_id: string
|
||||
name: string
|
||||
}) => {
|
||||
if (doingActionRef.current)
|
||||
return
|
||||
try {
|
||||
handleSetDoingAction(true)
|
||||
await updatePluginCredential(payload)
|
||||
notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
onUpdate?.()
|
||||
}
|
||||
finally {
|
||||
handleSetDoingAction(false)
|
||||
}
|
||||
}, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
|
||||
|
||||
return {
|
||||
doingAction,
|
||||
handleSetDoingAction,
|
||||
openConfirm,
|
||||
closeConfirm,
|
||||
deleteCredentialId,
|
||||
setDeleteCredentialId,
|
||||
handleConfirm,
|
||||
editValues,
|
||||
setEditValues,
|
||||
handleEdit,
|
||||
handleRemove,
|
||||
handleSetDefault,
|
||||
handleRename,
|
||||
pendingOperationCredentialId,
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
import { memo } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type PluginAuthInDataSourceNodeProps = {
|
||||
children?: ReactNode
|
||||
isAuthorized?: boolean
|
||||
onJumpToDataSourcePage: () => void
|
||||
}
|
||||
const PluginAuthInDataSourceNode = ({
|
||||
children,
|
||||
isAuthorized,
|
||||
onJumpToDataSourcePage,
|
||||
}: PluginAuthInDataSourceNodeProps) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<>
|
||||
{
|
||||
!isAuthorized && (
|
||||
<div className='px-4 pb-2'>
|
||||
<Button
|
||||
className='w-full'
|
||||
variant='primary'
|
||||
onClick={onJumpToDataSourcePage}
|
||||
>
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
{t('common.integrations.connect')}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{isAuthorized && children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(PluginAuthInDataSourceNode)
|
||||
@ -1,137 +0,0 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
|
||||
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 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 { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
|
||||
import { noop } from 'lodash-es'
|
||||
import { useDataSourceCredentials } from '@/service/use-pipeline'
|
||||
import type { ToolCredential } from '@/app/components/tools/types'
|
||||
|
||||
type Props = {
|
||||
dataSourceItem: any
|
||||
onCancel: () => void
|
||||
onSaved: (value: Record<string, any>) => void
|
||||
isHideRemoveBtn?: boolean
|
||||
onRemove?: () => void
|
||||
isSaving?: boolean
|
||||
}
|
||||
|
||||
const ConfigCredential: FC<Props> = ({
|
||||
dataSourceItem,
|
||||
onCancel,
|
||||
onSaved,
|
||||
isHideRemoveBtn,
|
||||
onRemove = noop,
|
||||
isSaving,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const language = useLanguage()
|
||||
const {
|
||||
provider,
|
||||
plugin_id,
|
||||
credentialsSchema = [],
|
||||
is_authorized,
|
||||
} = dataSourceItem
|
||||
const transformedCredentialsSchema = useMemo(() => {
|
||||
return toolCredentialToFormSchemas(credentialsSchema)
|
||||
}, [credentialsSchema])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [tempCredential, setTempCredential] = useState<any>({})
|
||||
const handleUpdateCredentials = useCallback((credentialValue: ToolCredential[]) => {
|
||||
const defaultCredentials = addDefaultValue(credentialValue, transformedCredentialsSchema)
|
||||
setTempCredential(defaultCredentials)
|
||||
}, [transformedCredentialsSchema])
|
||||
useDataSourceCredentials(provider, plugin_id, handleUpdateCredentials)
|
||||
|
||||
const handleSave = async () => {
|
||||
for (const field of transformedCredentialsSchema) {
|
||||
if (field.required && !tempCredential[field.name]) {
|
||||
Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
|
||||
return
|
||||
}
|
||||
}
|
||||
setIsLoading(true)
|
||||
try {
|
||||
await onSaved(tempCredential)
|
||||
setIsLoading(false)
|
||||
}
|
||||
finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
isShow
|
||||
onHide={onCancel}
|
||||
title={t('tools.auth.setupModalTitle') as string}
|
||||
titleDescription={t('tools.auth.setupModalTitleDescription') as string}
|
||||
panelClassName='mt-[64px] mb-2 !w-[420px] border-components-panel-border'
|
||||
maxWidthClassName='!max-w-[420px]'
|
||||
height='calc(100vh - 64px)'
|
||||
contentClassName='!bg-components-panel-bg'
|
||||
headerClassName='!border-b-divider-subtle'
|
||||
body={
|
||||
|
||||
<div className='h-full px-6 py-3'>
|
||||
{!transformedCredentialsSchema.length
|
||||
? <Loading type='app' />
|
||||
: (
|
||||
<>
|
||||
<Form
|
||||
value={tempCredential}
|
||||
onChange={(v) => {
|
||||
setTempCredential(v)
|
||||
}}
|
||||
formSchemas={transformedCredentialsSchema as any}
|
||||
isEditMode={true}
|
||||
showOnVariableMap={{}}
|
||||
validating={false}
|
||||
inputClassName='!bg-components-input-bg-normal'
|
||||
fieldMoreInfo={item => item.url
|
||||
? (<a
|
||||
href={item.url}
|
||||
target='_blank' rel='noopener noreferrer'
|
||||
className='inline-flex items-center text-xs text-text-accent'
|
||||
>
|
||||
{t('tools.howToGet')}
|
||||
<LinkExternal02 className='ml-1 h-3 w-3' />
|
||||
</a>)
|
||||
: null}
|
||||
/>
|
||||
<div className={cn((is_authorized && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex ')} >
|
||||
{
|
||||
(is_authorized && !isHideRemoveBtn) && (
|
||||
<Button onClick={onRemove}>{t('common.operation.remove')}</Button>
|
||||
)
|
||||
}
|
||||
< div className='flex space-x-2'>
|
||||
<Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
|
||||
<Button loading={isLoading || isSaving} disabled={isLoading || isSaving} variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
</div >
|
||||
}
|
||||
isShowMask={true}
|
||||
clickOutsideNotOpen={false}
|
||||
/>
|
||||
)
|
||||
}
|
||||
export default memo(ConfigCredential)
|
||||
Loading…
Reference in New Issue