fix(manager): refactor PackTryUpdateButton to use Button component (#7638)

## 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)
This commit is contained in:
Johnpaul Chiwetelu
2025-12-19 06:08:35 +01:00
committed by GitHub
parent 14fdbdf793
commit 7724558e7b
2 changed files with 21 additions and 28 deletions

View File

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

View File

@@ -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'