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> <template>
<IconTextButton <Button
v-tooltip.top="$t('manager.tryUpdateTooltip')" v-tooltip.top="$t('manager.tryUpdateTooltip')"
v-bind="$attrs" variant="textonly"
type="transparent" :size
:label="computedLabel"
:border="true"
:size="size"
:disabled="isUpdating" :disabled="isUpdating"
@click="tryUpdate" @click="tryUpdate"
> >
<template v-if="isUpdating" #icon> <DotSpinner
<DotSpinner duration="1s" :size="size === 'sm' ? 12 : 16" /> v-if="isUpdating"
</template> duration="1s"
</IconTextButton> :size="size === 'sm' ? 12 : 16"
/>
<span>{{ isUpdating ? t('g.updating') : t('manager.tryUpdate') }}</span>
</Button>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { ref } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import IconTextButton from '@/components/button/IconTextButton.vue'
import DotSpinner from '@/components/common/DotSpinner.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 type { components } from '@/types/comfyRegistryTypes'
import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore' import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
type NodePack = components['schemas']['Node'] type NodePack = components['schemas']['Node']
const { nodePack, size = 'sm' } = defineProps<{ const { nodePack, size } = defineProps<{
nodePack: NodePack nodePack: NodePack
size?: ButtonSize size?: ButtonVariants['size']
}>() }>()
const { t } = useI18n() const { t } = useI18n()
@@ -56,8 +56,4 @@ async function tryUpdate() {
isUpdating.value = false isUpdating.value = false
} }
} }
const computedLabel = computed(() =>
isUpdating.value ? t('g.updating') : t('manager.tryUpdate')
)
</script> </script>

View File

@@ -23,20 +23,17 @@
v-else-if="isAllInstalled" v-else-if="isAllInstalled"
class="flex w-full justify-center gap-2" class="flex w-full justify-center gap-2"
> >
<IconTextButton <Button
v-if="hasNightlyPacks" v-if="hasNightlyPacks"
v-tooltip.top="$t('manager.tryUpdateTooltip')" v-tooltip.top="$t('manager.tryUpdateTooltip')"
type="transparent" variant="textonly"
:label="updateSelectedLabel"
:border="true"
size="md" size="md"
:disabled="isUpdatingSelected" :disabled="isUpdatingSelected"
@click="updateSelectedNightlyPacks" @click="updateSelectedNightlyPacks"
> >
<template v-if="isUpdatingSelected" #icon> <DotSpinner v-if="isUpdatingSelected" duration="1s" :size="16" />
<DotSpinner duration="1s" :size="16" /> <span>{{ updateSelectedLabel }}</span>
</template> </Button>
</IconTextButton>
<PackUninstallButton size="md" :node-packs="installedPacks" /> <PackUninstallButton size="md" :node-packs="installedPacks" />
</div> </div>
<!-- None installed: Show install button --> <!-- None installed: Show install button -->
@@ -73,8 +70,8 @@ import { useAsyncState } from '@vueuse/core'
import { computed, onUnmounted, provide, ref, toRef } from 'vue' import { computed, onUnmounted, provide, ref, toRef } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import IconTextButton from '@/components/button/IconTextButton.vue'
import DotSpinner from '@/components/common/DotSpinner.vue' import DotSpinner from '@/components/common/DotSpinner.vue'
import Button from '@/components/ui/button/Button.vue'
import { useComfyRegistryStore } from '@/stores/comfyRegistryStore' import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
import type { components } from '@/types/comfyRegistryTypes' import type { components } from '@/types/comfyRegistryTypes'
import PackStatusMessage from '@/workbench/extensions/manager/components/manager/PackStatusMessage.vue' import PackStatusMessage from '@/workbench/extensions/manager/components/manager/PackStatusMessage.vue'