mirror of https://github.com/langgenius/dify.git
96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import { useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Input from '@/app/components/base/input'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogActions,
|
|
AlertDialogCancelButton,
|
|
AlertDialogConfirmButton,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogTitle,
|
|
} from '@/app/components/base/ui/alert-dialog'
|
|
import { toast } from '@/app/components/base/ui/toast'
|
|
import { useDeleteTriggerSubscription } from '@/service/use-triggers'
|
|
import { useSubscriptionList } from './use-subscription-list'
|
|
|
|
type Props = {
|
|
onClose: (deleted: boolean) => void
|
|
isShow: boolean
|
|
currentId: string
|
|
currentName: string
|
|
workflowsInUse: number
|
|
}
|
|
|
|
const tPrefix = 'subscription.list.item.actions.deleteConfirm'
|
|
|
|
export const DeleteConfirm = (props: Props) => {
|
|
const { onClose, isShow, currentId, currentName, workflowsInUse } = props
|
|
const { refetch } = useSubscriptionList()
|
|
const { mutate: deleteSubscription, isPending: isDeleting } = useDeleteTriggerSubscription()
|
|
const { t } = useTranslation()
|
|
const [inputName, setInputName] = useState('')
|
|
|
|
const handleOpenChange = (open: boolean) => {
|
|
if (isDeleting)
|
|
return
|
|
|
|
if (!open)
|
|
onClose(false)
|
|
}
|
|
|
|
const onConfirm = () => {
|
|
if (workflowsInUse > 0 && inputName !== currentName) {
|
|
toast.error(t(`${tPrefix}.confirmInputWarning`, { ns: 'pluginTrigger' }))
|
|
return
|
|
}
|
|
deleteSubscription(currentId, {
|
|
onSuccess: () => {
|
|
toast.success(t(`${tPrefix}.success`, { ns: 'pluginTrigger', name: currentName }))
|
|
refetch?.()
|
|
onClose(true)
|
|
},
|
|
onError: (error: unknown) => {
|
|
toast.error(error instanceof Error ? error.message : t(`${tPrefix}.error`, { ns: 'pluginTrigger', name: currentName }))
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<AlertDialog open={isShow} onOpenChange={handleOpenChange}>
|
|
<AlertDialogContent backdropProps={{ forceRender: true }}>
|
|
<div className="flex flex-col gap-2 px-6 pb-4 pt-6">
|
|
<AlertDialogTitle title={t(`${tPrefix}.title`, { ns: 'pluginTrigger', name: currentName })} className="w-full truncate text-text-primary title-2xl-semi-bold">
|
|
{t(`${tPrefix}.title`, { ns: 'pluginTrigger', name: currentName })}
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription className="w-full whitespace-pre-wrap break-words text-text-tertiary system-md-regular">
|
|
{workflowsInUse > 0
|
|
? t(`${tPrefix}.contentWithApps`, { ns: 'pluginTrigger', count: workflowsInUse })
|
|
: t(`${tPrefix}.content`, { ns: 'pluginTrigger' })}
|
|
</AlertDialogDescription>
|
|
{workflowsInUse > 0 && (
|
|
<div className="mt-6">
|
|
<div className="mb-2 text-text-secondary system-sm-medium">
|
|
{t(`${tPrefix}.confirmInputTip`, { ns: 'pluginTrigger', name: currentName })}
|
|
</div>
|
|
<Input
|
|
value={inputName}
|
|
onChange={e => setInputName(e.target.value)}
|
|
placeholder={t(`${tPrefix}.confirmInputPlaceholder`, { ns: 'pluginTrigger', name: currentName })}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<AlertDialogActions>
|
|
<AlertDialogCancelButton disabled={isDeleting}>
|
|
{t('operation.cancel', { ns: 'common' })}
|
|
</AlertDialogCancelButton>
|
|
<AlertDialogConfirmButton loading={isDeleting} disabled={isDeleting} onClick={onConfirm}>
|
|
{t(`${tPrefix}.confirm`, { ns: 'pluginTrigger' })}
|
|
</AlertDialogConfirmButton>
|
|
</AlertDialogActions>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|