feat: version tag (#14949)

web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx

@@ -0,0 +1,42 @@
+import React, { type FC } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { VersionHistory } from '@/types/workflow'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+type DeleteConfirmModalProps = {
+  isOpen: boolean
+  versionInfo: VersionHistory
+  onClose: () => void
+  onDelete: (id: string) => void
+}
+
+const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
+  isOpen,
+  versionInfo,
+  onClose,
+  onDelete,
+}) => {
+  const { t } = useTranslation()
+
+  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
+    <div className='flex flex-col gap-y-2 p-6 pb-4 '>
+      <div className='text-text-primary title-2xl-semi-bold'>
+        {`${t('common.operation.delete')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
+      </div>
+      <p className='text-text-secondary system-md-regular'>
+        {t('workflow.versionHistory.deletionTip')}
+      </p>
+    </div>
+    <div className='flex items-center justify-end gap-x-2 p-6'>
+      <Button onClick={onClose}>
+        {t('common.operation.cancel')}
+      </Button>
+      <Button variant='warning' onClick={onDelete.bind(null, versionInfo.id)}>
+        {t('common.operation.delete')}
+      </Button>
+    </div>
+  </Modal>
+}
+
+export default DeleteConfirmModal