[backport cloud/1.42] fix: keep job details popover on-screen in sidebar (#9679) (#10910)

Backport of #9679. Conflict: content conflict in JobAssetsList.vue —
accepted incoming.

Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>

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

@@ -92,11 +92,36 @@ const mountJobAssetsList = (jobs: JobListItem[]) => {
   })
 }
 
-describe('JobAssetsList', () => {
-  afterEach(() => {
-    vi.useRealTimers()
-  })
+function createDomRect({
+  top,
+  left,
+  width,
+  height
+}: {
+  top: number
+  left: number
+  width: number
+  height: number
+}): DOMRect {
+  return {
+    x: left,
+    y: top,
+    top,
+    left,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    toJSON: () => ''
+  } as DOMRect
+}
 
+afterEach(() => {
+  vi.useRealTimers()
+  vi.restoreAllMocks()
+})
+
+describe('JobAssetsList', () => {
   it('emits viewItem on preview-click for completed jobs with preview', async () => {
     const job = buildJob()
     const wrapper = mountJobAssetsList([job])
@@ -248,6 +273,53 @@ describe('JobAssetsList', () => {
     expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
   })
 
+  it('positions the popover to the right of rows near the left viewport edge', async () => {
+    vi.useFakeTimers()
+    const job = buildJob()
+    const wrapper = mountJobAssetsList([job])
+    const jobRow = wrapper.find(`[data-job-id="${job.id}"]`)
+
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1280)
+    vi.spyOn(jobRow.element, 'getBoundingClientRect').mockReturnValue(
+      createDomRect({
+        top: 100,
+        left: 40,
+        width: 200,
+        height: 48
+      })
+    )
+
+    await jobRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+
+    const popover = wrapper.find('.job-details-popover')
+    expect(popover.attributes('style')).toContain('left: 248px;')
+  })
+
+  it('positions the popover to the left of rows near the right viewport edge', async () => {
+    vi.useFakeTimers()
+    const job = buildJob()
+    const wrapper = mountJobAssetsList([job])
+    const jobRow = wrapper.find(`[data-job-id="${job.id}"]`)
+
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1280)
+    vi.spyOn(jobRow.element, 'getBoundingClientRect').mockReturnValue(
+      createDomRect({
+        top: 100,
+        left: 980,
+        width: 200,
+        height: 48
+      })
+    )
+
+    await jobRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+
+    const popover = wrapper.find('.job-details-popover')
+    expect(popover.attributes('style')).toContain('left: 672px;')
+  })
   it('clears the previous popover when hovering a new row briefly and leaving the list', async () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })

src/components/queue/job/JobAssetsList.vue

@@ -78,7 +78,7 @@
       class="job-details-popover fixed z-50"
       :style="{
         top: `${popoverPosition.top}px`,
-        right: `${popoverPosition.right}px`
+        left: `${popoverPosition.left}px`
       }"
       @mouseenter="onPopoverEnter"
       @mouseleave="onPopoverLeave"
@@ -96,6 +96,7 @@ import { useI18n } from 'vue-i18n'
 import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
+import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
 import Button from '@/components/ui/button/Button.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
@@ -115,10 +116,18 @@ const { t } = useI18n()
 const hoveredJobId = ref<string | null>(null)
 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 popoverPosition = ref<{ top: number; left: number } | null>(null)
+const {
+  activeDetails,
+  clearHoverTimers,
+  resetActiveDetails,
+  scheduleDetailsHide,
+  scheduleDetailsShow
+} = useJobDetailsHover<{ jobId: string; workflowId?: string }>({
+  getActiveId: (details) => details.jobId,
+  getDisplayedJobGroups: () => displayedJobGroups,
+  onReset: clearPopoverAnchor
+})
 
 const clearHideTimer = () => {
   if (hideTimer.value !== null) {
@@ -140,11 +149,7 @@ const updatePopoverPosition = () => {
   if (!rowElement) return
 
   const rect = rowElement.getBoundingClientRect()
-  const gap = 8
-  popoverPosition.value = {
-    top: rect.top,
-    right: window.innerWidth - rect.left + gap
-  }
+  popoverPosition.value = getHoverPopoverPosition(rect, window.innerWidth)
 }
 
 const resetActiveDetails = () => {

src/components/queue/job/QueueJobItem.vue

@@ -12,7 +12,7 @@
         class="fixed z-50"
         :style="{
           top: `${popoverPosition.top}px`,
-          right: `${popoverPosition.right}px`
+          left: `${popoverPosition.left}px`
         }"
         @mouseenter="onPopoverEnter"
         @mouseleave="onPopoverLeave"
@@ -26,7 +26,7 @@
         class="fixed z-50"
         :style="{
           top: `${popoverPosition.top}px`,
-          right: `${popoverPosition.right}px`
+          left: `${popoverPosition.left}px`
         }"
         @mouseenter="onPreviewEnter"
         @mouseleave="onPreviewLeave"
@@ -191,6 +191,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
+import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
 import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
@@ -298,17 +299,13 @@ const onIconLeave = () => scheduleHidePreview()
 const onPreviewEnter = () => scheduleShowPreview()
 const onPreviewLeave = () => scheduleHidePreview()
 
-const popoverPosition = ref<{ top: number; right: number } | null>(null)
+const popoverPosition = ref<{ top: number; left: number } | null>(null)
 
 const updatePopoverPosition = () => {
   const el = rowRef.value
   if (!el) return
   const rect = el.getBoundingClientRect()
-  const gap = 8
-  popoverPosition.value = {
-    top: rect.top,
-    right: window.innerWidth - rect.left + gap
-  }
+  popoverPosition.value = getHoverPopoverPosition(rect, window.innerWidth)
 }
 
 const isAnyPopoverVisible = computed(

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

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+
+import { getHoverPopoverPosition } from './getHoverPopoverPosition'
+
+describe('getHoverPopoverPosition', () => {
+  it('places the popover to the right when space is available', () => {
+    const position = getHoverPopoverPosition(
+      { top: 100, left: 40, right: 240 },
+      1280
+    )
+    expect(position).toEqual({ top: 100, left: 248 })
+  })
+
+  it('places the popover to the left when right space is insufficient', () => {
+    const position = getHoverPopoverPosition(
+      { top: 100, left: 980, right: 1180 },
+      1280
+    )
+    expect(position).toEqual({ top: 100, left: 672 })
+  })
+
+  it('clamps the top to viewport padding when rect.top is near the top edge', () => {
+    const position = getHoverPopoverPosition(
+      { top: 2, left: 40, right: 240 },
+      1280
+    )
+    expect(position).toEqual({ top: 8, left: 248 })
+  })
+
+  it('clamps left to viewport padding when fallback would go off-screen', () => {
+    const position = getHoverPopoverPosition(
+      { top: 100, left: 100, right: 300 },
+      320
+    )
+    expect(position).toEqual({ top: 100, left: 8 })
+  })
+
+  it('prefers right when both sides have equal space', () => {
+    const position = getHoverPopoverPosition(
+      { top: 200, left: 340, right: 640 },
+      1280
+    )
+    expect(position).toEqual({ top: 200, left: 648 })
+  })
+
+  it('falls back to left when right space is less than popover width', () => {
+    const position = getHoverPopoverPosition(
+      { top: 100, left: 600, right: 1000 },
+      1280
+    )
+    expect(position).toEqual({ top: 100, left: 292 })
+  })
+
+  it('handles narrow viewport where popover barely fits', () => {
+    const position = getHoverPopoverPosition(
+      { top: 50, left: 8, right: 100 },
+      316
+    )
+    expect(position).toEqual({ top: 50, left: 8 })
+  })
+})

src/components/queue/job/getHoverPopoverPosition.ts

@@ -0,0 +1,39 @@
+const POPOVER_GAP = 8
+const POPOVER_WIDTH = 300
+const VIEWPORT_PADDING = 8
+
+type AnchorRect = Pick<DOMRect, 'top' | 'left' | 'right'>
+
+type HoverPopoverPosition = {
+  top: number
+  left: number
+}
+
+export function getHoverPopoverPosition(
+  rect: AnchorRect,
+  viewportWidth: number
+): HoverPopoverPosition {
+  const availableLeft = rect.left - POPOVER_GAP
+  const availableRight = viewportWidth - rect.right - POPOVER_GAP
+  const preferredLeft = rect.right + POPOVER_GAP
+  const fallbackLeft = rect.left - POPOVER_WIDTH - POPOVER_GAP
+  const maxLeft = Math.max(
+    VIEWPORT_PADDING,
+    viewportWidth - POPOVER_WIDTH - VIEWPORT_PADDING
+  )
+
+  if (
+    availableRight >= POPOVER_WIDTH &&
+    (availableRight >= availableLeft || availableLeft < POPOVER_WIDTH)
+  ) {
+    return {
+      top: Math.max(VIEWPORT_PADDING, rect.top),
+      left: Math.min(maxLeft, preferredLeft)
+    }
+  }
+
+  return {
+    top: Math.max(VIEWPORT_PADDING, rect.top),
+    left: Math.max(VIEWPORT_PADDING, Math.min(maxLeft, fallbackLeft))
+  }
+}

src/components/sidebar/tabs/JobHistorySidebarTab.test.ts

@@ -0,0 +1,163 @@
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+
+import JobHistorySidebarTab from './JobHistorySidebarTab.vue'
+
+const JobDetailsPopoverStub = defineComponent({
+  name: 'JobDetailsPopover',
+  props: {
+    jobId: { type: String, required: true },
+    workflowId: { type: String, default: undefined }
+  },
+  template: '<div class="job-details-popover-stub" />'
+})
+
+vi.mock('@/composables/queue/useJobList', async () => {
+  const { ref } = await import('vue')
+  const jobHistoryItem = {
+    id: 'job-1',
+    title: 'Job 1',
+    meta: 'meta',
+    state: 'completed',
+    taskRef: {
+      workflowId: 'workflow-1',
+      previewOutput: {
+        isImage: true,
+        isVideo: false,
+        url: '/api/view/job-1.png'
+      }
+    }
+  }
+
+  return {
+    useJobList: () => ({
+      selectedJobTab: ref('All'),
+      selectedWorkflowFilter: ref('all'),
+      selectedSortMode: ref('mostRecent'),
+      searchQuery: ref(''),
+      hasFailedJobs: ref(false),
+      filteredTasks: ref([]),
+      groupedJobItems: ref([
+        {
+          key: 'group-1',
+          label: 'Group 1',
+          items: [jobHistoryItem]
+        }
+      ])
+    })
+  }
+})
+
+vi.mock('@/composables/queue/useJobMenu', () => ({
+  useJobMenu: () => ({
+    jobMenuEntries: [],
+    cancelJob: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/queue/useQueueClearHistoryDialog', () => ({
+  useQueueClearHistoryDialog: () => ({
+    showQueueClearHistoryDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/queue/useResultGallery', async () => {
+  const { ref } = await import('vue')
+  return {
+    useResultGallery: () => ({
+      galleryActiveIndex: ref(-1),
+      galleryItems: ref([]),
+      onViewItem: vi.fn()
+    })
+  }
+})
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    wrapWithErrorHandlingAsync: <T extends (...args: never[]) => unknown>(
+      fn: T
+    ) => fn
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    showDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/executionStore', () => ({
+  useExecutionStore: () => ({
+    clearInitializationByJobIds: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/queueStore', () => ({
+  useQueueStore: () => ({
+    runningTasks: [],
+    pendingTasks: [],
+    delete: vi.fn()
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+const SidebarTabTemplateStub = {
+  name: 'SidebarTabTemplate',
+  props: ['title'],
+  template:
+    '<div><slot name="alt-title" /><slot name="header" /><slot name="body" /></div>'
+}
+
+function mountComponent() {
+  return mount(JobHistorySidebarTab, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        SidebarTabTemplate: SidebarTabTemplateStub,
+        JobFilterTabs: true,
+        JobFilterActions: true,
+        JobHistoryActionsMenu: true,
+        JobContextMenu: true,
+        ResultGallery: true,
+        teleport: true,
+        JobDetailsPopover: JobDetailsPopoverStub
+      }
+    }
+  })
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('JobHistorySidebarTab', () => {
+  it('shows the job details popover for jobs in the history panel', async () => {
+    vi.useFakeTimers()
+    const wrapper = mountComponent()
+    const jobRow = wrapper.find('[data-job-id="job-1"]')
+
+    await jobRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+
+    const popover = wrapper.findComponent(JobDetailsPopoverStub)
+    expect(popover.exists()).toBe(true)
+    expect(popover.props()).toMatchObject({
+      jobId: 'job-1',
+      workflowId: 'workflow-1'
+    })
+  })
+})