@prenta/admin 2.6.1 → 2.8.0

package/src/views/Jobs/DrawerReview.tsx

@@ -0,0 +1,464 @@
+'use client'
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import type { JobReviewItem } from '@prenta/core'
+import { Button } from '../../components/ui/Button.js'
+import { charLimit, linkParts } from '../../lib/job-drawer.js'
+import type { OnApprove, ReviewAction } from '../../lib/jobs-service.js'
+import { BusyButton } from './BusyButton.js'
+import { DrawerEmpty } from './DrawerResults.js'
+import { JobIcons } from './icons.js'
+import type { ReviewItems } from './useReviewItems.js'
+
+/** A link suggestion's field. It can't be edited (the server answers 400). */
+const LINK_FIELD = 'body'
+/** Image alt text has no draft or published state, so its Approve has no choice. */
+const ALT_FIELD = 'altText'
+
+/** The drawer's per-change state: the request out, and the last outcome to show. */
+export interface ReviewItemState {
+  busy?: 'approve' | 'reject' | 'undo'
+  note?: { tone: 'err' | 'info'; text: string }
+}
+
+const MENU_ITEM =
+  'rounded-7 text-body text-txt data-[highlighted]:bg-acc-l data-[highlighted]:text-acc flex cursor-pointer items-center px-3 py-2 outline-none'
+
+/**
+ * Approve, with the choice of what approving does: "Save as draft" (which
+ * reads "Keep current status" on a published document, where it leaves the
+ * change in review) or "Publish" (CONFLICTS.md §4). Alt text has no choice.
+ */
+function ApproveButton({
+  label,
+  busy,
+  disabled,
+  choice,
+  published,
+  onApprove,
+}: {
+  label: string
+  busy: boolean
+  disabled: boolean
+  choice: boolean
+  published: boolean
+  onApprove: (onApprove?: OnApprove) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const icon = <JobIcons.check size={12} />
+  if (!choice) {
+    return (
+      <BusyButton
+        size="sm"
+        leftIcon={icon}
+        busy={busy}
+        aria-disabled={disabled || undefined}
+        data-review-focus="approve"
+        onClick={() => {
+          if (!disabled) onApprove()
+        }}
+      >
+        {label}
+      </BusyButton>
+    )
+  }
+  return (
+    <DropdownMenu.Root
+      open={open}
+      onOpenChange={(next) => setOpen(next && !busy && !disabled)}
+      modal={false}
+    >
+      <DropdownMenu.Trigger asChild>
+        <BusyButton
+          size="sm"
+          leftIcon={icon}
+          rightIcon={<JobIcons.chevDown size={12} />}
+          busy={busy}
+          aria-disabled={disabled || undefined}
+          data-review-focus="approve"
+        >
+          {label}
+        </BusyButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        align="end"
+        sideOffset={4}
+        className="rounded-10 border-bdr bg-card shadow-shd2 z-[var(--z-modal)] min-w-[180px] border p-1"
+      >
+        <DropdownMenu.Item className={MENU_ITEM} onSelect={() => onApprove('draft')}>
+          {published ? 'Keep current status' : 'Save as draft'}
+        </DropdownMenu.Item>
+        <DropdownMenu.Item className={MENU_ITEM} onSelect={() => onApprove('publish')}>
+          Publish
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}
+
+/** `.jd-diff small`: the column label and its count. */
+function DiffLabel({ label, children }: { label: string; children?: ReactNode }) {
+  return (
+    <div className="text-count text-faint mb-[3px] flex justify-between gap-2 font-bold tracking-[.3px] uppercase">
+      <span>{label}</span>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * 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.
+ */
+export function LinkLine({ after }: { after: string }) {
+  const parts = linkParts(after)
+  if (!parts) return <>{after}</>
+  return (
+    <>
+      {parts.before}
+      <mark className="text-acc bg-transparent underline underline-offset-2">{parts.anchor}</mark>
+      {parts.after}
+      <span className="text-faint text-hint mt-1 block font-mono">→ {parts.href}</span>
+    </>
+  )
+}
+
+interface ItemProps {
+  item: JobReviewItem
+  state: ReviewItemState
+  /** The text being edited; undefined when not editing. */
+  draft: string | undefined
+  published: boolean
+  onDecide: (item: JobReviewItem, decision: ReviewAction) => void
+  onEdit: (item: JobReviewItem) => void
+  onDraft: (id: string, text: string) => void
+  onCancelEdit: (id: string) => void
+  /** Approve all is running: the change can't be edited or decided until it's done. */
+  locked: boolean
+}
+
+/** jobs-drawer.jsx `Item`: one document's current and suggested text, with its actions. */
+function ReviewCard({
+  item,
+  state,
+  draft,
+  published,
+  onDecide,
+  onEdit,
+  onDraft,
+  onCancelEdit,
+  locked,
+}: ItemProps) {
+  const link = item.field === LINK_FIELD
+  const editing = draft !== undefined && item.status === 'pending'
+  const suggested = editing ? draft : (item.editedAfter ?? item.after)
+  const limit = charLimit(item.field)
+  const busy = state.busy
+  const blocked = !!busy || locked
+  const approve = (onApprove?: OnApprove) =>
+    onDecide(item, {
+      action: 'approve',
+      ...(onApprove ? { onApprove } : {}),
+      ...(editing ? { after: draft } : {}),
+    })
+  const approveButton = (label: string) => (
+    <ApproveButton
+      label={label}
+      busy={busy === 'approve'}
+      disabled={blocked}
+      choice={item.field !== ALT_FIELD}
+      published={published}
+      onApprove={approve}
+    />
+  )
+
+  return (
+    <li
+      data-review-item={item.id}
+      tabIndex={-1}
+      className={`rounded-10 overflow-hidden border outline-none ${
+        item.status === 'approved'
+          ? 'border-[color-mix(in_srgb,var(--suc)_45%,var(--bdr))]'
+          : 'border-bdr'
+      } ${item.status === 'rejected' ? 'opacity-60' : ''}`}
+    >
+      <div className="bg-bg text-sm2 text-txt flex items-center gap-2 px-3 py-[9px] font-semibold">
+        <span className="min-w-0 flex-1 truncate">{item.documentTitle}</span>
+        <code className="text-micro text-faint max-w-[45%] truncate font-mono font-normal">
+          {item.url}
+        </code>
+        {item.status === 'approved' ? (
+          <span className="rounded-pill bg-suc-l text-suc text-micro flex-none px-2 py-px font-bold">
+            Approved
+          </span>
+        ) : null}
+        {item.status === 'rejected' ? (
+          <span className="rounded-pill bg-bg text-sub border-bdr text-micro flex-none border px-2 py-px font-bold">
+            Rejected
+          </span>
+        ) : null}
+      </div>
+      <div className="bg-bdr grid grid-cols-2 gap-px max-[560px]:grid-cols-1">
+        <div className="bg-card text-sm2 text-txt min-w-0 px-3 py-[9px] leading-[1.5] break-words">
+          <DiffLabel label="Current">
+            {link ? null : <span>{item.before.length || ''}</span>}
+          </DiffLabel>
+          <div className={item.before ? 'text-sub' : 'text-faint italic'}>
+            {item.before || 'Empty'}
+          </div>
+        </div>
+        <div className="bg-card text-sm2 text-txt min-w-0 px-3 py-[9px] leading-[1.5] break-words">
+          <DiffLabel label="Suggested">
+            {link ? null : (
+              <span className={limit !== null && suggested.length > limit ? 'text-err' : ''}>
+                {suggested.length}
+              </span>
+            )}
+          </DiffLabel>
+          {editing ? (
+            <textarea
+              aria-label={`Edit suggestion for ${item.documentTitle}`}
+              data-review-focus="text"
+              value={draft}
+              readOnly={blocked}
+              onChange={(event) => {
+                if (!blocked) onDraft(item.id, event.target.value)
+              }}
+              className="border-acc-m rounded-7 bg-card text-sm2 text-txt min-h-[70px] w-full resize-y border px-2 py-1.5"
+            />
+          ) : link ? (
+            <div>
+              <LinkLine after={suggested} />
+            </div>
+          ) : (
+            <div>{suggested}</div>
+          )}
+        </div>
+      </div>
+      {/* Not a live region: it appears with its text, which screen readers
+          don't read out. The drawer announces it in its own live region. */}
+      {state.note ? (
+        <p
+          data-review-note={state.note.tone}
+          className={`border-bdr text-meta m-0 flex items-start gap-[7px] border-t px-3 py-2 leading-[1.5] ${
+            state.note.tone === 'err' ? 'text-err' : 'text-sub'
+          }`}
+        >
+          <span className="mt-0.5 flex shrink-0">
+            <JobIcons.alert size={13} />
+          </span>
+          <span>{state.note.text}</span>
+        </p>
+      ) : null}
+      <div className="border-bdr flex flex-wrap justify-end gap-1.5 border-t px-2.5 py-2">
+        {item.status !== 'pending' ? (
+          <BusyButton
+            variant="ghost"
+            size="sm"
+            busy={busy === 'undo'}
+            aria-disabled={blocked ? true : undefined}
+            data-review-focus="undo"
+            onClick={() => {
+              if (!blocked) onDecide(item, { action: 'undo' })
+            }}
+          >
+            Undo
+          </BusyButton>
+        ) : editing ? (
+          <>
+            <Button
+              variant="ghost"
+              size="sm"
+              aria-disabled={blocked ? true : undefined}
+              className="aria-disabled:pointer-events-none aria-disabled:opacity-50"
+              onClick={() => {
+                if (!blocked) onCancelEdit(item.id)
+              }}
+            >
+              Undo edit
+            </Button>
+            {approveButton('Approve edited')}
+          </>
+        ) : (
+          <>
+            <BusyButton
+              variant="ghost"
+              size="sm"
+              busy={busy === 'reject'}
+              aria-disabled={blocked ? true : undefined}
+              onClick={() => {
+                if (!blocked) onDecide(item, { action: 'reject' })
+              }}
+            >
+              Reject
+            </BusyButton>
+            {link ? null : (
+              <Button
+                variant="secondary"
+                size="sm"
+                leftIcon={<JobIcons.edit size={12} />}
+                data-review-focus="edit"
+                aria-disabled={blocked ? true : undefined}
+                className="aria-disabled:pointer-events-none aria-disabled:opacity-50"
+                onClick={() => {
+                  if (!blocked) onEdit(item)
+                }}
+              >
+                Edit
+              </Button>
+            )}
+            {approveButton('Approve')}
+          </>
+        )}
+      </div>
+    </li>
+  )
+}
+
+export interface DrawerReviewProps {
+  review: ReviewItems
+  /** The job's counts from the API, not the loaded changes. */
+  counts: { pending: number; approved: number; rejected: number }
+  /** The job is queued or running, so more changes arrive. */
+  running: boolean
+  cancelled: boolean
+  onApprove: OnApprove
+  itemState: Readonly<Record<string, ReviewItemState>>
+  drafts: Readonly<Record<string, string>>
+  isPublished: (documentId: string) => boolean
+  onDecide: (item: JobReviewItem, decision: ReviewAction) => void
+  onEdit: (item: JobReviewItem) => void
+  onDraft: (id: string, text: string) => void
+  onCancelEdit: (id: string) => void
+  /**
+   * Approve all is running. It works from the edits open when it was pressed,
+   * so every change is locked until it's done: an edit begun meanwhile would
+   * be overtaken by the server's approve-all with the AI's text.
+   */
+  locked: boolean
+}
+
+/**
+ * jobs-drawer.jsx Review: the counts, what approving does, then each change,
+ * 20 at a time. Changes on a cancelled job stay reviewable (JOBS.md
+ * "Cancelling").
+ */
+export function DrawerReview({
+  review,
+  counts,
+  running,
+  cancelled,
+  onApprove,
+  itemState,
+  drafts,
+  isPublished,
+  onDecide,
+  onEdit,
+  onDraft,
+  onCancelEdit,
+  locked,
+}: DrawerReviewProps) {
+  const total = counts.pending + counts.approved + counts.rejected
+  const more = Math.min(20, Math.max(0, total - review.items.length))
+  const list = useRef<HTMLUListElement>(null)
+  /** How many changes were loaded when "Show more" was pressed. */
+  const moreFrom = useRef<number | null>(null)
+  const { loadingMore, nextCursor } = review
+
+  // When the last page comes in, "Show more" goes away; focus moves to the
+  // first change it loaded instead of dropping to the dialog.
+  useEffect(() => {
+    const from = moreFrom.current
+    if (from === null || loadingMore) return
+    moreFrom.current = null
+    if (nextCursor) return
+    const first = list.current?.children[from]
+    if (first instanceof HTMLElement) first.focus()
+  }, [loadingMore, nextCursor])
+
+  return (
+    <>
+      <p className="text-sm2 text-sub m-0 flex flex-wrap items-center gap-2">
+        <span>
+          <b className="text-txt">{counts.pending}</b> waiting ·{' '}
+          <b className="text-txt">{counts.approved}</b> approved ·{' '}
+          <b className="text-txt">{counts.rejected}</b> rejected
+        </span>
+        {running ? <span>· more arrive as the job runs</span> : null}
+      </p>
+      <p className="text-meta text-sub m-0 flex items-start gap-[7px] leading-[1.5]">
+        <span className="mt-0.5 flex shrink-0">
+          <JobIcons.alert size={13} />
+        </span>
+        <span>
+          {onApprove === 'publish'
+            ? 'Approved changes are published right away.'
+            : 'Approved changes are saved as drafts on each document.'}{' '}
+          Each one is recorded in the document’s history, so it can be undone.
+        </span>
+      </p>
+      {review.status === 'ready' && review.error ? (
+        <p role="status" className="text-meta text-err m-0">
+          Couldn’t refresh the changes: {review.error}. Showing the last update.
+        </p>
+      ) : null}
+      {review.status === 'loading' ? (
+        <p role="status" className="text-body text-sub m-0 px-4 py-10 text-center">
+          Loading changes…
+        </p>
+      ) : review.status === 'error' ? (
+        <div
+          role="alert"
+          className="text-body text-sub flex flex-col items-center gap-3 px-4 py-10"
+        >
+          <p className="m-0 text-center">Couldn’t load the changes: {review.error}.</p>
+          <Button variant="secondary" size="sm" onClick={() => void review.refresh()}>
+            Try again
+          </Button>
+        </div>
+      ) : review.items.length === 0 ? (
+        <DrawerEmpty>
+          {cancelled ? 'Cancelled before any changes were ready.' : 'No changes waiting.'}
+        </DrawerEmpty>
+      ) : (
+        <ul
+          ref={list}
+          aria-label="Suggested changes"
+          className="m-0 flex list-none flex-col gap-3.5 p-0"
+        >
+          {review.items.map((item) => (
+            <ReviewCard
+              key={item.id}
+              item={item}
+              state={itemState[item.id] ?? {}}
+              draft={drafts[item.id]}
+              published={isPublished(item.documentId)}
+              onDecide={onDecide}
+              onEdit={onEdit}
+              onDraft={onDraft}
+              onCancelEdit={onCancelEdit}
+              locked={locked}
+            />
+          ))}
+        </ul>
+      )}
+      {review.status === 'ready' && review.nextCursor ? (
+        <div className="flex justify-center">
+          <BusyButton
+            variant="secondary"
+            size="sm"
+            busy={review.loadingMore}
+            data-review-more=""
+            onClick={() => {
+              moreFrom.current = review.items.length
+              review.loadMore()
+            }}
+          >
+            {more > 0 ? `Show ${more} more` : 'Show more'}
+          </BusyButton>
+        </div>
+      ) : null}
+    </>
+  )
+}