mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-27 10:14:06 +00:00
fix: open target panel when toggling Docked Job History (#9215)
## Summary Make the Docked Job History toggle deterministic so it opens the expected UI target in both directions. ## Changes - Update `JobHistoryActionsMenu` toggle behavior: - When currently docked (`Comfy.Queue.QPOV2=true`), disable docked mode and explicitly open floating QPO (`Comfy.Queue.History.Expanded=true`) - When currently floating (`Comfy.Queue.QPOV2=false`), enable docked mode and open the `job-history` sidebar tab - Add/adjust unit tests in `QueueOverlayHeader.test.ts` to verify both toggle directions and target panel behavior ## Testing - `pnpm exec eslint src/components/queue/JobHistoryActionsMenu.vue src/components/queue/QueueOverlayHeader.test.ts` - `pnpm typecheck` - `pnpm test:unit -- src/components/queue/QueueOverlayHeader.test.ts` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9215-fix-open-target-panel-when-toggling-Docked-Job-History-3126d73d3650810eb409ff38e3a521f3) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -79,6 +79,7 @@ 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
|
||||
@@ -86,6 +87,7 @@ const emit = defineEmits<{
|
||||
|
||||
const { t } = useI18n()
|
||||
const settingStore = useSettingStore()
|
||||
const sidebarTabStore = useSidebarTabStore()
|
||||
|
||||
const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
|
||||
const isQueuePanelV2Enabled = computed(() =>
|
||||
@@ -99,6 +101,13 @@ const onClearHistoryFromMenu = (close: () => void) => {
|
||||
}
|
||||
|
||||
const onToggleDockedJobHistory = async () => {
|
||||
await settingStore.set('Comfy.Queue.QPOV2', !isQueuePanelV2Enabled.value)
|
||||
if (isQueuePanelV2Enabled.value) {
|
||||
await settingStore.set('Comfy.Queue.QPOV2', false)
|
||||
await settingStore.set('Comfy.Queue.History.Expanded', true)
|
||||
return
|
||||
}
|
||||
|
||||
await settingStore.set('Comfy.Queue.QPOV2', true)
|
||||
sidebarTabStore.activeSidebarTabId = 'job-history'
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -23,10 +23,13 @@ vi.mock('@/components/ui/Popover.vue', () => {
|
||||
return { default: PopoverStub }
|
||||
})
|
||||
|
||||
const mockGetSetting = vi.fn((key: string) =>
|
||||
const mockGetSetting = vi.fn<(key: string) => boolean | undefined>((key) =>
|
||||
key === 'Comfy.Queue.QPOV2' ? true : undefined
|
||||
)
|
||||
const mockSetSetting = vi.fn()
|
||||
const mockSidebarTabStore = {
|
||||
activeSidebarTabId: null as string | null
|
||||
}
|
||||
|
||||
vi.mock('@/platform/settings/settingStore', () => ({
|
||||
useSettingStore: () => ({
|
||||
@@ -35,6 +38,10 @@ vi.mock('@/platform/settings/settingStore', () => ({
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/stores/workspace/sidebarTabStore', () => ({
|
||||
useSidebarTabStore: () => mockSidebarTabStore
|
||||
}))
|
||||
|
||||
import QueueOverlayHeader from './QueueOverlayHeader.vue'
|
||||
import * as tooltipConfig from '@/composables/useTooltipConfig'
|
||||
|
||||
@@ -81,6 +88,10 @@ describe('QueueOverlayHeader', () => {
|
||||
beforeEach(() => {
|
||||
popoverCloseSpy.mockClear()
|
||||
mockSetSetting.mockClear()
|
||||
mockSidebarTabStore.activeSidebarTabId = null
|
||||
mockGetSetting.mockImplementation((key: string) =>
|
||||
key === 'Comfy.Queue.QPOV2' ? true : undefined
|
||||
)
|
||||
})
|
||||
|
||||
it('renders header title', () => {
|
||||
@@ -125,7 +136,32 @@ describe('QueueOverlayHeader', () => {
|
||||
expect(wrapper.emitted('clearHistory')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('toggles docked job history setting from the menu', async () => {
|
||||
it('opens floating queue progress overlay when disabling from the menu', async () => {
|
||||
const wrapper = mountHeader()
|
||||
|
||||
const dockedJobHistoryButton = wrapper.get(
|
||||
'[data-testid="docked-job-history-action"]'
|
||||
)
|
||||
await dockedJobHistoryButton.trigger('click')
|
||||
|
||||
expect(mockSetSetting).toHaveBeenCalledTimes(2)
|
||||
expect(mockSetSetting).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
'Comfy.Queue.QPOV2',
|
||||
false
|
||||
)
|
||||
expect(mockSetSetting).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
'Comfy.Queue.History.Expanded',
|
||||
true
|
||||
)
|
||||
expect(mockSidebarTabStore.activeSidebarTabId).toBe(null)
|
||||
})
|
||||
|
||||
it('opens docked job history sidebar when enabling from the menu', async () => {
|
||||
mockGetSetting.mockImplementation((key: string) =>
|
||||
key === 'Comfy.Queue.QPOV2' ? false : undefined
|
||||
)
|
||||
const wrapper = mountHeader()
|
||||
|
||||
const dockedJobHistoryButton = wrapper.get(
|
||||
@@ -134,6 +170,7 @@ describe('QueueOverlayHeader', () => {
|
||||
await dockedJobHistoryButton.trigger('click')
|
||||
|
||||
expect(mockSetSetting).toHaveBeenCalledTimes(1)
|
||||
expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', false)
|
||||
expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', true)
|
||||
expect(mockSidebarTabStore.activeSidebarTabId).toBe('job-history')
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user