@prenta/admin 2.6.1 → 2.8.0

package/src/views/Jobs/JobsTable.tsx

@@ -0,0 +1,267 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Button } from '../../components/ui/Button.js'
+import { Card } from '../../components/ui/Card.js'
+import { Skeleton } from '../../components/ui/Skeleton.js'
+import {
+  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'
+import { focusJobsFallback, focusLost, jobOpenButtonId } from './focus.js'
+import { JobIcons } from './icons.js'
+
+/** The drawer tab a control opens (jobs-drawer.jsx); null opens the default one. */
+export type JobDrawerTab = 'overview' | 'review' | null
+
+/**
+ * `.jb-row` columns: Job, Status, Progress, Started by, actions. Every row is
+ * its own grid with fixed or fractional tracks, so no cell's content moves
+ * another. ≤1100px drops Started by; ≤768px stacks status beside the job and
+ * progress under both. The kit's ≤1100px actions track is 80px, too narrow
+ * for Review beside a 30px button, so it stays 96px (CONFLICTS.md §4).
+ */
+const ROW_GRID =
+  'grid items-center gap-[14px] grid-cols-[minmax(240px,1.6fr)_minmax(150px,.9fr)_minmax(170px,1fr)_minmax(120px,.7fr)_96px] max-[1101px]:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)_minmax(0,1fr)_96px] mobile:grid-cols-[minmax(0,1fr)_auto] mobile:gap-y-2.5'
+
+const WHO_CELL = 'max-[1101px]:hidden'
+const PROGRESS_CELL = 'mobile:col-span-full'
+const ACTIONS_CELL = 'mobile:hidden'
+
+/** `.jb-row.hd`: column names for sighted users; each row reads on its own. */
+function HeaderRow() {
+  return (
+    <div
+      aria-hidden="true"
+      className={`${ROW_GRID} text-micro text-faint mobile:hidden px-4 py-[9px] font-bold tracking-[.4px] uppercase`}
+    >
+      <span>Job</span>
+      <span>Status</span>
+      <span className={PROGRESS_CELL}>Progress</span>
+      <span className={WHO_CELL}>Started by</span>
+      <span className={ACTIONS_CELL} />
+    </div>
+  )
+}
+
+interface RowProps {
+  j: JobRowModel
+  selected: boolean
+  retrying: boolean
+  viewer: JobViewer
+  onOpen: (id: string, tab: JobDrawerTab) => void
+  onCancel: (row: JobRowModel) => void
+  onRetry: (row: JobRowModel) => void
+}
+
+/**
+ * One job. The kit makes the whole row a `role="button"`; here the title is
+ * 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, 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 ${
+        selected ? 'bg-acc-l' : 'hover:bg-[color-mix(in_srgb,var(--acc-l)_45%,transparent)]'
+      }`}
+    >
+      <div className="flex min-w-0 items-center gap-[11px]">
+        <TypeTile type={j.type} />
+        <div className="min-w-0">
+          <button
+            id={jobOpenButtonId(j.id)}
+            data-job-open=""
+            type="button"
+            aria-haspopup="dialog"
+            aria-describedby={statusId}
+            onClick={() => onOpen(j.id, null)}
+            className="text-card-title text-txt block w-full cursor-pointer truncate border-0 bg-transparent p-0 text-left leading-[normal] font-semibold after:absolute after:inset-0 focus-visible:outline-none! focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-[var(--acc)] focus-visible:after:outline-solid"
+          >
+            {j.title}
+          </button>
+          <div className="text-meta text-faint mt-px truncate">
+            {j.scope} · <code className="text-hint font-mono">{j.type}</code>
+          </div>
+        </div>
+      </div>
+      <div id={statusId} className="flex min-w-0 flex-col items-start gap-[3px]">
+        <Pill v={v} />
+        {v.sub ? <small className="text-hint text-sub whitespace-nowrap">{v.sub}</small> : null}
+      </div>
+      <div className={PROGRESS_CELL}>
+        <Bar j={j} />
+      </div>
+      <div className={`text-sm2 text-txt min-w-0 ${WHO_CELL}`}>
+        {j.by}
+        <small className="text-hint text-faint mt-px block">{j.created}</small>
+      </div>
+      <div className={`relative z-10 flex justify-end gap-1 ${ACTIONS_CELL}`}>
+        {review ? (
+          <Button
+            variant="secondary"
+            size="sm"
+            aria-label={`Review: ${j.title}`}
+            onClick={() => onOpen(j.id, 'review')}
+          >
+            Review
+          </Button>
+        ) : null}
+        {actions.cancel ? (
+          <Button
+            variant="icon"
+            size="icon"
+            aria-label={`Cancel ${j.title}`}
+            title="Cancel"
+            className="hover:bg-err-l! hover:text-err!"
+            onClick={() => onCancel(j)}
+          >
+            <JobIcons.stop size={13} />
+          </Button>
+        ) : null}
+        {actions.retry ? (
+          <BusyButton
+            variant="icon"
+            size="icon"
+            aria-label={`Retry ${j.title}`}
+            title="Retry"
+            busy={retrying}
+            leftIcon={<JobIcons.retry size={14} />}
+            onClick={() => onRetry(j)}
+          />
+        ) : null}
+        {/* Decorative. The kit squeezes it and the 30px buttons when Review shows; it gives way instead. */}
+        {review ? null : (
+          <span
+            aria-hidden="true"
+            className="text-sub inline-flex size-[30px] shrink-0 items-center justify-center"
+          >
+            <JobIcons.chev size={14} />
+          </span>
+        )}
+      </div>
+    </li>
+  )
+}
+
+const EMPTY_HINT: Partial<Record<JobFilter, string>> = {
+  dead: 'Nothing has failed.',
+  review: 'Every AI change has been reviewed.',
+}
+
+export interface JobsTableProps {
+  rows: JobRowModel[]
+  filter: JobFilter
+  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
+  onCancel: (row: JobRowModel) => void
+  onRetry: (row: JobRowModel) => void
+  onReload: () => Promise<void>
+}
+
+/** jobs-view.jsx table card: header, rows, and the footnote about other crons. */
+export function JobsTable({
+  rows,
+  filter,
+  selectedId,
+  retryingId,
+  viewer,
+  status,
+  error,
+  onOpen,
+  onCancel,
+  onRetry,
+  onReload,
+}: JobsTableProps) {
+  const [reloading, setReloading] = useState(false)
+
+  // Try again unmounts with the error once the list loads, so focus moves to
+  // the list. Only after Try again: a refresh that recovers on its own leaves
+  // focus alone.
+  const triedAgain = useRef(false)
+  useEffect(() => {
+    if (status === 'error') return
+    if (triedAgain.current && focusLost()) focusJobsFallback()
+    triedAgain.current = false
+  }, [status])
+
+  let body
+  if (status === 'loading') {
+    body = <Skeleton variant="table-row" lines={4} className="border-bdr border-t" />
+  } else if (status === 'error') {
+    body = (
+      <div
+        role="alert"
+        className="text-body text-sub flex flex-col items-center gap-3 px-4 py-10 text-center"
+      >
+        <p className="m-0">Jobs couldn’t be loaded. {error}</p>
+        <BusyButton
+          variant="secondary"
+          size="sm"
+          busy={reloading}
+          onClick={async () => {
+            triedAgain.current = true
+            setReloading(true)
+            try {
+              await onReload()
+            } finally {
+              setReloading(false)
+            }
+          }}
+        >
+          Try again
+        </BusyButton>
+      </div>
+    )
+  } else if (rows.length === 0) {
+    body = (
+      <p className="text-body text-sub m-0 px-4 py-10 text-center">
+        {['No jobs here.', EMPTY_HINT[filter]].filter(Boolean).join(' ')}
+      </p>
+    )
+  } else {
+    body = (
+      <ul aria-label="Jobs" className="m-0 list-none p-0">
+        {rows.map((j) => (
+          <JobRowItem
+            key={j.id}
+            j={j}
+            selected={selectedId === j.id}
+            retrying={retryingId === j.id}
+            viewer={viewer}
+            onOpen={onOpen}
+            onCancel={onCancel}
+            onRetry={onRetry}
+          />
+        ))}
+      </ul>
+    )
+  }
+
+  return (
+    <Card>
+      <HeaderRow />
+      {body}
+      <div className="border-bdr text-meta text-faint flex flex-wrap gap-2.5 border-t px-4 py-2.5">
+        Publishing, cleanup, search sync and SEO autopilot run on their own schedules and don’t
+        appear here.
+      </div>
+    </Card>
+  )
+}