datasource oauth
zxhlyh
9 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