@morscherlab/mint-sdk 1.4.0-beta.18 → 1.4.0-beta.19

package/src/__tests__/components/JobsStatusTray.test.ts

@@ -1,9 +1,15 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { defineComponent, h, nextTick } from 'vue'
+import { defineComponent, h, nextTick, shallowRef } from 'vue'
 
+import BaseModal from '../../components/BaseModal.vue'
 import JobsStatusTray from '../../components/JobsStatusTray.vue'
-import { useJobCenter, type PluginJobCenterSource, type UseJobCenterReturn } from '../../composables/useJobCenter'
+import {
+  useJobCenter,
+  type PluginJobCenterSource,
+  type UseJobCenterOptions,
+  type UseJobCenterReturn,
+} from '../../composables/useJobCenter'
 import type { JobState, JobStateInput, JobStatus } from '../../types/jobs'
 
 function job(status: JobStatus, id: string = status): JobStateInput {
@@ -43,17 +49,24 @@ function job(status: JobStatus, id: string = status): JobStateInput {
 async function openTray(options: {
   source: PluginJobCenterSource
   slots?: Record<string, (props: { job: JobState }) => unknown>
+  confirm?: InstanceType<typeof JobsStatusTray>['$props']['confirm']
+  rowJob?: UseJobCenterOptions['rowJob']
+  /** Run real transitions, so a leaving dialog stays in the DOM for a frame. */
+  transitions?: boolean
 }) {
   const Host = defineComponent({
     setup() {
-      const center = useJobCenter({ source: options.source, loadOnMount: false })
+      const center = useJobCenter({ source: options.source, loadOnMount: false, rowJob: options.rowJob })
       return () => [
         h('button', { class: 'opener', onClick: center.toggle }, 'Jobs'),
-        h(JobsStatusTray, { center, teleportTo: false }, options.slots),
+        h(JobsStatusTray, { center, teleportTo: false, confirm: options.confirm }, options.slots),
       ]
     },
   })
-  const wrapper = mount(Host, { attachTo: document.body })
+  const wrapper = mount(Host, {
+    attachTo: document.body,
+    global: options.transitions ? { stubs: { transition: false } } : {},
+  })
   const opener = wrapper.get('.opener')
   ;(opener.element as HTMLElement).focus()
   await opener.trigger('click')
@@ -255,4 +268,227 @@ describe('JobsStatusTray', () => {
       wrapper.unmount()
     })
   })
+
+  it('should draw a row from the center row view when a rowJob option overrides it', async () => {
+    const wrapper = await openTray({
+      source: { jobs: [{ ...job('awaiting_input', 'A-1'), can_cancel: true }], cancel: vi.fn(async () => undefined) },
+      rowJob: row => (row.status === 'awaiting_input' ? { status: 'running', percent: 40, message: 'Decoding in the browser' } : null),
+    })
+    const row = wrapper.get('.mint-jobs-tray__row')
+
+    expect({
+      section: wrapper.get('[data-section="active"]').text().replace(/\s+/g, ' '),
+      status: row.attributes('data-status'),
+      tinted: row.classes('mint-jobs-tray__row--awaiting-input'),
+      icon: row.get('[role="img"]').attributes('aria-label'),
+      value: row.get('.mint-jobs-tray__value').text(),
+      progress: row.get('[role="progressbar"]').attributes('aria-valuenow'),
+      detail: row.get('.mint-jobs-tray__detail').text(),
+      cancel: row.find('[aria-label="Cancel Job A-1"]').exists(),
+    }).toEqual({
+      section: 'Active · 1',
+      status: 'awaiting_input',
+      tinted: false,
+      icon: 'Running',
+      value: '40%',
+      progress: '40',
+      detail: 'Decoding in the browser',
+      cancel: true,
+    })
+  })
+
+  it('should mount no confirm dialog when confirm is off', async () => {
+    const wrapper = await openTray({ source: { jobs: [job('completed')], delete: vi.fn(async () => true) } })
+    expect(wrapper.findComponent(BaseModal).exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('should keep the tray open when an inner handler prevents the Escape default', async () => {
+    const wrapper = await openTray({
+      source: { jobs: [job('running', 'R-1')] },
+      slots: {
+        'job-actions': () => h('input', {
+          class: 'inner',
+          onKeydown: (event: KeyboardEvent) => { if (event.key === 'Escape') event.preventDefault() },
+        }),
+      },
+    })
+    const inner = wrapper.get('.inner').element as HTMLElement
+    inner.focus()
+
+    inner.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }))
+    await nextTick()
+
+    expect(wrapper.find('.mint-jobs-tray__panel').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('should leave focus on the page when a job update arrives while nothing in the tray is focused', async () => {
+    const jobs = shallowRef([job('running', 'R-1')])
+    const wrapper = await openTray({ source: { jobs } })
+    ;(document.activeElement as HTMLElement).blur()
+
+    jobs.value = [job('completed', 'R-1')]
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(document.body)
+    wrapper.unmount()
+  })
+
+  it('should focus the panel when the focused row leaves the list while the tray is open', async () => {
+    const jobs = shallowRef([job('completed', 'C-1'), job('completed', 'C-2')])
+    const wrapper = await openTray({ source: { jobs, delete: vi.fn(async () => true) } })
+    ;(wrapper.get('[aria-label="Delete Job C-1"]').element as HTMLElement).focus()
+
+    jobs.value = [job('completed', 'C-2')]
+    await nextTick()
+    await nextTick()
+
+    expect(document.activeElement).toBe(wrapper.get('.mint-jobs-tray__panel').element)
+    wrapper.unmount()
+  })
+
+  describe('confirmation', () => {
+    const dialog = () => document.body.querySelector<HTMLElement>('.mint-modal [role="dialog"], .mint-modal__container')
+
+    function confirmSource() {
+      return {
+        jobs: [{ ...job('running', 'R-1'), can_cancel: true }, job('completed', 'C-1'), job('failed', 'F-1')],
+        cancel: vi.fn(async () => undefined),
+        delete: vi.fn(async () => true),
+        clear: vi.fn(async () => 2),
+      }
+    }
+    const triggers = {
+      cancel: '[aria-label="Cancel Job R-1"]',
+      delete: '[aria-label="Delete Job C-1"]',
+      clear: '[data-section="finished"] .mint-jobs-tray__section-action',
+    } as const
+
+    it.each([
+      ['cancel', true, 'Job R-1'],
+      ['delete', { delete: true }, 'Job C-1'],
+      ['clear', { clear: true }, '2 finished jobs'],
+    ] as const)('should run %s only after the confirm dialog is confirmed when confirm is %o', async (kind, confirm, named) => {
+      const source = confirmSource()
+      const wrapper = await openTray({ source, confirm })
+
+      await wrapper.get(triggers[kind]).trigger('click')
+      await nextTick()
+      const shown = dialog()
+      const before = source[kind].mock.calls.length
+      const confirmButton = [...shown!.querySelectorAll('button')].at(-1)!
+      confirmButton.click()
+      await flushPromises()
+
+      expect([shown?.textContent?.includes(named), before, source[kind].mock.calls.length]).toEqual([true, 0, 1])
+      wrapper.unmount()
+    })
+
+    it.each([
+      ['off', undefined],
+      ['set for another action', { delete: true }],
+    ] as const)('should cancel at once without a dialog when confirm is %s', async (_case, confirm) => {
+      const source = confirmSource()
+      const wrapper = await openTray({ source, confirm })
+
+      await wrapper.get(triggers.cancel).trigger('click')
+      await flushPromises()
+
+      expect([dialog(), source.cancel.mock.calls.length]).toEqual([null, 1])
+      wrapper.unmount()
+    })
+
+    it('should run the action once when Confirm is clicked twice while the dialog fades out', async () => {
+      const source = confirmSource()
+      const wrapper = await openTray({ source, confirm: true, transitions: true })
+      await wrapper.get(triggers.clear).trigger('click')
+      await nextTick()
+      const confirmButton = [...dialog()!.querySelectorAll('button')].at(-1)!
+
+      confirmButton.click()
+      confirmButton.click()
+      await flushPromises()
+
+      expect([confirmButton.isConnected, source.clear.mock.calls.length]).toEqual([true, 1])
+      await vi.waitFor(() => expect(dialog()).toBeNull())
+      wrapper.unmount()
+    })
+
+    it('should close only the dialog when Escape is pressed in it', async () => {
+      const source = confirmSource()
+      const wrapper = await openTray({ source, confirm: true })
+      await wrapper.get(triggers.delete).trigger('click')
+      await nextTick()
+
+      dialog()!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      await flushPromises()
+
+      expect([dialog(), wrapper.find('.mint-jobs-tray__panel').exists(), source.delete.mock.calls.length])
+        .toEqual([null, true, 0])
+      wrapper.unmount()
+    })
+  
+    it('should ask again with the new count when the finished jobs change before Confirm', async () => {
+      const jobs = shallowRef([job('completed', 'C-1'), job('failed', 'F-1')])
+      const clear = vi.fn(async () => 3)
+      const wrapper = await openTray({ source: { jobs, clear }, confirm: true })
+      await wrapper.get(triggers.clear).trigger('click')
+      await nextTick()
+
+      jobs.value = [...jobs.value, job('cancelled', 'X-1')]
+      await nextTick()
+      ;[...dialog()!.querySelectorAll('button')].at(-1)!.click()
+      await flushPromises()
+      const asked = [dialog()?.textContent?.includes('3 finished jobs'), clear.mock.calls.length]
+      ;[...dialog()!.querySelectorAll('button')].at(-1)!.click()
+      await flushPromises()
+
+      expect([...asked, dialog(), clear.mock.calls.length]).toEqual([true, 0, null, 1])
+      wrapper.unmount()
+    })
+
+    it.each([
+      ['delete', 'the job is gone', [] as JobStateInput[]],
+      ['cancel', 'the job finished', [{ ...job('completed', 'R-1'), can_cancel: true }]],
+      ['delete', 'the job is no longer deletable', [{ ...job('completed', 'C-1'), can_delete: false }]],
+    ] as const)('should close the %s dialog without acting when %s before Confirm', async (kind, _case, next) => {
+      const source = { ...confirmSource(), jobs: shallowRef<JobStateInput[]>(confirmSource().jobs) }
+      const wrapper = await openTray({ source, confirm: true })
+      await wrapper.get(triggers[kind]).trigger('click')
+      await nextTick()
+
+      source.jobs.value = [...next]
+      await nextTick()
+      ;[...dialog()!.querySelectorAll('button')].at(-1)!.click()
+      await flushPromises()
+
+      expect([dialog(), source[kind].mock.calls.length]).toEqual([null, 0])
+      wrapper.unmount()
+    })
+
+    it('should drop the pending action when the job source changes while the dialog is open', async () => {
+      const first = confirmSource()
+      const second = confirmSource()
+      const current = shallowRef<PluginJobCenterSource>(first)
+      const Host = defineComponent({
+        setup() {
+          const center = useJobCenter({ source: current, loadOnMount: false })
+          center.open()
+          return () => h(JobsStatusTray, { center, teleportTo: false, confirm: true })
+        },
+      })
+      const wrapper = mount(Host, { attachTo: document.body })
+      await nextTick()
+      await wrapper.get(triggers.delete).trigger('click')
+      await nextTick()
+
+      current.value = second
+      await nextTick()
+
+      expect([dialog(), first.delete.mock.calls.length, second.delete.mock.calls.length]).toEqual([null, 0, 0])
+      wrapper.unmount()
+    })
+  })
 })

package/src/__tests__/composables/useJobCenter.test.ts

@@ -423,6 +423,21 @@ describe('useJobCenter top-bar chip', () => {
     }).toEqual({ baseline: null, later: { status: 'failed', label: '1 failed' }, stored: ['old'] })
   })
 
+  it.each<[string, TopBarJob | null, TopBarJob]>([
+    ['use the override', { status: 'completed', label: 'Saved to the experiment' },
+      { status: 'completed', label: 'Saved to the experiment' }],
+    ['keep the default', null, { status: 'completed', label: 'r completed' }],
+  ])('should %s for the held job when the topBarJob option returns that value', async (_case, override, expected) => {
+    const jobs = shallowRef([job('running', 'r')])
+    const topBarJob = vi.fn((shown: { status: JobStatus }) => (shown.status === 'completed' ? override : null))
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false, topBarJob })
+
+    jobs.value = [job('completed', 'r')]
+    await nextTick()
+
+    expect(tray.topBarJob.value).toEqual(expected)
+  })
+
   it('should hold a just-completed job for 6 s and select it on click when nothing else runs', async () => {
     vi.useFakeTimers()
     const jobs = shallowRef([job('running', 'r')])
@@ -501,3 +516,27 @@ describe('useJobCenter top-bar chip', () => {
     expect(tray.completedCount.value).toBe(2)
   })
 })
+
+describe('useJobCenter row view', () => {
+  const awaiting = job('awaiting_input', 'a')
+  const running = job('running', 'r')
+
+  it.each<[string, JobStateInput, UseJobCenterOptions['rowJob'], ReturnType<ReturnType<typeof useJobCenter>['rowView']>]>([
+    ['absent', running, undefined, { status: 'running', percent: 42, message: 'running' }],
+    ['null', awaiting, () => null,
+      { status: 'awaiting_input', percent: null, message: 'Waiting for external input' }],
+    ['a status and percent', awaiting, () => ({ status: 'running', percent: 40 }),
+      { status: 'running', percent: 40, message: 'Waiting for external input' }],
+    ['a message only', running, () => ({ message: 'Decoding 3/8' }),
+      { status: 'running', percent: 42, message: 'Decoding 3/8' }],
+    ['undefined and null fields', running, () => ({ status: null, percent: undefined, message: null }),
+      { status: 'running', percent: 42, message: 'running' }],
+    ['a status only', running, () => ({ status: 'awaiting_input' }),
+      { status: 'awaiting_input', percent: 42, message: 'running' }],
+    ['a null percent', running, () => ({ percent: null }),
+      { status: 'running', percent: null, message: 'running' }],
+  ])('should resolve the row view from the job when the row override is %s', (_case, input, rowJob, expected) => {
+    const { tray } = mountComposable({ source: { jobs: [input] }, loadOnMount: false, rowJob })
+    expect(tray.rowView(tray.jobs.value[0]!)).toEqual(expected)
+  })
+})

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -272,6 +272,7 @@ describe('frontend docs catalog coverage', () => {
 
     expect(jobsStatusTray?.props?.map(prop => prop.name).sort()).toEqual([
       'center',
+      'confirm',
       'teleportTo',
       'title',
     ])

package/src/components/JobsStatusTray.story.vue

@@ -63,11 +63,18 @@ const TrayDemo = defineComponent({
     jobs: { type: Array as PropType<JobStateInput[]>, required: true },
     title: { type: String, default: undefined },
     open: Boolean,
+    confirm: Boolean,
+    /** Show the awaiting-input job as a browser decode, as LEAF does. */
+    decode: Boolean,
   },
   setup(props) {
     // One source object: a new source identity resets the just-completed hold.
     const center = useJobCenter({
       source: { jobs: () => props.jobs, cancel: cancelJob, delete: deleteJob },
+      rowJob: row => (props.decode && row.status === 'awaiting_input'
+        ? { status: 'running', percent: 62, message: 'Decoding in the browser · 5/8' }
+        : null),
+      topBarJob: shown => (shown.status === 'completed' ? { status: 'completed', label: `Saved to ${shown.experiment_id}` } : null),
     })
     onMounted(() => { if (props.open) center.open() })
     return () => [
@@ -79,7 +86,7 @@ const TrayDemo = defineComponent({
         jobsPanelId: center.panelId,
         onJobClick: () => center.handleTopBarClick(openJob),
       }),
-      h(JobsStatusTray, { center, title: props.title, onSelect: openJob }, {
+      h(JobsStatusTray, { center, title: props.title, confirm: props.confirm, onSelect: openJob }, {
         'job-actions': ({ job: row }: { job: JobState }) => row.status === 'completed'
           ? h('button', { type: 'button', class: 'mint-jobs-tray__section-action', onClick: () => openJob(row) }, 'Open')
           : null,
@@ -109,6 +116,8 @@ function initState() {
     percent: 37,
     finished: false,
     open: true,
+    confirm: false,
+    decode: false,
   }
 }
 </script>
@@ -123,6 +132,8 @@ function initState() {
             :jobs="playgroundJobs(state.percent, state.finished)"
             :title="state.title"
             :open="state.open"
+            :confirm="state.confirm"
+            :decode="state.decode"
           />
         </div>
       </template>
@@ -131,9 +142,17 @@ function initState() {
         <HstSlider v-model="state.percent" title="Running percent" :min="0" :max="100" />
         <HstCheckbox v-model="state.finished" title="Running job completed (6 s chip)" />
         <HstCheckbox v-model="state.open" title="Open on mount" />
+        <HstCheckbox v-model="state.confirm" title="Confirm cancel, delete and clear" />
+        <HstCheckbox v-model="state.decode" title="Row override: J-104 as a browser decode" />
       </template>
     </Variant>
 
+    <Variant title="Confirm and row override">
+      <div style="min-height: 560px;">
+        <TrayDemo :jobs="playgroundJobs(37, false)" open confirm decode />
+      </div>
+    </Variant>
+
     <Variant title="Awaiting input">
       <div style="min-height: 560px;">
         <TrayDemo :jobs="[job('awaiting_input', 'J-301')]" open />