From e37bba7250ff94a5271a554c7c5a47c4a02623ba Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sun, 22 Feb 2026 02:02:04 -0800
Subject: [PATCH] fix: use AssetsListItem in queue overlay expanded (#9055)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- replace `JobGroupsList` with `JobAssetsList` in `QueueOverlayExpanded`
- standardize expanded queue rows to use `AssetsListItem`
- add `QueueOverlayExpanded` tests to verify list rendering and action
re-emits

It works surprisingly well.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9055-fix-use-AssetsListItem-in-queue-overlay-expanded-30e6d73d365081c586c7c7bca222c290)
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>
---
 .../queue/QueueOverlayExpanded.test.ts        | 85 +++++++++++++++++++
 src/components/queue/QueueOverlayExpanded.vue |  4 +-
 2 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 src/components/queue/QueueOverlayExpanded.test.ts

diff --git a/src/components/queue/QueueOverlayExpanded.test.ts b/src/components/queue/QueueOverlayExpanded.test.ts
new file mode 100644
index 000000000..89c3064df
--- /dev/null
+++ b/src/components/queue/QueueOverlayExpanded.test.ts
@@ -0,0 +1,85 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { JobListItem } from '@/composables/queue/useJobList'
+
+vi.mock('@/composables/queue/useJobMenu', () => ({
+  useJobMenu: () => ({ jobMenuEntries: [] })
+}))
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    wrapWithErrorHandlingAsync: <T extends (...args: never[]) => unknown>(
+      fn: T
+    ) => fn
+  })
+}))
+
+import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
+
+const QueueOverlayHeaderStub = {
+  template: '<div />'
+}
+
+const JobFiltersBarStub = {
+  template: '<div />'
+}
+
+const JobAssetsListStub = {
+  name: 'JobAssetsList',
+  template: '<div class="job-assets-list-stub" />'
+}
+
+const JobContextMenuStub = {
+  template: '<div />'
+}
+
+const createJob = (): JobListItem => ({
+  id: 'job-1',
+  title: 'Job 1',
+  meta: 'meta',
+  state: 'pending'
+})
+
+const mountComponent = () =>
+  mount(QueueOverlayExpanded, {
+    props: {
+      headerTitle: 'Jobs',
+      queuedCount: 1,
+      selectedJobTab: 'All',
+      selectedWorkflowFilter: 'all',
+      selectedSortMode: 'mostRecent',
+      displayedJobGroups: [],
+      hasFailedJobs: false
+    },
+    global: {
+      stubs: {
+        QueueOverlayHeader: QueueOverlayHeaderStub,
+        JobFiltersBar: JobFiltersBarStub,
+        JobAssetsList: JobAssetsListStub,
+        JobContextMenu: JobContextMenuStub
+      }
+    }
+  })
+
+describe('QueueOverlayExpanded', () => {
+  it('renders JobAssetsList', () => {
+    const wrapper = mountComponent()
+    expect(wrapper.find('.job-assets-list-stub').exists()).toBe(true)
+  })
+
+  it('re-emits list item actions from JobAssetsList', async () => {
+    const wrapper = mountComponent()
+    const job = createJob()
+    const jobAssetsList = wrapper.findComponent({ name: 'JobAssetsList' })
+
+    jobAssetsList.vm.$emit('cancel-item', job)
+    jobAssetsList.vm.$emit('delete-item', job)
+    jobAssetsList.vm.$emit('view-item', job)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('cancelItem')?.[0]).toEqual([job])
+    expect(wrapper.emitted('deleteItem')?.[0]).toEqual([job])
+    expect(wrapper.emitted('viewItem')?.[0]).toEqual([job])
+  })
+})
diff --git a/src/components/queue/QueueOverlayExpanded.vue b/src/components/queue/QueueOverlayExpanded.vue
index cfde91f63..dc44e8b83 100644
--- a/src/components/queue/QueueOverlayExpanded.vue
+++ b/src/components/queue/QueueOverlayExpanded.vue
@@ -21,7 +21,7 @@
     />
 
     <div class="flex-1 min-h-0 overflow-y-auto">
-      <JobGroupsList
+      <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
         @cancel-item="onCancelItemEvent"
         @delete-item="onDeleteItemEvent"
@@ -53,8 +53,8 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import JobContextMenu from './job/JobContextMenu.vue'
+import JobAssetsList from './job/JobAssetsList.vue'
 import JobFiltersBar from './job/JobFiltersBar.vue'
-import JobGroupsList from './job/JobGroupsList.vue'
 
 defineProps<{
   headerTitle: string