mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 18:08:07 +08:00
feat: add editing support for trigger subscriptions (#29957)
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Maries
GitHub
@ -0,0 +1,349 @@
|
||||
'use client'
|
||||
import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
|
||||
import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
|
||||
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
|
||||
import { isEqual } from 'lodash-es'
|
||||
import { useMemo, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
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 { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
|
||||
import { useUpdateTriggerSubscription, useVerifyTriggerSubscription } from '@/service/use-triggers'
|
||||
import { parsePluginErrorMessage } from '@/utils/error-parser'
|
||||
import { ReadmeShowType } from '../../../readme-panel/store'
|
||||
import { usePluginStore } from '../../store'
|
||||
import { useSubscriptionList } from '../use-subscription-list'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void
|
||||
subscription: TriggerSubscription
|
||||
pluginDetail?: PluginDetail
|
||||
}
|
||||
|
||||
enum EditStep {
|
||||
EditCredentials = 'edit_credentials',
|
||||
EditConfiguration = 'edit_configuration',
|
||||
}
|
||||
|
||||
const normalizeFormType = (type: string): 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
|
||||
case 'select':
|
||||
return FormTypeEnum.select
|
||||
default:
|
||||
if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
|
||||
return type as FormTypeEnum
|
||||
return FormTypeEnum.textInput
|
||||
}
|
||||
}
|
||||
|
||||
const HIDDEN_SECRET_VALUE = '[__HIDDEN__]'
|
||||
|
||||
// Check if all credential values are hidden (meaning nothing was changed)
|
||||
const areAllCredentialsHidden = (credentials: Record<string, unknown>): boolean => {
|
||||
return Object.values(credentials).every(value => value === HIDDEN_SECRET_VALUE)
|
||||
}
|
||||
|
||||
const StatusStep = ({ isActive, text, onClick, clickable }: {
|
||||
isActive: boolean
|
||||
text: string
|
||||
onClick?: () => void
|
||||
clickable?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
|
||||
? 'text-state-accent-solid'
|
||||
: 'text-text-tertiary'} ${clickable ? 'cursor-pointer hover:text-text-secondary' : ''}`}
|
||||
onClick={clickable ? onClick : undefined}
|
||||
>
|
||||
{isActive && (
|
||||
<div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
|
||||
)}
|
||||
{text}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MultiSteps = ({ currentStep, onStepClick }: { currentStep: EditStep, onStepClick?: (step: EditStep) => void }) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="mb-6 flex w-1/3 items-center gap-2">
|
||||
<StatusStep
|
||||
isActive={currentStep === EditStep.EditCredentials}
|
||||
text={t('pluginTrigger.modal.steps.verify')}
|
||||
onClick={() => onStepClick?.(EditStep.EditCredentials)}
|
||||
clickable={currentStep === EditStep.EditConfiguration}
|
||||
/>
|
||||
<div className="h-px w-3 shrink-0 bg-divider-deep"></div>
|
||||
<StatusStep
|
||||
isActive={currentStep === EditStep.EditConfiguration}
|
||||
text={t('pluginTrigger.modal.steps.configuration')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const ApiKeyEditModal = ({ onClose, subscription, pluginDetail }: Props) => {
|
||||
const { t } = useTranslation()
|
||||
const detail = usePluginStore(state => state.detail)
|
||||
const { refetch } = useSubscriptionList()
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<EditStep>(EditStep.EditCredentials)
|
||||
const [verifiedCredentials, setVerifiedCredentials] = useState<Record<string, unknown> | null>(null)
|
||||
|
||||
const { mutate: updateSubscription, isPending: isUpdating } = useUpdateTriggerSubscription()
|
||||
const { mutate: verifyCredentials, isPending: isVerifying } = useVerifyTriggerSubscription()
|
||||
|
||||
const parametersSchema = useMemo<ParametersSchema[]>(
|
||||
() => detail?.declaration?.trigger?.subscription_constructor?.parameters || [],
|
||||
[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])
|
||||
|
||||
const basicFormRef = useRef<FormRefObject>(null)
|
||||
const parametersFormRef = useRef<FormRefObject>(null)
|
||||
const credentialsFormRef = useRef<FormRefObject>(null)
|
||||
|
||||
const handleVerifyCredentials = () => {
|
||||
const credentialsFormValues = credentialsFormRef.current?.getFormValues({
|
||||
needTransformWhenSecretFieldIsPristine: true,
|
||||
}) || { values: {}, isCheckValidated: false }
|
||||
|
||||
if (!credentialsFormValues.isCheckValidated)
|
||||
return
|
||||
|
||||
const credentials = credentialsFormValues.values
|
||||
|
||||
verifyCredentials(
|
||||
{
|
||||
provider: subscription.provider,
|
||||
subscriptionId: subscription.id,
|
||||
credentials,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('pluginTrigger.modal.apiKey.verify.success'),
|
||||
})
|
||||
// Only save credentials if any field was modified (not all hidden)
|
||||
setVerifiedCredentials(areAllCredentialsHidden(credentials) ? null : credentials)
|
||||
setCurrentStep(EditStep.EditConfiguration)
|
||||
},
|
||||
onError: async (error: unknown) => {
|
||||
const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.modal.apiKey.verify.error')
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: errorMessage,
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const handleUpdate = () => {
|
||||
const basicFormValues = basicFormRef.current?.getFormValues({})
|
||||
if (!basicFormValues?.isCheckValidated)
|
||||
return
|
||||
|
||||
const name = basicFormValues.values.subscription_name as string
|
||||
|
||||
let parameters: Record<string, unknown> | undefined
|
||||
|
||||
if (parametersSchema.length > 0) {
|
||||
const paramsFormValues = parametersFormRef.current?.getFormValues({
|
||||
needTransformWhenSecretFieldIsPristine: true,
|
||||
})
|
||||
if (!paramsFormValues?.isCheckValidated)
|
||||
return
|
||||
|
||||
// Only send parameters if changed
|
||||
const hasChanged = !isEqual(paramsFormValues.values, subscription.parameters || {})
|
||||
parameters = hasChanged ? paramsFormValues.values : undefined
|
||||
}
|
||||
|
||||
updateSubscription(
|
||||
{
|
||||
subscriptionId: subscription.id,
|
||||
name,
|
||||
parameters,
|
||||
credentials: verifiedCredentials || undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('pluginTrigger.subscription.list.item.actions.edit.success'),
|
||||
})
|
||||
refetch?.()
|
||||
onClose()
|
||||
},
|
||||
onError: async (error: unknown) => {
|
||||
const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.subscription.list.item.actions.edit.error')
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: errorMessage,
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (currentStep === EditStep.EditCredentials)
|
||||
handleVerifyCredentials()
|
||||
else
|
||||
handleUpdate()
|
||||
}
|
||||
|
||||
const basicFormSchemas: FormSchema[] = useMemo(() => [
|
||||
{
|
||||
name: 'subscription_name',
|
||||
label: t('pluginTrigger.modal.form.subscriptionName.label'),
|
||||
placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: true,
|
||||
default: subscription.name,
|
||||
},
|
||||
{
|
||||
name: 'callback_url',
|
||||
label: t('pluginTrigger.modal.form.callbackUrl.label'),
|
||||
placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: false,
|
||||
default: subscription.endpoint || '',
|
||||
disabled: true,
|
||||
tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
|
||||
showCopy: true,
|
||||
},
|
||||
], [t, subscription.name, subscription.endpoint])
|
||||
|
||||
const credentialsFormSchemas: FormSchema[] = useMemo(() => {
|
||||
return apiKeyCredentialsSchema.map(schema => ({
|
||||
...schema,
|
||||
type: normalizeFormType(schema.type as string),
|
||||
tooltip: schema.help,
|
||||
default: subscription.credentials?.[schema.name] || schema.default,
|
||||
}))
|
||||
}, [apiKeyCredentialsSchema, subscription.credentials])
|
||||
|
||||
const parametersFormSchemas: FormSchema[] = useMemo(() => {
|
||||
return parametersSchema.map((schema: ParametersSchema) => {
|
||||
const normalizedType = normalizeFormType(schema.type as string)
|
||||
return {
|
||||
...schema,
|
||||
type: normalizedType,
|
||||
tooltip: schema.description,
|
||||
default: subscription.parameters?.[schema.name] || schema.default,
|
||||
dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect
|
||||
? {
|
||||
plugin_id: detail?.plugin_id || '',
|
||||
provider: detail?.provider || '',
|
||||
action: 'provider',
|
||||
parameter: schema.name,
|
||||
credential_id: subscription.id,
|
||||
credentials: verifiedCredentials || undefined,
|
||||
}
|
||||
: undefined,
|
||||
fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
|
||||
labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
|
||||
}
|
||||
})
|
||||
}, [parametersSchema, subscription.parameters, subscription.id, detail?.plugin_id, detail?.provider, verifiedCredentials])
|
||||
|
||||
const getConfirmButtonText = () => {
|
||||
if (currentStep === EditStep.EditCredentials)
|
||||
return isVerifying ? t('pluginTrigger.modal.common.verifying') : t('pluginTrigger.modal.common.verify')
|
||||
|
||||
return isUpdating ? t('common.operation.saving') : t('common.operation.save')
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
setCurrentStep(EditStep.EditCredentials)
|
||||
setVerifiedCredentials(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('pluginTrigger.subscription.list.item.actions.edit.title')}
|
||||
confirmButtonText={getConfirmButtonText()}
|
||||
onClose={onClose}
|
||||
onCancel={onClose}
|
||||
onConfirm={handleConfirm}
|
||||
disabled={isUpdating || isVerifying}
|
||||
showExtraButton={currentStep === EditStep.EditConfiguration}
|
||||
extraButtonText={t('pluginTrigger.modal.common.back')}
|
||||
extraButtonVariant="secondary"
|
||||
onExtraButtonClick={handleBack}
|
||||
clickOutsideNotClose
|
||||
wrapperClassName="!z-[101]"
|
||||
bottomSlot={currentStep === EditStep.EditCredentials ? <EncryptedBottom /> : null}
|
||||
>
|
||||
{pluginDetail && (
|
||||
<ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
|
||||
)}
|
||||
|
||||
{/* Multi-step indicator */}
|
||||
<MultiSteps currentStep={currentStep} onStepClick={handleBack} />
|
||||
|
||||
{/* Step 1: Edit Credentials */}
|
||||
{currentStep === EditStep.EditCredentials && (
|
||||
<div className="mb-4">
|
||||
{credentialsFormSchemas.length > 0 && (
|
||||
<BaseForm
|
||||
formSchemas={credentialsFormSchemas}
|
||||
ref={credentialsFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4"
|
||||
preventDefaultSubmit={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Edit Configuration */}
|
||||
{currentStep === EditStep.EditConfiguration && (
|
||||
<div className="max-h-[70vh]">
|
||||
{/* Basic form: subscription name and callback URL */}
|
||||
<BaseForm
|
||||
formSchemas={basicFormSchemas}
|
||||
ref={basicFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4 mb-4"
|
||||
/>
|
||||
|
||||
{/* Parameters */}
|
||||
{parametersFormSchemas.length > 0 && (
|
||||
<BaseForm
|
||||
formSchemas={parametersFormSchemas}
|
||||
ref={parametersFormRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
'use client'
|
||||
import type { PluginDetail } from '@/app/components/plugins/types'
|
||||
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
|
||||
import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
|
||||
import { ApiKeyEditModal } from './apikey-edit-modal'
|
||||
import { ManualEditModal } from './manual-edit-modal'
|
||||
import { OAuthEditModal } from './oauth-edit-modal'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void
|
||||
subscription: TriggerSubscription
|
||||
pluginDetail?: PluginDetail
|
||||
}
|
||||
|
||||
export const EditModal = ({ onClose, subscription, pluginDetail }: Props) => {
|
||||
const credentialType = subscription.credential_type
|
||||
|
||||
switch (credentialType) {
|
||||
case TriggerCredentialTypeEnum.Unauthorized:
|
||||
return <ManualEditModal onClose={onClose} subscription={subscription} pluginDetail={pluginDetail} />
|
||||
case TriggerCredentialTypeEnum.Oauth2:
|
||||
return <OAuthEditModal onClose={onClose} subscription={subscription} pluginDetail={pluginDetail} />
|
||||
case TriggerCredentialTypeEnum.ApiKey:
|
||||
return <ApiKeyEditModal onClose={onClose} subscription={subscription} pluginDetail={pluginDetail} />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,164 @@
|
||||
'use client'
|
||||
import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
|
||||
import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
|
||||
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
|
||||
import { isEqual } from 'lodash-es'
|
||||
import { useMemo, useRef } 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 Modal from '@/app/components/base/modal/modal'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
|
||||
import { useUpdateTriggerSubscription } from '@/service/use-triggers'
|
||||
import { ReadmeShowType } from '../../../readme-panel/store'
|
||||
import { usePluginStore } from '../../store'
|
||||
import { useSubscriptionList } from '../use-subscription-list'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void
|
||||
subscription: TriggerSubscription
|
||||
pluginDetail?: PluginDetail
|
||||
}
|
||||
|
||||
const normalizeFormType = (type: string): 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
|
||||
case 'select':
|
||||
return FormTypeEnum.select
|
||||
default:
|
||||
if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
|
||||
return type as FormTypeEnum
|
||||
return FormTypeEnum.textInput
|
||||
}
|
||||
}
|
||||
|
||||
export const ManualEditModal = ({ onClose, subscription, pluginDetail }: Props) => {
|
||||
const { t } = useTranslation()
|
||||
const detail = usePluginStore(state => state.detail)
|
||||
const { refetch } = useSubscriptionList()
|
||||
|
||||
const { mutate: updateSubscription, isPending: isUpdating } = useUpdateTriggerSubscription()
|
||||
|
||||
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 propertiesSchema = useMemo<ParametersSchema[]>(
|
||||
() => detail?.declaration?.trigger?.subscription_schema || [],
|
||||
[detail?.declaration?.trigger?.subscription_schema],
|
||||
)
|
||||
|
||||
const formRef = useRef<FormRefObject>(null)
|
||||
|
||||
const handleConfirm = () => {
|
||||
const formValues = formRef.current?.getFormValues({
|
||||
needTransformWhenSecretFieldIsPristine: true,
|
||||
})
|
||||
if (!formValues?.isCheckValidated)
|
||||
return
|
||||
|
||||
const name = formValues.values.subscription_name as string
|
||||
|
||||
// Extract properties (exclude subscription_name and callback_url)
|
||||
const newProperties = { ...formValues.values }
|
||||
delete newProperties.subscription_name
|
||||
delete newProperties.callback_url
|
||||
|
||||
// Only send properties if changed
|
||||
const hasChanged = !isEqual(newProperties, subscription.properties || {})
|
||||
const properties = hasChanged ? newProperties : undefined
|
||||
|
||||
updateSubscription(
|
||||
{
|
||||
subscriptionId: subscription.id,
|
||||
name,
|
||||
properties,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('pluginTrigger.subscription.list.item.actions.edit.success'),
|
||||
})
|
||||
refetch?.()
|
||||
onClose()
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: getErrorMessage(error, t('pluginTrigger.subscription.list.item.actions.edit.error')),
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const formSchemas: FormSchema[] = useMemo(() => [
|
||||
{
|
||||
name: 'subscription_name',
|
||||
label: t('pluginTrigger.modal.form.subscriptionName.label'),
|
||||
placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: true,
|
||||
default: subscription.name,
|
||||
},
|
||||
{
|
||||
name: 'callback_url',
|
||||
label: t('pluginTrigger.modal.form.callbackUrl.label'),
|
||||
placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: false,
|
||||
default: subscription.endpoint || '',
|
||||
disabled: true,
|
||||
tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
|
||||
showCopy: true,
|
||||
},
|
||||
...propertiesSchema.map((schema: ParametersSchema) => ({
|
||||
...schema,
|
||||
type: normalizeFormType(schema.type as string),
|
||||
tooltip: schema.description,
|
||||
default: subscription.properties?.[schema.name] || schema.default,
|
||||
})),
|
||||
], [t, subscription.name, subscription.endpoint, subscription.properties, propertiesSchema])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('pluginTrigger.subscription.list.item.actions.edit.title')}
|
||||
confirmButtonText={isUpdating ? t('common.operation.saving') : t('common.operation.save')}
|
||||
onClose={onClose}
|
||||
onCancel={onClose}
|
||||
onConfirm={handleConfirm}
|
||||
disabled={isUpdating}
|
||||
clickOutsideNotClose
|
||||
wrapperClassName="!z-[101]"
|
||||
>
|
||||
{pluginDetail && (
|
||||
<ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
|
||||
)}
|
||||
<BaseForm
|
||||
formSchemas={formSchemas}
|
||||
ref={formRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4"
|
||||
/>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,178 @@
|
||||
'use client'
|
||||
import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
|
||||
import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
|
||||
import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
|
||||
import { isEqual } from 'lodash-es'
|
||||
import { useMemo, useRef } 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 Modal from '@/app/components/base/modal/modal'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
|
||||
import { useUpdateTriggerSubscription } from '@/service/use-triggers'
|
||||
import { ReadmeShowType } from '../../../readme-panel/store'
|
||||
import { usePluginStore } from '../../store'
|
||||
import { useSubscriptionList } from '../use-subscription-list'
|
||||
|
||||
type Props = {
|
||||
onClose: () => void
|
||||
subscription: TriggerSubscription
|
||||
pluginDetail?: PluginDetail
|
||||
}
|
||||
|
||||
const normalizeFormType = (type: string): 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
|
||||
case 'select':
|
||||
return FormTypeEnum.select
|
||||
default:
|
||||
if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
|
||||
return type as FormTypeEnum
|
||||
return FormTypeEnum.textInput
|
||||
}
|
||||
}
|
||||
|
||||
export const OAuthEditModal = ({ onClose, subscription, pluginDetail }: Props) => {
|
||||
const { t } = useTranslation()
|
||||
const detail = usePluginStore(state => state.detail)
|
||||
const { refetch } = useSubscriptionList()
|
||||
|
||||
const { mutate: updateSubscription, isPending: isUpdating } = useUpdateTriggerSubscription()
|
||||
|
||||
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 parametersSchema = useMemo<ParametersSchema[]>(
|
||||
() => detail?.declaration?.trigger?.subscription_constructor?.parameters || [],
|
||||
[detail?.declaration?.trigger?.subscription_constructor?.parameters],
|
||||
)
|
||||
|
||||
const formRef = useRef<FormRefObject>(null)
|
||||
|
||||
const handleConfirm = () => {
|
||||
const formValues = formRef.current?.getFormValues({
|
||||
needTransformWhenSecretFieldIsPristine: true,
|
||||
})
|
||||
if (!formValues?.isCheckValidated)
|
||||
return
|
||||
|
||||
const name = formValues.values.subscription_name as string
|
||||
|
||||
// Extract parameters (exclude subscription_name and callback_url)
|
||||
const newParameters = { ...formValues.values }
|
||||
delete newParameters.subscription_name
|
||||
delete newParameters.callback_url
|
||||
|
||||
// Only send parameters if changed
|
||||
const hasChanged = !isEqual(newParameters, subscription.parameters || {})
|
||||
const parameters = hasChanged ? newParameters : undefined
|
||||
|
||||
updateSubscription(
|
||||
{
|
||||
subscriptionId: subscription.id,
|
||||
name,
|
||||
parameters,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('pluginTrigger.subscription.list.item.actions.edit.success'),
|
||||
})
|
||||
refetch?.()
|
||||
onClose()
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: getErrorMessage(error, t('pluginTrigger.subscription.list.item.actions.edit.error')),
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const formSchemas: FormSchema[] = useMemo(() => [
|
||||
{
|
||||
name: 'subscription_name',
|
||||
label: t('pluginTrigger.modal.form.subscriptionName.label'),
|
||||
placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: true,
|
||||
default: subscription.name,
|
||||
},
|
||||
{
|
||||
name: 'callback_url',
|
||||
label: t('pluginTrigger.modal.form.callbackUrl.label'),
|
||||
placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
|
||||
type: FormTypeEnum.textInput,
|
||||
required: false,
|
||||
default: subscription.endpoint || '',
|
||||
disabled: true,
|
||||
tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
|
||||
showCopy: true,
|
||||
},
|
||||
...parametersSchema.map((schema: ParametersSchema) => {
|
||||
const normalizedType = normalizeFormType(schema.type as string)
|
||||
return {
|
||||
...schema,
|
||||
type: normalizedType,
|
||||
tooltip: schema.description,
|
||||
default: subscription.parameters?.[schema.name] || schema.default,
|
||||
dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect
|
||||
? {
|
||||
plugin_id: detail?.plugin_id || '',
|
||||
provider: detail?.provider || '',
|
||||
action: 'provider',
|
||||
parameter: schema.name,
|
||||
credential_id: subscription.id,
|
||||
}
|
||||
: undefined,
|
||||
fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
|
||||
labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
|
||||
}
|
||||
}),
|
||||
], [t, subscription.name, subscription.endpoint, subscription.parameters, subscription.id, parametersSchema, detail?.plugin_id, detail?.provider])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('pluginTrigger.subscription.list.item.actions.edit.title')}
|
||||
confirmButtonText={isUpdating ? t('common.operation.saving') : t('common.operation.save')}
|
||||
onClose={onClose}
|
||||
onCancel={onClose}
|
||||
onConfirm={handleConfirm}
|
||||
disabled={isUpdating}
|
||||
clickOutsideNotClose
|
||||
wrapperClassName="!z-[101]"
|
||||
>
|
||||
{pluginDetail && (
|
||||
<ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
|
||||
)}
|
||||
<BaseForm
|
||||
formSchemas={formSchemas}
|
||||
ref={formRef}
|
||||
labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
|
||||
formClassName="space-y-4"
|
||||
/>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user