mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 05:32:02 +00:00
7901e14318
## Summary Follow-up to #9215 to keep Docked Job History toggle behavior deterministic even when settings persistence fails. ## Changes - Close the actions popover immediately when toggling Docked Job History. - Use settingStore.setMany(...) when switching from docked to floating mode. - Set sidebarTabStore.activeSidebarTabId = 'job-history' before persisting when switching from floating to docked mode. - Wrap persistence calls in try/catch without rollback so locally-applied UI state remains deterministic. - Expand QueueOverlayHeader tests to cover setMany, popover close behavior, and persistence-failure paths. ## Testing - pnpm test:unit -- src/components/queue/QueueOverlayHeader.test.ts - pnpm typecheck - pnpm exec eslint src/components/queue/JobHistoryActionsMenu.vue src/components/queue/QueueOverlayHeader.test.ts - pnpm lint (fails in this branch due pre-existing stylelint errors in generated apps/desktop-ui/dist/**/*.css files, unrelated to this change) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9265-fix-make-docked-job-history-toggle-persistence-safe-3146d73d3650818f86c4dfdd57669abd) by [Unito](https://www.unito.io)
122 lines
3.9 KiB
Vue
122 lines
3.9 KiB
Vue
<template>
|
|
<div class="flex items-center gap-1">
|
|
<Popover :show-arrow="false">
|
|
<template #button>
|
|
<Button
|
|
v-tooltip.top="moreTooltipConfig"
|
|
variant="textonly"
|
|
size="icon"
|
|
:aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
|
|
>
|
|
<i
|
|
class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
|
|
/>
|
|
</Button>
|
|
</template>
|
|
<template #default="{ close }">
|
|
<div class="flex min-w-[14rem] flex-col items-stretch font-inter">
|
|
<Button
|
|
data-testid="docked-job-history-action"
|
|
class="w-full justify-between text-sm font-light"
|
|
variant="textonly"
|
|
size="sm"
|
|
@click="onToggleDockedJobHistory(close)"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<i
|
|
class="icon-[lucide--panel-left-close] size-4 text-text-secondary"
|
|
/>
|
|
<span>{{
|
|
t('sideToolbar.queueProgressOverlay.dockedJobHistory')
|
|
}}</span>
|
|
</span>
|
|
<i
|
|
v-if="isQueuePanelV2Enabled"
|
|
class="icon-[lucide--check] size-4"
|
|
/>
|
|
</Button>
|
|
<!-- TODO: Bug in assets sidebar panel derives assets from history, so despite this not deleting the assets, it still effectively shows to the user as deleted -->
|
|
<template v-if="showClearHistoryAction">
|
|
<div class="my-1 border-t border-interface-stroke" />
|
|
<Button
|
|
data-testid="clear-history-action"
|
|
class="h-auto min-h-0 w-full items-start justify-start whitespace-normal"
|
|
variant="textonly"
|
|
size="sm"
|
|
@click="onClearHistoryFromMenu(close)"
|
|
>
|
|
<i
|
|
class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
|
|
/>
|
|
<span
|
|
class="flex flex-col items-start break-words text-left leading-tight"
|
|
>
|
|
<span class="text-sm font-light">
|
|
{{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
|
|
</span>
|
|
<span class="text-xs text-text-secondary font-light">
|
|
{{
|
|
t(
|
|
'sideToolbar.queueProgressOverlay.clearHistoryMenuAssetsNote'
|
|
)
|
|
}}
|
|
</span>
|
|
</span>
|
|
</Button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</Popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import Popover from '@/components/ui/Popover.vue'
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { buildTooltipConfig } from '@/composables/useTooltipConfig'
|
|
import { isCloud } from '@/platform/distribution/types'
|
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
|
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'clearHistory'): void
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
const settingStore = useSettingStore()
|
|
const sidebarTabStore = useSidebarTabStore()
|
|
|
|
const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
|
|
const isQueuePanelV2Enabled = computed(() =>
|
|
settingStore.get('Comfy.Queue.QPOV2')
|
|
)
|
|
const showClearHistoryAction = computed(() => !isCloud)
|
|
|
|
const onClearHistoryFromMenu = (close: () => void) => {
|
|
close()
|
|
emit('clearHistory')
|
|
}
|
|
|
|
const onToggleDockedJobHistory = async (close: () => void) => {
|
|
close()
|
|
|
|
try {
|
|
if (isQueuePanelV2Enabled.value) {
|
|
await settingStore.setMany({
|
|
'Comfy.Queue.QPOV2': false,
|
|
'Comfy.Queue.History.Expanded': true
|
|
})
|
|
return
|
|
}
|
|
|
|
sidebarTabStore.activeSidebarTabId = 'job-history'
|
|
await settingStore.set('Comfy.Queue.QPOV2', true)
|
|
} catch {
|
|
return
|
|
}
|
|
}
|
|
</script>
|