feat: delete confirm opt

web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx

@@ -1,28 +1,44 @@
 import Confirm from '@/app/components/base/confirm'
-import { usePluginSubscriptionStore } from './store'
-import { useDeleteTriggerSubscription } from '@/service/use-triggers'
-import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
+import { useDeleteTriggerSubscription } from '@/service/use-triggers'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { usePluginSubscriptionStore } from './store'
 
 type Props = {
   onClose: (deleted: boolean) => void
   isShow: boolean
   currentId: string
   currentName: string
+  workflowsInUse: number
 }
 
+const tPrefix = 'pluginTrigger.subscription.list.item.actions.deleteConfirm'
+
 export const DeleteConfirm = (props: Props) => {
-  const { onClose, isShow, currentId, currentName } = props
+  const { onClose, isShow, currentId, currentName, workflowsInUse } = props
   const { refresh } = usePluginSubscriptionStore()
   const { mutate: deleteSubscription, isPending: isDeleting } = useDeleteTriggerSubscription()
   const { t } = useTranslation()
+  const [inputName, setInputName] = useState('')
 
   const onConfirm = () => {
+    if (workflowsInUse > 0 && inputName !== currentName) {
+      Toast.notify({
+        type: 'error',
+        message: t(`${tPrefix}.confirmInputWarning`),
+        // temporarily
+        className: 'z-[10000001]',
+      })
+      return
+    }
     deleteSubscription(currentId, {
       onSuccess: () => {
         Toast.notify({
           type: 'success',
-          message: t('pluginTrigger.subscription.list.item.actions.deleteConfirm.title'),
+          message: t(`${tPrefix}.title`, { name: currentName }),
+          className: 'z-[10000001]',
         })
         refresh?.()
         onClose(true)
@@ -31,13 +47,24 @@ export const DeleteConfirm = (props: Props) => {
         Toast.notify({
           type: 'error',
           message: error?.message || 'Failed to delete subscription',
+          className: 'z-[10000001]',
         })
       },
     })
   }
   return <Confirm
-    title={t('pluginTrigger.subscription.list.item.actions.deleteConfirm.title')}
-    content={t('pluginTrigger.subscription.list.item.actions.deleteConfirm.content', { name: currentName })}
+    title={t(`${tPrefix}.title`, { name: currentName })}
+    confirmText={t(`${tPrefix}.confirm`)}
+    content={workflowsInUse > 0 ? <>
+      {t(`${tPrefix}.contentWithApps`, { count: workflowsInUse })}
+      <div className='system-sm-medium mb-2 mt-6 text-text-secondary'>{t(`${tPrefix}.confirmInputTip`, { name: currentName })}</div>
+      <Input
+        value={inputName}
+        onChange={e => setInputName(e.target.value)}
+        placeholder={t(`${tPrefix}.confirmInputPlaceholder`, { name: currentName })}
+      />
+    </>
+      : t(`${tPrefix}.content`)}
     isShow={isShow}
     isLoading={isDeleting}
     onConfirm={onConfirm}

web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx

@@ -64,6 +64,7 @@ const SubscriptionCard = ({ data }: Props) => {
           isShow={isShowDeleteModal}
           currentId={data.id}
           currentName={data.name}
+          workflowsInUse={data.workflows_in_use}
         />
       )}
     </>

web/i18n/en-US/plugin-trigger.ts

@@ -27,11 +27,14 @@ const translation = {
         actions: {
           delete: 'Delete',
           deleteConfirm: {
-            title: 'Delete subscription',
-            content: 'Are you sure you want to delete "{{name}}"?',
-            contentWithApps: 'This subscription is being used in {{count}} apps. Are you sure you want to delete "{{name}}"?',
-            confirm: 'Delete',
+            title: 'Delete {{name}}?',
+            content: 'Once deleted, this subscription cannot be recovered. Please confirm.',
+            contentWithApps: 'The current subscription is referenced by {{count}} applications. Deleting it will cause the configured applications to stop receiving subscription events.',
+            confirm: 'Confirm Delete',
             cancel: 'Cancel',
+            confirmInputWarning: 'Please enter the correct name to confirm.',
+            confirmInputPlaceholder: 'Enter "{{name}}" to confirm.',
+            confirmInputTip: 'Please enter “{{name}}” to confirm.',
           },
         },
         status: {

web/i18n/zh-Hans/plugin-trigger.ts

@@ -27,11 +27,14 @@ const translation = {
         actions: {
           delete: '删除',
           deleteConfirm: {
-            title: '删除订阅',
-            content: '确定要删除"{{name}}"吗？',
-            contentWithApps: '该订阅正在被{{count}}个应用使用。确定要删除"{{name}}"吗？',
-            confirm: '删除',
+            title: '删除 {{name}} ？',
+            content: '删除后，该订阅将无法恢复，请确认。',
+            contentWithApps: '该订阅正在被 {{count}} 个应用使用，删除它将导致这些应用停止接收订阅事件。',
+            confirm: '确认删除',
             cancel: '取消',
+            confirmInputWarning: '请输入正确的名称确认。',
+            confirmInputPlaceholder: '输入 "{{name}}" 确认',
+            confirmInputTip: '请输入 “{{name}}” 确认：',
           },
         },
         status: {