@prenta/admin 2.7.0 → 2.8.0

package/src/views/Jobs/CancelJobDialog.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import * as Dialog from '@radix-ui/react-dialog'
 import { Button } from '../../components/ui/Button.js'
 import { jobType, type JobRow } from '../../lib/job-view.js'
@@ -51,19 +51,28 @@ export interface CancelJobDialogProps {
    * as it is once a cancel goes through, or never had focus.
    */
   onFocusFallback: () => void
+  /**
+   * The dialog has gone and focus is back. A cancel's outcome is reported
+   * from here: while the dialog is open, screen readers are kept inside it.
+   */
+  onClosed?: () => void
 }
 
 /**
  * The cancel confirmation (jobs-view.jsx `CancelDlg`, JOBS.md "Cancel
  * dialog"): 460px, radius 14, padding 20. Radix traps focus and closes on Esc.
+ * It opens from a row or over the drawer; Esc and the backdrop close only it.
  */
 export function CancelJobDialog({
   job,
   onClose,
   onConfirm,
   onFocusFallback,
+  onClosed,
 }: CancelJobDialogProps) {
   const [busy, setBusy] = useState(false)
+  /** Set before the first await, so a second click can't post a second cancel. */
+  const sending = useRef(false)
   const returnFocus = useReturnFocus(onFocusFallback)
 
   return (
@@ -77,11 +86,17 @@ export function CancelJobDialog({
         <Dialog.Overlay className="bg-scrim fixed inset-0 z-[var(--z-modal)]" />
         <Dialog.Content
           {...returnFocus}
+          onCloseAutoFocus={(event) => {
+            returnFocus.onCloseAutoFocus(event)
+            onClosed?.()
+          }}
+          // Radix makes the rest of the page inert but doesn't say so on the dialog.
+          aria-modal="true"
           className="bg-card border-bdr rounded-14 shadow-shd2 fixed top-1/2 left-1/2 z-[var(--z-modal)] flex w-[min(460px,calc(100%-32px))] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 border p-5 leading-[normal]"
         >
           {job ? (
             <>
-              <Dialog.Title className="text-txt m-0 text-[length:var(--fs-drawer)] font-bold">
+              <Dialog.Title className="text-txt m-0 text-[length:var(--fs-drawer)] leading-[normal] font-bold">
                 Cancel “{job.title}”?
               </Dialog.Title>
               <Dialog.Description className="text-body text-sub m-0 leading-[1.55] text-pretty">
@@ -106,10 +121,13 @@ export function CancelJobDialog({
                   busy={busy}
                   leftIcon={<JobIcons.stop size={12} />}
                   onClick={async () => {
+                    if (sending.current) return
+                    sending.current = true
                     setBusy(true)
                     try {
                       await onConfirm(job)
                     } finally {
+                      sending.current = false
                       setBusy(false)
                     }
                     onClose()

package/src/views/Jobs/DrawerReview.tsx

@@ -111,7 +111,7 @@ function DiffLabel({ label, children }: { label: string; children?: ReactNode })
  * A link suggestion's line, as text: the words around the link, the linked
  * words marked, and where they link. The stored markup is never rendered.
  */
-function LinkLine({ after }: { after: string }) {
+export function LinkLine({ after }: { after: string }) {
   const parts = linkParts(after)
   if (!parts) return <>{after}</>
   return (

package/src/views/Jobs/JobDrawer.tsx

@@ -13,7 +13,7 @@ import {
   drawerTabs,
   type DrawerTab,
 } from '../../lib/job-drawer.js'
-import { active, view, type JobRow } from '../../lib/job-view.js'
+import { active, retryPoint, view, type JobActions, type JobRow } from '../../lib/job-view.js'
 import {
   approveAllReviewItems,
   decideReviewItem,
@@ -29,7 +29,7 @@ import { DrawerActivity } from './DrawerActivity.js'
 import { DrawerOverview } from './DrawerOverview.js'
 import { DrawerResults } from './DrawerResults.js'
 import { DrawerReview, type ReviewItemState } from './DrawerReview.js'
-import { focusJobRow, useReturnFocus } from './focus.js'
+import { focusJobDrawer, focusJobRow, useReturnFocus } from './focus.js'
 import { JobIcons } from './icons.js'
 import type { JobDrawerTab } from './JobsTable.js'
 import { useJobDetail, useJobEvents } from './useJobDetail.js'
@@ -71,6 +71,12 @@ interface FocusMove {
   fallback?: boolean
 }
 
+/** An outcome the Jobs screen reported, for the drawer's live region; `n` makes a repeat new. */
+export interface DrawerNotice {
+  text: string
+  n: number
+}
+
 export interface JobDrawerProps {
   /** The list's copy of the job, read again every 5 seconds while Live is on. */
   job: Job
@@ -81,6 +87,20 @@ export interface JobDrawerProps {
   /** When the list was read, on the server's clock. Relative times count from it. */
   now: number
   worker: JobWorkerStatus | null
+  /** The footer's Cancel job, "Retry from document {n+1}" and "Retry now", for this viewer. */
+  actions: JobActions
+  /** A retry of this job is out. */
+  retrying: boolean
+  /**
+   * The screen's latest outcome (a cancel, a retry, a reused Run now). Radix
+   * hides the toaster from screen readers while the drawer is open, so the
+   * drawer announces it too.
+   */
+  notice: DrawerNotice | null
+  /** Cancel job: opens the cancel dialog over the drawer. */
+  onCancel: () => void
+  /** Retry from where it stopped, or retry now while it waits out a backoff. Resolves once answered. */
+  onRetry: (now: boolean) => Promise<void>
   onClose: () => void
   /** Read the list again: a decision changes the job's review counts. */
   onReload: () => void
@@ -112,7 +132,8 @@ async function copyText(text: string): Promise<boolean> {
  * It reads `GET /jobs/:id` (results, the full error) and, per tab, the
  * events and the review changes, each again only when the list's copy of the
  * job changes. The Review badge and footer use the job's own counts, never
- * the number of changes loaded. Cancel and retry in the footer are P-19.
+ * the number of changes loaded. The footer's Cancel job and retries (P-19)
+ * use the list's handlers, so they act and report the same way from here.
  */
 export function JobDrawer({
   job,
@@ -120,6 +141,11 @@ export function JobDrawer({
   tab,
   now,
   worker,
+  actions,
+  retrying,
+  notice,
+  onCancel,
+  onRetry,
   onClose,
   onReload,
   onNavigate,
@@ -162,6 +188,11 @@ export function JobDrawer({
     [],
   )
 
+  // The screen clears its notice when a drawer opens or closes, so one here is this drawer's.
+  useEffect(() => {
+    if (notice) announce(notice.text)
+  }, [notice, announce])
+
   const [itemState, setItemState] = useState<Record<string, ReviewItemState>>({})
   const [drafts, setDrafts] = useState<Record<string, string>>({})
   /** Documents known to be published or not, from decisions; keyed by document id. */
@@ -171,6 +202,8 @@ export function JobDrawer({
   /** Bumped so the focus effect runs for a move asked for after an await. */
   const [, setFocusTick] = useState(0)
   const afterApproveAll = useRef(false)
+  /** A footer retry was answered; its button may have gone with the failure. */
+  const afterRetry = useRef(false)
   /** "Approve all" ignores activations before this time (`APPROVE_ALL_ARM_MS`). */
   const approveAllFrom = useRef(0)
   /** A key held on the footer button is repeating, and each repeat clicks it. */
@@ -248,6 +281,24 @@ export function JobDrawer({
     }
   })
 
+  // A retry's button goes away with the failure it answered. Focus lost with
+  // it (Radix puts it on the dialog itself) moves to the panel, which now
+  // shows the job queued again.
+  useEffect(() => {
+    if (!afterRetry.current) return
+    afterRetry.current = false
+    const focused = document.activeElement
+    if (focused && focused !== document.body && focused !== content.current && focused.isConnected)
+      return
+    focusJobDrawer()
+  })
+
+  async function retryHere(retryNow: boolean) {
+    await onRetry(retryNow)
+    afterRetry.current = true
+    setFocusTick((tick) => tick + 1)
+  }
+
   // When approve-all leaves nothing to review its button goes away; focus
   // moves to the changes rather than staying on the dialog itself.
   useEffect(() => {
@@ -514,6 +565,35 @@ export function JobDrawer({
           </UnderlineTabPanel>
 
           <div className="border-bdr mobile:pb-[calc(12px+env(safe-area-inset-bottom,0px))] flex flex-wrap items-center gap-2 border-t px-[18px] py-3">
+            {actions.cancel ? (
+              <Button
+                variant="danger"
+                aria-haspopup="dialog"
+                leftIcon={<JobIcons.stop size={12} />}
+                onClick={onCancel}
+              >
+                Cancel job
+              </Button>
+            ) : null}
+            {actions.retry ? (
+              <BusyButton
+                leftIcon={<JobIcons.retry size={13} />}
+                busy={retrying}
+                onClick={() => void retryHere(false)}
+              >
+                Retry from {retryPoint(row)}
+              </BusyButton>
+            ) : null}
+            {actions.retryNow ? (
+              <BusyButton
+                variant="secondary"
+                leftIcon={<JobIcons.retry size={13} />}
+                busy={retrying}
+                onClick={() => void retryHere(true)}
+              >
+                Retry now
+              </BusyButton>
+            ) : null}
             <span className="flex-1" />
             {/* One button for both, so it keeps focus when it turns into Approve all. */}
             {canReview && counts.pending > 0 ? (

package/src/views/Jobs/JobsTable.tsx

@@ -5,11 +5,12 @@ import { Button } from '../../components/ui/Button.js'
 import { Card } from '../../components/ui/Card.js'
 import { Skeleton } from '../../components/ui/Skeleton.js'
 import {
-  active,
   hasReviewAction,
+  jobActions,
   view,
   type JobFilter,
   type JobRow as JobRowModel,
+  type JobViewer,
 } from '../../lib/job-view.js'
 import { Bar, Pill, TypeTile } from './atoms.js'
 import { BusyButton } from './BusyButton.js'
@@ -53,6 +54,7 @@ interface RowProps {
   j: JobRowModel
   selected: boolean
   retrying: boolean
+  viewer: JobViewer
   onOpen: (id: string, tab: JobDrawerTab) => void
   onCancel: (row: JobRowModel) => void
   onRetry: (row: JobRowModel) => void
@@ -63,10 +65,11 @@ interface RowProps {
  * the button and its `::after` covers the row, so the Review, Cancel and Retry
  * buttons aren't nested inside another control. They sit above that layer.
  */
-function JobRowItem({ j, selected, retrying, onOpen, onCancel, onRetry }: RowProps) {
+function JobRowItem({ j, selected, retrying, viewer, onOpen, onCancel, onRetry }: RowProps) {
   const v = view(j)
   const statusId = `job-status-${j.id}`
   const review = hasReviewAction(j)
+  const actions = jobActions(j, viewer)
   return (
     <li
       className={`${ROW_GRID} border-bdr relative border-t px-4 py-3 ${
@@ -114,7 +117,7 @@ function JobRowItem({ j, selected, retrying, onOpen, onCancel, onRetry }: RowPro
             Review
           </Button>
         ) : null}
-        {active(j) && !j.cancelling ? (
+        {actions.cancel ? (
           <Button
             variant="icon"
             size="icon"
@@ -126,7 +129,7 @@ function JobRowItem({ j, selected, retrying, onOpen, onCancel, onRetry }: RowPro
             <JobIcons.stop size={13} />
           </Button>
         ) : null}
-        {j.state === 'dead' ? (
+        {actions.retry ? (
           <BusyButton
             variant="icon"
             size="icon"
@@ -162,6 +165,8 @@ export interface JobsTableProps {
   selectedId: string | null
   /** The job whose retry request is out. */
   retryingId: string | null
+  /** Who's looking: Cancel and Retry show only to someone who may use them. */
+  viewer: JobViewer
   status: 'loading' | 'ready' | 'error'
   error: string | null
   onOpen: (id: string, tab: JobDrawerTab) => void
@@ -176,6 +181,7 @@ export function JobsTable({
   filter,
   selectedId,
   retryingId,
+  viewer,
   status,
   error,
   onOpen,
@@ -238,6 +244,7 @@ export function JobsTable({
             j={j}
             selected={selectedId === j.id}
             retrying={retryingId === j.id}
+            viewer={viewer}
             onOpen={onOpen}
             onCancel={onCancel}
             onRetry={onRetry}