Confirm delete workflow (#1772)

* Add confirm delete workflow prompt

* Add confirm delete workflow setting

* Add delete workflow tests

* Change dialog to modal, set default cancel

* Fix setting version key

* Rename for clarity

* Fix tests

- Move into correct section
- Add confirm control

* Export type: ShowDialogOptions

* Replace workflow overwrite with new dialog

* Add delete workflow confirmation dialog

* Update i18n

* Add item list support to confirmation dialog

* Prevent multiple dialogs for same action

* Add confirm close file when dirty

* Add i18n for overwrite dialog

* Fix regression: confirm dialog setting ignored

* Fix delete last workflow does not open replacement

* Update tests

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -0,0 +1,64 @@
+<template>
+  <section class="prompt-dialog-content flex flex-col gap-6 m-2 mt-4">
+    <span>{{ message }}</span>
+    <ul v-if="itemList?.length" class="pl-4 m-0 flex flex-col gap-2">
+      <li v-for="item of itemList" :key="item">{{ item }}</li>
+    </ul>
+    <div class="flex gap-4 justify-end">
+      <Button
+        :label="$t('cancel')"
+        icon="pi pi-undo"
+        severity="secondary"
+        @click="onCancel"
+        autofocus
+      />
+      <Button
+        v-if="type === 'delete'"
+        :label="$t('delete')"
+        severity="danger"
+        @click="onConfirm"
+        icon="pi pi-trash"
+      />
+      <Button
+        v-else-if="type === 'overwrite'"
+        :label="$t('overwrite')"
+        severity="warn"
+        @click="onConfirm"
+        icon="pi pi-save"
+      />
+      <template v-else>
+        <Button
+          :label="$t('no')"
+          severity="secondary"
+          @click="onDeny"
+          icon="pi pi-times"
+        />
+        <Button :label="$t('save')" @click="onConfirm" icon="pi pi-save" />
+      </template>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const props = defineProps<{
+  message: string
+  type: 'overwrite' | 'delete' | 'dirtyClose'
+  onConfirm: (value?: boolean) => void
+  itemList?: string[]
+}>()
+
+const onCancel = () => useDialogStore().closeDialog()
+
+const onDeny = () => {
+  props.onConfirm(false)
+  useDialogStore().closeDialog()
+}
+
+const onConfirm = () => {
+  props.onConfirm(true)
+  useDialogStore().closeDialog()
+}
+</script>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -123,6 +123,7 @@
       </div>
     </template>
   </SidebarTabTemplate>
+  <ConfirmDialog />
 </template>
 
 <script setup lang="ts">
@@ -150,6 +151,9 @@ import { workflowService } from '@/services/workflowService'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { appendJsonExt } from '@/utils/formatUtil'
 import { buildTree, sortedTree } from '@/utils/treeUtil'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import ConfirmDialog from 'primevue/confirmdialog'
 
 const settingStore = useSettingStore()
 const workflowTabsPosition = computed(() =>
@@ -218,6 +222,9 @@ const openWorkflowsTree = computed(() =>
   buildTree(workflowStore.openWorkflows, (workflow) => [workflow.key])
 )
 
+const confirm = useConfirm()
+const toast = useToast()
+
 const renderTreeNode = (
   node: TreeNode,
   type: WorkflowTreeType
@@ -236,6 +243,7 @@ const renderTreeNode = (
       toggleNodeOnEvent(e, node)
     }
   }
+
   const actions = node.leaf
     ? {
         handleClick,
@@ -252,8 +260,8 @@ const renderTreeNode = (
         },
         handleDelete: workflow.isTemporary
           ? undefined
-          : () => {
-              workflowService.deleteWorkflow(workflow)
+          : async () => {
+              await workflowService.deleteWorkflow(workflow)
             },
         contextMenuItems: (node: TreeExplorerNode<ComfyWorkflow>) => {
           return [