[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>

src/composables/nodePack/usePackUpdateStatus.ts

@@ -0,0 +1,35 @@
+import { computed } from 'vue'
+
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { components } from '@/types/comfyRegistryTypes'
+import { compareVersions, isSemVer } from '@/utils/formatUtil'
+
+export const usePackUpdateStatus = (
+  nodePack: components['schemas']['Node']
+) => {
+  const { isPackInstalled, getInstalledPackVersion } = useComfyManagerStore()
+
+  const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+  const installedVersion = computed(() =>
+    getInstalledPackVersion(nodePack.id ?? '')
+  )
+  const latestVersion = computed(() => nodePack.latest_version?.version)
+
+  const isNightlyPack = computed(
+    () => !!installedVersion.value && !isSemVer(installedVersion.value)
+  )
+
+  const isUpdateAvailable = computed(() => {
+    if (!isInstalled.value || isNightlyPack.value || !latestVersion.value) {
+      return false
+    }
+    return compareVersions(latestVersion.value, installedVersion.value) > 0
+  })
+
+  return {
+    isUpdateAvailable,
+    isNightlyPack,
+    installedVersion,
+    latestVersion
+  }
+}

src/locales/en/main.json

@@ -105,7 +105,8 @@
     "enabling": "Enabling",
     "disabling": "Disabling",
     "updating": "Updating",
-    "migrate": "Migrate"
+    "migrate": "Migrate",
+    "updateAvailable": "Update Available"
   },
   "manager": {
     "title": "Custom Nodes Manager",

src/locales/es/main.json

@@ -219,6 +219,7 @@
     "systemInfo": "Información del sistema",
     "terminal": "Terminal",
     "update": "Actualizar",
+    "updateAvailable": "Actualización Disponible",
     "updated": "Actualizado",
     "updating": "Actualizando",
     "upload": "Subir",

src/locales/fr/main.json

@@ -219,6 +219,7 @@
     "systemInfo": "Informations système",
     "terminal": "Terminal",
     "update": "Mettre à jour",
+    "updateAvailable": "Mise à jour disponible",
     "updated": "Mis à jour",
     "updating": "Mise à jour",
     "upload": "Téléverser",

src/locales/ja/main.json

@@ -219,6 +219,7 @@
     "systemInfo": "システム情報",
     "terminal": "ターミナル",
     "update": "更新",
+    "updateAvailable": "更新が利用可能",
     "updated": "更新済み",
     "updating": "更新中",
     "upload": "アップロード",

src/locales/ko/main.json

@@ -219,6 +219,7 @@
     "systemInfo": "시스템 정보",
     "terminal": "터미널",
     "update": "업데이트",
+    "updateAvailable": "업데이트 가능",
     "updated": "업데이트 됨",
     "updating": "업데이트 중",
     "upload": "업로드",

src/locales/ru/main.json

@@ -219,6 +219,7 @@
     "systemInfo": "Информация о системе",
     "terminal": "Терминал",
     "update": "Обновить",
+    "updateAvailable": "Доступно обновление",
     "updated": "Обновлено",
     "updating": "Обновление",
     "upload": "Загрузить",

src/locales/zh/main.json

@@ -219,6 +219,7 @@
     "systemInfo": "系统信息",
     "terminal": "终端",
     "update": "更新",
+    "updateAvailable": "有更新可用",
     "updated": "已更新",
     "updating": "更新中",
     "upload": "上传",