Skip to content
Sign up

flagon-io/g1t

public
00

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp
348 linesCodeBlameRaw
1/**
2 * The top of a project's overview for what g1t.page does not host: an app
3 * that deploys itself, an app nobody has said where it runs, docs, and
4 * anything else. An app on g1t keeps its production card, and a library
5 * or a tool its packages (routes/repo/overview.tsx).
6 */
7import { ArrowUpRight, BookOpen, Box, ChevronDown, GitCommitHorizontal, Globe, Rocket } from "lucide-react";
8import { type ReactNode, useState } from "react";
9import { Link, useFetcher } from "react-router";
10
11import type { DeployStatus, Project } from "@g1t/contracts";
12
13import { DeployLink, host, StatusDot } from "./deploy";
14import { ButtonLink, Input, SubmitButton, TimeAgo } from "./ui";
15import { Button } from "./ui/button";
16import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
17import { Hint } from "./ui/hint";
18
19/**
20 * A deployment g1t.page did not build: one a workflow's job made, or one
21 * reported by another pipeline. When there is one for production, the
22 * card shows it.
23 */
24export type ExternalDeployment = {
25 environment: string;
26 url: string | null;
27 /** success, failure, error, pending, queued, in_progress or inactive. */
28 state: string;
29 sha: string;
30 created_at: string;
31 /** The workflow run that made it, when g1t Actions did. */
32 run_url?: string | null;
33};
34
35/** A reported deployment's state, as g1t's own deployments show theirs. */
36export function deploymentStatus(state: string): DeployStatus {
37 switch (state) {
38 case "success":
39 return "ready";
40 case "failure":
41 case "error":
42 return "failed";
43 case "in_progress":
44 return "building";
45 case "inactive":
46 return "replaced";
47 default:
48 return "queued";
49 }
50}
51
52type Head = {
53 project: Project;
54 base: string;
55 /** May change the project's settings: what it is, its links. */
56 canChange: boolean;
57 /** May turn on Deployments. */
58 canDeploy: boolean;
59};
60
61export function HeadLabel({ icon, children }: { icon: ReactNode; children: ReactNode }) {
62 return (
63 <p className="flex items-center gap-2 text-xs font-medium tracking-wide text-muted uppercase [&_svg]:size-3.25 [&_svg]:text-accent">
64 {icon}
65 {children}
66 </p>
67 );
68}
69
70function BigLink({ url }: { url: string }) {
71 return (
72 <DeployLink href={url} className="mt-2 flex min-w-0 items-center gap-1.5 font-mono text-lg font-medium hover:text-accent">
73 <span className="truncate">{host(url).replace(/\/$/, "")}</span>
74 <ArrowUpRight size={16} className="shrink-0 text-faint" />
75 </DeployLink>
76 );
77}
78
79/** An address, saved for the project in place: production's, or its docs'. */
80function AddressForm({
81 field,
82 placeholder,
83 label,
84 extra,
85}: {
86 field: "productionUrl" | "docsUrl";
87 placeholder: string;
88 label: string;
89 /** Hidden fields sent with it. */
90 extra: Record<string, string>;
91}) {
92 const fetcher = useFetcher<{ error?: string }>();
93 return (
94 <fetcher.Form method="post" className="mt-3 max-w-lg">
95 {Object.entries(extra).map(([name, value]) => (
96 <input key={name} type="hidden" name={name} value={value} />
97 ))}
98 <div className="flex items-center gap-2">
99 <div className="min-w-0 grow">
100 <Input name={field} type="text" inputMode="url" required placeholder={placeholder} aria-label={label} maxLength={255} />
101 </div>
102 <SubmitButton fetcher={fetcher} variant="outline" pending="Saving…">
103 Save
104 </SubmitButton>
105 </div>
106 {fetcher.data?.error && <p className="mt-1.5 text-xs text-danger">{fetcher.data.error}</p>}
107 </fetcher.Form>
108 );
109}
110
111/** Deploying on g1t, offered as an option and never as a step. */
112function DeployQuietly({ base, canDeploy, what }: { base: string; canDeploy: boolean; what: string }) {
113 if (!canDeploy) return null;
114 return (
115 <p className="mt-4 text-xs text-faint">
116 g1t can deploy {what} on g1t.page instead, with a preview for every pull request.{" "}
117 <Link to={`${base}/settings/deployments`} className="underline-offset-4 hover:text-fg hover:underline">
118 Deployment settings
119 </Link>
120 </p>
121 );
122}
123
124/**
125 * An app that deploys itself (its workflows, or another pipeline): production at the address it was
126 * given, with the latest reported deployment, or else the default branch's
127 * latest commit. Branch checks are shown separately below the production status.
128 */
129export function ElsewhereHead({
130 project,
131 base,
132 canChange,
133 canDeploy,
134 deployment,
135 commit,
136 shot,
137}: Head & {
138 deployment?: ExternalDeployment | null;
139 commit: { hash: string; authoredAt: string } | null;
140 /** Production's picture, beside the rest, as an app on g1t has (components/production-shot.tsx). */
141 shot?: ReactNode;
142}) {
143 const url = deployment?.url ?? project.productionUrl;
144 return (
145 <div className="flex flex-col gap-5 p-5 sm:flex-row sm:items-start sm:p-6">
146 {shot}
147 <div className="flex min-w-0 grow flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
148 <div className="min-w-0">
149 <HeadLabel icon={<Rocket />}>Production</HeadLabel>
150 {url ? (
151 <>
152 <BigLink url={url} />
153 <p className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted">
154 {deployment ? (
155 <>
156 <StatusDot status={deploymentStatus(deployment.state)} />
157 <span className="inline-flex items-center gap-1 font-mono">
158 <GitCommitHorizontal size={13} className="text-faint" />
159 <Link to={`${base}/commit/${deployment.sha}`} className="hover:text-fg">{deployment.sha.slice(0, 7)}</Link>
160 </span>
161 <span>
162 {deployment.state === "success" ? "Deployed" : "Updated"} <TimeAgo at={deployment.created_at} />
163 {deployment.run_url ? (
164 <>
165 {" "}
166 by{" "}
167 <Link to={deployment.run_url} className="underline-offset-4 hover:text-fg hover:underline">
168 its workflow
169 </Link>
170 </>
171 ) : (
172 " by its own pipeline"
173 )}
174 </span>
175 </>
176 ) : (
177 <>
178 <span>Deploys itself</span>
179 {commit && (
180 <span className="inline-flex items-center gap-1.5">
181 <span className="text-faint">·</span>
182 <Link to={`${base}/commit/${commit.hash}`} className="inline-flex items-center gap-1 font-mono hover:text-fg">
183 <GitCommitHorizontal size={13} className="text-faint" />
184 {commit.hash.slice(0, 7)}
185 </Link>
186 <TimeAgo at={commit.authoredAt} />
187 </span>
188 )}
189 </>
190 )}
191 </p>
192 </>
193 ) : canChange ? (
194 <>
195 <p className="mt-2 text-lg font-medium">Where is production?</p>
196 <p className="mt-1 max-w-lg text-sm text-muted">
197 {project.name} deploys itself. Give production's address, and this card links to it.
198 </p>
199 <AddressForm field="productionUrl" placeholder="https://example.com" label="Production's address" extra={{ intent: "kind", choice: "elsewhere" }} />
200 </>
201 ) : (
202 <p className="mt-2 text-sm text-muted">Deploys itself.</p>
203 )}
204 <DeployQuietly base={base} canDeploy={canDeploy} what="it" />
205 </div>
206 </div>
207 </div>
208 );
209}
210
211const NOT_DEPLOYED: { value: string; label: string }[] = [
212 { value: "library", label: "A library or package" },
213 { value: "tool", label: "A tool or CLI" },
214 { value: "docs", label: "Documentation" },
215 { value: "other", label: "Something else" },
216];
217
218/**
219 * An app that nobody has said where it runs, with Deployments off: one
220 * question, answered in place, instead of a push to turn Deployments on.
221 */
222export function WhereItRuns({ project, base, canChange, canDeploy }: Head) {
223 const fetcher = useFetcher<{ error?: string }>();
224 const [elsewhere, setElsewhere] = useState(false);
225 if (!canChange) {
226 return (
227 <div className="p-5 sm:p-6">
228 <HeadLabel icon={<Globe />}>Homepage</HeadLabel>
229 {project.links.homepage ? <BigLink url={project.links.homepage} /> : <p className="mt-2 text-sm text-muted">No homepage given.</p>}
230 </div>
231 );
232 }
233 return (
234 <div className="p-5 sm:p-6">
235 <HeadLabel icon={<Rocket />}>Production</HeadLabel>
236 <p className="mt-2 text-lg font-medium">Where does {project.name} run?</p>
237 <p className="mt-1 max-w-xl text-sm text-muted">
238 Say once, and this page follows: production where it is deployed, or its packages and releases if it isn't
239 deployed at all. <span className="text-faint">{project.detected.reason.detail}</span>
240 </p>
241 <div className="mt-4 flex flex-wrap items-center gap-2">
242 {canDeploy && (
243 <ButtonLink to={`${base}/settings/deployments`} variant="outline">
244 <Rocket size={14} />
245 Deploy on g1t
246 </ButtonLink>
247 )}
248 <Button
249 type="button"
250 onClick={() => setElsewhere((open) => !open)}
251 aria-expanded={elsewhere}
252 variant="outline"
253 >
254 <Globe size={14} />
255 It deploys itself
256 </Button>
257 <DropdownMenu>
258 <DropdownMenuTrigger asChild>
259 <Button variant="outline">
260 <Box size={14} />
261 It isn't deployed
262 <ChevronDown size={13} className="text-faint" />
263 </Button>
264 </DropdownMenuTrigger>
265 <DropdownMenuContent align="start">
266 {NOT_DEPLOYED.map((option) => (
267 <DropdownMenuItem key={option.value} onSelect={() => fetcher.submit({ intent: "kind", choice: option.value }, { method: "post" })}>
268 {option.label}
269 </DropdownMenuItem>
270 ))}
271 </DropdownMenuContent>
272 </DropdownMenu>
273 </div>
274 {elsewhere && (
275 <AddressForm field="productionUrl" placeholder="Production's address, such as https://example.com" label="Production's address" extra={{ intent: "kind", choice: "elsewhere" }} />
276 )}
277 {fetcher.data?.error && <p className="mt-2 text-xs text-danger">{fetcher.data.error}</p>}
278 </div>
279 );
280}
281
282/** Documentation: where it is read, or a place to say so. */
283export function DocsHead({ project, base, canChange, canDeploy }: Head) {
284 const url = project.links.docs ?? project.productionUrl ?? project.links.homepage;
285 return (
286 <div className="flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:justify-between sm:p-6">
287 <div className="min-w-0">
288 <HeadLabel icon={<BookOpen />}>Documentation</HeadLabel>
289 {url ? (
290 <BigLink url={url} />
291 ) : canChange ? (
292 <>
293 <p className="mt-2 text-lg font-medium">Where are its docs read?</p>
294 <p className="mt-1 max-w-lg text-sm text-muted">Give the address, and this card and its listing link to it.</p>
295 <AddressForm field="docsUrl" placeholder="https://docs.example.com" label="Where its docs are read" extra={{ intent: "about" }} />
296 </>
297 ) : (
298 <p className="mt-2 text-sm text-muted">Its docs are in its repository.</p>
299 )}
300 <DeployQuietly base={base} canDeploy={canDeploy && project.runs == null} what="its docs as a site" />
301 </div>
302 {url && (
303 <div className="flex shrink-0 items-center gap-2">
304 <ButtonLink to={url} variant="accent" reloadDocument target="_blank" rel="noopener noreferrer">
305 Read
306 <ArrowUpRight size={14} />
307 </ButtonLink>
308 </div>
309 )}
310 </div>
311 );
312}
313
314/** Anything else: its homepage, or where to add its links. */
315export function OtherHead({ project, base, canChange }: Omit<Head, "canDeploy">) {
316 const url = project.links.homepage ?? project.links.docs ?? project.links.custom[0]?.url ?? null;
317 return (
318 <div className="p-5 sm:p-6">
319 <HeadLabel icon={<Globe />}>Homepage</HeadLabel>
320 {url ? (
321 <BigLink url={url} />
322 ) : canChange ? (
323 <p className="mt-2 text-sm text-muted">
324 No links yet.{" "}
325 <Link to={`${base}/settings#links`} className="text-accent hover:underline">
326 Add a homepage, docs or others
327 </Link>{" "}
328 and they show here, on its card and in its workspace's Projects.
329 </p>
330 ) : (
331 <p className="mt-2 text-sm text-muted">No homepage given.</p>
332 )}
333 </div>
334 );
335}
336
337/** Production as g1t serves it, with the project's homepage when that is somewhere else. */
338export function AlsoAt({ url }: { url: string | null }) {
339 if (!url) return null;
340 return (
341 <Hint label="Its homepage">
342 <DeployLink href={url} className="inline-flex items-center gap-1 text-faint hover:text-fg">
343 <Globe size={12} />
344 {host(url).replace(/\/$/, "")}
345 </DeployLink>
346 </Hint>
347 );
348}