mirror of
https://github.com/langgenius/dify.git
synced 2026-05-02 16:38:04 +08:00
refactor: restructure subscription creation modal and enhance OAuth client handling
- Introduced new components for modal steps and improved state management for the common modal. - Refactored the OAuth client settings modal to utilize a custom hook for better state handling. - Updated the CreateSubscriptionButton to optimize method handling and improve performance. - Enhanced test coverage for the OAuth client state management. - Removed unused imports and cleaned up code for better readability.
This commit is contained in:
CodingOnStar
@ -1,32 +1,19 @@
|
||||
'use client'
|
||||
import type { FormRefObject } from '@/app/components/base/form/types'
|
||||
import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
|
||||
import type { BuildTriggerSubscriptionPayload } from '@/service/use-triggers'
|
||||
import { RiLoader2Line } from '@remixicon/react'
|
||||
import { debounce } from 'es-toolkit/compat'
|
||||
import * as React from 'react'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
// import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
|
||||
import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
|
||||
import { BaseForm } from '@/app/components/base/form/components/base'
|
||||
import { FormTypeEnum } from '@/app/components/base/form/types'
|
||||
import Modal from '@/app/components/base/modal/modal'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { SupportedCreationMethods } from '@/app/components/plugins/types'
|
||||
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
|
||||
import {
|
||||
useBuildTriggerSubscription,
|
||||
useCreateTriggerSubscriptionBuilder,
|
||||
useTriggerSubscriptionBuilderLogs,
|
||||
useUpdateTriggerSubscriptionBuilder,
|
||||
useVerifyAndUpdateTriggerSubscriptionBuilder,
|
||||
} from '@/service/use-triggers'
|
||||
import { parsePluginErrorMessage } from '@/utils/error-parser'
|
||||
import { isPrivateOrLocalAddress } from '@/utils/urlValidation'
|
||||
import { usePluginStore } from '../../store'
|
||||
import LogViewer from '../log-viewer'
|
||||
import { useSubscriptionList } from '../use-subscription-list'
|
||||
ConfigurationStepContent,
|
||||
MultiSteps,
|
||||
VerifyStepContent,
|
||||
} from './components/modal-steps'
|
||||
import {
|
||||
ApiKeyStep,
|
||||
MODAL_TITLE_KEY_MAP,
|
||||
useCommonModalState,
|
||||
} from './hooks/use-common-modal-state'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void
|
||||
@ -34,316 +21,33 @@ type Props = {
|
||||
builder?: TriggerSubscriptionBuilder
|
||||
}
|
||||
|
||||
const CREDENTIAL_TYPE_MAP: Record<SupportedCreationMethods, TriggerCredentialTypeEnum> = {
|
||||
[SupportedCreationMethods.APIKEY]: TriggerCredentialTypeEnum.ApiKey,
|
||||
[SupportedCreationMethods.OAUTH]: TriggerCredentialTypeEnum.Oauth2,
|
||||
[SupportedCreationMethods.MANUAL]: TriggerCredentialTypeEnum.Unauthorized,
|
||||
}
|
||||
|
||||
const MODAL_TITLE_KEY_MAP: Record<
|
||||
SupportedCreationMethods,
|
||||
'modal.apiKey.title' | 'modal.oauth.title' | 'modal.manual.title'
|
||||
> = {
|
||||
[SupportedCreationMethods.APIKEY]: 'modal.apiKey.title',
|
||||
[SupportedCreationMethods.OAUTH]: 'modal.oauth.title',
|
||||
[SupportedCreationMethods.MANUAL]: 'modal.manual.title',
|
||||
}
|
||||
|
||||
enum ApiKeyStep {
|
||||
Verify = 'verify',
|
||||
Configuration = 'configuration',
|
||||
}
|
||||
|
||||
const defaultFormValues = { values: {}, isCheckValidated: false }
|
||||
|
||||
const normalizeFormType = (type: FormTypeEnum | string): FormTypeEnum => {
|
||||
if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
|
||||
return type as FormTypeEnum
|
||||
|
||||
switch (type) {
|
||||
case 'string':
|
||||
case 'text':
|
||||
return FormTypeEnum.textInput
|
||||
case 'password':
|
||||
case 'secret':
|
||||
return FormTypeEnum.secretInput
|
||||
case 'number':
|
||||
case 'integer':
|
||||
return FormTypeEnum.textNumber
|
||||
case 'boolean':
|
||||
return FormTypeEnum.boolean
|
||||
default:
|
||||
return FormTypeEnum.textInput
|
||||
}
|
||||
}
|
||||
|
||||
const StatusStep = ({ isActive, text }: { isActive: boolean, text: string }) => {
|
||||
return (
|
||||
<div className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
|
||||
? 'text-state-accent-solid'
|
||||
: 'text-text-tertiary'}`}
|
||||
>
|
||||
{/* Active indicator dot */}
|
||||
{isActive && (
|
||||
<div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
|
||||
)}
|
||||
{text}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MultiSteps = ({ currentStep }: { currentStep: ApiKeyStep }) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="mb-6 flex w-1/3 items-center gap-2">
|
||||
<StatusStep isActive={currentStep === ApiKeyStep.Verify} text={t('modal.steps.verify', { ns: 'pluginTrigger' })} />
|
||||
<div className="h-px w-3 shrink-0 bg-divider-deep"></div>
|
||||
<StatusStep isActive={currentStep === ApiKeyStep.Configuration} text={t('modal.steps.configuration', { ns: 'pluginTrigger' })} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
|
||||
const { t } = useTranslation()
|
||||
const detail = usePluginStore(state => state.detail)
|
||||
const { refetch } = useSubscriptionList()
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<ApiKeyStep>(createType === SupportedCreationMethods.APIKEY ? ApiKeyStep.Verify : ApiKeyStep.Configuration)
|
||||
const {
|
||||
currentStep,
|
||||
subscriptionBuilder,
|
||||
isVerifyingCredentials,
|
||||
isBuilding,
|
||||
formRefs,
|
||||
detail,
|
||||
manualPropertiesSchema,
|
||||
autoCommonParametersSchema,
|
||||
apiKeyCredentialsSchema,
|
||||
logData,
|
||||
confirmButtonText,
|
||||
handleConfirm,
|
||||
handleManualPropertiesChange,
|
||||
handleApiKeyCredentialsChange,
|
||||
} = useCommonModalState({
|
||||
createType,
|
||||
builder,
|
||||
onClose,
|
||||
})
|
||||
|
||||
const [subscriptionBuilder, setSubscriptionBuilder] = useState<TriggerSubscriptionBuilder | undefined>(builder)
|
||||
const isInitializedRef = useRef(false)
|
||||
|
||||
const { mutate: verifyCredentials, isPending: isVerifyingCredentials } = useVerifyAndUpdateTriggerSubscriptionBuilder()
|
||||
const { mutateAsync: createBuilder /* isPending: isCreatingBuilder */ } = useCreateTriggerSubscriptionBuilder()
|
||||
const { mutate: buildSubscription, isPending: isBuilding } = useBuildTriggerSubscription()
|
||||
const { mutate: updateBuilder } = useUpdateTriggerSubscriptionBuilder()
|
||||
|
||||
const manualPropertiesSchema = detail?.declaration?.trigger?.subscription_schema || [] // manual
|
||||
const manualPropertiesFormRef = React.useRef<FormRefObject>(null)
|
||||
|
||||
const subscriptionFormRef = React.useRef<FormRefObject>(null)
|
||||
|
||||
const autoCommonParametersSchema = detail?.declaration.trigger?.subscription_constructor?.parameters || [] // apikey and oauth
|
||||
const autoCommonParametersFormRef = React.useRef<FormRefObject>(null)
|
||||
|
||||
const apiKeyCredentialsSchema = useMemo(() => {
|
||||
const rawSchema = detail?.declaration?.trigger?.subscription_constructor?.credentials_schema || []
|
||||
return rawSchema.map(schema => ({
|
||||
...schema,
|
||||
tooltip: schema.help,
|
||||
}))
|
||||
}, [detail?.declaration?.trigger?.subscription_constructor?.credentials_schema])
|
||||
const apiKeyCredentialsFormRef = React.useRef<FormRefObject>(null)
|
||||
|
||||
const { data: logData } = useTriggerSubscriptionBuilderLogs(
|
||||
detail?.provider || '',
|
||||
subscriptionBuilder?.id || '',
|
||||
{
|
||||
enabled: createType === SupportedCreationMethods.MANUAL,
|
||||
refetchInterval: 3000,
|
||||
},
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const initializeBuilder = async () => {
|
||||
isInitializedRef.current = true
|
||||
try {
|
||||
const response = await createBuilder({
|
||||
provider: detail?.provider || '',
|
||||
credential_type: CREDENTIAL_TYPE_MAP[createType],
|
||||
})
|
||||
setSubscriptionBuilder(response.subscription_builder)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('createBuilder error:', error)
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('modal.errors.createFailed', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
}
|
||||
}
|
||||
if (!isInitializedRef.current && !subscriptionBuilder && detail?.provider)
|
||||
initializeBuilder()
|
||||
}, [subscriptionBuilder, detail?.provider, createType, createBuilder, t])
|
||||
|
||||
useEffect(() => {
|
||||
if (subscriptionBuilder?.endpoint && subscriptionFormRef.current && currentStep === ApiKeyStep.Configuration) {
|
||||
const form = subscriptionFormRef.current.getForm()
|
||||
if (form)
|
||||
form.setFieldValue('callback_url', subscriptionBuilder.endpoint)
|
||||
if (isPrivateOrLocalAddress(subscriptionBuilder.endpoint)) {
|
||||
console.warn('callback_url is private or local address', subscriptionBuilder.endpoint)
|
||||
subscriptionFormRef.current?.setFields([{
|
||||
name: 'callback_url',
|
||||
warnings: [t('modal.form.callbackUrl.privateAddressWarning', { ns: 'pluginTrigger' })],
|
||||
}])
|
||||
}
|
||||
else {
|
||||
subscriptionFormRef.current?.setFields([{
|
||||
name: 'callback_url',
|
||||
warnings: [],
|
||||
}])
|
||||
}
|
||||
}
|
||||
}, [subscriptionBuilder?.endpoint, currentStep, t])
|
||||
|
||||
const debouncedUpdate = useMemo(
|
||||
() => debounce((provider: string, builderId: string, properties: Record<string, unknown>) => {
|
||||
updateBuilder(
|
||||
{
|
||||
provider,
|
||||
subscriptionBuilderId: builderId,
|
||||
properties,
|
||||
},
|
||||
{
|
||||
onError: async (error: unknown) => {
|
||||
const errorMessage = await parsePluginErrorMessage(error) || t('modal.errors.updateFailed', { ns: 'pluginTrigger' })
|
||||
console.error('Failed to update subscription builder:', error)
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: errorMessage,
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}, 500),
|
||||
[updateBuilder, t],
|
||||
)
|
||||
|
||||
const handleManualPropertiesChange = useCallback(() => {
|
||||
if (!subscriptionBuilder || !detail?.provider)
|
||||
return
|
||||
|
||||
const formValues = manualPropertiesFormRef.current?.getFormValues({ needCheckValidatedValues: false }) || { values: {}, isCheckValidated: true }
|
||||
|
||||
debouncedUpdate(detail.provider, subscriptionBuilder.id, formValues.values)
|
||||
}, [subscriptionBuilder, detail?.provider, debouncedUpdate])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
debouncedUpdate.cancel()
|
||||
}
|
||||
}, [debouncedUpdate])
|
||||
|
||||
const handleVerify = () => {
|
||||
const apiKeyCredentialsFormValues = apiKeyCredentialsFormRef.current?.getFormValues({}) || defaultFormValues
|
||||
const credentials = apiKeyCredentialsFormValues.values
|
||||
|
||||
if (!Object.keys(credentials).length) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: 'Please fill in all required credentials',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
apiKeyCredentialsFormRef.current?.setFields([{
|
||||
name: Object.keys(credentials)[0],
|
||||
errors: [],
|
||||
}])
|
||||
|
||||
verifyCredentials(
|
||||
{
|
||||
provider: detail?.provider || '',
|
||||
subscriptionBuilderId: subscriptionBuilder?.id || '',
|
||||
credentials,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('modal.apiKey.verify.success', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
setCurrentStep(ApiKeyStep.Configuration)
|
||||
},
|
||||
onError: async (error: unknown) => {
|
||||
const errorMessage = await parsePluginErrorMessage(error) || t('modal.apiKey.verify.error', { ns: 'pluginTrigger' })
|
||||
apiKeyCredentialsFormRef.current?.setFields([{
|
||||
name: Object.keys(credentials)[0],
|
||||
errors: [errorMessage],
|
||||
}])
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
if (!subscriptionBuilder) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: 'Subscription builder not found',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const subscriptionFormValues = subscriptionFormRef.current?.getFormValues({})
|
||||
if (!subscriptionFormValues?.isCheckValidated)
|
||||
return
|
||||
|
||||
const subscriptionNameValue = subscriptionFormValues?.values?.subscription_name as string
|
||||
|
||||
const params: BuildTriggerSubscriptionPayload = {
|
||||
provider: detail?.provider || '',
|
||||
subscriptionBuilderId: subscriptionBuilder.id,
|
||||
name: subscriptionNameValue,
|
||||
}
|
||||
|
||||
if (createType !== SupportedCreationMethods.MANUAL) {
|
||||
if (autoCommonParametersSchema.length > 0) {
|
||||
const autoCommonParametersFormValues = autoCommonParametersFormRef.current?.getFormValues({}) || defaultFormValues
|
||||
if (!autoCommonParametersFormValues?.isCheckValidated)
|
||||
return
|
||||
params.parameters = autoCommonParametersFormValues.values
|
||||
}
|
||||
}
|
||||
else if (manualPropertiesSchema.length > 0) {
|
||||
const manualFormValues = manualPropertiesFormRef.current?.getFormValues({}) || defaultFormValues
|
||||
if (!manualFormValues?.isCheckValidated)
|
||||
return
|
||||
}
|
||||
|
||||
buildSubscription(
|
||||
params,
|
||||
{
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('subscription.createSuccess', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
onClose()
|
||||
refetch?.()
|
||||
},
|
||||
onError: async (error: unknown) => {
|
||||
const errorMessage = await parsePluginErrorMessage(error) || t('subscription.createFailed', { ns: 'pluginTrigger' })
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: errorMessage,
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (currentStep === ApiKeyStep.Verify)
|
||||
handleVerify()
|
||||
else
|
||||
handleCreate()
|
||||
}
|
||||
|
||||
const handleApiKeyCredentialsChange = () => {
|
||||
apiKeyCredentialsFormRef.current?.setFields([{
|
||||
name: apiKeyCredentialsSchema[0].name,
|
||||
errors: [],
|
||||
}])
|
||||
}
|
||||
|
||||
const confirmButtonText = useMemo(() => {
|
||||
if (currentStep === ApiKeyStep.Verify)
|
||||
return isVerifyingCredentials ? t('modal.common.verifying', { ns: 'pluginTrigger' }) : t('modal.common.verify', { ns: 'pluginTrigger' })
|
||||
|
||||
return isBuilding ? t('modal.common.creating', { ns: 'pluginTrigger' }) : t('modal.common.create', { ns: 'pluginTrigger' })
|
||||
}, [currentStep, isVerifyingCredentials, isBuilding, t])
|
||||
const isApiKeyType = createType === SupportedCreationMethods.APIKEY
|
||||
const isVerifyStep = currentStep === ApiKeyStep.Verify
|
||||
const isConfigurationStep = currentStep === ApiKeyStep.Configuration
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@ -353,121 +57,36 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
|
||||
onCancel={onClose}
|
||||
onConfirm={handleConfirm}
|
||||
disabled={isVerifyingCredentials || isBuilding}
|
||||
bottomSlot={currentStep === ApiKeyStep.Verify ? <EncryptedBottom /> : null}
|
||||
bottomSlot={isVerifyStep ? <EncryptedBottom /> : null}
|
||||
size={createType === SupportedCreationMethods.MANUAL ? 'md' : 'sm'}
|
||||
containerClassName="min-h-[360px]"
|
||||
clickOutsideNotClose
|
||||
>
|
||||
{createType === SupportedCreationMethods.APIKEY && <MultiSteps currentStep={currentStep} />}
|
||||
{currentStep === ApiKeyStep.Verify && (
|
||||
<>
|
||||
{apiKeyCredentialsSchema.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<BaseForm
|
||||
formSchemas={apiKeyCredentialsSchema}
|
||||
ref={apiKeyCredentialsFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
preventDefaultSubmit={true}
|
||||
formClassName="space-y-4"
|
||||
onChange={handleApiKeyCredentialsChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{currentStep === ApiKeyStep.Configuration && (
|
||||
<div className="max-h-[70vh]">
|
||||
<BaseForm
|
||||
formSchemas={[
|
||||
{
|
||||
name: 'subscription_name',
|
||||
label: t('modal.form.subscriptionName.label', { ns: 'pluginTrigger' }),
|
||||
placeholder: t('modal.form.subscriptionName.placeholder', { ns: 'pluginTrigger' }),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'callback_url',
|
||||
label: t('modal.form.callbackUrl.label', { ns: 'pluginTrigger' }),
|
||||
placeholder: t('modal.form.callbackUrl.placeholder', { ns: 'pluginTrigger' }),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: false,
|
||||
default: subscriptionBuilder?.endpoint || '',
|
||||
disabled: true,
|
||||
tooltip: t('modal.form.callbackUrl.tooltip', { ns: 'pluginTrigger' }),
|
||||
showCopy: true,
|
||||
},
|
||||
]}
|
||||
ref={subscriptionFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4 mb-4"
|
||||
/>
|
||||
{/* <div className='system-xs-regular mb-6 mt-[-1rem] text-text-tertiary'>
|
||||
{t('pluginTrigger.modal.form.callbackUrl.description')}
|
||||
</div> */}
|
||||
{createType !== SupportedCreationMethods.MANUAL && autoCommonParametersSchema.length > 0 && (
|
||||
<BaseForm
|
||||
formSchemas={autoCommonParametersSchema.map((schema) => {
|
||||
const normalizedType = normalizeFormType(schema.type as FormTypeEnum | string)
|
||||
return {
|
||||
...schema,
|
||||
tooltip: schema.description,
|
||||
type: normalizedType,
|
||||
dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect
|
||||
? {
|
||||
plugin_id: detail?.plugin_id || '',
|
||||
provider: detail?.provider || '',
|
||||
action: 'provider',
|
||||
parameter: schema.name,
|
||||
credential_id: subscriptionBuilder?.id || '',
|
||||
}
|
||||
: undefined,
|
||||
fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
|
||||
labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
|
||||
}
|
||||
})}
|
||||
ref={autoCommonParametersFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4"
|
||||
/>
|
||||
)}
|
||||
{createType === SupportedCreationMethods.MANUAL && (
|
||||
<>
|
||||
{manualPropertiesSchema.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<BaseForm
|
||||
formSchemas={manualPropertiesSchema.map(schema => ({
|
||||
...schema,
|
||||
tooltip: schema.description,
|
||||
}))}
|
||||
ref={manualPropertiesFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4"
|
||||
onChange={handleManualPropertiesChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-6">
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<div className="system-xs-medium-uppercase text-text-tertiary">
|
||||
{t('modal.manual.logs.title', { ns: 'pluginTrigger' })}
|
||||
</div>
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-divider-regular to-transparent" />
|
||||
</div>
|
||||
{isApiKeyType && <MultiSteps currentStep={currentStep} />}
|
||||
|
||||
<div className="mb-1 flex items-center justify-center gap-1 rounded-lg bg-background-section p-3">
|
||||
<div className="h-3.5 w-3.5">
|
||||
<RiLoader2Line className="h-full w-full animate-spin" />
|
||||
</div>
|
||||
<div className="system-xs-regular text-text-tertiary">
|
||||
{t('modal.manual.logs.loading', { ns: 'pluginTrigger', pluginName: detail?.name || '' })}
|
||||
</div>
|
||||
</div>
|
||||
<LogViewer logs={logData?.logs || []} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{isVerifyStep && (
|
||||
<VerifyStepContent
|
||||
apiKeyCredentialsSchema={apiKeyCredentialsSchema}
|
||||
apiKeyCredentialsFormRef={formRefs.apiKeyCredentialsFormRef}
|
||||
onChange={handleApiKeyCredentialsChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isConfigurationStep && (
|
||||
<ConfigurationStepContent
|
||||
createType={createType}
|
||||
subscriptionBuilder={subscriptionBuilder}
|
||||
subscriptionFormRef={formRefs.subscriptionFormRef}
|
||||
autoCommonParametersSchema={autoCommonParametersSchema}
|
||||
autoCommonParametersFormRef={formRefs.autoCommonParametersFormRef}
|
||||
manualPropertiesSchema={manualPropertiesSchema}
|
||||
manualPropertiesFormRef={formRefs.manualPropertiesFormRef}
|
||||
onManualPropertiesChange={handleManualPropertiesChange}
|
||||
logs={logData?.logs || []}
|
||||
pluginId={detail?.plugin_id || ''}
|
||||
pluginName={detail?.name || ''}
|
||||
provider={detail?.provider || ''}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -0,0 +1,337 @@
|
||||
'use client'
|
||||
import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
|
||||
import type { TriggerLogEntity, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
|
||||
import { RiLoader2Line } from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { BaseForm } from '@/app/components/base/form/components/base'
|
||||
import { FormTypeEnum } from '@/app/components/base/form/types'
|
||||
import { SupportedCreationMethods } from '@/app/components/plugins/types'
|
||||
import LogViewer from '../../log-viewer'
|
||||
import { ApiKeyStep } from '../hooks/use-common-modal-state'
|
||||
|
||||
// Schema item type for form schemas from plugin declarations
|
||||
export type SchemaItem = Partial<FormSchema> & Record<string, unknown> & {
|
||||
name: string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Status Step Component
|
||||
// ============================================================================
|
||||
|
||||
type StatusStepProps = {
|
||||
isActive: boolean
|
||||
text: string
|
||||
}
|
||||
|
||||
export const StatusStep = ({ isActive, text }: StatusStepProps) => {
|
||||
return (
|
||||
<div className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
|
||||
? 'text-state-accent-solid'
|
||||
: 'text-text-tertiary'}`}
|
||||
>
|
||||
{isActive && (
|
||||
<div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
|
||||
)}
|
||||
{text}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Multi Steps Component
|
||||
// ============================================================================
|
||||
|
||||
type MultiStepsProps = {
|
||||
currentStep: ApiKeyStep
|
||||
}
|
||||
|
||||
export const MultiSteps = ({ currentStep }: MultiStepsProps) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="mb-6 flex w-1/3 items-center gap-2">
|
||||
<StatusStep isActive={currentStep === ApiKeyStep.Verify} text={t('modal.steps.verify', { ns: 'pluginTrigger' })} />
|
||||
<div className="h-px w-3 shrink-0 bg-divider-deep"></div>
|
||||
<StatusStep isActive={currentStep === ApiKeyStep.Configuration} text={t('modal.steps.configuration', { ns: 'pluginTrigger' })} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Verify Step Content
|
||||
// ============================================================================
|
||||
|
||||
type VerifyStepContentProps = {
|
||||
apiKeyCredentialsSchema: SchemaItem[]
|
||||
apiKeyCredentialsFormRef: React.RefObject<FormRefObject | null>
|
||||
onChange: () => void
|
||||
}
|
||||
|
||||
export const VerifyStepContent = ({
|
||||
apiKeyCredentialsSchema,
|
||||
apiKeyCredentialsFormRef,
|
||||
onChange,
|
||||
}: VerifyStepContentProps) => {
|
||||
if (!apiKeyCredentialsSchema.length)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<BaseForm
|
||||
formSchemas={apiKeyCredentialsSchema as FormSchema[]}
|
||||
ref={apiKeyCredentialsFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
preventDefaultSubmit={true}
|
||||
formClassName="space-y-4"
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Subscription Form Schema
|
||||
// ============================================================================
|
||||
|
||||
type SubscriptionFormProps = {
|
||||
subscriptionFormRef: React.RefObject<FormRefObject | null>
|
||||
endpoint?: string
|
||||
}
|
||||
|
||||
export const SubscriptionForm = ({
|
||||
subscriptionFormRef,
|
||||
endpoint,
|
||||
}: SubscriptionFormProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const formSchemas = React.useMemo(() => [
|
||||
{
|
||||
name: 'subscription_name',
|
||||
label: t('modal.form.subscriptionName.label', { ns: 'pluginTrigger' }),
|
||||
placeholder: t('modal.form.subscriptionName.placeholder', { ns: 'pluginTrigger' }),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'callback_url',
|
||||
label: t('modal.form.callbackUrl.label', { ns: 'pluginTrigger' }),
|
||||
placeholder: t('modal.form.callbackUrl.placeholder', { ns: 'pluginTrigger' }),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: false,
|
||||
default: endpoint || '',
|
||||
disabled: true,
|
||||
tooltip: t('modal.form.callbackUrl.tooltip', { ns: 'pluginTrigger' }),
|
||||
showCopy: true,
|
||||
},
|
||||
], [endpoint, t])
|
||||
|
||||
return (
|
||||
<BaseForm
|
||||
formSchemas={formSchemas}
|
||||
ref={subscriptionFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4 mb-4"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Form Type Normalizer
|
||||
// ============================================================================
|
||||
|
||||
const normalizeFormType = (type: FormTypeEnum | string): FormTypeEnum => {
|
||||
if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
|
||||
return type as FormTypeEnum
|
||||
|
||||
const TYPE_MAP: Record<string, FormTypeEnum> = {
|
||||
string: FormTypeEnum.textInput,
|
||||
text: FormTypeEnum.textInput,
|
||||
password: FormTypeEnum.secretInput,
|
||||
secret: FormTypeEnum.secretInput,
|
||||
number: FormTypeEnum.textNumber,
|
||||
integer: FormTypeEnum.textNumber,
|
||||
boolean: FormTypeEnum.boolean,
|
||||
}
|
||||
|
||||
return TYPE_MAP[type] || FormTypeEnum.textInput
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Auto Parameters Form
|
||||
// ============================================================================
|
||||
|
||||
type AutoParametersFormProps = {
|
||||
schemas: SchemaItem[]
|
||||
formRef: React.RefObject<FormRefObject | null>
|
||||
pluginId: string
|
||||
provider: string
|
||||
credentialId: string
|
||||
}
|
||||
|
||||
export const AutoParametersForm = ({
|
||||
schemas,
|
||||
formRef,
|
||||
pluginId,
|
||||
provider,
|
||||
credentialId,
|
||||
}: AutoParametersFormProps) => {
|
||||
const formSchemas = React.useMemo(() =>
|
||||
schemas.map((schema) => {
|
||||
const normalizedType = normalizeFormType((schema.type || FormTypeEnum.textInput) as FormTypeEnum | string)
|
||||
return {
|
||||
...schema,
|
||||
tooltip: schema.description,
|
||||
type: normalizedType,
|
||||
dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect
|
||||
? {
|
||||
plugin_id: pluginId,
|
||||
provider,
|
||||
action: 'provider',
|
||||
parameter: schema.name,
|
||||
credential_id: credentialId,
|
||||
}
|
||||
: undefined,
|
||||
fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
|
||||
labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
|
||||
}
|
||||
}) as FormSchema[], [schemas, pluginId, provider, credentialId])
|
||||
|
||||
if (!schemas.length)
|
||||
return null
|
||||
|
||||
return (
|
||||
<BaseForm
|
||||
formSchemas={formSchemas}
|
||||
ref={formRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Manual Properties Section
|
||||
// ============================================================================
|
||||
|
||||
type ManualPropertiesSectionProps = {
|
||||
schemas: SchemaItem[]
|
||||
formRef: React.RefObject<FormRefObject | null>
|
||||
onChange: () => void
|
||||
logs: TriggerLogEntity[]
|
||||
pluginName: string
|
||||
}
|
||||
|
||||
export const ManualPropertiesSection = ({
|
||||
schemas,
|
||||
formRef,
|
||||
onChange,
|
||||
logs,
|
||||
pluginName,
|
||||
}: ManualPropertiesSectionProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const formSchemas = React.useMemo(() =>
|
||||
schemas.map(schema => ({
|
||||
...schema,
|
||||
tooltip: schema.description,
|
||||
})) as FormSchema[], [schemas])
|
||||
|
||||
return (
|
||||
<>
|
||||
{schemas.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<BaseForm
|
||||
formSchemas={formSchemas}
|
||||
ref={formRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4"
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-6">
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<div className="system-xs-medium-uppercase text-text-tertiary">
|
||||
{t('modal.manual.logs.title', { ns: 'pluginTrigger' })}
|
||||
</div>
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-divider-regular to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="mb-1 flex items-center justify-center gap-1 rounded-lg bg-background-section p-3">
|
||||
<div className="h-3.5 w-3.5">
|
||||
<RiLoader2Line className="h-full w-full animate-spin" />
|
||||
</div>
|
||||
<div className="system-xs-regular text-text-tertiary">
|
||||
{t('modal.manual.logs.loading', { ns: 'pluginTrigger', pluginName })}
|
||||
</div>
|
||||
</div>
|
||||
<LogViewer logs={logs} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Configuration Step Content
|
||||
// ============================================================================
|
||||
|
||||
type ConfigurationStepContentProps = {
|
||||
createType: SupportedCreationMethods
|
||||
subscriptionBuilder?: TriggerSubscriptionBuilder
|
||||
subscriptionFormRef: React.RefObject<FormRefObject | null>
|
||||
autoCommonParametersSchema: SchemaItem[]
|
||||
autoCommonParametersFormRef: React.RefObject<FormRefObject | null>
|
||||
manualPropertiesSchema: SchemaItem[]
|
||||
manualPropertiesFormRef: React.RefObject<FormRefObject | null>
|
||||
onManualPropertiesChange: () => void
|
||||
logs: TriggerLogEntity[]
|
||||
pluginId: string
|
||||
pluginName: string
|
||||
provider: string
|
||||
}
|
||||
|
||||
export const ConfigurationStepContent = ({
|
||||
createType,
|
||||
subscriptionBuilder,
|
||||
subscriptionFormRef,
|
||||
autoCommonParametersSchema,
|
||||
autoCommonParametersFormRef,
|
||||
manualPropertiesSchema,
|
||||
manualPropertiesFormRef,
|
||||
onManualPropertiesChange,
|
||||
logs,
|
||||
pluginId,
|
||||
pluginName,
|
||||
provider,
|
||||
}: ConfigurationStepContentProps) => {
|
||||
const isManualType = createType === SupportedCreationMethods.MANUAL
|
||||
|
||||
return (
|
||||
<div className="max-h-[70vh]">
|
||||
<SubscriptionForm
|
||||
subscriptionFormRef={subscriptionFormRef}
|
||||
endpoint={subscriptionBuilder?.endpoint}
|
||||
/>
|
||||
|
||||
{!isManualType && autoCommonParametersSchema.length > 0 && (
|
||||
<AutoParametersForm
|
||||
schemas={autoCommonParametersSchema}
|
||||
formRef={autoCommonParametersFormRef}
|
||||
pluginId={pluginId}
|
||||
provider={provider}
|
||||
credentialId={subscriptionBuilder?.id || ''}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isManualType && (
|
||||
<ManualPropertiesSection
|
||||
schemas={manualPropertiesSchema}
|
||||
formRef={manualPropertiesFormRef}
|
||||
onChange={onManualPropertiesChange}
|
||||
logs={logs}
|
||||
pluginName={pluginName}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,392 @@
|
||||
'use client'
|
||||
import type { SimpleDetail } from '../../../store'
|
||||
import type { SchemaItem } from '../components/modal-steps'
|
||||
import type { FormRefObject } from '@/app/components/base/form/types'
|
||||
import type { TriggerLogEntity, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
|
||||
import type { BuildTriggerSubscriptionPayload } from '@/service/use-triggers'
|
||||
import { debounce } from 'es-toolkit/compat'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { SupportedCreationMethods } from '@/app/components/plugins/types'
|
||||
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
|
||||
import {
|
||||
useBuildTriggerSubscription,
|
||||
useCreateTriggerSubscriptionBuilder,
|
||||
useTriggerSubscriptionBuilderLogs,
|
||||
useUpdateTriggerSubscriptionBuilder,
|
||||
useVerifyAndUpdateTriggerSubscriptionBuilder,
|
||||
} from '@/service/use-triggers'
|
||||
import { parsePluginErrorMessage } from '@/utils/error-parser'
|
||||
import { isPrivateOrLocalAddress } from '@/utils/urlValidation'
|
||||
import { usePluginStore } from '../../../store'
|
||||
import { useSubscriptionList } from '../../use-subscription-list'
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export enum ApiKeyStep {
|
||||
Verify = 'verify',
|
||||
Configuration = 'configuration',
|
||||
}
|
||||
|
||||
export const CREDENTIAL_TYPE_MAP: Record<SupportedCreationMethods, TriggerCredentialTypeEnum> = {
|
||||
[SupportedCreationMethods.APIKEY]: TriggerCredentialTypeEnum.ApiKey,
|
||||
[SupportedCreationMethods.OAUTH]: TriggerCredentialTypeEnum.Oauth2,
|
||||
[SupportedCreationMethods.MANUAL]: TriggerCredentialTypeEnum.Unauthorized,
|
||||
}
|
||||
|
||||
export const MODAL_TITLE_KEY_MAP: Record<
|
||||
SupportedCreationMethods,
|
||||
'modal.apiKey.title' | 'modal.oauth.title' | 'modal.manual.title'
|
||||
> = {
|
||||
[SupportedCreationMethods.APIKEY]: 'modal.apiKey.title',
|
||||
[SupportedCreationMethods.OAUTH]: 'modal.oauth.title',
|
||||
[SupportedCreationMethods.MANUAL]: 'modal.manual.title',
|
||||
}
|
||||
|
||||
type UseCommonModalStateParams = {
|
||||
createType: SupportedCreationMethods
|
||||
builder?: TriggerSubscriptionBuilder
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
type FormRefs = {
|
||||
manualPropertiesFormRef: React.RefObject<FormRefObject | null>
|
||||
subscriptionFormRef: React.RefObject<FormRefObject | null>
|
||||
autoCommonParametersFormRef: React.RefObject<FormRefObject | null>
|
||||
apiKeyCredentialsFormRef: React.RefObject<FormRefObject | null>
|
||||
}
|
||||
|
||||
type UseCommonModalStateReturn = {
|
||||
// State
|
||||
currentStep: ApiKeyStep
|
||||
subscriptionBuilder: TriggerSubscriptionBuilder | undefined
|
||||
isVerifyingCredentials: boolean
|
||||
isBuilding: boolean
|
||||
|
||||
// Form refs
|
||||
formRefs: FormRefs
|
||||
|
||||
// Computed values
|
||||
detail: SimpleDetail | undefined
|
||||
manualPropertiesSchema: SchemaItem[]
|
||||
autoCommonParametersSchema: SchemaItem[]
|
||||
apiKeyCredentialsSchema: SchemaItem[]
|
||||
logData: { logs: TriggerLogEntity[] } | undefined
|
||||
confirmButtonText: string
|
||||
|
||||
// Handlers
|
||||
handleVerify: () => void
|
||||
handleCreate: () => void
|
||||
handleConfirm: () => void
|
||||
handleManualPropertiesChange: () => void
|
||||
handleApiKeyCredentialsChange: () => void
|
||||
}
|
||||
|
||||
const DEFAULT_FORM_VALUES = { values: {}, isCheckValidated: false }
|
||||
|
||||
// ============================================================================
|
||||
// Hook Implementation
|
||||
// ============================================================================
|
||||
|
||||
export const useCommonModalState = ({
|
||||
createType,
|
||||
builder,
|
||||
onClose,
|
||||
}: UseCommonModalStateParams): UseCommonModalStateReturn => {
|
||||
const { t } = useTranslation()
|
||||
const detail = usePluginStore(state => state.detail)
|
||||
const { refetch } = useSubscriptionList()
|
||||
|
||||
// State
|
||||
const [currentStep, setCurrentStep] = useState<ApiKeyStep>(
|
||||
createType === SupportedCreationMethods.APIKEY ? ApiKeyStep.Verify : ApiKeyStep.Configuration,
|
||||
)
|
||||
const [subscriptionBuilder, setSubscriptionBuilder] = useState<TriggerSubscriptionBuilder | undefined>(builder)
|
||||
const isInitializedRef = useRef(false)
|
||||
|
||||
// Form refs
|
||||
const manualPropertiesFormRef = useRef<FormRefObject>(null)
|
||||
const subscriptionFormRef = useRef<FormRefObject>(null)
|
||||
const autoCommonParametersFormRef = useRef<FormRefObject>(null)
|
||||
const apiKeyCredentialsFormRef = useRef<FormRefObject>(null)
|
||||
|
||||
// Mutations
|
||||
const { mutate: verifyCredentials, isPending: isVerifyingCredentials } = useVerifyAndUpdateTriggerSubscriptionBuilder()
|
||||
const { mutateAsync: createBuilder } = useCreateTriggerSubscriptionBuilder()
|
||||
const { mutate: buildSubscription, isPending: isBuilding } = useBuildTriggerSubscription()
|
||||
const { mutate: updateBuilder } = useUpdateTriggerSubscriptionBuilder()
|
||||
|
||||
// Schemas
|
||||
const manualPropertiesSchema = detail?.declaration?.trigger?.subscription_schema || []
|
||||
const autoCommonParametersSchema = detail?.declaration.trigger?.subscription_constructor?.parameters || []
|
||||
|
||||
const apiKeyCredentialsSchema = useMemo(() => {
|
||||
const rawSchema = detail?.declaration?.trigger?.subscription_constructor?.credentials_schema || []
|
||||
return rawSchema.map(schema => ({
|
||||
...schema,
|
||||
tooltip: schema.help,
|
||||
}))
|
||||
}, [detail?.declaration?.trigger?.subscription_constructor?.credentials_schema])
|
||||
|
||||
// Log data for manual mode
|
||||
const { data: logData } = useTriggerSubscriptionBuilderLogs(
|
||||
detail?.provider || '',
|
||||
subscriptionBuilder?.id || '',
|
||||
{
|
||||
enabled: createType === SupportedCreationMethods.MANUAL,
|
||||
refetchInterval: 3000,
|
||||
},
|
||||
)
|
||||
|
||||
// Debounced update for manual properties
|
||||
const debouncedUpdate = useMemo(
|
||||
() => debounce((provider: string, builderId: string, properties: Record<string, unknown>) => {
|
||||
updateBuilder(
|
||||
{
|
||||
provider,
|
||||
subscriptionBuilderId: builderId,
|
||||
properties,
|
||||
},
|
||||
{
|
||||
onError: async (error: unknown) => {
|
||||
const errorMessage = await parsePluginErrorMessage(error) || t('modal.errors.updateFailed', { ns: 'pluginTrigger' })
|
||||
console.error('Failed to update subscription builder:', error)
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: errorMessage,
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}, 500),
|
||||
[updateBuilder, t],
|
||||
)
|
||||
|
||||
// Initialize builder
|
||||
useEffect(() => {
|
||||
const initializeBuilder = async () => {
|
||||
isInitializedRef.current = true
|
||||
try {
|
||||
const response = await createBuilder({
|
||||
provider: detail?.provider || '',
|
||||
credential_type: CREDENTIAL_TYPE_MAP[createType],
|
||||
})
|
||||
setSubscriptionBuilder(response.subscription_builder)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('createBuilder error:', error)
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('modal.errors.createFailed', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
}
|
||||
}
|
||||
if (!isInitializedRef.current && !subscriptionBuilder && detail?.provider)
|
||||
initializeBuilder()
|
||||
}, [subscriptionBuilder, detail?.provider, createType, createBuilder, t])
|
||||
|
||||
// Cleanup debounced function
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
debouncedUpdate.cancel()
|
||||
}
|
||||
}, [debouncedUpdate])
|
||||
|
||||
// Update endpoint in form when endpoint changes
|
||||
useEffect(() => {
|
||||
if (!subscriptionBuilder?.endpoint || !subscriptionFormRef.current || currentStep !== ApiKeyStep.Configuration)
|
||||
return
|
||||
|
||||
const form = subscriptionFormRef.current.getForm()
|
||||
if (form)
|
||||
form.setFieldValue('callback_url', subscriptionBuilder.endpoint)
|
||||
|
||||
const warnings = isPrivateOrLocalAddress(subscriptionBuilder.endpoint)
|
||||
? [t('modal.form.callbackUrl.privateAddressWarning', { ns: 'pluginTrigger' })]
|
||||
: []
|
||||
|
||||
subscriptionFormRef.current?.setFields([{
|
||||
name: 'callback_url',
|
||||
warnings,
|
||||
}])
|
||||
}, [subscriptionBuilder?.endpoint, currentStep, t])
|
||||
|
||||
// Handle manual properties change
|
||||
const handleManualPropertiesChange = useCallback(() => {
|
||||
if (!subscriptionBuilder || !detail?.provider)
|
||||
return
|
||||
|
||||
const formValues = manualPropertiesFormRef.current?.getFormValues({ needCheckValidatedValues: false })
|
||||
|| { values: {}, isCheckValidated: true }
|
||||
|
||||
debouncedUpdate(detail.provider, subscriptionBuilder.id, formValues.values)
|
||||
}, [subscriptionBuilder, detail?.provider, debouncedUpdate])
|
||||
|
||||
// Handle API key credentials change
|
||||
const handleApiKeyCredentialsChange = useCallback(() => {
|
||||
if (!apiKeyCredentialsSchema.length)
|
||||
return
|
||||
apiKeyCredentialsFormRef.current?.setFields([{
|
||||
name: apiKeyCredentialsSchema[0].name,
|
||||
errors: [],
|
||||
}])
|
||||
}, [apiKeyCredentialsSchema])
|
||||
|
||||
// Handle verify
|
||||
const handleVerify = useCallback(() => {
|
||||
const apiKeyCredentialsFormValues = apiKeyCredentialsFormRef.current?.getFormValues({}) || DEFAULT_FORM_VALUES
|
||||
const credentials = apiKeyCredentialsFormValues.values
|
||||
|
||||
if (!Object.keys(credentials).length) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: 'Please fill in all required credentials',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
apiKeyCredentialsFormRef.current?.setFields([{
|
||||
name: Object.keys(credentials)[0],
|
||||
errors: [],
|
||||
}])
|
||||
|
||||
verifyCredentials(
|
||||
{
|
||||
provider: detail?.provider || '',
|
||||
subscriptionBuilderId: subscriptionBuilder?.id || '',
|
||||
credentials,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('modal.apiKey.verify.success', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
setCurrentStep(ApiKeyStep.Configuration)
|
||||
},
|
||||
onError: async (error: unknown) => {
|
||||
const errorMessage = await parsePluginErrorMessage(error) || t('modal.apiKey.verify.error', { ns: 'pluginTrigger' })
|
||||
apiKeyCredentialsFormRef.current?.setFields([{
|
||||
name: Object.keys(credentials)[0],
|
||||
errors: [errorMessage],
|
||||
}])
|
||||
},
|
||||
},
|
||||
)
|
||||
}, [detail?.provider, subscriptionBuilder?.id, verifyCredentials, t])
|
||||
|
||||
// Handle create
|
||||
const handleCreate = useCallback(() => {
|
||||
if (!subscriptionBuilder) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: 'Subscription builder not found',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const subscriptionFormValues = subscriptionFormRef.current?.getFormValues({})
|
||||
if (!subscriptionFormValues?.isCheckValidated)
|
||||
return
|
||||
|
||||
const subscriptionNameValue = subscriptionFormValues?.values?.subscription_name as string
|
||||
|
||||
const params: BuildTriggerSubscriptionPayload = {
|
||||
provider: detail?.provider || '',
|
||||
subscriptionBuilderId: subscriptionBuilder.id,
|
||||
name: subscriptionNameValue,
|
||||
}
|
||||
|
||||
if (createType !== SupportedCreationMethods.MANUAL) {
|
||||
if (autoCommonParametersSchema.length > 0) {
|
||||
const autoCommonParametersFormValues = autoCommonParametersFormRef.current?.getFormValues({}) || DEFAULT_FORM_VALUES
|
||||
if (!autoCommonParametersFormValues?.isCheckValidated)
|
||||
return
|
||||
params.parameters = autoCommonParametersFormValues.values
|
||||
}
|
||||
}
|
||||
else if (manualPropertiesSchema.length > 0) {
|
||||
const manualFormValues = manualPropertiesFormRef.current?.getFormValues({}) || DEFAULT_FORM_VALUES
|
||||
if (!manualFormValues?.isCheckValidated)
|
||||
return
|
||||
}
|
||||
|
||||
buildSubscription(
|
||||
params,
|
||||
{
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('subscription.createSuccess', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
onClose()
|
||||
refetch?.()
|
||||
},
|
||||
onError: async (error: unknown) => {
|
||||
const errorMessage = await parsePluginErrorMessage(error) || t('subscription.createFailed', { ns: 'pluginTrigger' })
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: errorMessage,
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}, [
|
||||
subscriptionBuilder,
|
||||
detail?.provider,
|
||||
createType,
|
||||
autoCommonParametersSchema.length,
|
||||
manualPropertiesSchema.length,
|
||||
buildSubscription,
|
||||
onClose,
|
||||
refetch,
|
||||
t,
|
||||
])
|
||||
|
||||
// Handle confirm (dispatch based on step)
|
||||
const handleConfirm = useCallback(() => {
|
||||
if (currentStep === ApiKeyStep.Verify)
|
||||
handleVerify()
|
||||
else
|
||||
handleCreate()
|
||||
}, [currentStep, handleVerify, handleCreate])
|
||||
|
||||
// Confirm button text
|
||||
const confirmButtonText = useMemo(() => {
|
||||
if (currentStep === ApiKeyStep.Verify) {
|
||||
return isVerifyingCredentials
|
||||
? t('modal.common.verifying', { ns: 'pluginTrigger' })
|
||||
: t('modal.common.verify', { ns: 'pluginTrigger' })
|
||||
}
|
||||
return isBuilding
|
||||
? t('modal.common.creating', { ns: 'pluginTrigger' })
|
||||
: t('modal.common.create', { ns: 'pluginTrigger' })
|
||||
}, [currentStep, isVerifyingCredentials, isBuilding, t])
|
||||
|
||||
return {
|
||||
currentStep,
|
||||
subscriptionBuilder,
|
||||
isVerifyingCredentials,
|
||||
isBuilding,
|
||||
formRefs: {
|
||||
manualPropertiesFormRef,
|
||||
subscriptionFormRef,
|
||||
autoCommonParametersFormRef,
|
||||
apiKeyCredentialsFormRef,
|
||||
},
|
||||
detail,
|
||||
manualPropertiesSchema,
|
||||
autoCommonParametersSchema,
|
||||
apiKeyCredentialsSchema,
|
||||
logData,
|
||||
confirmButtonText,
|
||||
handleVerify,
|
||||
handleCreate,
|
||||
handleConfirm,
|
||||
handleManualPropertiesChange,
|
||||
handleApiKeyCredentialsChange,
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,719 @@
|
||||
import type { TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
|
||||
import { act, renderHook, waitFor } from '@testing-library/react'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
|
||||
import {
|
||||
AuthorizationStatusEnum,
|
||||
ClientTypeEnum,
|
||||
getErrorMessage,
|
||||
useOAuthClientState,
|
||||
} from './use-oauth-client-state'
|
||||
|
||||
// ============================================================================
|
||||
// Mock Factory Functions
|
||||
// ============================================================================
|
||||
|
||||
function createMockOAuthConfig(overrides: Partial<TriggerOAuthConfig> = {}): TriggerOAuthConfig {
|
||||
return {
|
||||
configured: true,
|
||||
custom_configured: false,
|
||||
custom_enabled: false,
|
||||
system_configured: true,
|
||||
redirect_uri: 'https://example.com/oauth/callback',
|
||||
params: {
|
||||
client_id: 'default-client-id',
|
||||
client_secret: 'default-client-secret',
|
||||
},
|
||||
oauth_client_schema: [
|
||||
{ name: 'client_id', type: 'text-input' as unknown, required: true, label: { 'en-US': 'Client ID' } as unknown },
|
||||
{ name: 'client_secret', type: 'secret-input' as unknown, required: true, label: { 'en-US': 'Client Secret' } as unknown },
|
||||
] as TriggerOAuthConfig['oauth_client_schema'],
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function createMockSubscriptionBuilder(overrides: Partial<TriggerSubscriptionBuilder> = {}): TriggerSubscriptionBuilder {
|
||||
return {
|
||||
id: 'builder-123',
|
||||
name: 'Test Builder',
|
||||
provider: 'test-provider',
|
||||
credential_type: TriggerCredentialTypeEnum.Oauth2,
|
||||
credentials: {},
|
||||
endpoint: 'https://example.com/callback',
|
||||
parameters: {},
|
||||
properties: {},
|
||||
workflows_in_use: 0,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Mock Setup
|
||||
// ============================================================================
|
||||
|
||||
const mockInitiateOAuth = vi.fn()
|
||||
const mockVerifyBuilder = vi.fn()
|
||||
const mockConfigureOAuth = vi.fn()
|
||||
const mockDeleteOAuth = vi.fn()
|
||||
|
||||
vi.mock('@/service/use-triggers', () => ({
|
||||
useInitiateTriggerOAuth: () => ({
|
||||
mutate: mockInitiateOAuth,
|
||||
}),
|
||||
useVerifyAndUpdateTriggerSubscriptionBuilder: () => ({
|
||||
mutate: mockVerifyBuilder,
|
||||
}),
|
||||
useConfigureTriggerOAuth: () => ({
|
||||
mutate: mockConfigureOAuth,
|
||||
}),
|
||||
useDeleteTriggerOAuth: () => ({
|
||||
mutate: mockDeleteOAuth,
|
||||
}),
|
||||
}))
|
||||
|
||||
const mockOpenOAuthPopup = vi.fn()
|
||||
vi.mock('@/hooks/use-oauth', () => ({
|
||||
openOAuthPopup: (url: string, callback: (data: unknown) => void) => mockOpenOAuthPopup(url, callback),
|
||||
}))
|
||||
|
||||
const mockToastNotify = vi.fn()
|
||||
vi.mock('@/app/components/base/toast', () => ({
|
||||
default: {
|
||||
notify: (params: unknown) => mockToastNotify(params),
|
||||
},
|
||||
}))
|
||||
|
||||
// ============================================================================
|
||||
// Test Suites
|
||||
// ============================================================================
|
||||
|
||||
describe('getErrorMessage', () => {
|
||||
it('should extract message from Error instance', () => {
|
||||
const error = new Error('Test error message')
|
||||
expect(getErrorMessage(error, 'fallback')).toBe('Test error message')
|
||||
})
|
||||
|
||||
it('should extract message from object with message property', () => {
|
||||
const error = { message: 'Object error message' }
|
||||
expect(getErrorMessage(error, 'fallback')).toBe('Object error message')
|
||||
})
|
||||
|
||||
it('should return fallback when error is empty object', () => {
|
||||
expect(getErrorMessage({}, 'fallback')).toBe('fallback')
|
||||
})
|
||||
|
||||
it('should return fallback when error.message is not a string', () => {
|
||||
expect(getErrorMessage({ message: 123 }, 'fallback')).toBe('fallback')
|
||||
})
|
||||
|
||||
it('should return fallback when error.message is empty string', () => {
|
||||
expect(getErrorMessage({ message: '' }, 'fallback')).toBe('fallback')
|
||||
})
|
||||
|
||||
it('should return fallback when error is null', () => {
|
||||
expect(getErrorMessage(null, 'fallback')).toBe('fallback')
|
||||
})
|
||||
|
||||
it('should return fallback when error is undefined', () => {
|
||||
expect(getErrorMessage(undefined, 'fallback')).toBe('fallback')
|
||||
})
|
||||
|
||||
it('should return fallback when error is a primitive', () => {
|
||||
expect(getErrorMessage('string error', 'fallback')).toBe('fallback')
|
||||
expect(getErrorMessage(123, 'fallback')).toBe('fallback')
|
||||
})
|
||||
})
|
||||
|
||||
describe('useOAuthClientState', () => {
|
||||
const defaultParams = {
|
||||
oauthConfig: createMockOAuthConfig(),
|
||||
providerName: 'test-provider',
|
||||
onClose: vi.fn(),
|
||||
showOAuthCreateModal: vi.fn(),
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('Initial State', () => {
|
||||
it('should default to Default client type when system_configured is true', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
expect(result.current.clientType).toBe(ClientTypeEnum.Default)
|
||||
})
|
||||
|
||||
it('should default to Custom client type when system_configured is false', () => {
|
||||
const config = createMockOAuthConfig({ system_configured: false })
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
oauthConfig: config,
|
||||
}))
|
||||
|
||||
expect(result.current.clientType).toBe(ClientTypeEnum.Custom)
|
||||
})
|
||||
|
||||
it('should have undefined authorizationStatus initially', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
expect(result.current.authorizationStatus).toBeUndefined()
|
||||
})
|
||||
|
||||
it('should provide clientFormRef', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
expect(result.current.clientFormRef).toBeDefined()
|
||||
expect(result.current.clientFormRef.current).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('OAuth Client Schema', () => {
|
||||
it('should compute schema with default values from params', () => {
|
||||
const config = createMockOAuthConfig({
|
||||
params: {
|
||||
client_id: 'my-client-id',
|
||||
client_secret: 'my-secret',
|
||||
},
|
||||
})
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
oauthConfig: config,
|
||||
}))
|
||||
|
||||
expect(result.current.oauthClientSchema).toHaveLength(2)
|
||||
expect(result.current.oauthClientSchema[0].default).toBe('my-client-id')
|
||||
expect(result.current.oauthClientSchema[1].default).toBe('my-secret')
|
||||
})
|
||||
|
||||
it('should return empty array when oauth_client_schema is empty', () => {
|
||||
const config = createMockOAuthConfig({
|
||||
oauth_client_schema: [],
|
||||
})
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
oauthConfig: config,
|
||||
}))
|
||||
|
||||
expect(result.current.oauthClientSchema).toEqual([])
|
||||
})
|
||||
|
||||
it('should return empty array when params is undefined', () => {
|
||||
const config = createMockOAuthConfig({
|
||||
params: undefined as unknown as TriggerOAuthConfig['params'],
|
||||
})
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
oauthConfig: config,
|
||||
}))
|
||||
|
||||
expect(result.current.oauthClientSchema).toEqual([])
|
||||
})
|
||||
|
||||
it('should preserve original schema default when param key not found', () => {
|
||||
const config = createMockOAuthConfig({
|
||||
params: {
|
||||
client_id: 'only-client-id',
|
||||
client_secret: '', // empty
|
||||
},
|
||||
oauth_client_schema: [
|
||||
{ name: 'client_id', type: 'text-input' as unknown, required: true, label: {} as unknown, default: 'original-default' },
|
||||
{ name: 'extra_field', type: 'text-input' as unknown, required: false, label: {} as unknown, default: 'extra-default' },
|
||||
] as TriggerOAuthConfig['oauth_client_schema'],
|
||||
})
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
oauthConfig: config,
|
||||
}))
|
||||
|
||||
// client_id should be overridden
|
||||
expect(result.current.oauthClientSchema[0].default).toBe('only-client-id')
|
||||
// extra_field should keep original default since key not in params
|
||||
expect(result.current.oauthClientSchema[1].default).toBe('extra-default')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Confirm Button Text', () => {
|
||||
it('should show saveAndAuth text by default', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
expect(result.current.confirmButtonText).toBe('plugin.auth.saveAndAuth')
|
||||
})
|
||||
|
||||
it('should show authorizing text when status is Pending', async () => {
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation(() => {
|
||||
// Don't resolve - stays pending
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.confirmButtonText).toBe('pluginTrigger.modal.common.authorizing')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('setClientType', () => {
|
||||
it('should update client type when called', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.setClientType(ClientTypeEnum.Custom)
|
||||
})
|
||||
|
||||
expect(result.current.clientType).toBe(ClientTypeEnum.Custom)
|
||||
})
|
||||
|
||||
it('should toggle between client types', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.setClientType(ClientTypeEnum.Custom)
|
||||
})
|
||||
expect(result.current.clientType).toBe(ClientTypeEnum.Custom)
|
||||
|
||||
act(() => {
|
||||
result.current.setClientType(ClientTypeEnum.Default)
|
||||
})
|
||||
expect(result.current.clientType).toBe(ClientTypeEnum.Default)
|
||||
})
|
||||
})
|
||||
|
||||
describe('handleRemove', () => {
|
||||
it('should call deleteOAuth with provider name', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleRemove()
|
||||
})
|
||||
|
||||
expect(mockDeleteOAuth).toHaveBeenCalledWith(
|
||||
'test-provider',
|
||||
expect.any(Object),
|
||||
)
|
||||
})
|
||||
|
||||
it('should call onClose and show success toast on success', () => {
|
||||
mockDeleteOAuth.mockImplementation((provider, { onSuccess }) => onSuccess())
|
||||
|
||||
const onClose = vi.fn()
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
onClose,
|
||||
}))
|
||||
|
||||
act(() => {
|
||||
result.current.handleRemove()
|
||||
})
|
||||
|
||||
expect(onClose).toHaveBeenCalled()
|
||||
expect(mockToastNotify).toHaveBeenCalledWith({
|
||||
type: 'success',
|
||||
message: 'pluginTrigger.modal.oauth.remove.success',
|
||||
})
|
||||
})
|
||||
|
||||
it('should show error toast with error message on failure', () => {
|
||||
mockDeleteOAuth.mockImplementation((provider, { onError }) => {
|
||||
onError(new Error('Delete failed'))
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleRemove()
|
||||
})
|
||||
|
||||
expect(mockToastNotify).toHaveBeenCalledWith({
|
||||
type: 'error',
|
||||
message: 'Delete failed',
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('handleSave', () => {
|
||||
it('should call configureOAuth with enabled: false for Default type', () => {
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(false)
|
||||
})
|
||||
|
||||
expect(mockConfigureOAuth).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
provider: 'test-provider',
|
||||
enabled: false,
|
||||
}),
|
||||
expect.any(Object),
|
||||
)
|
||||
})
|
||||
|
||||
it('should call configureOAuth with enabled: true for Custom type', () => {
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
|
||||
const config = createMockOAuthConfig({ system_configured: false })
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
oauthConfig: config,
|
||||
}))
|
||||
|
||||
// Mock the form ref
|
||||
const mockFormRef = {
|
||||
getFormValues: () => ({
|
||||
values: { client_id: 'new-id', client_secret: 'new-secret' },
|
||||
isCheckValidated: true,
|
||||
}),
|
||||
}
|
||||
// @ts-expect-error - mocking ref
|
||||
result.current.clientFormRef.current = mockFormRef
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(false)
|
||||
})
|
||||
|
||||
expect(mockConfigureOAuth).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
enabled: true,
|
||||
}),
|
||||
expect.any(Object),
|
||||
)
|
||||
})
|
||||
|
||||
it('should show success toast and call onClose when needAuth is false', () => {
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
const onClose = vi.fn()
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
onClose,
|
||||
}))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(false)
|
||||
})
|
||||
|
||||
expect(onClose).toHaveBeenCalled()
|
||||
expect(mockToastNotify).toHaveBeenCalledWith({
|
||||
type: 'success',
|
||||
message: 'pluginTrigger.modal.oauth.save.success',
|
||||
})
|
||||
})
|
||||
|
||||
it('should trigger authorization when needAuth is true', () => {
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
|
||||
onSuccess({
|
||||
authorization_url: 'https://oauth.example.com/authorize',
|
||||
subscription_builder: createMockSubscriptionBuilder(),
|
||||
})
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
expect(mockInitiateOAuth).toHaveBeenCalledWith(
|
||||
'test-provider',
|
||||
expect.any(Object),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('handleAuthorization', () => {
|
||||
it('should set status to Pending and call initiateOAuth', () => {
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation(() => {})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
expect(result.current.authorizationStatus).toBe(AuthorizationStatusEnum.Pending)
|
||||
expect(mockInitiateOAuth).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should open OAuth popup on success', () => {
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
|
||||
onSuccess({
|
||||
authorization_url: 'https://oauth.example.com/authorize',
|
||||
subscription_builder: createMockSubscriptionBuilder(),
|
||||
})
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
expect(mockOpenOAuthPopup).toHaveBeenCalledWith(
|
||||
'https://oauth.example.com/authorize',
|
||||
expect.any(Function),
|
||||
)
|
||||
})
|
||||
|
||||
it('should set status to Failed and show error toast on error', () => {
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onError }) => {
|
||||
onError(new Error('OAuth failed'))
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
expect(result.current.authorizationStatus).toBe(AuthorizationStatusEnum.Failed)
|
||||
expect(mockToastNotify).toHaveBeenCalledWith({
|
||||
type: 'error',
|
||||
message: 'pluginTrigger.modal.oauth.authorization.authFailed',
|
||||
})
|
||||
})
|
||||
|
||||
it('should call onClose and showOAuthCreateModal on callback success', () => {
|
||||
const onClose = vi.fn()
|
||||
const showOAuthCreateModal = vi.fn()
|
||||
const builder = createMockSubscriptionBuilder()
|
||||
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
|
||||
onSuccess({
|
||||
authorization_url: 'https://oauth.example.com/authorize',
|
||||
subscription_builder: builder,
|
||||
})
|
||||
})
|
||||
mockOpenOAuthPopup.mockImplementation((url, callback) => {
|
||||
callback({ success: true })
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
onClose,
|
||||
showOAuthCreateModal,
|
||||
}))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
expect(onClose).toHaveBeenCalled()
|
||||
expect(showOAuthCreateModal).toHaveBeenCalledWith(builder)
|
||||
expect(mockToastNotify).toHaveBeenCalledWith({
|
||||
type: 'success',
|
||||
message: 'pluginTrigger.modal.oauth.authorization.authSuccess',
|
||||
})
|
||||
})
|
||||
|
||||
it('should not call callbacks when OAuth callback returns falsy', () => {
|
||||
const onClose = vi.fn()
|
||||
const showOAuthCreateModal = vi.fn()
|
||||
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
|
||||
onSuccess({
|
||||
authorization_url: 'https://oauth.example.com/authorize',
|
||||
subscription_builder: createMockSubscriptionBuilder(),
|
||||
})
|
||||
})
|
||||
mockOpenOAuthPopup.mockImplementation((url, callback) => {
|
||||
callback(null)
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
onClose,
|
||||
showOAuthCreateModal,
|
||||
}))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
expect(onClose).not.toHaveBeenCalled()
|
||||
expect(showOAuthCreateModal).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Polling Effect', () => {
|
||||
it('should start polling after authorization starts', async () => {
|
||||
vi.useFakeTimers({ shouldAdvanceTime: true })
|
||||
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
|
||||
onSuccess({
|
||||
authorization_url: 'https://oauth.example.com/authorize',
|
||||
subscription_builder: createMockSubscriptionBuilder(),
|
||||
})
|
||||
})
|
||||
mockVerifyBuilder.mockImplementation((params, { onSuccess }) => {
|
||||
onSuccess({ verified: false })
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
// Advance timer to trigger first poll
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(3000)
|
||||
})
|
||||
|
||||
expect(mockVerifyBuilder).toHaveBeenCalled()
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('should set status to Success when verified', async () => {
|
||||
vi.useFakeTimers({ shouldAdvanceTime: true })
|
||||
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
|
||||
onSuccess({
|
||||
authorization_url: 'https://oauth.example.com/authorize',
|
||||
subscription_builder: createMockSubscriptionBuilder(),
|
||||
})
|
||||
})
|
||||
mockVerifyBuilder.mockImplementation((params, { onSuccess }) => {
|
||||
onSuccess({ verified: true })
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(3000)
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.authorizationStatus).toBe(AuthorizationStatusEnum.Success)
|
||||
})
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('should continue polling on error', async () => {
|
||||
vi.useFakeTimers({ shouldAdvanceTime: true })
|
||||
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
|
||||
onSuccess({
|
||||
authorization_url: 'https://oauth.example.com/authorize',
|
||||
subscription_builder: createMockSubscriptionBuilder(),
|
||||
})
|
||||
})
|
||||
mockVerifyBuilder.mockImplementation((params, { onError }) => {
|
||||
onError(new Error('Verify failed'))
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(3000)
|
||||
})
|
||||
|
||||
expect(mockVerifyBuilder).toHaveBeenCalled()
|
||||
// Status should still be Pending
|
||||
expect(result.current.authorizationStatus).toBe(AuthorizationStatusEnum.Pending)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('should stop polling when verified', async () => {
|
||||
vi.useFakeTimers({ shouldAdvanceTime: true })
|
||||
|
||||
mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
|
||||
mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
|
||||
onSuccess({
|
||||
authorization_url: 'https://oauth.example.com/authorize',
|
||||
subscription_builder: createMockSubscriptionBuilder(),
|
||||
})
|
||||
})
|
||||
mockVerifyBuilder.mockImplementation((params, { onSuccess }) => {
|
||||
onSuccess({ verified: true })
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useOAuthClientState(defaultParams))
|
||||
|
||||
act(() => {
|
||||
result.current.handleSave(true)
|
||||
})
|
||||
|
||||
// First poll - should verify
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(3000)
|
||||
})
|
||||
|
||||
expect(mockVerifyBuilder).toHaveBeenCalledTimes(1)
|
||||
|
||||
// Second poll - should not happen as interval is cleared
|
||||
await act(async () => {
|
||||
vi.advanceTimersByTime(3000)
|
||||
})
|
||||
|
||||
// Still only 1 call because polling stopped
|
||||
expect(mockVerifyBuilder).toHaveBeenCalledTimes(1)
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle undefined oauthConfig', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
oauthConfig: undefined,
|
||||
}))
|
||||
|
||||
expect(result.current.clientType).toBe(ClientTypeEnum.Custom)
|
||||
expect(result.current.oauthClientSchema).toEqual([])
|
||||
})
|
||||
|
||||
it('should handle empty providerName', () => {
|
||||
const { result } = renderHook(() => useOAuthClientState({
|
||||
...defaultParams,
|
||||
providerName: '',
|
||||
}))
|
||||
|
||||
// Should not throw
|
||||
expect(result.current.clientType).toBe(ClientTypeEnum.Default)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('Enum Exports', () => {
|
||||
it('should export AuthorizationStatusEnum', () => {
|
||||
expect(AuthorizationStatusEnum.Pending).toBe('pending')
|
||||
expect(AuthorizationStatusEnum.Success).toBe('success')
|
||||
expect(AuthorizationStatusEnum.Failed).toBe('failed')
|
||||
})
|
||||
|
||||
it('should export ClientTypeEnum', () => {
|
||||
expect(ClientTypeEnum.Default).toBe('default')
|
||||
expect(ClientTypeEnum.Custom).toBe('custom')
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,242 @@
|
||||
'use client'
|
||||
import type { FormRefObject } from '@/app/components/base/form/types'
|
||||
import type { TriggerOAuthClientParams, TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
|
||||
import type { ConfigureTriggerOAuthPayload } from '@/service/use-triggers'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { openOAuthPopup } from '@/hooks/use-oauth'
|
||||
import {
|
||||
useConfigureTriggerOAuth,
|
||||
useDeleteTriggerOAuth,
|
||||
useInitiateTriggerOAuth,
|
||||
useVerifyAndUpdateTriggerSubscriptionBuilder,
|
||||
} from '@/service/use-triggers'
|
||||
|
||||
export enum AuthorizationStatusEnum {
|
||||
Pending = 'pending',
|
||||
Success = 'success',
|
||||
Failed = 'failed',
|
||||
}
|
||||
|
||||
export enum ClientTypeEnum {
|
||||
Default = 'default',
|
||||
Custom = 'custom',
|
||||
}
|
||||
|
||||
const POLL_INTERVAL_MS = 3000
|
||||
|
||||
// Extract error message from various error formats
|
||||
export const getErrorMessage = (error: unknown, fallback: string): string => {
|
||||
if (error instanceof Error && error.message)
|
||||
return error.message
|
||||
if (typeof error === 'object' && error && 'message' in error) {
|
||||
const message = (error as { message?: string }).message
|
||||
if (typeof message === 'string' && message)
|
||||
return message
|
||||
}
|
||||
return fallback
|
||||
}
|
||||
|
||||
type UseOAuthClientStateParams = {
|
||||
oauthConfig?: TriggerOAuthConfig
|
||||
providerName: string
|
||||
onClose: () => void
|
||||
showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
|
||||
}
|
||||
|
||||
type UseOAuthClientStateReturn = {
|
||||
// State
|
||||
clientType: ClientTypeEnum
|
||||
setClientType: (type: ClientTypeEnum) => void
|
||||
authorizationStatus: AuthorizationStatusEnum | undefined
|
||||
|
||||
// Refs
|
||||
clientFormRef: React.RefObject<FormRefObject | null>
|
||||
|
||||
// Computed values
|
||||
oauthClientSchema: TriggerOAuthConfig['oauth_client_schema']
|
||||
confirmButtonText: string
|
||||
|
||||
// Handlers
|
||||
handleAuthorization: () => void
|
||||
handleRemove: () => void
|
||||
handleSave: (needAuth: boolean) => void
|
||||
}
|
||||
|
||||
export const useOAuthClientState = ({
|
||||
oauthConfig,
|
||||
providerName,
|
||||
onClose,
|
||||
showOAuthCreateModal,
|
||||
}: UseOAuthClientStateParams): UseOAuthClientStateReturn => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
// State management
|
||||
const [subscriptionBuilder, setSubscriptionBuilder] = useState<TriggerSubscriptionBuilder | undefined>()
|
||||
const [authorizationStatus, setAuthorizationStatus] = useState<AuthorizationStatusEnum>()
|
||||
const [clientType, setClientType] = useState<ClientTypeEnum>(
|
||||
oauthConfig?.system_configured ? ClientTypeEnum.Default : ClientTypeEnum.Custom,
|
||||
)
|
||||
|
||||
const clientFormRef = useRef<FormRefObject>(null)
|
||||
|
||||
// Mutations
|
||||
const { mutate: initiateOAuth } = useInitiateTriggerOAuth()
|
||||
const { mutate: verifyBuilder } = useVerifyAndUpdateTriggerSubscriptionBuilder()
|
||||
const { mutate: configureOAuth } = useConfigureTriggerOAuth()
|
||||
const { mutate: deleteOAuth } = useDeleteTriggerOAuth()
|
||||
|
||||
// Compute OAuth client schema with default values
|
||||
const oauthClientSchema = useMemo(() => {
|
||||
const { oauth_client_schema, params } = oauthConfig || {}
|
||||
if (!oauth_client_schema?.length || !params)
|
||||
return []
|
||||
|
||||
const paramKeys = Object.keys(params)
|
||||
return oauth_client_schema.map(schema => ({
|
||||
...schema,
|
||||
default: paramKeys.includes(schema.name) ? params[schema.name] : schema.default,
|
||||
}))
|
||||
}, [oauthConfig])
|
||||
|
||||
// Compute confirm button text based on authorization status
|
||||
const confirmButtonText = useMemo(() => {
|
||||
if (authorizationStatus === AuthorizationStatusEnum.Pending)
|
||||
return t('modal.common.authorizing', { ns: 'pluginTrigger' })
|
||||
if (authorizationStatus === AuthorizationStatusEnum.Success)
|
||||
return t('modal.oauth.authorization.waitingJump', { ns: 'pluginTrigger' })
|
||||
return t('auth.saveAndAuth', { ns: 'plugin' })
|
||||
}, [authorizationStatus, t])
|
||||
|
||||
// Authorization handler
|
||||
const handleAuthorization = useCallback(() => {
|
||||
setAuthorizationStatus(AuthorizationStatusEnum.Pending)
|
||||
initiateOAuth(providerName, {
|
||||
onSuccess: (response) => {
|
||||
setSubscriptionBuilder(response.subscription_builder)
|
||||
openOAuthPopup(response.authorization_url, (callbackData) => {
|
||||
if (!callbackData)
|
||||
return
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('modal.oauth.authorization.authSuccess', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
onClose()
|
||||
showOAuthCreateModal(response.subscription_builder)
|
||||
})
|
||||
},
|
||||
onError: () => {
|
||||
setAuthorizationStatus(AuthorizationStatusEnum.Failed)
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('modal.oauth.authorization.authFailed', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
},
|
||||
})
|
||||
}, [providerName, initiateOAuth, onClose, showOAuthCreateModal, t])
|
||||
|
||||
// Remove handler
|
||||
const handleRemove = useCallback(() => {
|
||||
deleteOAuth(providerName, {
|
||||
onSuccess: () => {
|
||||
onClose()
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('modal.oauth.remove.success', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: getErrorMessage(error, t('modal.oauth.remove.failed', { ns: 'pluginTrigger' })),
|
||||
})
|
||||
},
|
||||
})
|
||||
}, [providerName, deleteOAuth, onClose, t])
|
||||
|
||||
// Save handler
|
||||
const handleSave = useCallback((needAuth: boolean) => {
|
||||
const isCustom = clientType === ClientTypeEnum.Custom
|
||||
const params: ConfigureTriggerOAuthPayload = {
|
||||
provider: providerName,
|
||||
enabled: isCustom,
|
||||
}
|
||||
|
||||
if (isCustom) {
|
||||
const clientFormValues = clientFormRef.current?.getFormValues({}) as {
|
||||
values: TriggerOAuthClientParams
|
||||
isCheckValidated: boolean
|
||||
}
|
||||
if (!clientFormValues.isCheckValidated)
|
||||
return
|
||||
|
||||
const clientParams = { ...clientFormValues.values }
|
||||
// Preserve hidden values if unchanged
|
||||
if (clientParams.client_id === oauthConfig?.params.client_id)
|
||||
clientParams.client_id = '[__HIDDEN__]'
|
||||
if (clientParams.client_secret === oauthConfig?.params.client_secret)
|
||||
clientParams.client_secret = '[__HIDDEN__]'
|
||||
|
||||
params.client_params = clientParams
|
||||
}
|
||||
|
||||
configureOAuth(params, {
|
||||
onSuccess: () => {
|
||||
if (needAuth) {
|
||||
handleAuthorization()
|
||||
return
|
||||
}
|
||||
onClose()
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('modal.oauth.save.success', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
},
|
||||
})
|
||||
}, [clientType, providerName, oauthConfig?.params, configureOAuth, handleAuthorization, onClose, t])
|
||||
|
||||
// Polling effect for authorization verification
|
||||
useEffect(() => {
|
||||
const shouldPoll = providerName
|
||||
&& subscriptionBuilder
|
||||
&& authorizationStatus === AuthorizationStatusEnum.Pending
|
||||
|
||||
if (!shouldPoll)
|
||||
return
|
||||
|
||||
const pollInterval = setInterval(() => {
|
||||
verifyBuilder(
|
||||
{
|
||||
provider: providerName,
|
||||
subscriptionBuilderId: subscriptionBuilder.id,
|
||||
},
|
||||
{
|
||||
onSuccess: (response) => {
|
||||
if (response.verified) {
|
||||
setAuthorizationStatus(AuthorizationStatusEnum.Success)
|
||||
clearInterval(pollInterval)
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
// Continue polling on error - auth might still be in progress
|
||||
},
|
||||
},
|
||||
)
|
||||
}, POLL_INTERVAL_MS)
|
||||
|
||||
return () => clearInterval(pollInterval)
|
||||
}, [subscriptionBuilder, authorizationStatus, verifyBuilder, providerName])
|
||||
|
||||
return {
|
||||
clientType,
|
||||
setClientType,
|
||||
authorizationStatus,
|
||||
clientFormRef,
|
||||
oauthClientSchema,
|
||||
confirmButtonText,
|
||||
handleAuthorization,
|
||||
handleRemove,
|
||||
handleSave,
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@ import type { Option } from '@/app/components/base/select/custom'
|
||||
import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
|
||||
import { RiAddLine, RiEqualizer2Line } from '@remixicon/react'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ActionButton, ActionButtonState } from '@/app/components/base/action-button'
|
||||
import Badge from '@/app/components/base/badge'
|
||||
@ -43,7 +43,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
|
||||
const detail = usePluginStore(state => state.detail)
|
||||
|
||||
const { data: providerInfo } = useTriggerProviderInfo(detail?.provider || '')
|
||||
const supportedMethods = providerInfo?.supported_creation_methods || []
|
||||
const supportedMethods = useMemo(() => providerInfo?.supported_creation_methods || [], [providerInfo?.supported_creation_methods])
|
||||
const { data: oauthConfig, refetch: refetchOAuthConfig } = useTriggerOAuthConfig(detail?.provider || '', supportedMethods.includes(SupportedCreationMethods.OAUTH))
|
||||
const { mutate: initiateOAuth } = useInitiateTriggerOAuth()
|
||||
|
||||
@ -63,11 +63,11 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
|
||||
}
|
||||
}, [t])
|
||||
|
||||
const onClickClientSettings = (e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
|
||||
const onClickClientSettings = useCallback((e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
showClientSettingsModal()
|
||||
}
|
||||
}, [showClientSettingsModal])
|
||||
|
||||
const allOptions = useMemo(() => {
|
||||
const showCustomBadge = oauthConfig?.custom_enabled && oauthConfig?.custom_configured
|
||||
@ -104,7 +104,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
|
||||
show: supportedMethods.includes(SupportedCreationMethods.MANUAL),
|
||||
},
|
||||
]
|
||||
}, [t, oauthConfig, supportedMethods, methodType])
|
||||
}, [t, oauthConfig, supportedMethods, onClickClientSettings])
|
||||
|
||||
const onChooseCreateType = async (type: SupportedCreationMethods) => {
|
||||
if (type === SupportedCreationMethods.OAUTH) {
|
||||
|
||||
@ -102,7 +102,7 @@ vi.mock('@/hooks/use-oauth', () => ({
|
||||
openOAuthPopup: (url: string, callback: (data: unknown) => void) => mockOpenOAuthPopup(url, callback),
|
||||
}))
|
||||
|
||||
// Mock toast
|
||||
// Mock toast - needs mock due to DOM manipulation and async behavior
|
||||
const mockToastNotify = vi.fn()
|
||||
vi.mock('@/app/components/base/toast', () => ({
|
||||
default: {
|
||||
@ -118,7 +118,7 @@ Object.assign(navigator, {
|
||||
},
|
||||
})
|
||||
|
||||
// Mock Modal component
|
||||
// Mock Modal - needs mock due to Portal usage which doesn't work well in jsdom
|
||||
vi.mock('@/app/components/base/modal/modal', () => ({
|
||||
default: ({
|
||||
children,
|
||||
@ -161,24 +161,7 @@ vi.mock('@/app/components/base/modal/modal', () => ({
|
||||
),
|
||||
}))
|
||||
|
||||
// Mock Button component
|
||||
vi.mock('@/app/components/base/button', () => ({
|
||||
default: ({ children, onClick, variant, className }: {
|
||||
children: React.ReactNode
|
||||
onClick?: () => void
|
||||
variant?: string
|
||||
className?: string
|
||||
}) => (
|
||||
<button
|
||||
data-testid={`button-${variant || 'default'}`}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
}))
|
||||
// Configurable form mock values
|
||||
// Mock BaseForm - needs mock to control form values in tests
|
||||
let mockFormValues: { values: Record<string, string>, isCheckValidated: boolean } = {
|
||||
values: { client_id: 'test-client-id', client_secret: 'test-client-secret' },
|
||||
isCheckValidated: true,
|
||||
@ -210,25 +193,6 @@ vi.mock('@/app/components/base/form/components/base', () => ({
|
||||
}),
|
||||
}))
|
||||
|
||||
// Mock OptionCard component
|
||||
vi.mock('@/app/components/workflow/nodes/_base/components/option-card', () => ({
|
||||
default: ({ title, onSelect, selected, className }: {
|
||||
title: string
|
||||
onSelect: () => void
|
||||
selected: boolean
|
||||
className?: string
|
||||
}) => (
|
||||
<div
|
||||
data-testid={`option-card-${title}`}
|
||||
onClick={onSelect}
|
||||
className={`${className} ${selected ? 'selected' : ''}`}
|
||||
data-selected={selected}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
),
|
||||
}))
|
||||
|
||||
// ============================================================================
|
||||
// Test Suites
|
||||
// ============================================================================
|
||||
@ -265,8 +229,8 @@ describe('OAuthClientSettingsModal', () => {
|
||||
it('should render client type selector when system_configured is true', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
expect(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.default')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')).toBeInTheDocument()
|
||||
expect(screen.getByText('pluginTrigger.subscription.addType.options.oauth.default')).toBeInTheDocument()
|
||||
expect(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should not render client type selector when system_configured is false', () => {
|
||||
@ -276,7 +240,7 @@ describe('OAuthClientSettingsModal', () => {
|
||||
|
||||
render(<OAuthClientSettingsModal {...defaultProps} oauthConfig={configWithoutSystemConfigured} />)
|
||||
|
||||
expect(screen.queryByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.default')).not.toBeInTheDocument()
|
||||
expect(screen.queryByText('pluginTrigger.subscription.addType.options.oauth.default')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render redirect URI info when custom client type is selected', () => {
|
||||
@ -319,29 +283,32 @@ describe('OAuthClientSettingsModal', () => {
|
||||
it('should default to Default client type when system_configured is true', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
const defaultCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.default')
|
||||
expect(defaultCard).toHaveAttribute('data-selected', 'true')
|
||||
// Default card should have selected styling (border-[1.5px] indicates selected)
|
||||
const defaultCard = screen.getByText('pluginTrigger.subscription.addType.options.oauth.default').closest('div')
|
||||
expect(defaultCard).toHaveClass('border-[1.5px]')
|
||||
})
|
||||
|
||||
it('should switch to Custom client type when Custom card is clicked', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
const customCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')
|
||||
fireEvent.click(customCard)
|
||||
const customCard = screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')
|
||||
fireEvent.click(customCard!)
|
||||
|
||||
expect(customCard).toHaveAttribute('data-selected', 'true')
|
||||
// Custom card should now have selected styling
|
||||
expect(customCard).toHaveClass('border-[1.5px]')
|
||||
})
|
||||
|
||||
it('should switch back to Default client type when Default card is clicked', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
const customCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')
|
||||
fireEvent.click(customCard)
|
||||
const customCard = screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')
|
||||
fireEvent.click(customCard!)
|
||||
|
||||
const defaultCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.default')
|
||||
fireEvent.click(defaultCard)
|
||||
const defaultCard = screen.getByText('pluginTrigger.subscription.addType.options.oauth.default').closest('div')
|
||||
fireEvent.click(defaultCard!)
|
||||
|
||||
expect(defaultCard).toHaveAttribute('data-selected', 'true')
|
||||
// Default card should have selected styling again
|
||||
expect(defaultCard).toHaveClass('border-[1.5px]')
|
||||
})
|
||||
})
|
||||
|
||||
@ -852,8 +819,8 @@ describe('OAuthClientSettingsModal', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
// Switch to custom
|
||||
const customCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')
|
||||
fireEvent.click(customCard)
|
||||
const customCard = screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')
|
||||
fireEvent.click(customCard!)
|
||||
|
||||
fireEvent.click(screen.getByTestId('modal-cancel'))
|
||||
|
||||
@ -1054,7 +1021,7 @@ describe('OAuthClientSettingsModal', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
// Switch to custom type
|
||||
const customCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')
|
||||
const customCard = screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!
|
||||
fireEvent.click(customCard)
|
||||
|
||||
fireEvent.click(screen.getByTestId('modal-cancel'))
|
||||
@ -1077,7 +1044,7 @@ describe('OAuthClientSettingsModal', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
// Switch to custom type
|
||||
fireEvent.click(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom'))
|
||||
fireEvent.click(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!)
|
||||
|
||||
fireEvent.click(screen.getByTestId('modal-cancel'))
|
||||
|
||||
@ -1104,7 +1071,7 @@ describe('OAuthClientSettingsModal', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
// Switch to custom type
|
||||
fireEvent.click(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom'))
|
||||
fireEvent.click(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!)
|
||||
|
||||
fireEvent.click(screen.getByTestId('modal-cancel'))
|
||||
|
||||
@ -1131,7 +1098,7 @@ describe('OAuthClientSettingsModal', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
// Switch to custom type
|
||||
fireEvent.click(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom'))
|
||||
fireEvent.click(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!)
|
||||
|
||||
fireEvent.click(screen.getByTestId('modal-cancel'))
|
||||
|
||||
@ -1158,7 +1125,7 @@ describe('OAuthClientSettingsModal', () => {
|
||||
render(<OAuthClientSettingsModal {...defaultProps} />)
|
||||
|
||||
// Switch to custom type
|
||||
fireEvent.click(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom'))
|
||||
fireEvent.click(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!)
|
||||
|
||||
fireEvent.click(screen.getByTestId('modal-cancel'))
|
||||
|
||||
|
||||
@ -1,27 +1,17 @@
|
||||
'use client'
|
||||
import type { FormRefObject } from '@/app/components/base/form/types'
|
||||
import type { TriggerOAuthClientParams, TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
|
||||
import type { ConfigureTriggerOAuthPayload } from '@/service/use-triggers'
|
||||
import type { TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
|
||||
import {
|
||||
RiClipboardLine,
|
||||
RiInformation2Fill,
|
||||
} from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { BaseForm } from '@/app/components/base/form/components/base'
|
||||
import Modal from '@/app/components/base/modal/modal'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
|
||||
import { openOAuthPopup } from '@/hooks/use-oauth'
|
||||
import {
|
||||
useConfigureTriggerOAuth,
|
||||
useDeleteTriggerOAuth,
|
||||
useInitiateTriggerOAuth,
|
||||
useVerifyAndUpdateTriggerSubscriptionBuilder,
|
||||
} from '@/service/use-triggers'
|
||||
import { usePluginStore } from '../../store'
|
||||
import { ClientTypeEnum, useOAuthClientState } from './hooks/use-oauth-client-state'
|
||||
|
||||
type Props = {
|
||||
oauthConfig?: TriggerOAuthConfig
|
||||
@ -29,169 +19,38 @@ type Props = {
|
||||
showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
|
||||
}
|
||||
|
||||
enum AuthorizationStatusEnum {
|
||||
Pending = 'pending',
|
||||
Success = 'success',
|
||||
Failed = 'failed',
|
||||
}
|
||||
|
||||
enum ClientTypeEnum {
|
||||
Default = 'default',
|
||||
Custom = 'custom',
|
||||
}
|
||||
const CLIENT_TYPE_OPTIONS = [ClientTypeEnum.Default, ClientTypeEnum.Custom] as const
|
||||
|
||||
export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreateModal }: Props) => {
|
||||
const { t } = useTranslation()
|
||||
const detail = usePluginStore(state => state.detail)
|
||||
const { system_configured, params, oauth_client_schema } = oauthConfig || {}
|
||||
const [subscriptionBuilder, setSubscriptionBuilder] = useState<TriggerSubscriptionBuilder | undefined>()
|
||||
const [authorizationStatus, setAuthorizationStatus] = useState<AuthorizationStatusEnum>()
|
||||
|
||||
const [clientType, setClientType] = useState<ClientTypeEnum>(system_configured ? ClientTypeEnum.Default : ClientTypeEnum.Custom)
|
||||
|
||||
const clientFormRef = React.useRef<FormRefObject>(null)
|
||||
|
||||
const oauthClientSchema = useMemo(() => {
|
||||
if (oauth_client_schema && oauth_client_schema.length > 0 && params) {
|
||||
const oauthConfigPramaKeys = Object.keys(params || {})
|
||||
for (const schema of oauth_client_schema) {
|
||||
if (oauthConfigPramaKeys.includes(schema.name))
|
||||
schema.default = params?.[schema.name]
|
||||
}
|
||||
return oauth_client_schema
|
||||
}
|
||||
return []
|
||||
}, [oauth_client_schema, params])
|
||||
|
||||
const providerName = detail?.provider || ''
|
||||
const { mutate: initiateOAuth } = useInitiateTriggerOAuth()
|
||||
const { mutate: verifyBuilder } = useVerifyAndUpdateTriggerSubscriptionBuilder()
|
||||
const { mutate: configureOAuth } = useConfigureTriggerOAuth()
|
||||
const { mutate: deleteOAuth } = useDeleteTriggerOAuth()
|
||||
|
||||
const confirmButtonText = useMemo(() => {
|
||||
if (authorizationStatus === AuthorizationStatusEnum.Pending)
|
||||
return t('modal.common.authorizing', { ns: 'pluginTrigger' })
|
||||
if (authorizationStatus === AuthorizationStatusEnum.Success)
|
||||
return t('modal.oauth.authorization.waitingJump', { ns: 'pluginTrigger' })
|
||||
return t('auth.saveAndAuth', { ns: 'plugin' })
|
||||
}, [authorizationStatus, t])
|
||||
const {
|
||||
clientType,
|
||||
setClientType,
|
||||
clientFormRef,
|
||||
oauthClientSchema,
|
||||
confirmButtonText,
|
||||
handleRemove,
|
||||
handleSave,
|
||||
} = useOAuthClientState({
|
||||
oauthConfig,
|
||||
providerName,
|
||||
onClose,
|
||||
showOAuthCreateModal,
|
||||
})
|
||||
|
||||
const getErrorMessage = (error: unknown, fallback: string) => {
|
||||
if (error instanceof Error && error.message)
|
||||
return error.message
|
||||
if (typeof error === 'object' && error && 'message' in error) {
|
||||
const message = (error as { message?: string }).message
|
||||
if (typeof message === 'string' && message)
|
||||
return message
|
||||
}
|
||||
return fallback
|
||||
}
|
||||
const isCustomClient = clientType === ClientTypeEnum.Custom
|
||||
const showRemoveButton = oauthConfig?.custom_enabled && oauthConfig?.params && isCustomClient
|
||||
const showRedirectInfo = isCustomClient && oauthConfig?.redirect_uri
|
||||
const showClientForm = isCustomClient && oauthClientSchema.length > 0
|
||||
|
||||
const handleAuthorization = () => {
|
||||
setAuthorizationStatus(AuthorizationStatusEnum.Pending)
|
||||
initiateOAuth(providerName, {
|
||||
onSuccess: (response) => {
|
||||
setSubscriptionBuilder(response.subscription_builder)
|
||||
openOAuthPopup(response.authorization_url, (callbackData) => {
|
||||
if (callbackData) {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('modal.oauth.authorization.authSuccess', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
onClose()
|
||||
showOAuthCreateModal(response.subscription_builder)
|
||||
}
|
||||
})
|
||||
},
|
||||
onError: () => {
|
||||
setAuthorizationStatus(AuthorizationStatusEnum.Failed)
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('modal.oauth.authorization.authFailed', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (providerName && subscriptionBuilder && authorizationStatus === AuthorizationStatusEnum.Pending) {
|
||||
const pollInterval = setInterval(() => {
|
||||
verifyBuilder(
|
||||
{
|
||||
provider: providerName,
|
||||
subscriptionBuilderId: subscriptionBuilder.id,
|
||||
},
|
||||
{
|
||||
onSuccess: (response) => {
|
||||
if (response.verified) {
|
||||
setAuthorizationStatus(AuthorizationStatusEnum.Success)
|
||||
clearInterval(pollInterval)
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
// Continue polling - auth might still be in progress
|
||||
},
|
||||
},
|
||||
)
|
||||
}, 3000)
|
||||
|
||||
return () => clearInterval(pollInterval)
|
||||
}
|
||||
}, [subscriptionBuilder, authorizationStatus, verifyBuilder, providerName, t])
|
||||
|
||||
const handleRemove = () => {
|
||||
deleteOAuth(providerName, {
|
||||
onSuccess: () => {
|
||||
onClose()
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('modal.oauth.remove.success', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: getErrorMessage(error, t('modal.oauth.remove.failed', { ns: 'pluginTrigger' })),
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = (needAuth: boolean) => {
|
||||
const isCustom = clientType === ClientTypeEnum.Custom
|
||||
const params: ConfigureTriggerOAuthPayload = {
|
||||
provider: providerName,
|
||||
enabled: isCustom,
|
||||
}
|
||||
|
||||
if (isCustom) {
|
||||
const clientFormValues = clientFormRef.current?.getFormValues({}) as { values: TriggerOAuthClientParams, isCheckValidated: boolean }
|
||||
if (!clientFormValues.isCheckValidated)
|
||||
return
|
||||
const clientParams = clientFormValues.values
|
||||
if (clientParams.client_id === oauthConfig?.params.client_id)
|
||||
clientParams.client_id = '[__HIDDEN__]'
|
||||
|
||||
if (clientParams.client_secret === oauthConfig?.params.client_secret)
|
||||
clientParams.client_secret = '[__HIDDEN__]'
|
||||
|
||||
params.client_params = clientParams
|
||||
}
|
||||
|
||||
configureOAuth(params, {
|
||||
onSuccess: () => {
|
||||
if (needAuth) {
|
||||
handleAuthorization()
|
||||
}
|
||||
else {
|
||||
onClose()
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('modal.oauth.save.success', { ns: 'pluginTrigger' }),
|
||||
})
|
||||
}
|
||||
},
|
||||
const handleCopyRedirectUri = () => {
|
||||
navigator.clipboard.writeText(oauthConfig?.redirect_uri || '')
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('actionMsg.copySuccessfully', { ns: 'common' }),
|
||||
})
|
||||
}
|
||||
|
||||
@ -208,25 +67,25 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
|
||||
onClose={onClose}
|
||||
onCancel={() => handleSave(false)}
|
||||
onConfirm={() => handleSave(true)}
|
||||
footerSlot={
|
||||
oauthConfig?.custom_enabled && oauthConfig?.params && clientType === ClientTypeEnum.Custom && (
|
||||
<div className="grow">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="text-components-button-destructive-secondary-text"
|
||||
// disabled={disabled || doingAction || !editValues}
|
||||
onClick={handleRemove}
|
||||
>
|
||||
{t('operation.remove', { ns: 'common' })}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
footerSlot={showRemoveButton && (
|
||||
<div className="grow">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="text-components-button-destructive-secondary-text"
|
||||
onClick={handleRemove}
|
||||
>
|
||||
{t('operation.remove', { ns: 'common' })}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="system-sm-medium mb-2 text-text-secondary">{t('subscription.addType.options.oauth.clientTitle', { ns: 'pluginTrigger' })}</div>
|
||||
<div className="system-sm-medium mb-2 text-text-secondary">
|
||||
{t('subscription.addType.options.oauth.clientTitle', { ns: 'pluginTrigger' })}
|
||||
</div>
|
||||
|
||||
{oauthConfig?.system_configured && (
|
||||
<div className="mb-4 flex w-full items-start justify-between gap-2">
|
||||
{[ClientTypeEnum.Default, ClientTypeEnum.Custom].map(option => (
|
||||
{CLIENT_TYPE_OPTIONS.map(option => (
|
||||
<OptionCard
|
||||
key={option}
|
||||
title={t(`subscription.addType.options.oauth.${option}`, { ns: 'pluginTrigger' })}
|
||||
@ -237,7 +96,8 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{clientType === ClientTypeEnum.Custom && oauthConfig?.redirect_uri && (
|
||||
|
||||
{showRedirectInfo && (
|
||||
<div className="mb-4 flex items-start gap-3 rounded-xl bg-background-section-burn p-4">
|
||||
<div className="rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-2 shadow-xs shadow-shadow-shadow-3">
|
||||
<RiInformation2Fill className="h-5 w-5 shrink-0 text-text-accent" />
|
||||
@ -247,18 +107,12 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
|
||||
{t('modal.oauthRedirectInfo', { ns: 'pluginTrigger' })}
|
||||
</div>
|
||||
<div className="system-sm-medium my-1.5 break-all leading-4">
|
||||
{oauthConfig.redirect_uri}
|
||||
{oauthConfig?.redirect_uri}
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(oauthConfig.redirect_uri)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('actionMsg.copySuccessfully', { ns: 'common' }),
|
||||
})
|
||||
}}
|
||||
onClick={handleCopyRedirectUri}
|
||||
>
|
||||
<RiClipboardLine className="mr-1 h-[14px] w-[14px]" />
|
||||
{t('operation.copy', { ns: 'common' })}
|
||||
@ -266,7 +120,8 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{clientType === ClientTypeEnum.Custom && oauthClientSchema.length > 0 && (
|
||||
|
||||
{showClientForm && (
|
||||
<BaseForm
|
||||
formSchemas={oauthClientSchema}
|
||||
ref={clientFormRef}
|
||||
|
||||
Reference in New Issue
Block a user