From 7724558e7bf07fd0bacf16937786049cb9cd5c0d Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Fri, 19 Dec 2025 06:08:35 +0100
Subject: [PATCH] fix(manager): refactor PackTryUpdateButton to use Button
 component (#7638)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- Refactors `PackTryUpdateButton` to use standard `Button` component
instead of deprecated `IconTextButton`
- Fixes broken import in `InfoPanelMultiItem.vue` (IconTextButton no
longer exists)
- Follows same pattern as `PackUninstallButton` and `PackInstallButton`

## Test plan
- [ ] Verify "Try Update" button appears and functions correctly for
nightly packs in the manager info panel
- [ ] Verify multi-select update button works in InfoPanelMultiItem
- [ ] Verify DotSpinner shows during update operation

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7638-fix-manager-refactor-PackTryUpdateButton-to-use-Button-component-2ce6d73d3650816da271c2c0f442d59e)
by [Unito](https://www.unito.io)
---
 .../manager/button/PackTryUpdateButton.vue    | 34 ++++++++-----------
 .../manager/infoPanel/InfoPanelMultiItem.vue  | 15 ++++----
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/workbench/extensions/manager/components/manager/button/PackTryUpdateButton.vue b/src/workbench/extensions/manager/components/manager/button/PackTryUpdateButton.vue
index 4e21364a2..218aaf35f 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackTryUpdateButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackTryUpdateButton.vue
@@ -1,35 +1,35 @@
 <template>
-  <IconTextButton
+  <Button
     v-tooltip.top="$t('manager.tryUpdateTooltip')"
-    v-bind="$attrs"
-    type="transparent"
-    :label="computedLabel"
-    :border="true"
-    :size="size"
+    variant="textonly"
+    :size
     :disabled="isUpdating"
     @click="tryUpdate"
   >
-    <template v-if="isUpdating" #icon>
-      <DotSpinner duration="1s" :size="size === 'sm' ? 12 : 16" />
-    </template>
-  </IconTextButton>
+    <DotSpinner
+      v-if="isUpdating"
+      duration="1s"
+      :size="size === 'sm' ? 12 : 16"
+    />
+    <span>{{ isUpdating ? t('g.updating') : t('manager.tryUpdate') }}</span>
+  </Button>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconTextButton from '@/components/button/IconTextButton.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
-import type { ButtonSize } from '@/types/buttonTypes'
+import Button from '@/components/ui/button/Button.vue'
+import type { ButtonVariants } from '@/components/ui/button/button.variants'
 import type { components } from '@/types/comfyRegistryTypes'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePack, size = 'sm' } = defineProps<{
+const { nodePack, size } = defineProps<{
   nodePack: NodePack
-  size?: ButtonSize
+  size?: ButtonVariants['size']
 }>()
 
 const { t } = useI18n()
@@ -56,8 +56,4 @@ async function tryUpdate() {
     isUpdating.value = false
   }
 }
-
-const computedLabel = computed(() =>
-  isUpdating.value ? t('g.updating') : t('manager.tryUpdate')
-)
 </script>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
index e75a0208d..6e292dcf6 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
@@ -23,20 +23,17 @@
             v-else-if="isAllInstalled"
             class="flex w-full justify-center gap-2"
           >
-            <IconTextButton
+            <Button
               v-if="hasNightlyPacks"
               v-tooltip.top="$t('manager.tryUpdateTooltip')"
-              type="transparent"
-              :label="updateSelectedLabel"
-              :border="true"
+              variant="textonly"
               size="md"
               :disabled="isUpdatingSelected"
               @click="updateSelectedNightlyPacks"
             >
-              <template v-if="isUpdatingSelected" #icon>
-                <DotSpinner duration="1s" :size="16" />
-              </template>
-            </IconTextButton>
+              <DotSpinner v-if="isUpdatingSelected" duration="1s" :size="16" />
+              <span>{{ updateSelectedLabel }}</span>
+            </Button>
             <PackUninstallButton size="md" :node-packs="installedPacks" />
           </div>
           <!-- None installed: Show install button -->
@@ -73,8 +70,8 @@ import { useAsyncState } from '@vueuse/core'
 import { computed, onUnmounted, provide, ref, toRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconTextButton from '@/components/button/IconTextButton.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { components } from '@/types/comfyRegistryTypes'
 import PackStatusMessage from '@/workbench/extensions/manager/components/manager/PackStatusMessage.vue'