| 1 | /** |
| 2 | * The parts of a pull request's merge box that say what stands between it |
| 3 | * and a merge: the checks the branch requires and every other check, job by |
| 4 | * job, and whether |
| 5 | * the change merges cleanly into its target, with what to do when not. |
| 6 | */ |
| 7 | import { |
| 8 | Check, |
| 9 | ChevronRight, |
| 10 | CircleAlert, |
| 11 | CircleCheck, |
| 12 | CircleX, |
| 13 | Copy, |
| 14 | GitCommitHorizontal, |
| 15 | History, |
| 16 | LoaderCircle, |
| 17 | RotateCw, |
| 18 | Sparkles, |
| 19 | Terminal, |
| 20 | TriangleAlert, |
| 21 | } from "lucide-react"; |
| 22 | import { useEffect, useMemo, useState } from "react"; |
| 23 | import { Form, Link } from "react-router"; |
| 24 | |
| 25 | import type { CheckResult, CheckRun, CommitStatus, Job, Mergeable, PullBranchUpdate, Pull, RequiredCheck } from "@g1t/contracts"; |
| 26 | |
| 27 | import { useAddresses } from "../lib/addresses"; |
| 28 | import { catchUpPhase, catchUpRun, catchUpTitle, catchUpWhy } from "../lib/catch-up"; |
| 29 | import { duration } from "./actions"; |
| 30 | import { Elapsed, type Live, useRuns } from "./agents"; |
| 31 | import { Button, CopyLine, ErrorText, SubmitButton, TimeAgo } from "./ui"; |
| 32 | import { Hint } from "./ui/hint"; |
| 33 | import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"; |
| 34 | import { SkeletonLine } from "./ui/skeleton"; |
| 35 | |
| 36 | // --- Output --------------------------------------------------------------- |
| 37 | |
| 38 | /** What the sandbox puts first when it kept only the end of the output. */ |
| 39 | const CUT_SHORT = "… (earlier output not shown)"; |
| 40 | |
| 41 | /** One run of text in one style, from a line with ANSI colour codes. */ |
| 42 | type Segment = { text: string; className: string }; |
| 43 | |
| 44 | const ANSI_COLOURS: Record<number, string> = { |
| 45 | 30: "text-faint", |
| 46 | 31: "text-danger", |
| 47 | 32: "text-success", |
| 48 | 33: "text-warn", |
| 49 | 34: "text-info", |
| 50 | 35: "text-merged", |
| 51 | 36: "text-info", |
| 52 | 37: "text-fg", |
| 53 | 90: "text-faint", |
| 54 | 91: "text-danger", |
| 55 | 92: "text-success", |
| 56 | 93: "text-warn", |
| 57 | 94: "text-info", |
| 58 | 95: "text-merged", |
| 59 | 96: "text-info", |
| 60 | 97: "text-fg", |
| 61 | }; |
| 62 | |
| 63 | /** |
| 64 | * A line's text split where its colour changes. Colours and bold are kept; |
| 65 | * every other escape sequence (cursor movement, erasing, links) is dropped. |
| 66 | */ |
| 67 | export function ansiSegments(line: string): Segment[] { |
| 68 | const segments: Segment[] = []; |
| 69 | let colour = ""; |
| 70 | let bold = false; |
| 71 | // SGR sequences are kept apart; anything else that starts with ESC goes. |
| 72 | const pattern = /\x1b\[([0-9;]*)m|\x1b\[[0-9;?]*[A-Za-z]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)|\x1b[@-_]/g; |
| 73 | let at = 0; |
| 74 | const push = (text: string) => { |
| 75 | if (text) segments.push({ text, className: [colour, bold ? "font-semibold" : ""].filter(Boolean).join(" ") }); |
| 76 | }; |
| 77 | for (const match of line.matchAll(pattern)) { |
| 78 | push(line.slice(at, match.index)); |
| 79 | at = match.index + match[0].length; |
| 80 | if (match[1] === undefined) continue; |
| 81 | const codes = match[1] === "" ? [0] : match[1].split(";").map(Number); |
| 82 | for (const code of codes) { |
| 83 | if (code === 0) { |
| 84 | colour = ""; |
| 85 | bold = false; |
| 86 | } else if (code === 1) bold = true; |
| 87 | else if (code === 22) bold = false; |
| 88 | else if (code === 39) colour = ""; |
| 89 | else if (ANSI_COLOURS[code]) colour = ANSI_COLOURS[code]; |
| 90 | } |
| 91 | } |
| 92 | push(line.slice(at)); |
| 93 | return segments; |
| 94 | } |
| 95 | |
| 96 | /** Text without any ANSI escape sequences, for copying. */ |
| 97 | export function stripAnsi(text: string): string { |
| 98 | return ansiSegments(text.replace(/\r\n/g, "\n")) |
| 99 | .map((segment) => segment.text) |
| 100 | .join(""); |
| 101 | } |
| 102 | |
| 103 | /** Lines as a terminal would show them: a carriage return starts the line over. */ |
| 104 | function terminalLines(text: string): string[] { |
| 105 | return text |
| 106 | .replace(/\r\n/g, "\n") |
| 107 | .split("\n") |
| 108 | .map((line) => { |
| 109 | const parts = line.split("\r"); |
| 110 | return parts[parts.length - 1] || parts.filter(Boolean).pop() || ""; |
| 111 | }); |
| 112 | } |
| 113 | |
| 114 | /** |
| 115 | * A command's output as a log: numbered lines, colours rendered, a copy |
| 116 | * button, and a note when only the end of it was kept. |
| 117 | */ |
| 118 | export function LogViewer({ text }: { text: string }) { |
| 119 | const cut = text.startsWith(CUT_SHORT); |
| 120 | const body = cut ? text.slice(CUT_SHORT.length).replace(/^\n/, "") : text; |
| 121 | const lines = useMemo(() => { |
| 122 | const all = terminalLines(body); |
| 123 | while (all.length > 0 && all[all.length - 1].trim() === "") all.pop(); |
| 124 | return all; |
| 125 | }, [body]); |
| 126 | const [copied, setCopied] = useState(false); |
| 127 | if (lines.length === 0) { |
| 128 | return <p className="px-3 py-2 font-mono text-xs text-faint">No output.</p>; |
| 129 | } |
| 130 | return ( |
| 131 | <div className="relative"> |
| 132 | <Hint label="Copy the output"> |
| 133 | <button |
| 134 | type="button" |
| 135 | aria-label="Copy the output" |
| 136 | className="absolute top-1.5 right-3 z-10 rounded-md border border-line bg-surface p-1.5 text-faint transition-colors hover:text-fg" |
| 137 | onClick={() => { |
| 138 | void navigator.clipboard.writeText(stripAnsi(body)); |
| 139 | setCopied(true); |
| 140 | setTimeout(() => setCopied(false), 1500); |
| 141 | }} |
| 142 | > |
| 143 | {copied ? <Check size={13} className="text-success" /> : <Copy size={13} />} |
| 144 | </button> |
| 145 | </Hint> |
| 146 | {cut && ( |
| 147 | <p className="border-b border-line px-3 py-1.5 text-xs text-faint"> |
| 148 | Showing the end of the output. Earlier lines were not kept. |
| 149 | </p> |
| 150 | )} |
| 151 | <div className="max-h-96 overflow-auto py-1.5 font-mono text-xs leading-5"> |
| 152 | {lines.map((line, index) => ( |
| 153 | <div key={index} className="flex gap-3 pr-12 pl-2 hover:bg-raised/40"> |
| 154 | <span className="w-9 shrink-0 text-right text-faint/70 select-none">{index + 1}</span> |
| 155 | <span className="min-w-0 break-all whitespace-pre-wrap text-fg/85"> |
| 156 | {ansiSegments(line).map((segment, at) => |
| 157 | segment.className ? ( |
| 158 | <span key={at} className={segment.className}> |
| 159 | {segment.text} |
| 160 | </span> |
| 161 | ) : ( |
| 162 | segment.text |
| 163 | ), |
| 164 | )} |
| 165 | </span> |
| 166 | </div> |
| 167 | ))} |
| 168 | </div> |
| 169 | </div> |
| 170 | ); |
| 171 | } |
| 172 | |
| 173 | // --- Checks --------------------------------------------------------------- |
| 174 | |
| 175 | function seconds(ms: number): string { |
| 176 | if (ms < 1000) return `${ms}ms`; |
| 177 | const s = Math.round(ms / 1000); |
| 178 | return s < 60 ? `${(ms / 1000).toFixed(ms < 10_000 ? 1 : 0)}s` : `${Math.floor(s / 60)}m ${s % 60}s`; |
| 179 | } |
| 180 | |
| 181 | type Standing = "passed" | "failed" | "running" | "queued" | "skipped"; |
| 182 | |
| 183 | function StandingIcon({ standing, size = 15 }: { standing: Standing; size?: number }) { |
| 184 | if (standing === "passed") return <CircleCheck size={size} className="shrink-0 text-success" aria-label="Passed" />; |
| 185 | if (standing === "failed") return <CircleX size={size} className="shrink-0 text-danger" aria-label="Failed" />; |
| 186 | if (standing === "running") |
| 187 | return <LoaderCircle size={size} className="shrink-0 animate-spin text-warn" aria-label="Running" />; |
| 188 | if (standing === "skipped") return <CircleAlert size={size} className="shrink-0 text-faint" aria-label="Skipped" />; |
| 189 | return <LoaderCircle size={size} className="shrink-0 text-faint" aria-label="Queued" />; |
| 190 | } |
| 191 | |
| 192 | /** The id of the workflow run a status links to, if it links to one. */ |
| 193 | export function runIdOf(status: CommitStatus): string | null { |
| 194 | return /\/actions\/runs\/([^/?#]+)/.exec(status.targetUrl ?? "")?.[1] ?? null; |
| 195 | } |
| 196 | |
| 197 | /** Where a job stands, in the box's terms. */ |
| 198 | function jobStanding(job: Job): Standing { |
| 199 | if (job.status !== "completed") return job.status === "in_progress" || job.status === "calling" ? "running" : "queued"; |
| 200 | if (job.conclusion === "success") return "passed"; |
| 201 | if (job.conclusion === "skipped" || job.conclusion === "cancelled") return "skipped"; |
| 202 | return "failed"; |
| 203 | } |
| 204 | |
| 205 | function statusStanding(status: CommitStatus): Standing { |
| 206 | if (status.state === "pending") return "running"; |
| 207 | return status.state === "success" ? "passed" : "failed"; |
| 208 | } |
| 209 | |
| 210 | /** One row of the checks list: an icon, a name, how long, and a way in. */ |
| 211 | function CheckLine({ |
| 212 | standing, |
| 213 | name, |
| 214 | detail, |
| 215 | time, |
| 216 | timing = false, |
| 217 | to, |
| 218 | }: { |
| 219 | standing: Standing; |
| 220 | name: React.ReactNode; |
| 221 | detail?: React.ReactNode; |
| 222 | time?: string; |
| 223 | /** Its jobs and their times are still being read. */ |
| 224 | timing?: boolean; |
| 225 | to?: string; |
| 226 | }) { |
| 227 | return ( |
| 228 | <div className="flex items-center gap-2.5 px-4 py-2 text-sm"> |
| 229 | <StandingIcon standing={standing} /> |
| 230 | <span className="min-w-0 grow truncate"> |
| 231 | {name} |
| 232 | {detail && <span className="text-muted"> — {detail}</span>} |
| 233 | </span> |
| 234 | {time && ( |
| 235 | // A running job's time counts to now, which differs between server and browser. |
| 236 | <span className="shrink-0 animate-fade-in font-mono text-xs text-faint" suppressHydrationWarning> |
| 237 | {time} |
| 238 | </span> |
| 239 | )} |
| 240 | {timing && <SkeletonLine className="w-10 shrink-0 text-xs" />} |
| 241 | {to && ( |
| 242 | <Link to={to} className="shrink-0 text-xs text-muted hover:text-fg hover:underline"> |
| 243 | Details |
| 244 | </Link> |
| 245 | )} |
| 246 | </div> |
| 247 | ); |
| 248 | } |
| 249 | |
| 250 | /** A command from a run recorded before checks were workflows: what it printed, open when it failed. */ |
| 251 | function CommandResult({ result }: { result: CheckResult }) { |
| 252 | const timedOut = result.exitCode == null && !result.passed; |
| 253 | return ( |
| 254 | <details className="group" open={!result.passed}> |
| 255 | <summary className="flex cursor-pointer list-none items-center gap-2.5 px-4 py-2 text-sm hover:bg-raised/40"> |
| 256 | <StandingIcon standing={result.passed ? "passed" : "failed"} /> |
| 257 | <span className="min-w-0 grow truncate"> |
| 258 | <code className="font-mono text-xs">{result.command}</code> |
| 259 | {!result.passed && ( |
| 260 | <span className="text-muted"> |
| 261 | {" — "} |
| 262 | {timedOut ? "stopped for taking too long" : `exited with code ${result.exitCode}`} |
| 263 | </span> |
| 264 | )} |
| 265 | </span> |
| 266 | <span className="shrink-0 font-mono text-xs text-faint">{seconds(result.durationMs)}</span> |
| 267 | <ChevronRight size={14} className="shrink-0 text-faint transition-transform group-open:rotate-90" /> |
| 268 | </summary> |
| 269 | <div className="mx-4 mb-3 overflow-hidden rounded-lg border border-line bg-bg"> |
| 270 | <LogViewer text={result.output} /> |
| 271 | </div> |
| 272 | </details> |
| 273 | ); |
| 274 | } |
| 275 | |
| 276 | /** Where a required check stands, in the box's terms. */ |
| 277 | function requiredStanding(check: RequiredCheck): Standing { |
| 278 | if (check.state === "success") return "passed"; |
| 279 | if (check.state === "failure") return "failed"; |
| 280 | return check.state === "pending" ? "running" : "queued"; |
| 281 | } |
| 282 | |
| 283 | /** How the required checks stand together: "2 of 3 passing", and what holds the rest. */ |
| 284 | export function requiredSummary(required: RequiredCheck[]): { title: string; sub: string; standing: Standing } { |
| 285 | const count = (state: RequiredCheck["state"]) => required.filter((check) => check.state === state).length; |
| 286 | const passing = count("success"); |
| 287 | const failing = count("failure"); |
| 288 | const running = count("pending"); |
| 289 | const expected = count("expected"); |
| 290 | const sub = [ |
| 291 | failing > 0 && `${failing} failing`, |
| 292 | running > 0 && `${running} running`, |
| 293 | expected > 0 && `${expected} not reported yet`, |
| 294 | ] |
| 295 | .filter(Boolean) |
| 296 | .join(", "); |
| 297 | return { |
| 298 | title: `Required checks: ${passing} of ${required.length} passing`, |
| 299 | sub, |
| 300 | standing: failing > 0 ? "failed" : running + expected > 0 ? "running" : "passed", |
| 301 | }; |
| 302 | } |
| 303 | |
| 304 | /** The repository-relative address of a status's link, when it is on g1t. */ |
| 305 | function onSite(url: string | null): string | undefined { |
| 306 | if (!url) return undefined; |
| 307 | const path = url.replace(/^https:\/\/g1t\.sh(?=\/)/, ""); |
| 308 | return path.startsWith("/") ? path : undefined; |
| 309 | } |
| 310 | |
| 311 | /** |
| 312 | * Every check on a pull request, at a glance and in detail: first the |
| 313 | * checks the default branch requires, each as it stands on the head (one |
| 314 | * nothing has reported is waited for), then every workflow run on the |
| 315 | * head, job by job. A record of the merge queue taking it out comes last. |
| 316 | */ |
| 317 | export function ChecksSection({ |
| 318 | run, |
| 319 | required, |
| 320 | statuses, |
| 321 | jobs, |
| 322 | pull, |
| 323 | base, |
| 324 | earlier, |
| 325 | canRerunWorkflows, |
| 326 | settingsUrl, |
| 327 | error, |
| 328 | loading = false, |
| 329 | settled = false, |
| 330 | }: { |
| 331 | /** Set when the merge queue took it out, or for a run from before checks were workflows. */ |
| 332 | run: CheckRun | null; |
| 333 | required: RequiredCheck[]; |
| 334 | statuses: CommitStatus[]; |
| 335 | /** Each workflow run's jobs, by run id, where they could be read. */ |
| 336 | jobs: Record<string, Job[]>; |
| 337 | pull: Pull; |
| 338 | /** The repository's path, `/<owner>/<repo>`. */ |
| 339 | base: string; |
| 340 | earlier: CheckRun[]; |
| 341 | canRerunWorkflows: boolean; |
| 342 | /** Where the required checks are chosen, for those who may. */ |
| 343 | settingsUrl?: string | null; |
| 344 | error?: string | null; |
| 345 | /** The workflow runs' jobs are still being read: their rows wait, busy. */ |
| 346 | loading?: boolean; |
| 347 | /** |
| 348 | * The pull request is closed or merged: its head's checks as they ended, |
| 349 | * to read only. Nothing is said of holding a merge. |
| 350 | */ |
| 351 | settled?: boolean; |
| 352 | }) { |
| 353 | if (!run && statuses.length === 0 && required.length === 0) return null; |
| 354 | |
| 355 | // Every workflow row, so they can be counted the same way they are shown. |
| 356 | const workflow: Standing[] = statuses.flatMap((status) => { |
| 357 | const id = runIdOf(status); |
| 358 | const theirs = id ? jobs[id] : undefined; |
| 359 | return theirs && theirs.length > 0 ? theirs.map(jobStanding) : [statusStanding(status)]; |
| 360 | }); |
| 361 | const failed = workflow.filter((standing) => standing === "failed").length; |
| 362 | const pending = workflow.filter((standing) => standing === "running" || standing === "queued").length; |
| 363 | const passed = workflow.filter((standing) => standing === "passed").length; |
| 364 | const skipped = workflow.filter((standing) => standing === "skipped").length; |
| 365 | const total = workflow.length; |
| 366 | const queueFailed = run?.status === "failed" && run.results.length === 0; |
| 367 | |
| 368 | const summary = required.length > 0 ? requiredSummary(required) : null; |
| 369 | const headline = summary |
| 370 | ? summary.title |
| 371 | : failed > 0 |
| 372 | ? `${failed} of ${total} ${total === 1 ? "check" : "checks"} failed` |
| 373 | : pending > 0 |
| 374 | ? `${pending} of ${total} ${total === 1 ? "check is" : "checks are"} still running` |
| 375 | : total > 0 |
| 376 | ? "All checks have passed" |
| 377 | : "Checks"; |
| 378 | const others = [ |
| 379 | failed > 0 && `${failed} failed`, |
| 380 | pending > 0 && `${pending} running`, |
| 381 | passed > 0 && `${passed} passed`, |
| 382 | skipped > 0 && `${skipped} skipped or cancelled`, |
| 383 | ] |
| 384 | .filter(Boolean) |
| 385 | .join(", "); |
| 386 | const sub = summary |
| 387 | ? [summary.sub, others && `all checks: ${others}`].filter(Boolean).join(" · ") |
| 388 | : settled |
| 389 | ? [others, pull.headCommit && `on ${pull.headCommit.slice(0, 7)}`].filter(Boolean).join(" · ") |
| 390 | : [others, "none are required, so none hold the merge"].filter(Boolean).join(" · "); |
| 391 | const standing: Standing = summary |
| 392 | ? summary.standing |
| 393 | : failed > 0 |
| 394 | ? "failed" |
| 395 | : pending > 0 |
| 396 | ? "running" |
| 397 | : "passed"; |
| 398 | |
| 399 | const commitPath = (sha: string) => |
| 400 | pull.fork ? `/${pull.fork.namespace}/${pull.fork.name}/commit/${sha}` : `${base}/commit/${sha}`; |
| 401 | const older = run != null && pull.headCommit != null && run.headCommit !== pull.headCommit; |
| 402 | const failedRuns = statuses.filter((status) => statusStanding(status) === "failed" && runIdOf(status)); |
| 403 | |
| 404 | return ( |
| 405 | <div aria-busy={loading || undefined}> |
| 406 | <div className="flex items-start gap-3 px-4 py-3"> |
| 407 | <span className="mt-0.5 shrink-0"> |
| 408 | {standing === "failed" || queueFailed ? ( |
| 409 | <CircleX size={16} className="text-danger" /> |
| 410 | ) : standing === "running" ? ( |
| 411 | <LoaderCircle size={16} className="animate-spin text-warn" /> |
| 412 | ) : ( |
| 413 | <CircleCheck size={16} className="text-success" /> |
| 414 | )} |
| 415 | </span> |
| 416 | <div className="min-w-0 grow"> |
| 417 | <p className="text-sm font-medium">{headline}</p> |
| 418 | {sub && <p className="mt-0.5 text-xs text-muted">{sub}</p>} |
| 419 | {!summary && !settled && settingsUrl && ( |
| 420 | <p className="mt-0.5 text-xs text-muted"> |
| 421 | <Link to={settingsUrl} className="text-fg hover:underline"> |
| 422 | Choose required checks |
| 423 | </Link>{" "} |
| 424 | to hold merges until they pass. |
| 425 | </p> |
| 426 | )} |
| 427 | </div> |
| 428 | <div className="flex shrink-0 flex-wrap items-center justify-end gap-2"> |
| 429 | {canRerunWorkflows && |
| 430 | failedRuns.map((status) => ( |
| 431 | <Form method="post" key={status.context}> |
| 432 | <input type="hidden" name="action" value="rerun-workflow" /> |
| 433 | <input type="hidden" name="run" value={runIdOf(status) ?? ""} /> |
| 434 | <Hint label={`Re-run the failed jobs of ${status.context}`}> |
| 435 | <SubmitButton |
| 436 | variant="quiet" |
| 437 | match={{ action: "rerun-workflow", run: runIdOf(status) ?? "" }} |
| 438 | pending="Re-running…" |
| 439 | > |
| 440 | <RotateCw size={13} /> |
| 441 | Re-run failed jobs{failedRuns.length > 1 ? ` of ${status.context}` : ""} |
| 442 | </SubmitButton> |
| 443 | </Hint> |
| 444 | </Form> |
| 445 | ))} |
| 446 | </div> |
| 447 | </div> |
| 448 | {error && ( |
| 449 | <div className="px-4 pb-2"> |
| 450 | <ErrorText>{error}</ErrorText> |
| 451 | </div> |
| 452 | )} |
| 453 | |
| 454 | <div className="divide-y divide-line border-t border-line"> |
| 455 | {required.length > 0 && ( |
| 456 | <section aria-label="Required checks" className="py-1"> |
| 457 | <p className="px-4 pt-1.5 pb-1 text-xs font-medium text-muted">Required</p> |
| 458 | {required.map((check) => ( |
| 459 | <CheckLine |
| 460 | key={check.name} |
| 461 | standing={requiredStanding(check)} |
| 462 | name={ |
| 463 | <> |
| 464 | {check.name} |
| 465 | <span className="ml-1.5 rounded-full border border-line px-1.5 py-px text-[0.625rem] text-faint">Required</span> |
| 466 | </> |
| 467 | } |
| 468 | detail={ |
| 469 | check.state === "expected" |
| 470 | ? "Waiting for status to be reported" |
| 471 | : (check.description ?? (check.state === "pending" ? "running" : undefined)) |
| 472 | } |
| 473 | to={onSite(check.targetUrl)} |
| 474 | /> |
| 475 | ))} |
| 476 | </section> |
| 477 | )} |
| 478 | |
| 479 | {statuses.length > 0 && ( |
| 480 | <section aria-label="All checks" className="py-1"> |
| 481 | <p className="px-4 pt-1.5 pb-1 text-xs font-medium text-muted">{required.length > 0 ? "All checks" : "Workflows"}</p> |
| 482 | {statuses.map((status) => { |
| 483 | const id = runIdOf(status); |
| 484 | const runPath = id ? `${base}/actions/runs/${id}` : onSite(status.targetUrl); |
| 485 | const theirs = id ? jobs[id] : undefined; |
| 486 | if (!theirs || theirs.length === 0) { |
| 487 | return ( |
| 488 | <CheckLine |
| 489 | key={status.context} |
| 490 | standing={statusStanding(status)} |
| 491 | name={status.context} |
| 492 | detail={status.description ?? undefined} |
| 493 | timing={loading && id != null} |
| 494 | to={runPath} |
| 495 | /> |
| 496 | ); |
| 497 | } |
| 498 | return theirs.map((job) => ( |
| 499 | <CheckLine |
| 500 | key={`${status.context}-${job.id}`} |
| 501 | standing={jobStanding(job)} |
| 502 | name={ |
| 503 | <> |
| 504 | <span className="text-muted">{status.context} / </span> |
| 505 | {job.name} |
| 506 | </> |
| 507 | } |
| 508 | detail={job.reason ?? (jobStanding(job) === "failed" ? "failed" : undefined)} |
| 509 | time={duration(job.startedAt, job.finishedAt) || undefined} |
| 510 | to={`${runPath}?job=${job.id}`} |
| 511 | /> |
| 512 | )); |
| 513 | })} |
| 514 | </section> |
| 515 | )} |
| 516 | |
| 517 | {run && ( |
| 518 | <section aria-label={queueFailed ? "Merge queue" : "Earlier commands"} className="py-1"> |
| 519 | <p className="flex flex-wrap items-center gap-x-1.5 px-4 pt-1.5 pb-1 text-xs text-faint"> |
| 520 | <span className="font-medium text-muted">{queueFailed ? "Merge queue" : "Commands from the issue"}</span> |
| 521 | <span>· on</span> |
| 522 | <Link to={commitPath(run.headCommit)} className="inline-flex items-center gap-1 font-mono hover:text-fg"> |
| 523 | <GitCommitHorizontal size={12} /> |
| 524 | {run.headCommit.slice(0, 7)} |
| 525 | </Link> |
| 526 | {run.finishedAt ? ( |
| 527 | <span> |
| 528 | · <TimeAgo at={run.finishedAt} /> |
| 529 | </span> |
| 530 | ) : ( |
| 531 | <span> |
| 532 | · started <TimeAgo at={run.createdAt} /> |
| 533 | </span> |
| 534 | )} |
| 535 | </p> |
| 536 | {older && !queueFailed && ( |
| 537 | <p className="mx-4 my-1.5 flex items-start gap-2 rounded-md bg-warn/10 px-2.5 py-1.5 text-xs text-warn"> |
| 538 | <TriangleAlert size={13} className="mt-0.5 shrink-0" /> |
| 539 | These ran on an older commit, before the latest push,{" "} |
| 540 | <span className="font-mono">{pull.headCommit?.slice(0, 7)}</span>. |
| 541 | </p> |
| 542 | )} |
| 543 | {run.error && ( |
| 544 | <p className="mx-4 my-1.5 rounded-lg border border-line bg-bg px-3 py-2 text-sm text-muted">{run.error}</p> |
| 545 | )} |
| 546 | {run.results.map((result, index) => ( |
| 547 | <CommandResult key={`${result.command}-${index}`} result={result} /> |
| 548 | ))} |
| 549 | </section> |
| 550 | )} |
| 551 | |
| 552 | {earlier.length > 0 && ( |
| 553 | <details className="group"> |
| 554 | <summary className="flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-xs text-muted hover:text-fg"> |
| 555 | <History size={13} /> |
| 556 | Earlier records ({earlier.length}) |
| 557 | <ChevronRight size={13} className="transition-transform group-open:rotate-90" /> |
| 558 | </summary> |
| 559 | <ul className="space-y-1 px-4 pb-3 text-xs"> |
| 560 | {earlier.map((before) => ( |
| 561 | <li key={before.id} className="flex items-center gap-2 text-muted"> |
| 562 | <StandingIcon |
| 563 | size={13} |
| 564 | standing={ |
| 565 | before.status === "passed" |
| 566 | ? "passed" |
| 567 | : before.status === "queued" || before.status === "running" |
| 568 | ? "queued" |
| 569 | : "failed" |
| 570 | } |
| 571 | /> |
| 572 | <Link to={commitPath(before.headCommit)} className="font-mono hover:text-fg"> |
| 573 | {before.headCommit.slice(0, 7)} |
| 574 | </Link> |
| 575 | <span className="min-w-0 truncate"> |
| 576 | {before.status === "errored" |
| 577 | ? `could not run${before.error ? `: ${before.error}` : ""}` |
| 578 | : before.results.length > 0 |
| 579 | ? `${before.results.filter((result) => result.passed).length} of ${before.results.length} passed` |
| 580 | : (before.error ?? before.status)} |
| 581 | </span> |
| 582 | <span className="ml-auto shrink-0 text-faint"> |
| 583 | <TimeAgo at={before.createdAt} /> |
| 584 | </span> |
| 585 | </li> |
| 586 | ))} |
| 587 | </ul> |
| 588 | </details> |
| 589 | )} |
| 590 | </div> |
| 591 | </div> |
| 592 | ); |
| 593 | } |
| 594 | |
| 595 | // --- Mergeability --------------------------------------------------------- |
| 596 | |
| 597 | /** How to resolve the conflicts by hand, step by step, for a branch or a fork. */ |
| 598 | export function commandLineSteps( |
| 599 | pull: Pull, |
| 600 | owner: string, |
| 601 | repo: string, |
| 602 | defaultBranch: string, |
| 603 | files: string[], |
| 604 | site = "https://g1t.sh", |
| 605 | ): string[] { |
| 606 | const upstream = `${site}/${owner}/${repo}.git`; |
| 607 | const add = files.length > 0 && files.length <= 6 ? `git add ${files.join(" ")}` : "git add -A"; |
| 608 | if (pull.branch) { |
| 609 | return [ |
| 610 | `git fetch origin`, |
| 611 | `git checkout ${pull.branch}`, |
| 612 | `git merge origin/${defaultBranch}`, |
| 613 | `${add} && git commit --no-edit`, |
| 614 | `git push origin ${pull.branch}`, |
| 615 | ]; |
| 616 | } |
| 617 | const fork = pull.fork!; |
| 618 | return [ |
| 619 | `git clone ${site}/${fork.namespace}/${fork.name}.git && cd ${fork.name}`, |
| 620 | `git pull --no-rebase ${upstream} ${defaultBranch}`, |
| 621 | `${add} && git commit --no-edit`, |
| 622 | `git push`, |
| 623 | ]; |
| 624 | } |
| 625 | |
| 626 | /** |
| 627 | * The branch conflicts with its target: which files, and three ways out — |
| 628 | * g1t, the browser (soon), or the command line. |
| 629 | */ |
| 630 | export function ConflictsSection({ |
| 631 | conflicts, |
| 632 | pull, |
| 633 | owner, |
| 634 | repo, |
| 635 | defaultBranch, |
| 636 | changesUrl, |
| 637 | canResolve, |
| 638 | resolving, |
| 639 | error, |
| 640 | }: { |
| 641 | conflicts: string[]; |
| 642 | pull: Pull; |
| 643 | owner: string; |
| 644 | repo: string; |
| 645 | defaultBranch: string; |
| 646 | /** Where the pull request's changes are shown, to link each file. */ |
| 647 | changesUrl: string; |
| 648 | /** Whether the viewer may have g1t resolve them. */ |
| 649 | canResolve: boolean; |
| 650 | /** Whether asking for it is on its way. */ |
| 651 | resolving: boolean; |
| 652 | error?: string | null; |
| 653 | }) { |
| 654 | const { site } = useAddresses(); |
| 655 | const steps = commandLineSteps(pull, owner, repo, defaultBranch, conflicts, site); |
| 656 | return ( |
| 657 | <div className="bg-danger/5"> |
| 658 | <div className="flex gap-3 px-4 py-3"> |
| 659 | <CircleAlert size={16} className="mt-0.5 shrink-0 text-danger" /> |
| 660 | <div className="min-w-0 grow"> |
| 661 | <p className="text-sm font-medium">This branch has conflicts that must be resolved</p> |
| 662 | <p className="mt-0.5 text-sm text-muted"> |
| 663 | Merging <span className="font-mono">{defaultBranch}</span> into it stops on{" "} |
| 664 | {conflicts.length === 1 ? "one file" : `${conflicts.length} files`}. It cannot merge until they are resolved. |
| 665 | </p> |
| 666 | {conflicts.length > 0 && ( |
| 667 | <> |
| 668 | <p className="mt-3 text-xs font-medium text-muted">Conflicting files</p> |
| 669 | <ul className="mt-1.5 space-y-1"> |
| 670 | {conflicts.map((path) => ( |
| 671 | <li key={path}> |
| 672 | <Link |
| 673 | to={`${changesUrl}#file-${path}`} |
| 674 | className="font-mono text-xs text-fg hover:text-danger hover:underline" |
| 675 | > |
| 676 | {path} |
| 677 | </Link> |
| 678 | </li> |
| 679 | ))} |
| 680 | </ul> |
| 681 | </> |
| 682 | )} |
| 683 | <div className="mt-3 flex flex-wrap items-center gap-2"> |
| 684 | {canResolve && ( |
| 685 | <Form method="post"> |
| 686 | <input type="hidden" name="action" value="update" /> |
| 687 | <Button variant="primary" type="submit" disabled={resolving}> |
| 688 | {resolving ? <LoaderCircle size={14} className="animate-spin" /> : <Sparkles size={14} />} |
| 689 | {resolving ? "Starting g1t…" : "Resolve with g1t"} |
| 690 | </Button> |
| 691 | </Form> |
| 692 | )} |
| 693 | <Tooltip> |
| 694 | <TooltipTrigger asChild> |
| 695 | {/* A disabled button gets no pointer events; the span carries the tooltip. */} |
| 696 | <span tabIndex={0} className="inline-flex"> |
| 697 | <Button variant="quiet" type="button" disabled aria-disabled="true"> |
| 698 | Resolve in the browser |
| 699 | <span className="rounded-full border border-line px-1.5 text-[0.625rem] text-faint">Soon</span> |
| 700 | </Button> |
| 701 | </span> |
| 702 | </TooltipTrigger> |
| 703 | <TooltipContent> |
| 704 | An editor for conflicts in the browser is coming. Until then, have g1t resolve them, or use the |
| 705 | command line. |
| 706 | </TooltipContent> |
| 707 | </Tooltip> |
| 708 | </div> |
| 709 | {error && ( |
| 710 | <div className="mt-2"> |
| 711 | <ErrorText>{error}</ErrorText> |
| 712 | </div> |
| 713 | )} |
| 714 | <details className="group mt-3"> |
| 715 | <summary className="flex cursor-pointer list-none items-center gap-1.5 text-xs text-muted hover:text-fg"> |
| 716 | <Terminal size={13} /> |
| 717 | Resolve on the command line |
| 718 | <ChevronRight size={13} className="transition-transform group-open:rotate-90" /> |
| 719 | </summary> |
| 720 | <ol className="mt-2 space-y-2 text-xs text-muted"> |
| 721 | {steps.map((step, index) => ( |
| 722 | <li key={step}> |
| 723 | <p className="mb-1"> |
| 724 | {index + 1}.{" "} |
| 725 | {step.startsWith("git add") |
| 726 | ? "Fix the conflicts in each file, removing the conflict markers, then commit the merge:" |
| 727 | : step.startsWith("git push") |
| 728 | ? "Push it. The pull request updates, and its checks run again:" |
| 729 | : step.includes("merge") || step.includes("pull") |
| 730 | ? `Merge ${defaultBranch} in. Git stops on the conflicting files:` |
| 731 | : step.startsWith("git clone") |
| 732 | ? "Clone the pull request's fork:" |
| 733 | : step.startsWith("git checkout") |
| 734 | ? "Check out the pull request's branch:" |
| 735 | : "Get the latest of both:"} |
| 736 | </p> |
| 737 | <CopyLine text={step} prompt /> |
| 738 | </li> |
| 739 | ))} |
| 740 | </ol> |
| 741 | {pull.fork && ( |
| 742 | <p className="mt-2 text-xs text-faint"> |
| 743 | A pull request's fork takes pushes from whoever opened it. |
| 744 | </p> |
| 745 | )} |
| 746 | </details> |
| 747 | </div> |
| 748 | </div> |
| 749 | </div> |
| 750 | ); |
| 751 | } |
| 752 | |
| 753 | /** Whether the change merges cleanly, when that is not a conflict. */ |
| 754 | export function MergeabilityRow({ |
| 755 | mergeable, |
| 756 | defaultBranch, |
| 757 | }: { |
| 758 | mergeable: Mergeable; |
| 759 | defaultBranch: string; |
| 760 | }) { |
| 761 | if (mergeable === "checking") { |
| 762 | return ( |
| 763 | <div className="flex gap-3 px-4 py-3 text-sm"> |
| 764 | <LoaderCircle size={16} className="mt-0.5 shrink-0 animate-spin text-faint" /> |
| 765 | <div> |
| 766 | <p className="font-medium">Checking whether this merges cleanly…</p> |
| 767 | <p className="mt-0.5 text-muted"> |
| 768 | It and <span className="font-mono">{defaultBranch}</span> changed some of the same files, so g1t is merging |
| 769 | the two in a sandbox to see. |
| 770 | </p> |
| 771 | </div> |
| 772 | </div> |
| 773 | ); |
| 774 | } |
| 775 | if (mergeable === "clean") { |
| 776 | return ( |
| 777 | <div className="flex gap-3 px-4 py-3 text-sm"> |
| 778 | <CircleCheck size={16} className="mt-0.5 shrink-0 text-success" /> |
| 779 | <p className="font-medium"> |
| 780 | This branch has no conflicts with <span className="font-mono">{defaultBranch}</span> |
| 781 | </p> |
| 782 | </div> |
| 783 | ); |
| 784 | } |
| 785 | return null; |
| 786 | } |
| 787 | |
| 788 | /** |
| 789 | * A catch-up handed to a sandbox, while it lasts: who is doing what, the |
| 790 | * run's live step, and how long it has taken. It ends with the pull request |
| 791 | * up to date (and this disappears), or with a plain failure and a way to |
| 792 | * try again. It never spins on with no end. |
| 793 | */ |
| 794 | export function CatchUpProgress({ |
| 795 | owner, |
| 796 | repo, |
| 797 | number, |
| 798 | defaultBranch, |
| 799 | behind, |
| 800 | update, |
| 801 | startedAt, |
| 802 | retrying, |
| 803 | runs: initial, |
| 804 | }: { |
| 805 | owner: string; |
| 806 | repo: string; |
| 807 | number: number; |
| 808 | defaultBranch: string; |
| 809 | behind: boolean; |
| 810 | update: Extract<PullBranchUpdate, { outcome: "needs_agent" }>; |
| 811 | /** When it was asked for, in ms since the epoch. */ |
| 812 | startedAt: number; |
| 813 | /** Whether a retry is on its way. */ |
| 814 | retrying: boolean; |
| 815 | /** The pull request's latest runs, from the page's loader. */ |
| 816 | runs?: Live | null; |
| 817 | }) { |
| 818 | // The page revalidates while this is working, which reloads the runs too. |
| 819 | const data = useRuns(owner, repo, { number: String(number), limit: "5" }, initial); |
| 820 | const [now, setNow] = useState(() => Date.now()); |
| 821 | useEffect(() => { |
| 822 | const timer = setInterval(() => setNow(Date.now()), 5000); |
| 823 | return () => clearInterval(timer); |
| 824 | }, []); |
| 825 | const run = catchUpRun(data?.runs ?? [], startedAt); |
| 826 | const phase = catchUpPhase({ behind, run, startedAt, now }); |
| 827 | if (phase === "done") return null; |
| 828 | const session = `/${owner}/${repo}/sessions/${number}`; |
| 829 | if (phase !== "working") { |
| 830 | return ( |
| 831 | <div className="flex gap-3 px-4 py-3 text-sm"> |
| 832 | <TriangleAlert size={16} className={`mt-0.5 shrink-0 ${phase === "failed" ? "text-danger" : "text-warn"}`} /> |
| 833 | <div className="min-w-0"> |
| 834 | <p className="font-medium"> |
| 835 | {phase === "failed" |
| 836 | ? `Catching up with ${defaultBranch} failed` |
| 837 | : `Catching up with ${defaultBranch} is taking longer than it should`} |
| 838 | </p> |
| 839 | <p className="mt-0.5 text-muted"> |
| 840 | {phase === "failed" |
| 841 | ? `${run?.error ? `${run.error} ` : ""}Nothing was pushed, so the pull request is as it was.` |
| 842 | : "It usually takes about a minute. It may still finish; this page updates if it does."}{" "} |
| 843 | <Link to={session} className="text-fg hover:underline"> |
| 844 | See the session |
| 845 | </Link> |
| 846 | . |
| 847 | </p> |
| 848 | <Form method="post" className="mt-2"> |
| 849 | <input type="hidden" name="action" value="update" /> |
| 850 | <Button variant="quiet" type="submit" disabled={retrying}> |
| 851 | {retrying ? <LoaderCircle size={14} className="animate-spin" /> : <RotateCw size={14} />} |
| 852 | {retrying ? "Trying again…" : "Try again"} |
| 853 | </Button> |
| 854 | </Form> |
| 855 | </div> |
| 856 | </div> |
| 857 | ); |
| 858 | } |
| 859 | return ( |
| 860 | <div className="flex gap-3 px-4 py-3 text-sm"> |
| 861 | <LoaderCircle size={16} className="mt-0.5 shrink-0 animate-spin text-accent" /> |
| 862 | <div className="min-w-0 grow"> |
| 863 | <p className="font-medium">{catchUpTitle(update.reason, defaultBranch)}</p> |
| 864 | <p className="mt-0.5 text-muted"> |
| 865 | {catchUpWhy(update, defaultBranch)} This usually takes about a minute; the pull request updates here when it |
| 866 | is pushed. |
| 867 | </p> |
| 868 | {update.paths.length > 0 && ( |
| 869 | <Hint label={update.paths.join(", ")}> |
| 870 | <p className="mt-1 truncate font-mono text-xs text-faint"> |
| 871 | {update.paths.slice(0, 5).join(", ")} |
| 872 | {update.paths.length > 5 && ` and ${update.paths.length - 5} more`} |
| 873 | </p> |
| 874 | </Hint> |
| 875 | )} |
| 876 | <Hint label={run?.step}> |
| 877 | <p className="mt-2 truncate rounded-lg bg-bg px-3 py-2 font-mono text-xs text-fg/85 ring-1 ring-line"> |
| 878 | <span className="mr-2 inline-block size-1.5 animate-pulse rounded-full bg-accent align-middle" /> |
| 879 | {run?.step ?? (run ? "Starting a sandbox…" : "Waiting for a sandbox…")} |
| 880 | </p> |
| 881 | </Hint> |
| 882 | <p className="mt-2 flex flex-wrap items-center gap-x-3 text-xs text-muted"> |
| 883 | <Elapsed from={new Date(startedAt).toISOString()} /> |
| 884 | <Link to={session} className="hover:text-fg"> |
| 885 | Watch the session |
| 886 | </Link> |
| 887 | </p> |
| 888 | </div> |
| 889 | </div> |
| 890 | ); |
| 891 | } |