[Manager] Add tab for outdated node packs (has update available) (#3255)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -107,6 +107,7 @@ import RegistrySearchBar from '@/components/dialog/content/manager/registrySearc
 import GridSkeleton from '@/components/dialog/content/manager/skeleton/GridSkeleton.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
 import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
+import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
 import { useRegistrySearch } from '@/composables/useRegistrySearch'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
@@ -118,7 +119,8 @@ enum ManagerTab {
   All = 'all',
   Installed = 'installed',
   Workflow = 'workflow',
-  Missing = 'missing'
+  Missing = 'missing',
+  UpdateAvailable = 'updateAvailable'
 }
 
 const { t } = useI18n()
@@ -150,6 +152,11 @@ const tabs = ref<TabItem[]>([
     id: ManagerTab.Missing,
     label: t('g.missing'),
     icon: 'pi-exclamation-circle'
+  },
+  {
+    id: ManagerTab.UpdateAvailable,
+    label: t('g.updateAvailable'),
+    icon: 'pi-sync'
   }
 ])
 const selectedTab = ref<TabItem>(tabs.value[0])
@@ -191,6 +198,9 @@ const {
 const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
   packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
 
+const isUpdateAvailableTab = computed(
+  () => selectedTab.value?.id === ManagerTab.UpdateAvailable
+)
 const isInstalledTab = computed(
   () => selectedTab.value?.id === ManagerTab.Installed
 )
@@ -202,6 +212,25 @@ const isWorkflowTab = computed(
 )
 const isAllTab = computed(() => selectedTab.value?.id === ManagerTab.All)
 
+const isOutdatedPack = (pack: components['schemas']['Node']) => {
+  const { isUpdateAvailable } = usePackUpdateStatus(pack)
+  return isUpdateAvailable.value === true
+}
+const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
+  packs.filter(isOutdatedPack)
+
+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)
+  }
+})
+
 watch([isInstalledTab, installedPacks], () => {
   if (!isInstalledTab.value) return
 
@@ -248,6 +277,9 @@ const onResultsChange = () => {
         filterWorkflowPack(searchResults.value)
       )
       break
+    case ManagerTab.UpdateAvailable:
+      displayPacks.value = filterOutdatedPacks(searchResults.value)
+      break
     default:
       displayPacks.value = searchResults.value
   }

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -97,10 +97,10 @@ import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
 import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
+import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import { compareVersions, isSemVer } from '@/utils/formatUtil'
 
 const { nodePack, isSelected = false } = defineProps<{
   nodePack: components['schemas']['Node']
@@ -110,8 +110,8 @@ const { nodePack, isSelected = false } = defineProps<{
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
 
-const { isPackInstalled, isPackEnabled, getInstalledPackVersion } =
-  useComfyManagerStore()
+const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
+const { isUpdateAvailable } = usePackUpdateStatus(nodePack)
 
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
 const isDisabled = computed(
@@ -120,20 +120,6 @@ const isDisabled = computed(
 
 whenever(isInstalled, () => (isInstalling.value = false))
 
-const isUpdateAvailable = computed(() => {
-  if (!isInstalled.value) return false
-
-  const latestVersion = nodePack.latest_version?.version
-  if (!latestVersion) return false
-
-  const installedVersion = getInstalledPackVersion(nodePack.id ?? '')
-
-  // Don't attempt to show update available for nightly GitHub packs
-  if (installedVersion && !isSemVer(installedVersion)) return false
-
-  return compareVersions(latestVersion, installedVersion) > 0
-})
-
 // TODO: remove type assertion once comfy_nodes is added to node (pack) info type in backend
 const nodesCount = computed(() => (nodePack as any).comfy_nodes?.length)
 </script>