From 05e00368984fc69e3c215fbd06a9b25bab2fe8ee Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Fri, 11 Apr 2025 09:28:42 +0800
Subject: [PATCH] [Manager] Button to open manager from Missing Nodes dialog
 (#3395)

---
 .../dialog/content/LoadWorkflowWarning.vue    |  11 ++
 .../content/manager/ManagerDialogContent.vue  | 136 ++++++++++--------
 src/services/dialogService.ts                 |   5 +-
 src/types/comfyManagerTypes.ts                |   8 ++
 4 files changed, 102 insertions(+), 58 deletions(-)

diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index 64894f61b..6b0129a83 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -30,6 +30,9 @@
       </div>
     </template>
   </ListBox>
+  <div class="flex justify-end py-3">
+    <Button label="Open Manager" @click="openManager" size="small" outlined />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -38,7 +41,9 @@ import ListBox from 'primevue/listbox'
 import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import { useDialogService } from '@/services/dialogService'
 import type { MissingNodeType } from '@/types/comfy'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 
 const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
@@ -64,6 +69,12 @@ const uniqueNodes = computed(() => {
       return { label: node }
     })
 })
+
+const openManager = () => {
+  useDialogService().showManagerDialog({
+    initialTab: ManagerTab.Missing
+  })
+}
 </script>
 
 <style scoped>
diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/components/dialog/content/manager/ManagerDialogContent.vue
index 1c9cb9f7e..e45920e43 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -113,15 +113,12 @@ import { useRegistrySearch } from '@/composables/useRegistrySearch'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { TabItem } from '@/types/comfyManagerTypes'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
 
-enum ManagerTab {
-  All = 'all',
-  Installed = 'installed',
-  Workflow = 'workflow',
-  Missing = 'missing',
-  UpdateAvailable = 'updateAvailable'
-}
+const { initialTab = ManagerTab.All } = defineProps<{
+  initialTab: ManagerTab
+}>()
 
 const { t } = useI18n()
 const comfyManagerStore = useComfyManagerStore()
@@ -159,7 +156,9 @@ const tabs = ref<TabItem[]>([
     icon: 'pi-sync'
   }
 ])
-const selectedTab = ref<TabItem>(tabs.value[0])
+const selectedTab = ref<TabItem>(
+  tabs.value.find((tab) => tab.id === initialTab) || tabs.value[0]
+)
 
 const {
   searchQuery,
@@ -221,53 +220,68 @@ const isOutdatedPack = (pack: components['schemas']['Node']) => {
 const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
   packs.filter(isOutdatedPack)
 
-watch([isUpdateAvailableTab, installedPacks], () => {
-  if (!isUpdateAvailableTab.value) return
+watch(
+  [isUpdateAvailableTab, installedPacks],
+  () => {
+    if (!isUpdateAvailableTab.value) return
 
-  if (!isEmptySearch.value) {
-    displayPacks.value = filterOutdatedPacks(installedPacks.value)
-  } else if (!installedPacks.value.length) {
-    startFetchInstalled()
-  } else {
-    displayPacks.value = filterOutdatedPacks(installedPacks.value)
-  }
-})
+    if (!isEmptySearch.value) {
+      displayPacks.value = filterOutdatedPacks(installedPacks.value)
+    } else if (!installedPacks.value.length) {
+      startFetchInstalled()
+    } else {
+      displayPacks.value = filterOutdatedPacks(installedPacks.value)
+    }
+  },
+  { immediate: true }
+)
 
-watch([isInstalledTab, installedPacks], () => {
-  if (!isInstalledTab.value) return
+watch(
+  [isInstalledTab, installedPacks],
+  () => {
+    if (!isInstalledTab.value) return
 
-  if (!isEmptySearch.value) {
-    displayPacks.value = filterInstalledPack(searchResults.value)
-  } else if (
-    !installedPacks.value.length &&
-    !installedPacksReady.value &&
-    !isLoadingInstalled.value
-  ) {
-    startFetchInstalled()
-  } else {
-    displayPacks.value = installedPacks.value
-  }
-})
+    if (!isEmptySearch.value) {
+      displayPacks.value = filterInstalledPack(searchResults.value)
+    } else if (
+      !installedPacks.value.length &&
+      !installedPacksReady.value &&
+      !isLoadingInstalled.value
+    ) {
+      startFetchInstalled()
+    } else {
+      displayPacks.value = installedPacks.value
+    }
+  },
+  { immediate: true }
+)
 
-watch([isMissingTab, isWorkflowTab, workflowPacks], () => {
-  if (!isWorkflowTab.value && !isMissingTab.value) return
+watch(
+  [isMissingTab, isWorkflowTab, workflowPacks, installedPacks],
+  () => {
+    if (!isWorkflowTab.value && !isMissingTab.value) return
 
-  if (!isEmptySearch.value) {
-    displayPacks.value = isMissingTab.value
-      ? filterMissingPacks(filterWorkflowPack(searchResults.value))
-      : filterWorkflowPack(searchResults.value)
-  } else if (
-    !workflowPacks.value.length &&
-    !isLoadingWorkflow.value &&
-    !workflowPacksReady.value
-  ) {
-    startFetchWorkflowPacks()
-  } else {
-    displayPacks.value = isMissingTab.value
-      ? filterMissingPacks(workflowPacks.value)
-      : workflowPacks.value
-  }
-})
+    if (!isEmptySearch.value) {
+      displayPacks.value = isMissingTab.value
+        ? filterMissingPacks(filterWorkflowPack(searchResults.value))
+        : filterWorkflowPack(searchResults.value)
+    } else if (
+      !workflowPacks.value.length &&
+      !isLoadingWorkflow.value &&
+      !workflowPacksReady.value
+    ) {
+      startFetchWorkflowPacks()
+      if (isMissingTab.value) {
+        startFetchInstalled()
+      }
+    } else {
+      displayPacks.value = isMissingTab.value
+        ? filterMissingPacks(workflowPacks.value)
+        : workflowPacks.value
+    }
+  },
+  { immediate: true }
+)
 
 watch([isAllTab, searchResults], () => {
   if (!isAllTab.value) return
@@ -277,25 +291,33 @@ watch([isAllTab, searchResults], () => {
 const onResultsChange = () => {
   switch (selectedTab.value?.id) {
     case ManagerTab.Installed:
-      displayPacks.value = filterInstalledPack(searchResults.value)
+      displayPacks.value = isEmptySearch.value
+        ? installedPacks.value
+        : filterInstalledPack(searchResults.value)
       break
     case ManagerTab.Workflow:
-      displayPacks.value = filterWorkflowPack(searchResults.value)
+      displayPacks.value = isEmptySearch.value
+        ? workflowPacks.value
+        : filterWorkflowPack(searchResults.value)
       break
     case ManagerTab.Missing:
-      displayPacks.value = filterMissingPacks(
-        filterWorkflowPack(searchResults.value)
-      )
+      if (!isEmptySearch.value) {
+        displayPacks.value = filterMissingPacks(
+          filterWorkflowPack(searchResults.value)
+        )
+      }
       break
     case ManagerTab.UpdateAvailable:
-      displayPacks.value = filterOutdatedPacks(searchResults.value)
+      displayPacks.value = isEmptySearch.value
+        ? filterOutdatedPacks(installedPacks.value)
+        : filterOutdatedPacks(searchResults.value)
       break
     default:
       displayPacks.value = searchResults.value
   }
 }
 
-watch(searchResults, onResultsChange, { flush: 'pre' })
+watch(searchResults, onResultsChange, { flush: 'post' })
 watch(() => comfyManagerStore.installedPacksIds, onResultsChange)
 
 const isLoading = computed(() => {
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 0b4e655eb..506bfdf7d 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -16,6 +16,7 @@ import TemplateWorkflowsDialogHeader from '@/components/templates/TemplateWorkfl
 import { t } from '@/i18n'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import { type ShowDialogOptions, useDialogStore } from '@/stores/dialogStore'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 
 export type ConfirmationDialogType =
   | 'default'
@@ -117,7 +118,9 @@ export const useDialogService = () => {
   }
 
   function showManagerDialog(
-    props: InstanceType<typeof ManagerDialogContent>['$props'] = {}
+    props: InstanceType<typeof ManagerDialogContent>['$props'] = {
+      initialTab: ManagerTab.All
+    }
   ) {
     dialogStore.showDialog({
       key: 'global-manager',
diff --git a/src/types/comfyManagerTypes.ts b/src/types/comfyManagerTypes.ts
index 9c4de380f..66edc0d05 100644
--- a/src/types/comfyManagerTypes.ts
+++ b/src/types/comfyManagerTypes.ts
@@ -10,6 +10,14 @@ export type PackField = keyof RegistryPack | null
 export const IsInstallingKey: InjectionKey<Ref<boolean>> =
   Symbol('isInstalling')
 
+export enum ManagerTab {
+  All = 'all',
+  Installed = 'installed',
+  Workflow = 'workflow',
+  Missing = 'missing',
+  UpdateAvailable = 'updateAvailable'
+}
+
 export interface TabItem {
   id: string
   label: string