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 { Route } from "./+types/compare";

5

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

6

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

7

import { CommitText } from "../../components/commit-message";

8

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

9

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

10

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

11

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

12

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

13

import { type HighlightedComparison, firstScreens } from "../../lib/diff";

14

import { commitHint } from "../../lib/commit-message";

15

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

16

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

17

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

18

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

19

import { Unavailable } from "../../components/boundary";

20

import { type Failed, isFailed, part } from "../../lib/partial";

21

22

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

23

const HEAD_DEPTH = 100;

24

const BASE_DEPTH = 300;

25

26

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

27

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

28

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

29

}

30

31

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

32

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

33

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

34

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

35

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

36

}

37

38

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

39

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

40

const viewer = getViewer(context);

41

const url = new URL(request.url);

42

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

43

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

44

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

45

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

46

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

47

}

48

// The branches to pick from are a part: without them, the pickers offer

49

// the two being compared and say the rest could not be read.

50

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

51

const found = unwrap(repo);

52

const branches: string[] | Failed = isFailed(list)

53

? list

54

: unwrap(list)

55

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

56

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

57

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

58

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

59

const head = asked.head;

60

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

61

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

62

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

63

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

64

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

65

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

66

// With their people, in one identity call.

67

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

68

hash: commit.hash,

69

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

70

author: commit.author,

71

coAuthors: commit.coAuthors,

72

at: commit.authoredAt,

73

}));

74

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

75

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

76

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

77

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

78

// The changes are a part: the commits above them stay when they fail.

79

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

80

// Its first screens with their lines; the rest load as they are reached.

81

const comparison: HighlightedComparison | Failed | null = isFailed(compared) ? compared : compared.ok ? firstScreens(compared.value) : null;

82

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

83

}

84

85

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

86

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) {

109

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

110

const branches = isFailed(loaderData.branches) ? [] : loaderData.branches;

111

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

return (

<div>

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

116

<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>

Compare

</Button>

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

Open a pull request

</ButtonLink>

)}

</Form>

</Card>

{isFailed(loaderData.branches) && <Unavailable what={loaderData.branches.what} compact />}

135

136

{!head ? (

137

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

138

) : same ? (

139

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

140

) : commits.length === 0 ? (

141

142

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) => (

</span>

</Hint>

</span>

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

</Link>

</span>

</li>

))}

</ul>

</Card>

</section>

{isFailed(comparison) ? (

) : comparison ? (

<DiffView

comparison={comparison}

180

repo={repoBase}

181

fileBase={`${repoBase}/blob/${encodeURIComponent(head)}`}

182

empty="The two sides have the same files."

183

/>

184

) : (

185

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

)}

</>

)}

</div>

);

}