@prenta/admin 2.7.0 → 2.8.0

package/src/__tests__/views/jobs-drawer.render.test.tsx

@@ -34,6 +34,8 @@ interface Server {
   reviewError: { status: number; message: string } | null
   decide: (jobId: string, itemId: string, body: Record<string, unknown>) => Reply | Promise<Reply>
   approveAll: (jobId: string) => Reply | Promise<Reply>
+  /** `POST /jobs/run`, `/jobs/:id/cancel` and `/jobs/:id/retry`. */
+  action: (endpoint: string, body: unknown) => Reply | Promise<Reply>
   calls: Call[]
 }
 
@@ -45,6 +47,7 @@ const server: Server = {
   reviewError: null,
   decide: () => ({ error: 'not stubbed', status: 500 }),
   approveAll: () => ({ error: 'not stubbed', status: 500 }),
+  action: () => ({ error: 'not stubbed', status: 500 }),
   calls: [],
 }
 
@@ -77,6 +80,8 @@ function cmsApiStub(endpoint: string, init: RequestInit = {}): Reply | Promise<R
   if (method === 'POST' && part === 'review' && itemId === 'approve-all')
     return server.approveAll(jobId!)
   if (method === 'POST' && part === 'review') return server.decide(jobId!, itemId!, body)
+  if (method === 'POST' && (jobId === 'run' || part === 'cancel' || part === 'retry'))
+    return server.action(endpoint, body)
   return { error: `unexpected ${method} ${endpoint}`, status: 404 }
 }
 
@@ -104,6 +109,10 @@ function fetchStub(url: string) {
 
 const { Jobs } = await import('../../views/Jobs.js')
 
+type Viewer = { role: string | null; userId: string | null }
+/** Someone who may run, cancel and retry any job. */
+const ADMIN: Viewer = { role: 'ADMIN', userId: 'u1' }
+
 function iso(offsetMs: number): string {
   return new Date(Date.now() + offsetMs).toISOString()
 }
@@ -190,6 +199,7 @@ beforeEach(() => {
     reviewError: null,
     calls: [],
     approveAll: () => ({ error: 'not stubbed', status: 500 }),
+    action: () => ({ error: 'not stubbed', status: 500 }),
   })
   // By default a decision goes through: the change takes the new status.
   server.decide = (jobId, itemId, body) => {
@@ -220,8 +230,8 @@ function rowButton(id: string): HTMLElement {
   return button
 }
 
-async function renderJobs(onNavigate: (path: string) => void = () => {}) {
-  render(<Jobs onNavigate={onNavigate} />)
+async function renderJobs(onNavigate: (path: string) => void = () => {}, viewer: Viewer = ADMIN) {
+  render(<Jobs onNavigate={onNavigate} {...viewer} />)
   await screen.findByRole('list', { name: 'Jobs' })
 }
 
@@ -1045,3 +1055,499 @@ describe('Jobs drawer', () => {
     expect(raw).toContain('"id": "job_417"')
   })
 })
+
+/*
+ * P-19: the footer's Cancel job, "Retry from document {n+1}" and "Retry now",
+ * the cancel dialog over the drawer, Run now reusing a job, and who sees them.
+ */
+
+function scan(
+  type: 'seo-scan' | 'content-health',
+  overrides: Partial<Job> & { done?: number; total?: number } = {},
+): Job {
+  const job = batch({
+    id: type === 'seo-scan' ? 'job_scan' : 'job_health',
+    type,
+    title: type === 'seo-scan' ? 'SEO scan' : 'Content health',
+    scope: type === 'seo-scan' ? 'All indexable pages' : 'All published documents',
+    createdBy: { kind: 'cron', schedule: type === 'seo-scan' ? 'weekly-seo' : 'nightly-health' },
+    payload: { trigger: 'cron' },
+    ...overrides,
+  })
+  delete job.review
+  return job
+}
+
+/** A batch that ran out of attempts at document 8. */
+function failed(overrides: Partial<Job> = {}): Job {
+  return batch({
+    id: 'job_415',
+    title: 'Translate excerpts to Spanish',
+    status: 'dead',
+    attempts: 3,
+    done: 7,
+    total: 30,
+    lockedAt: null,
+    lastError: 'ProviderError: 429 Too Many Requests',
+    ...overrides,
+  })
+}
+
+/** A batch waiting out a failed slice's backoff. */
+function waiting(overrides: Partial<Job> = {}): Job {
+  return batch({
+    id: 'job_418',
+    title: 'Generate alt text',
+    status: 'queued',
+    attempts: 1,
+    done: 9,
+    total: 64,
+    lockedAt: null,
+    lastError: 'ImageFetchError: img_2291.webp returned 404',
+    runAt: iso(30_000),
+    ...overrides,
+  })
+}
+
+/** The job as the server has it after an action; the list's next read returns it. */
+function patchJob(id: string, patch: Partial<Job>): Job {
+  server.jobs = server.jobs.map((job) =>
+    job.id === id ? { ...job, ...patch, updatedAt: iso(1_000) } : job,
+  )
+  return server.jobs.find((job) => job.id === id)!
+}
+
+function panelOf(drawer: HTMLElement): HTMLElement {
+  return drawer.querySelector<HTMLElement>('[role="tabpanel"]')!
+}
+
+/** The cancel dialog, over the drawer or the list. */
+function cancelDialog(): Promise<HTMLElement> {
+  return screen.findByRole('dialog', { name: /^Cancel “/ })
+}
+
+async function cancelDialogGone() {
+  await waitFor(() => expect(screen.queryByRole('dialog', { name: /^Cancel “/ })).toBeNull())
+}
+
+/** Click as a browser does: the button takes focus first. */
+function press(button: HTMLElement) {
+  button.focus()
+  fireEvent.click(button)
+}
+
+describe('Jobs drawer actions (P-19)', () => {
+  it('opens the cancel dialog over the drawer; Keep running and Escape go back to Cancel job', async () => {
+    server.jobs = [batch({})]
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    const cancel = within(drawer).getByRole('button', { name: 'Cancel job' })
+    expect(cancel.getAttribute('aria-haspopup')).toBe('dialog')
+    expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+
+    cancel.focus()
+    fireEvent.click(cancel)
+    const dialog = await cancelDialog()
+    expect(dialog.getAttribute('aria-modal')).toBe('true')
+    expect(dialog.textContent).toContain(
+      'It’s in the middle of a slice. It will stop when that slice finishes, usually within 20 seconds. The 19 changes already made stay in review. Nothing is applied unless you approve it.',
+    )
+    // The drawer's controls are hidden behind it. (aria-hidden keeps the
+    // drawer's live region, and so the drawer element, exposed.)
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    expect(within(drawer).queryByRole('tab')).toBeNull()
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Keep running' }))
+    await cancelDialogGone()
+    await waitFor(() => expect(document.activeElement).toBe(cancel))
+    expect(within(drawer).getByRole('button', { name: 'Cancel job' })).toBe(cancel)
+
+    // Escape closes the dialog on top, not the drawer under it.
+    fireEvent.click(cancel)
+    await cancelDialog()
+    fireEvent.keyDown(document.activeElement ?? document, { key: 'Escape' })
+    await cancelDialogGone()
+    expect(screen.getByRole('dialog', { name: 'Rewrite meta descriptions' })).toBe(drawer)
+    await waitFor(() => expect(document.activeElement).toBe(cancel))
+    expect(posts('POST', '/cancel')).toHaveLength(0)
+  })
+
+  it('uses the kit’s copy for each state', async () => {
+    const auto = batch({}).payload as Extract<Job['payload'], { review: string }>
+    server.jobs = [
+      batch({ status: 'queued', lockedAt: null, payload: { ...auto, review: 'auto' } }),
+      scan('content-health', { status: 'running', done: 50, total: 412 }),
+      scan('seo-scan', { status: 'queued', lockedAt: null, done: 0, total: 340 }),
+    ]
+    await renderJobs()
+    const copy = async (id: string) => {
+      const drawer = await openJob(id)
+      fireEvent.click(within(drawer).getByRole('button', { name: 'Cancel job' }))
+      const text = (await cancelDialog()).textContent ?? ''
+      fireEvent.keyDown(document.activeElement ?? document, { key: 'Escape' })
+      await cancelDialogGone()
+      fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+      await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+      return text
+    }
+    expect(await copy('job_417')).toContain(
+      'It hasn’t started its next slice, so it stops right away. The 19 documents already changed keep their changes. You can undo them from each document’s history.',
+    )
+    expect(await copy('job_health')).toContain(
+      'It’s in the middle of a slice. It will stop when that slice finishes, usually within 20 seconds. Progress so far is kept. The next nightly cron run starts fresh.',
+    )
+    expect(await copy('job_scan')).toContain(
+      'It hasn’t started its next slice, so it stops right away. Progress so far is kept. The next weekly cron run starts fresh.',
+    )
+  })
+
+  it('cancels a running job: Cancelling · Stops after this slice, announced, focus in the drawer', async () => {
+    server.jobs = [batch({})]
+    server.action = (endpoint) =>
+      endpoint === '/jobs/job_417/cancel'
+        ? ok(patchJob('job_417', { cancelRequestedAt: iso(0) }))
+        : { error: `unexpected ${endpoint}`, status: 500 }
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    press(within(drawer).getByRole('button', { name: 'Cancel job' }))
+    press(within(await cancelDialog()).getByRole('button', { name: 'Cancel job' }))
+
+    await cancelDialogGone()
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Stopping after this slice'))
+    await waitFor(() => expect(announced()).toBe('Stopping after this slice'))
+    expect(within(drawer).getAllByText('Cancelling').length).toBeGreaterThan(0)
+    expect(drawer.textContent).toContain(
+      'Stopping when the current slice finishes, usually within 20 seconds.',
+    )
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    // Cancel job went with the cancel, so focus lands on the panel showing the new state.
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+    expect(posts('POST', '/cancel')).toHaveLength(1)
+
+    fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    const row = rowButton('job_417').closest('li')!
+    expect(within(row).getByText('Cancelling')).toBeTruthy()
+    expect(within(row).getByText('Stops after this slice')).toBeTruthy()
+    expect(within(row).queryByRole('button', { name: /^Cancel/ })).toBeNull()
+  })
+
+  it('shows a cancel’s outcome only once its dialog has closed', async () => {
+    server.jobs = [batch({ status: 'queued', lockedAt: null })]
+    let answer: (reply: Reply) => void = () => {}
+    server.action = () => new Promise<Reply>((resolve) => (answer = resolve))
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    press(within(drawer).getByRole('button', { name: 'Cancel job' }))
+    const dialog = await cancelDialog()
+    press(within(dialog).getByRole('button', { name: 'Cancel job' }))
+    await waitFor(() => expect(posts('POST', '/cancel')).toHaveLength(1))
+    // While the dialog is open Radix hides the rest of the page from screen
+    // readers: the toaster, and the drawer with its live region.
+    const dialogsAtToast: number[] = []
+    toast.mockImplementationOnce(() => {
+      dialogsAtToast.push(document.querySelectorAll('[role="dialog"]').length)
+    })
+    await act(async () => {
+      answer(ok(patchJob('job_417', { status: 'cancelled', cancelRequestedAt: iso(0) })))
+    })
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Job cancelled'))
+    expect(dialogsAtToast).toEqual([1])
+    await waitFor(() => expect(announced()).toBe('Job cancelled'))
+    // Focus was back in the drawer before the outcome was announced.
+    expect(document.activeElement).toBe(panelOf(drawer))
+  })
+
+  it('posts one cancel for a double click, and opens one dialog for a double click on Cancel job', async () => {
+    server.jobs = [batch({})]
+    let answer: (reply: Reply) => void = () => {}
+    server.action = () => new Promise<Reply>((resolve) => (answer = resolve))
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    const open = within(drawer).getByRole('button', { name: 'Cancel job' })
+    fireEvent.click(open)
+    fireEvent.click(open)
+    const dialog = await cancelDialog()
+    expect(screen.getAllByRole('dialog', { name: /^Cancel “/ })).toHaveLength(1)
+
+    const confirm = within(dialog).getByRole('button', { name: 'Cancel job' })
+    confirm.focus()
+    fireEvent.click(confirm)
+    fireEvent.click(confirm)
+    await waitFor(() => expect(confirm.getAttribute('aria-busy')).toBe('true'))
+    fireEvent.click(confirm)
+    expect(document.activeElement).toBe(confirm)
+    // Keep running waits for the answer too.
+    expect(
+      within(dialog).getByRole('button', { name: 'Keep running' }).getAttribute('aria-disabled'),
+    ).toBe('true')
+    await act(async () => {
+      answer(ok(patchJob('job_417', { cancelRequestedAt: iso(0) })))
+    })
+    await cancelDialogGone()
+    expect(posts('POST', '/cancel')).toHaveLength(1)
+  })
+
+  it('reads the list again on a 409 from a cancel that already finished, then says so', async () => {
+    server.jobs = [batch({ review: { pending: 4, approved: 0, rejected: 0 } })]
+    server.action = () => {
+      // The last slice finished just before the cancel arrived.
+      patchJob('job_417', {
+        status: 'succeeded',
+        lockedAt: null,
+        finishedAt: iso(0),
+        progress: { done: 42, total: 42, unit: 'documents', cursor: '42', completed: 42 },
+      })
+      return { error: 'This job already finished.', status: 409 }
+    }
+    await renderJobs()
+    const drawer = await openJob('job_417')
+    press(within(drawer).getByRole('button', { name: 'Cancel job' }))
+    const dialog = await cancelDialog()
+    const listReads = vi.mocked(fetch).mock.calls.length
+    press(within(dialog).getByRole('button', { name: 'Cancel job' }))
+
+    await cancelDialogGone()
+    const message = '“Rewrite meta descriptions” wasn’t cancelled: This job already finished.'
+    await waitFor(() => expect(toast).toHaveBeenCalledWith(message))
+    expect(toast.error).not.toHaveBeenCalled()
+    expect(vi.mocked(fetch).mock.calls.length).toBeGreaterThan(listReads)
+    // The dialog closed onto the job as it is now: finished, with nothing to cancel.
+    expect(within(drawer).getAllByText('Needs review').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    await waitFor(() => expect(announced()).toBe(message))
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+  })
+
+  it('says a job had already finished when the cancel comes back unchanged', async () => {
+    server.jobs = [scan('content-health', { status: 'running', done: 50, total: 412 })]
+    server.action = () =>
+      ok(patchJob('job_health', { status: 'succeeded', lockedAt: null, finishedAt: iso(0) }))
+    await renderJobs()
+    const drawer = await openJob('job_health')
+    fireEvent.click(within(drawer).getByRole('button', { name: 'Cancel job' }))
+    fireEvent.click(within(await cancelDialog()).getByRole('button', { name: 'Cancel job' }))
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith('“Content health” had already finished.'),
+    )
+    expect(within(drawer).getAllByText('Succeeded').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+  })
+
+  it('retries a failed job from the drawer: Retry from document 8, then focus on the panel', async () => {
+    server.jobs = [failed()]
+    server.action = (endpoint) =>
+      endpoint === '/jobs/job_415/retry'
+        ? ok(patchJob('job_415', { status: 'queued', attempts: 0, lastError: null }))
+        : { error: `unexpected ${endpoint}`, status: 500 }
+    await renderJobs()
+    const drawer = await openJob('job_415')
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    expect(within(drawer).queryByRole('button', { name: 'Retry now' })).toBeNull()
+    const retry = within(drawer).getByRole('button', { name: 'Retry from document 8' })
+    // The kit's primary button.
+    expect(retry.className).toContain('bg-acc')
+    retry.focus()
+    fireEvent.click(retry)
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Retrying from document 8'))
+    await waitFor(() => expect(announced()).toBe('Retrying from document 8'))
+    expect(within(drawer).getAllByText('In progress').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+    // Queued again, it can be cancelled.
+    expect(within(drawer).getByRole('button', { name: 'Cancel job' })).toBeTruthy()
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+    expect(posts('POST', '/retry')).toHaveLength(1)
+  })
+
+  it('counts pages for an SEO scan: Retry from page 101', async () => {
+    server.jobs = [
+      scan('seo-scan', {
+        status: 'dead',
+        attempts: 3,
+        done: 100,
+        total: 340,
+        lockedAt: null,
+        lastError: 'TimeoutError: fetch timed out',
+      }),
+    ]
+    await renderJobs()
+    const drawer = await openJob('job_scan')
+    expect(within(drawer).getByRole('button', { name: 'Retry from page 101' })).toBeTruthy()
+  })
+
+  it('posts one retry for a double click, keeping focus on the busy button', async () => {
+    server.jobs = [failed()]
+    let answer: (reply: Reply) => void = () => {}
+    server.action = () => new Promise<Reply>((resolve) => (answer = resolve))
+    await renderJobs()
+    const drawer = await openJob('job_415')
+    const retry = within(drawer).getByRole('button', { name: 'Retry from document 8' })
+    retry.focus()
+    fireEvent.click(retry)
+    fireEvent.click(retry)
+    await waitFor(() => expect(retry.getAttribute('aria-busy')).toBe('true'))
+    expect(retry.hasAttribute('disabled')).toBe(false)
+    expect(document.activeElement).toBe(retry)
+    fireEvent.click(retry)
+    expect(posts('POST', '/retry')).toHaveLength(1)
+    await act(async () => {
+      answer(ok(patchJob('job_415', { status: 'queued', attempts: 0, lastError: null })))
+    })
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Retrying from document 8'))
+    expect(posts('POST', '/retry')).toHaveLength(1)
+  })
+
+  it('reads the list again on a 409 from a retry, and shows the job as it is now', async () => {
+    server.jobs = [failed()]
+    server.action = () => {
+      // Someone else retried it first, and the worker has picked it up.
+      patchJob('job_415', { status: 'running', attempts: 0, lastError: null, lockedAt: iso(0) })
+      return { error: 'Only a failed job, or one waiting to retry, can be retried', status: 409 }
+    }
+    await renderJobs()
+    const drawer = await openJob('job_415')
+    const retry = within(drawer).getByRole('button', { name: 'Retry from document 8' })
+    retry.focus()
+    fireEvent.click(retry)
+    const message =
+      '“Translate excerpts to Spanish” wasn’t retried: Only a failed job, or one waiting to retry, can be retried'
+    await waitFor(() => expect(toast).toHaveBeenCalledWith(message))
+    expect(toast.error).not.toHaveBeenCalled()
+    // The answer shows with the job as it is now, read again: running.
+    expect(within(drawer).getAllByText('Running').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+    await waitFor(() => expect(announced()).toBe(message))
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+  })
+
+  it('keeps Retry and focus on a refusal that isn’t a 409', async () => {
+    server.jobs = [failed()]
+    server.action = () => ({ error: 'Insufficient permissions', status: 403 })
+    await renderJobs()
+    const drawer = await openJob('job_415')
+    const retry = within(drawer).getByRole('button', { name: 'Retry from document 8' })
+    retry.focus()
+    fireEvent.click(retry)
+    const message = '“Translate excerpts to Spanish” wasn’t retried: Insufficient permissions'
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith(message))
+    await waitFor(() => expect(announced()).toBe(message))
+    await waitFor(() => expect(retry.getAttribute('aria-busy')).toBeNull())
+    expect(document.activeElement).toBe(retry)
+  })
+
+  it('offers Retry now on a job waiting to retry, but not while cancelling or on a stale lock', async () => {
+    server.jobs = [
+      waiting(),
+      waiting({ id: 'job_c', title: 'Cancelling batch', cancelRequestedAt: iso(0) }),
+      batch({
+        id: 'job_stale',
+        title: 'Stuck batch',
+        status: 'running',
+        done: 4,
+        attempts: 1,
+        lockedAt: iso(-11 * MIN),
+      }),
+    ]
+    server.action = (endpoint) =>
+      endpoint === '/jobs/job_418/retry'
+        ? ok(patchJob('job_418', { attempts: 0, lastError: null, runAt: iso(0) }))
+        : { error: `unexpected ${endpoint}`, status: 500 }
+    await renderJobs()
+
+    let drawer = await openJob('job_c')
+    expect(within(drawer).getAllByText('Cancelling').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: 'Retry now' })).toBeNull()
+    expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+    fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+
+    // The server still holds a stale lock as running; the next worker run picks it up.
+    drawer = await openJob('job_stale')
+    expect(within(drawer).getAllByText('Retrying').length).toBeGreaterThan(0)
+    expect(within(drawer).queryByRole('button', { name: 'Retry now' })).toBeNull()
+    expect(within(drawer).getByRole('button', { name: 'Cancel job' })).toBeTruthy()
+    fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+
+    drawer = await openJob('job_418')
+    expect(within(drawer).getByRole('button', { name: 'Cancel job' })).toBeTruthy()
+    const now = within(drawer).getByRole('button', { name: 'Retry now' })
+    // The kit's plain `.jb-btn`, not the primary retry.
+    expect(now.className).toContain('bg-card')
+    now.focus()
+    fireEvent.click(now)
+    await waitFor(() => expect(toast).toHaveBeenCalledWith('Retrying on the next worker run'))
+    await waitFor(() => expect(announced()).toBe('Retrying on the next worker run'))
+    expect(posts('POST', '/jobs/job_418/retry')).toHaveLength(1)
+    expect(within(drawer).queryByRole('button', { name: 'Retry now' })).toBeNull()
+    await waitFor(() => expect(document.activeElement).toBe(panelOf(drawer)))
+  })
+
+  it('opens the running scan on Run now and announces the reuse in the drawer', async () => {
+    const running = scan('seo-scan', { status: 'running', done: 40, total: 340 })
+    server.jobs = [running]
+    server.action = (endpoint) =>
+      endpoint === '/jobs/run'
+        ? ok({ job: running, reused: true })
+        : { error: `unexpected ${endpoint}`, status: 500 }
+    await renderJobs()
+    fireEvent.click(screen.getByRole('button', { name: 'Run now: SEO scan' }))
+    const drawer = await screen.findByRole('dialog', { name: 'SEO scan' })
+    expect(toast).toHaveBeenCalledWith('SEO scan is already running. Reusing that job.')
+    await waitFor(() => expect(announced()).toBe('SEO scan is already running. Reusing that job.'))
+    expect(drawer.hasAttribute('data-job-drawer')).toBe(true)
+    expect(posts('POST', '/jobs/run')).toHaveLength(1)
+  })
+
+  it('hides Run now, Cancel and Retry from a viewer', async () => {
+    server.jobs = [batch({}), failed(), waiting()]
+    await renderJobs(() => {}, { role: 'VIEWER', userId: 'u9' })
+    expect(screen.queryByRole('button', { name: /^Run now/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: /^Cancel / })).toBeNull()
+    expect(screen.queryByRole('button', { name: /^Retry/ })).toBeNull()
+    // The failure alert keeps See why.
+    expect(within(screen.getByRole('alert')).getByRole('button', { name: 'See why' })).toBeTruthy()
+
+    for (const id of ['job_417', 'job_415', 'job_418']) {
+      const drawer = await openJob(id)
+      expect(within(drawer).queryByRole('button', { name: 'Cancel job' })).toBeNull()
+      expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+      fireEvent.click(within(drawer).getByRole('button', { name: 'Close' }))
+      await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    }
+  })
+
+  it('shows nothing to act with when there’s no role', async () => {
+    server.jobs = [batch({}), failed()]
+    await renderJobs(() => {}, { role: null, userId: null })
+    expect(screen.queryByRole('button', { name: /^Run now/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: /^Cancel / })).toBeNull()
+    expect(screen.queryByRole('button', { name: /^Retry/ })).toBeNull()
+  })
+
+  it('lets an editor retry a scan, and only a batch they queued', async () => {
+    server.jobs = [
+      failed({ createdBy: { id: 'u2', name: 'Dana Cole', initials: 'DC' } }),
+      failed({
+        id: 'job_mine',
+        title: 'My batch',
+        createdBy: { id: 'u7', name: 'Ed', initials: 'E' },
+      }),
+      scan('content-health', {
+        status: 'dead',
+        attempts: 3,
+        done: 50,
+        total: 412,
+        lockedAt: null,
+        lastError: 'Error: boom',
+      }),
+    ]
+    await renderJobs(() => {}, { role: 'EDITOR', userId: 'u7' })
+    expect(screen.getByRole('button', { name: 'Run now: SEO scan' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Retry Translate excerpts to Spanish' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Retry My batch' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Retry Content health' })).toBeTruthy()
+
+    const drawer = await openJob('job_415')
+    expect(within(drawer).queryByRole('button', { name: /^Retry/ })).toBeNull()
+  })
+})

package/src/__tests__/views/jobs-list.render.test.tsx

@@ -104,6 +104,9 @@ function fetchStub(url: string, init: RequestInit = {}) {
 
 const { Jobs } = await import('../../views/Jobs.js')
 
+/** Someone who may run, cancel and retry any job. */
+const ADMIN = { role: 'ADMIN', userId: 'u1' }
+
 /** A time on the server's clock, `offsetMs` from now. */
 function iso(offsetMs: number): string {
   return new Date(Date.now() + server.clockOffsetMs + offsetMs).toISOString()
@@ -301,13 +304,13 @@ async function advance(ms: number) {
 }
 
 async function renderLoaded() {
-  render(<Jobs onNavigate={() => {}} />)
+  render(<Jobs onNavigate={() => {}} {...ADMIN} />)
   await screen.findByRole('list', { name: 'Jobs' })
 }
 
 /** With fake timers: render and let the first load land. */
 async function renderOnClock() {
-  render(<Jobs onNavigate={() => {}} />)
+  render(<Jobs onNavigate={() => {}} {...ADMIN} />)
   await advance(0)
   expect(screen.getByRole('list', { name: 'Jobs' })).toBeTruthy()
 }
@@ -428,7 +431,7 @@ describe('Jobs list', () => {
 
   it('shows the empty state', async () => {
     server.jobs = []
-    render(<Jobs onNavigate={() => {}} />)
+    render(<Jobs onNavigate={() => {}} {...ADMIN} />)
     expect(await screen.findByText('No jobs here.')).toBeTruthy()
     expect(screen.queryByRole('alert')).toBeNull()
     expect(
@@ -574,7 +577,7 @@ describe('Jobs list refresh', () => {
     // StrictMode mounts, unmounts and remounts, aborting the first requests.
     render(
       <StrictMode>
-        <Jobs onNavigate={() => {}} />
+        <Jobs onNavigate={() => {}} {...ADMIN} />
       </StrictMode>,
     )
     expect(await screen.findByText(/^Ran 2\ds ago/)).toBeTruthy()
@@ -649,7 +652,7 @@ describe('Jobs list refresh', () => {
   it('shows a load error with Try again, then focuses the list it loads', async () => {
     useClock()
     server.listError = { status: 500, message: 'Database unavailable' }
-    render(<Jobs onNavigate={() => {}} />)
+    render(<Jobs onNavigate={() => {}} {...ADMIN} />)
     await advance(0)
     const alert = screen.getByRole('alert')
     expect(alert.textContent).toContain('Jobs couldn’t be loaded. Database unavailable')