mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 03:01:54 +00:00
fix: open assets tab when QPO V2 enabled
This commit is contained in:
@@ -11,7 +11,9 @@ import type {
|
|||||||
JobListItem,
|
JobListItem,
|
||||||
JobStatus
|
JobStatus
|
||||||
} from '@/platform/remote/comfyui/jobs/jobTypes'
|
} from '@/platform/remote/comfyui/jobs/jobTypes'
|
||||||
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||||
import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
|
import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
|
||||||
|
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
|
||||||
import { isElectron } from '@/utils/envUtil'
|
import { isElectron } from '@/utils/envUtil'
|
||||||
|
|
||||||
const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
|
const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
|
||||||
@@ -32,7 +34,7 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
|
|||||||
}))
|
}))
|
||||||
}))
|
}))
|
||||||
|
|
||||||
function createWrapper() {
|
function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
|
||||||
const i18n = createI18n({
|
const i18n = createI18n({
|
||||||
legacy: false,
|
legacy: false,
|
||||||
locale: 'en',
|
locale: 'en',
|
||||||
@@ -51,7 +53,7 @@ function createWrapper() {
|
|||||||
|
|
||||||
return mount(TopMenuSection, {
|
return mount(TopMenuSection, {
|
||||||
global: {
|
global: {
|
||||||
plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
|
plugins: [pinia, i18n],
|
||||||
stubs: {
|
stubs: {
|
||||||
SubgraphBreadcrumb: true,
|
SubgraphBreadcrumb: true,
|
||||||
QueueProgressOverlay: true,
|
QueueProgressOverlay: true,
|
||||||
@@ -134,4 +136,36 @@ describe('TopMenuSection', () => {
|
|||||||
const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
|
const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
|
||||||
expect(queueButton.text()).toContain('3 active')
|
expect(queueButton.text()).toContain('3 active')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('hides queue progress overlay when QPO V2 is enabled', async () => {
|
||||||
|
const pinia = createTestingPinia({ createSpy: vi.fn })
|
||||||
|
const settingStore = useSettingStore(pinia)
|
||||||
|
vi.mocked(settingStore.get).mockImplementation((key) =>
|
||||||
|
key === 'Comfy.Queue.QPOV2' ? true : undefined
|
||||||
|
)
|
||||||
|
const wrapper = createWrapper(pinia)
|
||||||
|
|
||||||
|
await nextTick()
|
||||||
|
|
||||||
|
expect(wrapper.find('[data-testid="queue-overlay-toggle"]').exists()).toBe(
|
||||||
|
true
|
||||||
|
)
|
||||||
|
expect(
|
||||||
|
wrapper.findComponent({ name: 'QueueProgressOverlay' }).exists()
|
||||||
|
).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
|
||||||
|
const pinia = createTestingPinia({ createSpy: vi.fn })
|
||||||
|
const settingStore = useSettingStore(pinia)
|
||||||
|
vi.mocked(settingStore.get).mockImplementation((key) =>
|
||||||
|
key === 'Comfy.Queue.QPOV2' ? true : undefined
|
||||||
|
)
|
||||||
|
const wrapper = createWrapper(pinia)
|
||||||
|
const sidebarTabStore = useSidebarTabStore(pinia)
|
||||||
|
|
||||||
|
await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
|
||||||
|
|
||||||
|
expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -45,7 +45,9 @@
|
|||||||
v-tooltip.bottom="queueHistoryTooltipConfig"
|
v-tooltip.bottom="queueHistoryTooltipConfig"
|
||||||
type="destructive"
|
type="destructive"
|
||||||
size="md"
|
size="md"
|
||||||
:aria-pressed="isQueueOverlayExpanded"
|
:aria-pressed="
|
||||||
|
isQueueProgressOverlayVisible ? isQueueOverlayExpanded : undefined
|
||||||
|
"
|
||||||
class="px-3"
|
class="px-3"
|
||||||
data-testid="queue-overlay-toggle"
|
data-testid="queue-overlay-toggle"
|
||||||
@click="toggleQueueOverlay"
|
@click="toggleQueueOverlay"
|
||||||
@@ -54,7 +56,11 @@
|
|||||||
{{ activeJobsLabel }}
|
{{ activeJobsLabel }}
|
||||||
</span>
|
</span>
|
||||||
<span class="sr-only">
|
<span class="sr-only">
|
||||||
{{ t('sideToolbar.queueProgressOverlay.expandCollapsedQueue') }}
|
{{
|
||||||
|
isQueuePanelV2Enabled
|
||||||
|
? t('sideToolbar.queueProgressOverlay.viewJobHistory')
|
||||||
|
: t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
|
||||||
|
}}
|
||||||
</span>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
<CurrentUserButton
|
<CurrentUserButton
|
||||||
@@ -75,6 +81,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<QueueProgressOverlay
|
<QueueProgressOverlay
|
||||||
|
v-if="isQueueProgressOverlayVisible"
|
||||||
v-model:expanded="isQueueOverlayExpanded"
|
v-model:expanded="isQueueOverlayExpanded"
|
||||||
:menu-hovered="isTopMenuHovered"
|
:menu-hovered="isTopMenuHovered"
|
||||||
/>
|
/>
|
||||||
@@ -103,6 +110,7 @@ import { app } from '@/scripts/app'
|
|||||||
import { useCommandStore } from '@/stores/commandStore'
|
import { useCommandStore } from '@/stores/commandStore'
|
||||||
import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
|
import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
|
||||||
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
|
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
|
||||||
|
import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
|
||||||
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
||||||
import { isElectron } from '@/utils/envUtil'
|
import { isElectron } from '@/utils/envUtil'
|
||||||
import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
|
import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
|
||||||
@@ -120,6 +128,7 @@ const { toastErrorHandler } = useErrorHandling()
|
|||||||
const commandStore = useCommandStore()
|
const commandStore = useCommandStore()
|
||||||
const queueStore = useQueueStore()
|
const queueStore = useQueueStore()
|
||||||
const queueUIStore = useQueueUIStore()
|
const queueUIStore = useQueueUIStore()
|
||||||
|
const sidebarTabStore = useSidebarTabStore()
|
||||||
const { activeJobsCount } = storeToRefs(queueStore)
|
const { activeJobsCount } = storeToRefs(queueStore)
|
||||||
const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
|
const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
|
||||||
const releaseStore = useReleaseStore()
|
const releaseStore = useReleaseStore()
|
||||||
@@ -138,6 +147,12 @@ const activeJobsLabel = computed(() => {
|
|||||||
const isIntegratedTabBar = computed(
|
const isIntegratedTabBar = computed(
|
||||||
() => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
|
() => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
|
||||||
)
|
)
|
||||||
|
const isQueuePanelV2Enabled = computed(() =>
|
||||||
|
settingStore.get('Comfy.Queue.QPOV2')
|
||||||
|
)
|
||||||
|
const isQueueProgressOverlayVisible = computed(
|
||||||
|
() => !isQueuePanelV2Enabled.value
|
||||||
|
)
|
||||||
const queueHistoryTooltipConfig = computed(() =>
|
const queueHistoryTooltipConfig = computed(() =>
|
||||||
buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
|
buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
|
||||||
)
|
)
|
||||||
@@ -167,6 +182,10 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const toggleQueueOverlay = () => {
|
const toggleQueueOverlay = () => {
|
||||||
|
if (isQueuePanelV2Enabled.value) {
|
||||||
|
sidebarTabStore.activeSidebarTabId = 'assets'
|
||||||
|
return
|
||||||
|
}
|
||||||
commandStore.execute('Comfy.Queue.ToggleOverlay')
|
commandStore.execute('Comfy.Queue.ToggleOverlay')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user