components/approval-sheet/approval-sheet.react.tsx

Functions

Imports

It imports components/approval-sheet/approval-sheet.ts, components/dialog/dialog.react.tsx. No module of this repo imports it.

Source

1import { useEffect, useId, useRef, useState, type FormEvent } from "react";
2import { Dialog, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../dialog/dialog.react.tsx";
3import { approveLabel, titleText, type GateChoice } from "./approval-sheet.ts";
4
5export type { GateChoice } from "./approval-sheet.ts";
6
7export interface Gate {
8  id: string;
9  // The job's title, the gate's legend: "Deploy foxhound to production".
10  title: string;
11  // The exact command that will run.
12  command: string;
13  // One line under the title: "job_8c21 in foxhound, waiting 26 minutes".
14  meta?: string;
15  // Whether the gate starts checked; true by default.
16  include?: boolean;
17}
18
19export interface ApprovalSheetProps {
20  open: boolean;
21  gates: Gate[];
22  // Performs the approval. A returned promise holds the sheet pending until it settles: on
23  // success the sheet closes, on failure its message shows beside the buttons.
24  onApprove: (gates: GateChoice[]) => void | Promise<void>;
25  // Called when the sheet closes, by Cancel, Esc or a successful approval.
26  onClose: () => void;
27  lead?: string;
28}
29
30export function ApprovalSheet({ open, gates, onApprove, onClose, lead = "Each command runs once, when approved. Uncheck a gate you are not ready for; it stays waiting." }: ApprovalSheetProps) {
31  const id = useId();
32  const ref = useRef<HTMLDialogElement>(null);
33  const [checked, setChecked] = useState<Record<string, boolean>>({});
34  const [comments, setComments] = useState<Record<string, string>>({});
35  const [pending, setPending] = useState(false);
36  const [error, setError] = useState<string | null>(null);
37
38  // A fresh sheet each time it opens: every gate's starting choice, no comments, no error.
39  useEffect(() => {
40    if (!open) return;
41    setChecked(Object.fromEntries(gates.map((g) => [g.id, g.include ?? true])));
42    setComments({});
43    setError(null);
44    setPending(false);
45  }, [open]);
46
47  const chosen: GateChoice[] = gates.filter((g) => checked[g.id] ?? g.include ?? true).map((g) => ({ id: g.id, comment: (comments[g.id] ?? "").trim() }));
48  const n = chosen.length;
49  const noneId = `${id}-none`;
50
51  const submit = async (e: FormEvent) => {
52    e.preventDefault();
53    if (n === 0 || pending) return;
54    setError(null);
55    const result = onApprove(chosen);
56    if (!result || typeof (result as Promise<void>).then !== "function") return;
57    setPending(true);
58    try {
59      await result;
60      setPending(false);
61      // Closing fires the dialog's close event, which calls onClose.
62      ref.current?.close();
63    } catch (err) {
64      setPending(false);
65      setError(err instanceof Error && err.message ? err.message : "Could not approve. Nothing was approved. Try again.");
66    }
67  };
68
69  // The shared Dialog does the opening, focus (on Cancel, as the sheet is destructive), the
70  // return of focus, Esc and Cancel being held while busy, and the locked backdrop.
71  return (
72    <Dialog ref={ref} className="cap-approval" size="lg" open={open} onOpenChange={(o) => !o && onClose()} modalLock destructive busy={pending} closeButton={false} described>
73      <form className="cap-approval-form" onSubmit={submit}>
74        <DialogHeader>
75          <DialogTitle>{titleText(gates.length)}</DialogTitle>
76          <DialogDescription>{lead}</DialogDescription>
77        </DialogHeader>
78        <DialogBody className="cap-approval-gates" flush role="group" aria-label="Gates waiting for approval">
79          {gates.map((g, i) => (
80            <fieldset className="cap-approval-gate" key={g.id} disabled={pending}>
81              <legend className="cap-approval-job">{g.title}</legend>
82              {g.meta && <p className="cap-approval-meta">{g.meta}</p>}
83              <pre className="cap-approval-cmd">
84                <code>{g.command}</code>
85              </pre>
86              <label className="cap-check">
87                <input
88                  type="checkbox"
89                  data-cap-part="include"
90                  name="gate"
91                  value={g.id}
92                  checked={checked[g.id] ?? g.include ?? true}
93                  onChange={(e) => setChecked((c) => ({ ...c, [g.id]: e.target.checked }))}
94                />{" "}
95                Include this gate
96              </label>
97              <div className="cap-field">
98                <label className="cap-field-label" htmlFor={`${id}-c${i}`}>
99                  Comment (optional)
100                </label>
101                <textarea className="cap-input" id={`${id}-c${i}`} data-cap-part="comment" rows={2} value={comments[g.id] ?? ""} onChange={(e) => setComments((c) => ({ ...c, [g.id]: e.target.value }))} />
102              </div>
103            </fieldset>
104          ))}
105        </DialogBody>
106        {error && (
107          <div className="cap-approval-error" data-cap-part="error">
108            <div className="cap-alert" data-tone="crit" role="alert">
109              <span data-cap-part="error-text">{error}</span>
110            </div>
111          </div>
112        )}
113        <DialogFooter align="between">
114          <DialogClose part="cancel">Cancel</DialogClose>
115          <p className="cap-approval-none" id={noneId} data-cap-part="none" hidden={n !== 0}>
116            Choose at least one gate.
117          </p>
118          <button type="submit" className="cap-btn" data-variant="primary" data-cap-part="approve" aria-busy={pending ? "true" : undefined} aria-disabled={n === 0 ? "true" : undefined} aria-describedby={n === 0 ? noneId : undefined}>
119            {pending && <span className="cap-btn-spinner" aria-hidden="true" />}
120            <span data-cap-part="approve-label">{approveLabel(n, pending)}</span>
121          </button>
122        </DialogFooter>
123      </form>
124    </Dialog>
125  );
126}