opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-03-25 04:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
zxhlyh 2025-07-15 14:45:50 +08:00
parent 964e29b27f
commit 3f273cae73
9 changed files with 110 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/form/components/base/base-field.tsx
View File

@ -87,7 +87,7 @@ const BaseField = ({
<div className={cn(labelClassName, formLabelClassName)}>
{memorizedLabel}
{
required && (
required && !isValidElement(label) && (
<span className='ml-1 text-text-destructive-secondary'>*</span>
)
}

10
web/app/components/base/form/components/base/base-form.tsx
View File

@ -5,6 +5,7 @@ import {
} from 'react'
import type {
AnyFieldApi,
AnyFormApi,
} from '@tanstack/react-form'
import { useForm } from '@tanstack/react-form'
import type {
@ -29,6 +30,7 @@ export type BaseFormProps = {
formClassName?: string
ref?: FormRef
disabled?: boolean
formFromProps?: AnyFormApi
} & Pick<BaseFieldProps, 'fieldClassName' | 'labelClassName' | 'inputContainerClassName' | 'inputClassName'>
const BaseForm = ({
@ -41,10 +43,12 @@ const BaseForm = ({
inputClassName,
ref,
disabled,
formFromProps,
}: BaseFormProps) => {
const form = useForm({
const formFromHook = useForm({
defaultValues,
})
const form: any = formFromProps || formFromHook
const { getFormValues } = useGetFormValues(form)
const { getValidators } = useGetValidators()
@ -102,10 +106,6 @@ const BaseForm = ({
return (
<form
className={cn(formClassName)}
onSubmit={(e) => {
e.preventDefault()
form?.handleSubmit()
}}
>
{formSchemas.map(renderFieldWrapper)}
</form>

2
web/app/components/base/form/form-scenarios/auth/index.tsx
View File

@ -6,6 +6,7 @@ const AuthForm = ({
formSchemas = [],
defaultValues,
ref,
formFromProps,
}: BaseFormProps) => {
return (
<BaseForm
@ -14,6 +15,7 @@ const AuthForm = ({
defaultValues={defaultValues}
formClassName='space-y-4'
labelClassName='h-6 flex items-center mb-1 system-sm-medium text-text-secondary'
formFromProps={formFromProps}
/>
)
}

2
web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
View File

@ -24,7 +24,7 @@ const AddApiKeyButton = ({
return (
<>
<Button
className='grow'
className='w-0 grow'
variant={buttonVariant}
onClick={() => setIsApiKeyModalOpen(true)}
disabled={disabled}

19
web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
View File

@ -103,6 +103,11 @@ const AddOAuthButton = ({
</div>
<div className='system-sm-medium flex h-6 items-center text-text-secondary'>
{renderI18nObject(item.label as Record<string, string>)}
{
item.required && (
<span className='ml-1 text-text-destructive-secondary'>*</span>
)
}
</div>
</div>
)
@ -157,7 +162,7 @@ const AddOAuthButton = ({
<Button
variant={buttonVariant}
className={cn(
'grow px-0 py-0 hover:bg-components-button-primary-bg',
'w-0 grow px-0 py-0 hover:bg-components-button-primary-bg',
className,
)}
disabled={disabled}
@ -171,7 +176,10 @@ const AddOAuthButton = ({
{
is_oauth_custom_client_enabled && (
<Badge
className='ml-1 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface'
className={cn(
'ml-1',
buttonVariant === 'primary' && 'border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface',
)}
>
{t('plugin.auth.custom')}
</Badge>
@ -203,6 +211,7 @@ const AddOAuthButton = ({
variant={buttonVariant}
onClick={() => setIsOAuthSettingsOpen(true)}
disabled={disabled}
className='w-0 grow'
>
<RiEqualizer2Line className='mr-0.5 h-4 w-4' />
{t('plugin.auth.setupOAuth')}
@ -217,7 +226,11 @@ const AddOAuthButton = ({
disabled={disabled || isLoading}
schemas={memorizedSchemas}
onAuth={handleOAuth}
editValues={client_params}
editValues={{
...client_params,
__oauth_client__: is_oauth_custom_client_enabled ? 'custom' : 'default',
}}
hasOriginalClientParams={Object.keys(client_params || {}).length > 0}
/>
)
}

55
web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
View File

@ -4,10 +4,16 @@ import {
useRef,
useState,
} from 'react'
import {
useForm,
useStore,
} from '@tanstack/react-form'
import { useTranslation } from 'react-i18next'
import Modal from '@/app/components/base/modal/modal'
import {
useDeletePluginOAuthCustomClientHook,
useInvalidPluginCredentialInfoHook,
useInvalidPluginOAuthClientSchemaHook,
useSetPluginOAuthCustomClientHook,
} from '../hooks/use-credential'
import type { PluginPayload } from '../types'
@ -17,6 +23,7 @@ import type {
FormSchema,
} from '@/app/components/base/form/types'
import { useToastContext } from '@/app/components/base/toast'
import Button from '@/app/components/base/button'
type OAuthClientSettingsProps = {
pluginPayload: PluginPayload
@ -25,6 +32,7 @@ type OAuthClientSettingsProps = {
disabled?: boolean
schemas: FormSchema[]
onAuth?: () => Promise<void>
hasOriginalClientParams?: boolean
}
const OAuthClientSettings = ({
pluginPayload,
@ -33,6 +41,7 @@ const OAuthClientSettings = ({
disabled,
schemas,
onAuth,
hasOriginalClientParams,
}: OAuthClientSettingsProps) => {
const { t } = useTranslation()
const { notify } = useToastContext()
@ -48,7 +57,8 @@ const OAuthClientSettings = ({
return acc
}, {} as Record<string, any>)
const { mutateAsync: setPluginOAuthCustomClient } = useSetPluginOAuthCustomClientHook(pluginPayload)
const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
const invalidPluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
const invalidPluginOAuthClientSchema = useInvalidPluginOAuthClientSchemaHook(pluginPayload)
const formRef = useRef<FormRefObject>(null)
const handleConfirm = useCallback(async () => {
if (doingActionRef.current)
@ -80,18 +90,42 @@ const OAuthClientSettings = ({
})
onClose?.()
invalidatePluginCredentialInfo()
invalidPluginCredentialInfo()
invalidPluginOAuthClientSchema()
}
finally {
handleSetDoingAction(false)
}
}, [onClose, invalidatePluginCredentialInfo, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
}, [onClose, invalidPluginCredentialInfo, invalidPluginOAuthClientSchema, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
const handleConfirmAndAuthorize = useCallback(async () => {
await handleConfirm()
if (onAuth)
await onAuth()
}, [handleConfirm, onAuth])
const { mutateAsync: deletePluginOAuthCustomClient } = useDeletePluginOAuthCustomClientHook(pluginPayload)
const handleRemove = useCallback(async () => {
if (doingActionRef.current)
return
try {
handleSetDoingAction(true)
await deletePluginOAuthCustomClient()
notify({
type: 'success',
message: t('common.api.actionSuccess'),
})
invalidPluginCredentialInfo()
invalidPluginOAuthClientSchema()
}
finally {
handleSetDoingAction(false)
}
}, [invalidPluginCredentialInfo, invalidPluginOAuthClientSchema, deletePluginOAuthCustomClient, notify, t, handleSetDoingAction])
const form = useForm({
defaultValues: editValues || defaultValues,
})
const __oauth_client__ = useStore(form.store, s => s.values.__oauth_client__)
return (
<Modal
title={t('plugin.auth.oauthClientSettings')}
@ -105,8 +139,23 @@ const OAuthClientSettings = ({
onCancel={handleConfirm}
onConfirm={handleConfirmAndAuthorize}
disabled={disabled || doingAction}
footerSlot={
__oauth_client__ === 'custom' && hasOriginalClientParams && (
<div className='grow'>
<Button
variant='secondary'
className='text-components-button-destructive-secondary-text'
disabled={disabled || doingAction || !editValues}
onClick={handleRemove}
>
{t('common.operation.remove')}
</Button>
</div>
)
}
>
<AuthForm
formFromProps={form}
ref={formRef}
formSchemas={schemas}
defaultValues={editValues || defaultValues}

14
web/app/components/plugins/plugin-auth/hooks/use-credential.ts
View File

@ -1,11 +1,13 @@
import {
useAddPluginCredential,
useDeletePluginCredential,
useDeletePluginOAuthCustomClient,
useGetPluginCredentialInfo,
useGetPluginCredentialSchema,
useGetPluginOAuthClientSchema,
useGetPluginOAuthUrl,
useInvalidPluginCredentialInfo,
useInvalidPluginOAuthClientSchema,
useSetPluginDefaultCredential,
useSetPluginOAuthCustomClient,
useUpdatePluginCredential,
@ -67,8 +69,20 @@ export const useGetPluginOAuthClientSchemaHook = (pluginPayload: PluginPayload)
return useGetPluginOAuthClientSchema(apiMap.getOauthClientSchema)
}
export const useInvalidPluginOAuthClientSchemaHook = (pluginPayload: PluginPayload) => {
const apiMap = useGetApi(pluginPayload)
return useInvalidPluginOAuthClientSchema(apiMap.getOauthClientSchema)
}
export const useSetPluginOAuthCustomClientHook = (pluginPayload: PluginPayload) => {
const apiMap = useGetApi(pluginPayload)
return useSetPluginOAuthCustomClient(apiMap.setCustomOauthClient)
}
export const useDeletePluginOAuthCustomClientHook = (pluginPayload: PluginPayload) => {
const apiMap = useGetApi(pluginPayload)
return useDeletePluginOAuthCustomClient(apiMap.deleteCustomOAuthClient)
}

2
web/app/components/plugins/plugin-auth/hooks/use-get-api.ts
View File

@ -20,6 +20,7 @@ export const useGetApi = ({ category = AuthCategory.tool, provider }: PluginPayl
getOauthClientSchema: `/workspaces/current/tool-provider/builtin/${provider}/oauth/client-schema`,
setCustomOauthClient: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
getCustomOAuthClientValues: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
deleteCustomOAuthClient: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
}
}
@ -35,5 +36,6 @@ export const useGetApi = ({ category = AuthCategory.tool, provider }: PluginPayl
getOauthClientSchema: '',
setCustomOauthClient: '',
getCustomOAuthClientValues: '',
deleteCustomOAuthClient: '',
}
}

18
web/service/use-plugins-auth.ts
View File

@ -2,7 +2,7 @@ import {
useMutation,
useQuery,
} from '@tanstack/react-query'
import { get, post } from './base'
import { del, get, post } from './base'
import { useInvalid } from './use-base'
import type {
Credential,
@ -131,6 +131,12 @@ export const useGetPluginOAuthClientSchema = (
})
}
export const useInvalidPluginOAuthClientSchema = (
url: string,
) => {
return useInvalid([NAME_SPACE, 'oauth-client-schema', url])
}
export const useSetPluginOAuthCustomClient = (
url: string,
) => {
@ -143,3 +149,13 @@ export const useSetPluginOAuthCustomClient = (
},
})
}
export const useDeletePluginOAuthCustomClient = (
url: string,
) => {
return useMutation({
mutationFn: () => {
return del<{ result: string }>(url)
},
})
}