Skip to content
Sign up

flagon-io/g1t

public
0
192 linesCodeBlameRaw
1/**
2 * The merge queue as a train: the default branch, then each entry in
3 * order with the combination it is tested as and how its checks stand.
4 * The Merge queue page shows it whole; the Work page shows what is moving.
5 */
6import { Check, CircleDashed, GitCommitHorizontal, GitMerge, Loader2, Minus, X } from "lucide-react";
7import { type ReactNode, Suspense } from "react";
8import { Await, Link } from "react-router";
9
10import type { QueueEntry, QueueState } from "@g1t/contracts";
11
12import { TimeAgo } from "./ui";
13import { Avatar } from "./ui/avatar";
14import { Badge, type BadgeTone } from "./ui/badge";
15import { Card } from "./ui/card";
16
17/** A merge_group workflow run on a combined state. */
18export type GroupRun = { id: string; name: string };
19
20const STATE: Record<QueueState, { label: string; tone: BadgeTone; icon: ReactNode }> = {
21 waiting: { label: "Waiting", tone: "neutral", icon: <CircleDashed size={13} /> },
22 testing: { label: "Testing", tone: "accent", icon: <Loader2 size={13} className="animate-spin" /> },
23 passed: { label: "Passed", tone: "success", icon: <Check size={13} /> },
24 failed: { label: "Failed", tone: "danger", icon: <X size={13} /> },
25 landed: { label: "Landed", tone: "merged", icon: <GitMerge size={13} /> },
26 removed: { label: "Removed", tone: "neutral", icon: <Minus size={13} /> },
27};
28
29export function QueueStateBadge({ state }: { state: QueueState }) {
30 const { label, tone, icon } = STATE[state];
31 return (
32 <Badge tone={tone} size="md" className="gap-1.5">
33 {icon}
34 {label}
35 </Badge>
36 );
37}
38
39/** `main + #12 + #14`: the state an entry is being tested in. */
40export function TestedAs({ entry, branch }: { entry: QueueEntry; branch: string }) {
41 return (
42 <span className="flex flex-wrap items-center gap-1 font-mono text-xs text-muted">
43 <Badge shape="tag">{branch}</Badge>
44 {[...entry.ahead, entry.number].map((number) => (
45 <span key={number} className="flex items-center gap-1">
46 <span className="text-faint">+</span>
47 <Badge shape="tag" tone={number === entry.number ? "accent" : "neutral"}>
48 #{number}
49 </Badge>
50 </span>
51 ))}
52 </span>
53 );
54}
55
56/**
57 * How an entry's checks went, linked to the merge_group run on its combined
58 * state; with several runs, each is named and linked after the count.
59 */
60function GroupChecks({ entry, base, runs }: { entry: QueueEntry; base: string; runs: GroupRun[] }) {
61 const ran = entry.results.length;
62 const passed = entry.results.filter((result) => result.passed).length;
63 const [first, ...more] = runs;
64 const tone = passed === ran ? "text-success" : "text-danger";
65 const count = ran > 0 ? `${passed}/${ran} checks passed` : first ? "merge_group run" : null;
66 if (!count) return null;
67 return (
68 <span className="flex flex-wrap items-center gap-x-2">
69 {first ? (
70 <Link to={`${base}/actions/runs/${first.id}`} className={`underline-offset-2 hover:underline ${ran > 0 ? tone : "text-muted"}`}>
71 {count}
72 {more.length > 0 && ` · ${first.name}`}
73 </Link>
74 ) : (
75 <span className={tone}>{count}</span>
76 )}
77 {more.map((run) => (
78 <Link key={run.id} to={`${base}/actions/runs/${run.id}`} className="text-muted underline-offset-2 hover:text-fg hover:underline">
79 {run.name}
80 </Link>
81 ))}
82 </span>
83 );
84}
85
86const NO_RUNS: Promise<Record<string, GroupRun[]>> = Promise.resolve({});
87
88/** Where an entry sits on the train's rail. */
89const STOP: Record<QueueState, string> = {
90 waiting: "border-line-strong bg-bg",
91 testing: "animate-pulse border-accent bg-accent/30",
92 passed: "border-success bg-success",
93 landed: "border-success bg-success",
94 failed: "border-danger bg-danger",
95 removed: "border-line-strong bg-bg",
96};
97
98export function QueueEntryCard({
99 entry,
100 base,
101 branch,
102 position,
103 groupRuns = NO_RUNS,
104}: {
105 entry: QueueEntry;
106 base: string;
107 branch: string;
108 position?: number;
109 /** The merge_group runs on each combined state, by commit. */
110 groupRuns?: Promise<Record<string, GroupRun[]>>;
111}) {
112 const runsOf = (found: Record<string, GroupRun[]>) => (entry.combinedCommit ? (found[entry.combinedCommit] ?? []) : []);
113 return (
114 <li className="relative pl-10">
115 <span className={`absolute top-4 left-3.25 size-3 rounded-full border-2 ${STOP[entry.state]}`} />
116 <Card className="p-4 transition-colors hover:border-line-strong">
117 <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
118 {position != null && <span className="font-mono text-xs text-faint">{position}</span>}
119 <Link to={`${base}/pull/${entry.number}`} prefetch="intent" className="min-w-0 grow font-medium hover:text-accent">
120 {entry.title} <span className="font-normal text-faint">#{entry.number}</span>
121 </Link>
122 <QueueStateBadge state={entry.state} />
123 </div>
124 <div className="mt-2.5 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted">
125 {(entry.state === "testing" || entry.state === "passed" || entry.state === "failed") && <TestedAs entry={entry} branch={branch} />}
126 <Suspense fallback={<GroupChecks entry={entry} base={base} runs={[]} />}>
127 <Await resolve={groupRuns} errorElement={<GroupChecks entry={entry} base={base} runs={[]} />}>
128 {(found) => <GroupChecks entry={entry} base={base} runs={runsOf(found)} />}
129 </Await>
130 </Suspense>
131 <span className="flex items-center gap-1.5">
132 <Avatar name={entry.agent} image={null} size={14} />
133 {entry.agent}
134 </span>
135 <span>
136 queued by {entry.enqueuedBy} <TimeAgo at={entry.createdAt} />
137 </span>
138 {entry.combinedCommit && (
139 <span className="flex items-center gap-1 font-mono">
140 <GitCommitHorizontal size={12} />
141 {entry.combinedCommit.slice(0, 7)}
142 </span>
143 )}
144 </div>
145 {entry.error && <p className="mt-2.5 text-xs text-danger">{entry.error}</p>}
146 {entry.state === "failed" &&
147 entry.results
148 .filter((result) => !result.passed)
149 .slice(0, 2)
150 .map((result) => (
151 <details key={result.command} className="mt-2">
152 <summary className="cursor-pointer font-mono text-xs text-danger">{result.command}</summary>
153 <pre className="mt-1.5 max-h-48 overflow-auto rounded-lg bg-bg p-3 text-xs text-muted">
154 <code>{result.output}</code>
155 </pre>
156 </details>
157 ))}
158 </Card>
159 </li>
160 );
161}
162
163/** The train: the default branch at the commit the front is built on, then each entry in order. */
164export function QueueTrain({
165 active,
166 base,
167 branch,
168 groupRuns,
169 empty = "Nothing is waiting. Merged pull requests appear here.",
170}: {
171 active: QueueEntry[];
172 base: string;
173 branch: string;
174 groupRuns?: Promise<Record<string, GroupRun[]>>;
175 empty?: ReactNode;
176}) {
177 return (
178 <ol className="relative space-y-3 before:absolute before:top-0 before:bottom-4 before:left-4.5 before:w-px before:bg-line">
179 <li className="relative flex items-center gap-2 pl-10 text-xs text-muted">
180 <span className="absolute left-2.75 flex size-4 items-center justify-center rounded-full bg-raised ring-1 ring-line-strong">
181 <GitCommitHorizontal size={10} />
182 </span>
183 <span className="font-mono text-fg">{branch}</span>
184 {active[0]?.baseCommit && <span className="font-mono">at {active[0].baseCommit.slice(0, 7)}</span>}
185 </li>
186 {active.map((entry, index) => (
187 <QueueEntryCard key={entry.id} entry={entry} base={base} branch={branch} position={index + 1} groupRuns={groupRuns} />
188 ))}
189 {active.length === 0 && <li className="pl-10 text-sm text-muted">{empty}</li>}
190 </ol>
191 );
192}