apps/web/app/routes/repo/compare.tsx · flagon-io/g1t

1

import { ArrowLeft, GitCommitHorizontal, GitPullRequest } from "lucide-react";

2

import { Form, Link } from "react-router";

3

4

import type { Comparison } from "@g1t/contracts";

5

6

import type { Route } from "./+types/compare";

7

import { DiffView } from "../../components/diff-view";

8

import { CommitAvatars, CommitNames } from "../../components/commit-person";

9

import { ButtonLink, EmptyState, TimeAgo } from "../../components/ui";

10

import { Button } from "../../components/ui/button";

11

import { Card } from "../../components/ui/card";

12

import { Hint } from "../../components/ui/hint";

13

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select";

14

import { page } from "../../lib/meta";

15

import { showCommits } from "../../lib/commit-people.server";

16

import { repos } from "../../lib/services.server";

17

import { getViewer, unwrap } from "../../lib/session.server";

18

19

/** How far back each side's history is read to find what head has that base does not. */

20

const HEAD_DEPTH = 100;

21

const BASE_DEPTH = 300;

22

23

export function meta({ params, ...args }: Route.MetaArgs) {

24

const range = params["*"] ? ` ${params["*"]}` : "";

25

return page(args, { title: `Compare${range} · ${params.owner}/${params.repo} · g1t` });

26

}

27

28

/** `main...feature` into its two sides; either may be missing. */

29

function sides(range: string): { base: string | null; head: string | null } {

30

const at = range.indexOf("...");

31

if (at === -1) return { base: null, head: range || null };

32

return { base: range.slice(0, at) || null, head: range.slice(at + 3) || null };

33

}

34

35

export async function loader({ params, context, request }: Route.LoaderArgs) {

36

const path = { namespace: params.owner, name: params.repo };

37

const viewer = getViewer(context);

38

const url = new URL(request.url);

39

// The pickers submit as ?base=&head=; the address keeps base...head.

40

if (url.searchParams.has("base") || url.searchParams.has("head")) {

41

const base = url.searchParams.get("base") ?? "";

42

const head = url.searchParams.get("head") ?? "";

43

return Response.redirect(new URL(`/${params.owner}/${params.repo}/compare/${base}...${head}`, url).toString(), 302);

44

}

45

const [repo, list] = await Promise.all([repos.get(path, viewer), repos.branches(path, viewer)]);

46

const found = unwrap(repo);

47

const branches = unwrap(list)

48

.map((branch) => branch.name)

49

.filter((name) => !name.startsWith("g1t-queue/"));

50

const asked = sides(params["*"] ?? "");

51

const base = asked.base ?? found.defaultBranch;

52

const head = asked.head;

53

if (!head || head === base) return { base, head, branches, comparison: null, commits: [], same: head === base };

54

const [headLog, baseLog] = await Promise.all([repos.log(path, viewer, head, HEAD_DEPTH), repos.log(path, viewer, base, BASE_DEPTH)]);

55

if (!headLog.ok || headLog.value.length === 0) throw new Response(`There is no branch, tag or commit named ${head}.`, { status: 404 });

56

// What head has that base does not: its history down to the first commit base also has.

57

const onBase = new Set(baseLog.ok ? baseLog.value.map((commit) => commit.hash) : []);

58

const shared = headLog.value.findIndex((commit) => onBase.has(commit.hash));

59

// With their people, in one identity call.

60

const commits = (await showCommits(shared === -1 ? headLog.value : headLog.value.slice(0, shared))).map((commit) => ({

61

hash: commit.hash,

62

message: commit.message.split("\n")[0] ?? "",

63

author: commit.author,

64

coAuthors: commit.coAuthors,

65

at: commit.authoredAt,

66

}));

67

// The changes from where the two last agreed, as a pull request would

68

// bring them: what base gained since is not head taking it away. When

69

// that point is past what was read, the two tips are compared.

70

const mergeBase = shared === -1 ? base : headLog.value[shared]!.hash;

71

const compared = await repos.compare(found.id, viewer, mergeBase, head);

72

const comparison: Comparison | null = compared.ok ? compared.value : null;

73

return { base, head, branches, comparison, commits, same: false };

74

}

75

76

function RefPicker({ name, label, value, branches }: { name: string; label: string; value: string | null; branches: string[] }) {

77

const options = value && !branches.includes(value) ? [value, ...branches] : branches;

return (

{label}

</span>

</SelectTrigger>

{options.map((option) => (

{option}

</SelectItem>

))}

</SelectContent>

</Select>

</div>

);

}

export default function Compare({ loaderData, params }: Route.ComponentProps) {

100

const { base, head, branches, comparison, commits, same } = loaderData;

101

const repoBase = `/${params.owner}/${params.repo}`;

return (

<div>

<h2 className="text-lg font-semibold tracking-tight">Compare changes</h2>

106

<p className="mt-1 text-sm text-muted">Choose two branches to see what one has that the other does not, then open a pull request for it.</p>

</div>

<Button

type="submit"

variant="outline"

className="h-8 px-3 text-fg/90 hover:bg-raised font-normal"

>

Compare

</Button>

{head && !same && commits.length > 0 && (

121

<ButtonLink

122

to={`${repoBase}/pulls/new?branch=${encodeURIComponent(head)}&base=${encodeURIComponent(base)}`}

variant="accent"

>

Open a pull request

</ButtonLink>

)}

</Form>

</Card>

{!head ? (

<EmptyState title="Pick a branch to compare">Its commits and changes against {base} show here.</EmptyState>

134

) : same ? (

135

<EmptyState title="Nothing to compare">Both sides are {base}. Choose another branch to compare with it.</EmptyState>

136

) : commits.length === 0 ? (

137

<EmptyState title={`${base} has everything ${head} has`}>There is nothing on {head} to bring into {base}.</EmptyState>

) : (

<>

{commits.length === HEAD_DEPTH ? `${HEAD_DEPTH}+` : commits.length} {commits.length === 1 ? "commit" : "commits"}

</h3>

<ul>

{commits.map((commit) => (

{commit.message}

</Link>

</Hint>

</span>

{commit.hash.slice(0, 7)}

</Link>

</span>

</li>

))}

</ul>

</Card>

</section>

{comparison ? (

) : (

<p className="text-sm text-muted">The changes could not be read just now. The commits above are what {head} adds.</p>

)}

</>

)}

</div>

);

}