@prenta/admin 2.7.0 → 2.8.0

package/src/views/Jobs/WorkerStrip.tsx

@@ -77,6 +77,8 @@ export interface WorkerStripProps {
   rows: JobRow[]
   /** Live is on and the tab is visible: the clock ticks every second. */
   ticking: boolean
+  /** The viewer may start a scan. Viewers get no Run now (the server refuses it). */
+  canRun: boolean
   onRunNow: (type: RunnableJobType) => Promise<void>
 }
 
@@ -91,6 +93,7 @@ export function WorkerStrip({
   loading,
   rows,
   ticking,
+  canRun,
   onRunNow,
 }: WorkerStripProps) {
   const now = useNow(ticking) + skewMs
@@ -125,17 +128,19 @@ export function WorkerStrip({
             <Text label={JOB_TYPES[type].label}>
               {when} {next ? <small>· {next}</small> : null}
             </Text>
-            <BusyButton
-              variant="secondary"
-              size="sm"
-              className="ml-auto"
-              leftIcon={<JobIcons.play size={11} />}
-              busy={busy === type}
-              aria-label={`Run now: ${JOB_TYPES[type].label}`}
-              onClick={() => void run(type)}
-            >
-              Run now
-            </BusyButton>
+            {canRun ? (
+              <BusyButton
+                variant="secondary"
+                size="sm"
+                className="ml-auto"
+                leftIcon={<JobIcons.play size={11} />}
+                busy={busy === type}
+                aria-label={`Run now: ${JOB_TYPES[type].label}`}
+                onClick={() => void run(type)}
+              >
+                Run now
+              </BusyButton>
+            ) : null}
           </Cell>
         )
       })}

package/src/views/Jobs/focus.ts

@@ -31,6 +31,17 @@ export function focusJobRow(id: string): void {
   else focusJobsFallback()
 }
 
+/**
+ * Focus the open drawer's tab panel, where the job's new state shows, when a
+ * footer action's button went away (a cancel, a retry). The row is behind the
+ * drawer, which keeps focus inside itself.
+ */
+export function focusJobDrawer(): void {
+  const drawer = document.querySelector<HTMLElement>('[data-job-drawer]')
+  const target = drawer?.querySelector<HTMLElement>('[role="tabpanel"]') ?? drawer
+  target?.focus()
+}
+
 /**
  * Focus return for the Jobs dialogs. Radix's modal Dialog only returns focus
  * to a `Dialog.Trigger`, and these open from several controls, so the control

package/src/views/Jobs.tsx

@@ -8,12 +8,17 @@ import { Segmented } from '../components/ui/Segmented.js'
 import {
   JOB_FILTERS,
   JOB_TYPES,
+  canActOnJobs,
+  canRetryJob,
   countJobs,
-  jobType,
+  jobActions,
+  jobTotal,
   matchJob,
+  retryPoint,
   toJobRows,
   type JobFilter,
   type JobRow,
+  type JobViewer,
 } from '../lib/job-view.js'
 import {
   JOBS_LIST_LIMIT,
@@ -24,20 +29,35 @@ import {
 } from '../lib/jobs-service.js'
 import { BusyButton } from './Jobs/BusyButton.js'
 import { CancelJobDialog, staleRunning } from './Jobs/CancelJobDialog.js'
-import { focusJobRow } from './Jobs/focus.js'
+import { focusJobDrawer, focusJobRow } from './Jobs/focus.js'
 import { JobsTable, type JobDrawerTab } from './Jobs/JobsTable.js'
 import { JobIcons } from './Jobs/icons.js'
-import { JobDrawer } from './Jobs/JobDrawer.js'
-import { NewBatchJob } from './Jobs/placeholders.js'
+import { JobDrawer, type DrawerNotice } from './Jobs/JobDrawer.js'
+import { NewBatchJob } from './Jobs/NewBatchJob.js'
 import { usePageVisible, useJobsFeed } from './Jobs/useJobsFeed.js'
 import { WorkerStrip } from './Jobs/WorkerStrip.js'
 
 export interface JobsProps {
   onNavigate: (path: string) => void
+  /**
+   * The signed-in user's role. It decides which job actions show: viewers
+   * get none (the server refuses them anyway). Without one, none show.
+   */
+  role?: string | null
+  /** The signed-in user's id: a batch's Retry shows to the person who queued it. */
+  userId?: string | null
+  /** The CMS config: the batch wizard lists its page and post collections. */
+  config?: unknown
 }
 
 const FILTER_OPTIONS = JOB_FILTERS.map(({ id, label }) => ({ id, label }))
 
+/** What a run, retry or cancel came to, for a toast and the drawer's live region. */
+interface Outcome {
+  text: string
+  tone: 'info' | 'error'
+}
+
 /** `.jb-livebtn`: pauses and resumes the 5-second refresh. */
 function LiveButton({ live, onToggle }: { live: boolean; onToggle: () => void }) {
   return (
@@ -65,10 +85,10 @@ function LiveButton({ live, onToggle }: { live: boolean; onToggle: () => void })
  * seconds while Live is on and the tab is visible. Filters and counts work
  * on the loaded rows.
  *
- * Opening a job sets `open` and shows its drawer (P-18). The batch wizard
- * (P-20) renders from `./Jobs/placeholders.js` until it's built.
+ * Opening a job sets `open` and shows its drawer (P-18). New batch AI job
+ * opens the wizard (P-20); a queued job is added at the top of the list.
  */
-export function Jobs({ onNavigate }: JobsProps) {
+export function Jobs({ onNavigate, role = null, userId = null, config }: JobsProps) {
   const [live, setLive] = useState(true)
   const visible = usePageVisible()
   const feed = useJobsFeed(live && visible)
@@ -80,13 +100,26 @@ export function Jobs({ onNavigate }: JobsProps) {
   const cancelledId = useRef<string | null>(null)
   const [wizard, setWizard] = useState(false)
   const [retryingId, setRetryingId] = useState<string | null>(null)
+  /** Jobs with a retry request out, so a second click can't post another. */
+  const retrying = useRef(new Set<string>())
   /** A row whose action button just went away; its open button takes focus if focus was lost. */
   const refocus = useRef<string | null>(null)
+  /**
+   * The latest outcome, which the open drawer announces too: screen readers
+   * are kept inside the drawer (aria-modal), away from the toaster. Cleared
+   * whenever a drawer opens or closes, so a drawer never announces an older one.
+   */
+  const [notice, setNotice] = useState<DrawerNotice | null>(null)
+  /** A cancel's outcome, held until its dialog has gone (`onClosed`). */
+  const cancelOutcome = useRef<Outcome | null>(null)
+  const viewer = useMemo<JobViewer>(() => ({ role, userId }), [role, userId])
 
   useEffect(() => {
     const id = refocus.current
     if (!id) return
     refocus.current = null
+    // The drawer places focus after its own footer's actions.
+    if (open) return
     const current = document.activeElement
     if (current && current !== document.body && current.isConnected) return
     focusJobRow(id)
@@ -112,56 +145,97 @@ export function Jobs({ onNavigate }: JobsProps) {
   const openRow = open ? rows.find((row) => row.id === open.id) : undefined
   const ready = feed.status === 'ready'
 
-  const openAt = (id: string, tab: JobDrawerTab = null) => setOpen({ id, tab })
+  const openAt = (id: string, tab: JobDrawerTab = null) => {
+    setOpen({ id, tab })
+    setNotice(null)
+  }
+
+  /** Toast an outcome, and have an open drawer announce it. */
+  function report(text: string, tone: Outcome['tone'] = 'info') {
+    if (tone === 'error') toast.error(text)
+    else toast(text)
+    setNotice((prev) => ({ text, n: (prev?.n ?? 0) + 1 }))
+  }
 
   async function runNow(t: RunnableJobType) {
     const res = await runJobNow(t)
     if (!res.ok) {
-      toast.error(`${JOB_TYPES[t].label} didn’t start: ${res.error}`)
+      report(`${JOB_TYPES[t].label} didn’t start: ${res.error}`, 'error')
       return
     }
     const { job, reused } = res.value
     upsert(job)
     if (reused) {
-      toast(`${JOB_TYPES[t].label} is already ${job.status}. Reusing that job.`)
       openAt(job.id)
+      report(`${JOB_TYPES[t].label} is already ${job.status}. Reusing that job.`)
     } else {
-      toast(`${JOB_TYPES[t].label} queued. It starts on the next worker run.`)
+      report(`${JOB_TYPES[t].label} queued. It starts on the next worker run.`)
     }
     void reload()
   }
 
-  async function retry(j: JobRow) {
+  /**
+   * Retry a failed job from where it stopped, or ("Retry now") one waiting
+   * out a failed slice's backoff. A 409 means it was retried elsewhere or
+   * isn't waiting any more, so the list is read again before the answer shows.
+   */
+  async function retry(j: JobRow, now = false) {
+    if (retrying.current.has(j.id)) return
+    retrying.current.add(j.id)
     setRetryingId(j.id)
-    const res = await retryJob(j.id)
-    setRetryingId(null)
-    if (!res.ok) {
-      toast.error(`“${j.title}” wasn’t retried: ${res.error}`)
-      return
+    try {
+      const res = await retryJob(j.id)
+      if (res.ok) {
+        refocus.current = j.id
+        upsert(res.value)
+        report(now ? 'Retrying on the next worker run' : `Retrying from ${retryPoint(j)}`)
+        void reload()
+        return
+      }
+      const message = `“${j.title}” wasn’t retried: ${res.error}`
+      if (res.status === 409) await reload()
+      report(message, res.status === 409 ? 'info' : 'error')
+    } finally {
+      retrying.current.delete(j.id)
+      setRetryingId(null)
     }
-    refocus.current = j.id
-    upsert(res.value)
-    toast(`Retrying from ${jobType(j.type).unit === 'pages' ? 'page' : 'document'} ${j.done + 1}`)
-    void reload()
   }
 
+  function askCancel(row: JobRow) {
+    cancelledId.current = row.id
+    setCancelTarget(row)
+  }
+
+  /**
+   * The dialog's Cancel job. A cancel that lands after the job ended comes
+   * back as the job, unchanged. A 409 (it ended, or was cancelled, first) is
+   * shown once the list has been read again, so the dialog closes onto it.
+   */
   async function confirmCancel(j: JobRow) {
     const res = await cancelJob(j.id)
     if (!res.ok) {
-      toast.error(`“${j.title}” wasn’t cancelled: ${res.error}`)
+      const text = `“${j.title}” wasn’t cancelled: ${res.error}`
+      if (res.status === 409) await reload()
+      cancelOutcome.current = { text, tone: res.status === 409 ? 'info' : 'error' }
       return
     }
     const job = res.value
     upsert(job)
-    if (job.status === 'cancelled') toast('Job cancelled')
-    else if (staleRunning(j)) toast('Stopping on the next worker run')
-    else if (job.status === 'queued' || job.status === 'running') toast('Stopping after this slice')
-    else toast(`“${j.title}” had already finished.`)
+    let text: string
+    if (job.status === 'cancelled') text = 'Job cancelled'
+    else if (staleRunning(j)) text = 'Stopping on the next worker run'
+    else if (job.status === 'queued' || job.status === 'running') text = 'Stopping after this slice'
+    else text = `“${j.title}” had already finished.`
+    cancelOutcome.current = { text, tone: 'info' }
     void reload()
   }
 
   const deadFirst = dead[0]
   const firstReview = revJobs[0]
+  // The dialog follows the job as the list refreshes, so its copy fits the state it's in.
+  const cancelRow = cancelTarget
+    ? (rows.find((row) => row.id === cancelTarget.id) ?? cancelTarget)
+    : null
   const deadCause = deadFirst?.error?.replace(/\.\s*$/, '')
 
   return (
@@ -173,13 +247,16 @@ export function Jobs({ onNavigate }: JobsProps) {
         actions={
           <>
             <LiveButton live={live} onToggle={() => setLive((value) => !value)} />
-            <Button
-              data-jobs-new=""
-              leftIcon={<JobIcons.spark size={14} />}
-              onClick={() => setWizard(true)}
-            >
-              New batch AI job
-            </Button>
+            {/* Like Run now: the server refuses a batch to anyone else. */}
+            {canActOnJobs(viewer) ? (
+              <Button
+                data-jobs-new=""
+                leftIcon={<JobIcons.spark size={14} />}
+                onClick={() => setWizard(true)}
+              >
+                New batch AI job
+              </Button>
+            ) : null}
           </>
         }
       />
@@ -191,6 +268,7 @@ export function Jobs({ onNavigate }: JobsProps) {
         loading={feed.status === 'loading'}
         rows={rows}
         ticking={live && visible}
+        canRun={canActOnJobs(viewer)}
         onRunNow={runNow}
       />
 
@@ -211,14 +289,16 @@ export function Jobs({ onNavigate }: JobsProps) {
           <Button variant="secondary" size="sm" onClick={() => openAt(deadFirst.id, 'overview')}>
             See why
           </Button>
-          <BusyButton
-            size="sm"
-            leftIcon={<JobIcons.retry size={12} />}
-            busy={retryingId === deadFirst.id}
-            onClick={() => void retry(deadFirst)}
-          >
-            Retry
-          </BusyButton>
+          {canRetryJob(deadFirst, viewer) ? (
+            <BusyButton
+              size="sm"
+              leftIcon={<JobIcons.retry size={12} />}
+              busy={retryingId === deadFirst.id}
+              onClick={() => void retry(deadFirst)}
+            >
+              Retry
+            </BusyButton>
+          ) : null}
         </div>
       ) : null}
 
@@ -278,11 +358,9 @@ export function Jobs({ onNavigate }: JobsProps) {
         status={feed.status}
         error={feed.error}
         retryingId={retryingId}
+        viewer={viewer}
         onOpen={openAt}
-        onCancel={(row) => {
-          cancelledId.current = row.id
-          setCancelTarget(row)
-        }}
+        onCancel={askCancel}
         onRetry={(row) => void retry(row)}
         onReload={reload}
       />
@@ -295,18 +373,54 @@ export function Jobs({ onNavigate }: JobsProps) {
           tab={open.tab}
           now={feed.fetchedAt}
           worker={feed.worker}
-          onClose={() => setOpen(null)}
+          actions={jobActions(openRow, viewer)}
+          retrying={retryingId === openRow.id}
+          notice={notice}
+          onCancel={() => askCancel(openRow)}
+          onRetry={(now) => retry(openRow, now)}
+          onClose={() => {
+            setOpen(null)
+            setNotice(null)
+          }}
           onReload={() => void reload()}
           onNavigate={onNavigate}
         />
       ) : null}
-      {wizard ? <NewBatchJob onClose={() => setWizard(false)} /> : null}
+      {wizard ? (
+        <NewBatchJob
+          role={role}
+          config={config}
+          onClose={() => setWizard(false)}
+          onQueued={(job) => {
+            upsert(job)
+            setWizard(false)
+            setFilter('all')
+            setType('all')
+            toast(`“${job.title}” queued · ${jobTotal(job)} documents`)
+            void reload()
+          }}
+          onFocusFallback={(job) =>
+            job
+              ? focusJobRow(job.id)
+              : document.querySelector<HTMLElement>('[data-jobs-new]')?.focus()
+          }
+        />
+      ) : null}
       <CancelJobDialog
-        job={cancelTarget}
+        job={cancelRow}
         onClose={() => setCancelTarget(null)}
         onConfirm={confirmCancel}
         onFocusFallback={() => {
-          if (cancelledId.current) focusJobRow(cancelledId.current)
+          // Opened from the drawer, whose Cancel job went with the cancel.
+          if (open) focusJobDrawer()
+          else if (cancelledId.current) focusJobRow(cancelledId.current)
+        }}
+        onClosed={() => {
+          // Screen readers are kept inside the dialog while it's open, so a
+          // toast or the drawer's announcement then could go unread.
+          const outcome = cancelOutcome.current
+          cancelOutcome.current = null
+          if (outcome) report(outcome.text, outcome.tone)
         }}
       />
     </div>

package/src/views/header-footer/AnnouncementTab.tsx

@@ -0,0 +1,231 @@
+'use client'
+
+import { useId, type ReactNode } from 'react'
+import type { AnnouncementTone } from '@prenta/core'
+
+import { Toggle } from '../../components/ui/Toggle.js'
+import {
+  ANNOUNCEMENT_LINK_MAX,
+  ANNOUNCEMENT_MAX,
+  ANNOUNCEMENT_TONES,
+  type AnnouncementForm,
+} from './chrome-form.js'
+import { CARD, FieldLabel, Help, INPUT, MONO, RadioPills } from './controls.js'
+
+/** The swatch beside each Style pill. The site styles the tones; this only hints. */
+const TONE_SWATCH: Record<AnnouncementTone, string> = {
+  brand: 'var(--acc)',
+  dark: 'var(--site-txt)',
+  alert: 'var(--site-alert)',
+}
+
+/** A labelled switch row (the kit's `Line`): label, a help line, then the switch. */
+function SwitchLine({
+  label,
+  sub,
+  on,
+  onChange,
+  disabled,
+}: {
+  label: string
+  sub: string
+  on: boolean
+  onChange: (on: boolean) => void
+  disabled: boolean
+}) {
+  const id = useId()
+  return (
+    <div className="text-sm2 text-txt flex items-center gap-2 leading-[normal] font-medium">
+      <span className="min-w-0 flex-1">
+        <span id={`${id}-label`}>{label}</span>
+        <small id={`${id}-sub`} className="text-hint text-faint mt-px block font-normal">
+          {sub}
+        </small>
+      </span>
+      <Toggle
+        aria-labelledby={`${id}-label`}
+        aria-describedby={`${id}-sub`}
+        checked={on}
+        disabled={disabled}
+        onCheckedChange={onChange}
+      />
+    </div>
+  )
+}
+
+function Field({
+  label,
+  htmlFor,
+  help,
+  children,
+}: {
+  label: string
+  htmlFor: string
+  help?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div className="min-w-0">
+      <FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>
+      {children}
+      {help ? <Help>{help}</Help> : null}
+    </div>
+  )
+}
+
+export interface AnnouncementTabProps {
+  form: AnnouncementForm
+  onChange: (form: AnnouncementForm) => void
+  problem: string | null
+  readOnly: boolean
+}
+
+/**
+ * The announcement bar card. The header switch turns the bar on and off; while
+ * it's off the body is at 50% and can't be used. The site styles the tones and
+ * keeps a visitor's dismissal by the announcement's `id`, which the server
+ * changes whenever the message, link or tone changes.
+ */
+export function AnnouncementTab({ form, onChange, problem, readOnly }: AnnouncementTabProps) {
+  const id = useId()
+  const set = (patch: Partial<AnnouncementForm>) => onChange({ ...form, ...patch })
+  const off = !form.on
+  const bodyDisabled = readOnly || off
+
+  return (
+    <section aria-labelledby={`${id}-title`} className={CARD}>
+      <div className="border-bdr flex items-center gap-2.5 border-b px-4 py-[13px]">
+        <div className="min-w-0 flex-1">
+          <h2
+            id={`${id}-title`}
+            className="text-card-title text-txt m-0 leading-[normal] font-[650]"
+          >
+            Announcement bar
+          </h2>
+          <p className="text-meta text-sub m-0 mt-px leading-[normal]">
+            Shows above the header on every page. No developer needed.
+          </p>
+        </div>
+        <Toggle
+          aria-label="Show announcement bar"
+          checked={form.on}
+          disabled={readOnly}
+          onCheckedChange={(on) => set({ on })}
+        />
+      </div>
+      <div
+        data-off={off || undefined}
+        // Off: 50% and not interactive (the kit's `pointer-events: none`);
+        // `inert` also keeps it out of the Tab order and the accessibility tree.
+        inert={off || undefined}
+        className={`flex flex-col gap-3.5 px-4 py-3.5 ${off ? 'pointer-events-none opacity-50' : ''}`}
+      >
+        <Field
+          label="Message"
+          htmlFor={`${id}-text`}
+          help={
+            <span aria-live="polite">
+              <span className={form.text.length > ANNOUNCEMENT_MAX ? 'text-err' : undefined}>
+                {form.text.length}/{ANNOUNCEMENT_MAX}
+              </span>{' '}
+              · keep it to one line on mobile.
+            </span>
+          }
+        >
+          <input
+            id={`${id}-text`}
+            className={INPUT}
+            maxLength={ANNOUNCEMENT_MAX}
+            value={form.text}
+            disabled={bodyDisabled}
+            onChange={(event) => set({ text: event.target.value })}
+          />
+        </Field>
+        <div className="grid grid-cols-2 gap-2 [@media(width<=560px)]:grid-cols-1">
+          <Field label="Link text" htmlFor={`${id}-link`} help="Optional">
+            <input
+              id={`${id}-link`}
+              className={INPUT}
+              maxLength={ANNOUNCEMENT_LINK_MAX}
+              value={form.linkLabel}
+              disabled={bodyDisabled}
+              onChange={(event) => set({ linkLabel: event.target.value })}
+            />
+          </Field>
+          <Field label="Links to" htmlFor={`${id}-url`}>
+            <input
+              id={`${id}-url`}
+              className={`${INPUT} ${MONO}`}
+              value={form.linkUrl}
+              spellCheck={false}
+              disabled={bodyDisabled}
+              onChange={(event) => set({ linkUrl: event.target.value })}
+            />
+          </Field>
+        </div>
+        <div>
+          <span className="text-meta text-txt mb-[5px] block font-semibold">Style</span>
+          <RadioPills
+            name={`${id}-tone`}
+            label="Style"
+            value={form.tone}
+            disabled={bodyDisabled}
+            options={ANNOUNCEMENT_TONES.map((tone) => ({
+              id: tone.id,
+              label: tone.label,
+              swatch: TONE_SWATCH[tone.id],
+            }))}
+            onChange={(tone) => set({ tone: tone as AnnouncementTone })}
+          />
+          <Help>Your site styles each tone with its own colors.</Help>
+        </div>
+        <SwitchLine
+          label="Visitors can dismiss it"
+          sub="Stays hidden for that visitor until the message changes."
+          on={form.dismissible}
+          disabled={bodyDisabled}
+          onChange={(dismissible) => set({ dismissible })}
+        />
+        <SwitchLine
+          label="Schedule"
+          sub="Turns itself on and off. Your site is refreshed automatically."
+          on={form.scheduled}
+          disabled={bodyDisabled}
+          onChange={(scheduled) => set({ scheduled })}
+        />
+        {form.scheduled ? (
+          <div className="grid grid-cols-2 gap-2 [@media(width<=560px)]:grid-cols-1">
+            <Field label="Starts" htmlFor={`${id}-start`}>
+              <input
+                id={`${id}-start`}
+                className={INPUT}
+                type="datetime-local"
+                value={form.startsAt}
+                disabled={bodyDisabled}
+                onChange={(event) => set({ startsAt: event.target.value })}
+              />
+            </Field>
+            <Field label="Ends" htmlFor={`${id}-end`}>
+              <input
+                id={`${id}-end`}
+                className={INPUT}
+                type="datetime-local"
+                value={form.endsAt}
+                disabled={bodyDisabled}
+                onChange={(event) => set({ endsAt: event.target.value })}
+              />
+            </Field>
+          </div>
+        ) : null}
+      </div>
+      {problem ? (
+        // Outside the body, so it shows at full strength while the bar is off.
+        <div className="-mt-1.5 px-4 pb-3.5">
+          <Help tone="error">
+            <span role="alert">{problem}</span>
+          </Help>
+        </div>
+      ) : null}
+    </section>
+  )
+}