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

1

import { ArrowUpRight, Box, CircleDot, Code2, GitBranch, GitCommitHorizontal, GitPullRequest, Lock, Rocket, RotateCw } from "lucide-react";

2

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

3

4

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

5

import { host, StatusDot } from "../../components/deploy";

6

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

7

import { PullIcon } from "../../components/work";

8

import { deployments, projects, repos, work } from "../../lib/services.server";

9

import { assertSameOrigin, getViewer, requireUser, roleIn } from "../../lib/session.server";

const MAX_PULLS = 5;

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

14

const viewer = getViewer(context);

15

const member = roleIn(viewer, params.owner) != null;

16

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

17

const ref = { workspace: params.owner, slug: params.repo };

18

const [project, settings, list, pulls, log, counts] = await Promise.all([

19

projects.get(params.owner, params.repo, viewer),

20

member ? deployments.settings(ref, viewer) : null,

21

member ? deployments.list(ref, viewer) : null,

22

work.listPulls(path, viewer, "open"),

23

repos.log(path, viewer, null, 1),

24

work.counts(path, viewer),

]);

return {

member,

project: project.ok ? project.value : null,

29

settings: settings?.ok ? settings.value : null,

30

builds: list?.ok ? list.value.deployments : [],

31

live: list?.ok ? list.value.live : [],

32

pulls: pulls.ok ? pulls.value.slice(0, MAX_PULLS) : [],

33

commit: log.ok ? (log.value[0] ?? null) : null,

34

open: counts.ok ? counts.value : { issues: 0, pulls: 0 },

};

}

export async function action({ request, params, context }: Route.ActionArgs) {

39

assertSameOrigin(request);

40

const user = requireUser(context, request);

41

const started = await deployments.redeploy(user, { workspace: params.owner, slug: params.repo }, null);

42

return started.ok ? { notice: "Production is building." } : { error: started.error.message };

43

}

44

45

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

46

const { member, project, settings, builds, live, pulls, commit, open } = loaderData;

47

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

48

const production = live.find((app) => app.kind === "production") ?? null;

49

const previews = live.filter((app) => app.kind === "preview");

50

const latestProduction = builds.find((build) => build.kind === "production") ?? null;

51

const busy = useNavigation().state === "submitting";

52

const source = project?.source.kind === "hosted" ? project.source : null;

return (

{/* Production: what the project is, running. */}

Production

</p>

{production ? (

<>

<a

href={production.url}

69

className="mt-2 flex items-center gap-1.5 truncate font-mono text-lg font-medium hover:text-accent"

70

>

71

{host(production.url)}

</a>

{latestProduction && <StatusDot status={latestProduction.status} />}

76

77

78

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

79

</span>

80

<span>

81

deployed <TimeAgo at={production.deployedAt} />

</span>

</p>

</>

) : settings?.enabled ? (

86

<>

87

<p className="mt-2 font-mono text-lg text-muted">{host(settings.productionUrl)}</p>

88

89

{latestProduction ? (

90

91

) : (

92

"Not deployed yet. Push to the default branch, or deploy it now."

)}

</p>

</>

) : (

<>

<p className="mt-2 text-lg font-medium">Not deployed</p>

99

100

Put {project?.name ?? params.repo} on g1t.page: production from the default branch, and a live

101

preview for every pull request. It runs only while someone visits.

</p>

</>

)}

</div>

{member && (

{production && (

Visit

</ButtonLink>

)}

{settings?.enabled ? (

Redeploy

</Button>

</Form>

) : (

Deploy

</ButtonLink>

)}

</div>

)}

</div>

{(actionData && "notice" in actionData) || (actionData && "error" in actionData) ? (

131

132

{"error" in actionData ? actionData.error : actionData.notice}

133

</p>

134

) : null}

135

{member && settings?.enabled && (

136

137

138

<span className="block text-xs text-muted">Previews up</span>

139

<span className="font-medium tabular-nums">{previews.length}</span>

140

</Link>

141

142

<span className="block text-xs text-muted">Builds</span>

143

<span className="font-medium tabular-nums">{builds.length}</span>

144

</Link>

145

146

<span className="block text-xs text-muted">Secrets and variables</span>

147

<span className="font-medium">Manage</span>

</Link>

</div>

)}

</section>

{previews.length > 0 && (

154

155

<h2 className="text-sm font-medium text-muted">Previews</h2>

156

157

{previews.map((app) => (

{host(app.url)}

</a>

{app.branch}

{app.number != null && (

<>

{" · "}

#{app.number}

</Link>

</>

)}

</span>

</span>

</span>

</li>

))}

</ul>

</section>

)}

<h2 className="text-sm font-medium text-muted">In progress</h2>

All pull requests

</Link>

</div>

{pulls.length === 0 ? (

194

195

Open an issue and assign it to g1t-agent, or push a branch and open a pull request.

</EmptyState>

) : (

{pulls.map((pull) => {

200

const preview = previews.find((app) => app.number === pull.number);

return (

<Link

prefetch="intent"

to={`${base}/pull/${pull.number}`}

206

className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-raised"

>

<span className="block truncate font-medium">{pull.title}</span>

211

212

#{pull.number} · {pull.author.username}

213

</span>

214

</span>

215

{preview && <span className="hidden text-xs text-accent sm:block">Preview live</span>}

</span>

</Link>

</li>

);

})}

</ul>

)}

</div>

</section>

{member && builds.length > 0 && (

229

230

231

<h2 className="text-sm font-medium text-muted">Recent builds</h2>

All deployments

</Link>

</div>

{builds.slice(0, 4).map((build) => (

</span>

{build.kind === "production" ? "Production" : `Preview of ${build.branch}`}

245

<span className="ml-2 font-mono text-xs text-faint">{build.commit.slice(0, 7)}</span>

</span>

</span>

</Link>

</li>

))}

</ul>

</section>

)}

</div>

<h2 className="text-xs font-medium tracking-wide text-muted uppercase">Source</h2>

{source && (

<>

{project?.private ? <Lock size={14} className="text-faint" /> : <Code2 size={14} className="text-faint" />}

265

{source.repo.namespace}/{source.repo.name}

266

</Link>

267

<p className="mt-1 text-xs text-muted">Hosted on g1t{source.rootDir ? ` · in ${source.rootDir}/` : ""}</p>

268

269

270

<dt className="text-muted">Default branch</dt>

271

<dd className="font-mono">{source.defaultBranch}</dd>

</div>

{commit && (

<dt className="text-muted">Latest commit</dt>

276

277

278

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

</Link>

</dd>

</div>

)}

</dl>

{commit && <p className="mt-2 line-clamp-2 text-xs text-muted">{commit.message.split("\n")[0]}</p>}

</div>

</>

)}

</section>

<p className="mt-2 text-xl font-semibold tabular-nums">{open.issues}</p>

296

<p className="text-xs text-muted">Open issues</p>

</Link>

<p className="mt-2 text-xl font-semibold tabular-nums">{open.pulls}</p>

301

<p className="text-xs text-muted">Pull requests</p>

</Link>

</section>

{project && (

About projects

</p>

A project is what you build and run. Its deployments, environments, secrets and variables belong to it;

313

its code lives in its source.{" "}

Learn more

</a>

</p>

</section>

)}

</aside>

</div>

);

}