fix: preserve queue popover hide timer

src/components/queue/job/JobAssetsList.test.ts

@@ -247,4 +247,30 @@ describe('JobAssetsList', () => {
     await nextTick()
     expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
   })
+
+  it('clears the previous popover when hovering a new row briefly and leaving the list', async () => {
+    vi.useFakeTimers()
+    const firstJob = buildJob({ id: 'job-1' })
+    const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
+    const wrapper = mountJobAssetsList([firstJob, secondJob])
+    const firstRow = wrapper.find('[data-job-id="job-1"]')
+    const secondRow = wrapper.find('[data-job-id="job-2"]')
+
+    await firstRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).props('jobId')).toBe(
+      'job-1'
+    )
+
+    await firstRow.trigger('mouseleave')
+    await secondRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(100)
+    await nextTick()
+    await secondRow.trigger('mouseleave')
+
+    await vi.advanceTimersByTimeAsync(150)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
+  })
 })

src/components/queue/job/JobAssetsList.vue

@@ -118,6 +118,7 @@ const activeDetails = ref<{ jobId: string; workflowId?: string } | null>(null)
 const activeRowElement = ref<HTMLElement | null>(null)
 const popoverPosition = ref<{ top: number; right: number } | null>(null)
 const hideTimer = ref<number | null>(null)
+const hideTimerJobId = ref<string | null>(null)
 const showTimer = ref<number | null>(null)
 
 const clearHideTimer = () => {
@@ -125,6 +126,7 @@ const clearHideTimer = () => {
     clearTimeout(hideTimer.value)
     hideTimer.value = null
   }
+  hideTimerJobId.value = null
 }
 
 const clearShowTimer = () => {
@@ -155,7 +157,6 @@ const resetActiveDetails = () => {
 }
 
 const scheduleDetailsShow = (job: JobListItem, rowElement: HTMLElement) => {
-  clearHideTimer()
   clearShowTimer()
   activeRowElement.value = rowElement
   showTimer.value = window.setTimeout(() => {
@@ -171,8 +172,13 @@ const scheduleDetailsShow = (job: JobListItem, rowElement: HTMLElement) => {
 const scheduleDetailsHide = (jobId?: string) => {
   if (!jobId) return
 
-  clearHideTimer()
   clearShowTimer()
+  if (hideTimerJobId.value && hideTimerJobId.value !== jobId) {
+    return
+  }
+
+  clearHideTimer()
+  hideTimerJobId.value = jobId
   hideTimer.value = window.setTimeout(() => {
     if (activeDetails.value?.jobId === jobId) {
       activeDetails.value = null
@@ -180,6 +186,7 @@ const scheduleDetailsHide = (jobId?: string) => {
       popoverPosition.value = null
     }
     hideTimer.value = null
+    hideTimerJobId.value = null
   }, 150)
 }