mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-24 00:34:09 +00:00
fix: remove duplicate running indicator from queue header (#9032)
## Summary Remove the extra running-workflow indicator from the expanded Queue Progress Overlay header to avoid duplicate running-count signals. ## Changes - Remove `showConcurrentIndicator` and `concurrentWorkflowCount` props from `QueueOverlayHeader`. - Stop passing those props through `QueueOverlayExpanded` and `QueueProgressOverlay`. - Simplify `QueueOverlayHeader` tests to reflect the updated header behavior. ## Why The expanded header was showing redundant running status information alongside existing running/queued summaries. Prevent this: <img width="240" height="92" alt="image" src="https://github.com/user-attachments/assets/f4b1775c-b347-46f7-8668-3a1054365ada" /> Design: https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=4024-28147&m=dev ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9032-fix-remove-duplicate-running-indicator-from-queue-header-30d6d73d365081d19041de2f1b0c8886) by [Unito](https://www.unito.io) --------- Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
@@ -2,8 +2,6 @@
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<QueueOverlayHeader
|
||||
:header-title="headerTitle"
|
||||
:show-concurrent-indicator="showConcurrentIndicator"
|
||||
:concurrent-workflow-count="concurrentWorkflowCount"
|
||||
:queued-count="queuedCount"
|
||||
@clear-history="$emit('clearHistory')"
|
||||
@clear-queued="$emit('clearQueued')"
|
||||
@@ -60,8 +58,6 @@ import JobGroupsList from './job/JobGroupsList.vue'
|
||||
|
||||
defineProps<{
|
||||
headerTitle: string
|
||||
showConcurrentIndicator: boolean
|
||||
concurrentWorkflowCount: number
|
||||
queuedCount: number
|
||||
selectedJobTab: JobTab
|
||||
selectedWorkflowFilter: 'all' | 'current'
|
||||
|
||||
@@ -51,7 +51,6 @@ const i18n = createI18n({
|
||||
g: { more: 'More' },
|
||||
sideToolbar: {
|
||||
queueProgressOverlay: {
|
||||
running: 'running',
|
||||
queuedSuffix: 'queued',
|
||||
clearQueued: 'Clear queued',
|
||||
clearQueueTooltip: 'Clear queue',
|
||||
@@ -69,8 +68,6 @@ const mountHeader = (props = {}) =>
|
||||
mount(QueueOverlayHeader, {
|
||||
props: {
|
||||
headerTitle: 'Job queue',
|
||||
showConcurrentIndicator: true,
|
||||
concurrentWorkflowCount: 2,
|
||||
queuedCount: 3,
|
||||
...props
|
||||
},
|
||||
@@ -86,21 +83,9 @@ describe('QueueOverlayHeader', () => {
|
||||
mockSetSetting.mockClear()
|
||||
})
|
||||
|
||||
it('renders header title and concurrent indicator when enabled', () => {
|
||||
const wrapper = mountHeader({ concurrentWorkflowCount: 3 })
|
||||
|
||||
it('renders header title', () => {
|
||||
const wrapper = mountHeader()
|
||||
expect(wrapper.text()).toContain('Job queue')
|
||||
const indicator = wrapper.find('.inline-flex.items-center.gap-1')
|
||||
expect(indicator.exists()).toBe(true)
|
||||
expect(indicator.text()).toContain('3')
|
||||
expect(indicator.text()).toContain('running')
|
||||
})
|
||||
|
||||
it('hides concurrent indicator when flag is false', () => {
|
||||
const wrapper = mountHeader({ showConcurrentIndicator: false })
|
||||
|
||||
expect(wrapper.text()).toContain('Job queue')
|
||||
expect(wrapper.find('.inline-flex.items-center.gap-1').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows clear queue text and emits clear queued', async () => {
|
||||
|
||||
@@ -4,18 +4,6 @@
|
||||
>
|
||||
<div class="min-w-0 flex-1 px-2 text-[14px] font-normal text-text-primary">
|
||||
<span>{{ headerTitle }}</span>
|
||||
<span
|
||||
v-if="showConcurrentIndicator"
|
||||
class="ml-4 inline-flex items-center gap-1 text-blue-100"
|
||||
>
|
||||
<span class="inline-block size-2 rounded-full bg-blue-100" />
|
||||
<span>
|
||||
<span class="font-bold">{{ concurrentWorkflowCount }}</span>
|
||||
<span class="ml-1">{{
|
||||
t('sideToolbar.queueProgressOverlay.running')
|
||||
}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="inline-flex h-6 items-center gap-2 text-[12px] leading-none text-text-primary"
|
||||
@@ -48,8 +36,6 @@ import { buildTooltipConfig } from '@/composables/useTooltipConfig'
|
||||
|
||||
defineProps<{
|
||||
headerTitle: string
|
||||
showConcurrentIndicator: boolean
|
||||
concurrentWorkflowCount: number
|
||||
queuedCount: number
|
||||
}>()
|
||||
|
||||
|
||||
@@ -17,8 +17,6 @@
|
||||
v-model:selected-sort-mode="selectedSortMode"
|
||||
class="flex-1 min-h-0"
|
||||
:header-title="headerTitle"
|
||||
:show-concurrent-indicator="showConcurrentIndicator"
|
||||
:concurrent-workflow-count="concurrentWorkflowCount"
|
||||
:queued-count="queuedCount"
|
||||
:displayed-job-groups="displayedJobGroups"
|
||||
:has-failed-jobs="hasFailedJobs"
|
||||
@@ -183,13 +181,6 @@ const headerTitle = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
const concurrentWorkflowCount = computed(
|
||||
() => executionStore.runningWorkflowCount
|
||||
)
|
||||
const showConcurrentIndicator = computed(
|
||||
() => concurrentWorkflowCount.value > 1
|
||||
)
|
||||
|
||||
const {
|
||||
selectedJobTab,
|
||||
selectedWorkflowFilter,
|
||||
|
||||
Reference in New Issue
Block a user