From 6ea021d595142e5e0b1468273ea81c50961749ea Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Thu, 11 Sep 2025 15:19:04 +0900
Subject: [PATCH] feat: Auto-close LoadWorkflowWarning dialog when all missing
 nodes are installed (#5321)

* feat: Auto-close LoadWorkflowWarning dialog when all missing nodes are installed

- Add computed property to check if all missing nodes are installed
- Watch for completion and automatically close dialog with 500ms delay
- Show success toast notification when installation completes
- Add translation key for success message

This improves UX by automatically dismissing the warning dialog once the user has successfully installed all missing nodes through the manager.

* fix: settimeout to nexttick

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: GitHub Action <action@github.com>
---
 .../dialog/content/LoadWorkflowWarning.vue    | 34 ++++++++++++++++++-
 src/locales/en/main.json                      |  1 +
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index 54a006bee..cc159292a 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -53,13 +53,16 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed } from 'vue'
+import { computed, nextTick, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/composables/useManagerState'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import { useToastStore } from '@/stores/toastStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -121,6 +124,35 @@ const openManager = async () => {
     showToastOnLegacyError: true
   })
 }
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+
+// Computed to check if all missing nodes have been installed
+const allMissingNodesInstalled = computed(() => {
+  return (
+    !isLoading.value &&
+    !isInstalling.value &&
+    missingNodePacks.value?.length === 0
+  )
+})
+// Watch for completion and close dialog
+watch(allMissingNodesInstalled, async (allInstalled) => {
+  if (allInstalled) {
+    // Use nextTick to ensure state updates are complete
+    await nextTick()
+
+    dialogStore.closeDialog({ key: 'global-load-workflow-warning' })
+
+    // Show success toast
+    useToastStore().add({
+      severity: 'success',
+      summary: t('g.success'),
+      detail: t('manager.allMissingNodesInstalled'),
+      life: 3000
+    })
+  }
+})
 </script>
 
 <style scoped>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 46b689458..7b1f06b29 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -213,6 +213,7 @@
     "noDescription": "No description available",
     "installSelected": "Install Selected",
     "installAllMissingNodes": "Install All Missing Nodes",
+    "allMissingNodesInstalled": "All missing nodes have been successfully installed",
     "packsSelected": "packs selected",
     "mixedSelectionMessage": "Cannot perform bulk action on mixed selection",
     "notAvailable": "Not Available",