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
330 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. Branch checks are shown separately below the production status.
127 */
128export function ElsewhereHead({
129 project,
130 base,
131 canChange,
132 deployment,
133 shot,
134}: Omit<Head, "canDeploy"> & {
135 deployment?: ExternalDeployment | null;
136 /** Production's picture, beside the rest, as an app on g1t has (components/production-shot.tsx). */
137 shot?: ReactNode;
138}) {
139 const url = deployment?.url ?? project.productionUrl;
140 return (
141 <div className="flex flex-col gap-5 p-5 sm:flex-row sm:items-start sm:p-6">
142 {shot}
143 <div className="flex min-w-0 grow flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
144 <div className="min-w-0">
145 {url ? (
146 <>
147 <BigLink url={url} />
148 <p className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted">
149 {deployment ? (
150 <>
151 <StatusDot status={deploymentStatus(deployment.state)} />
152 <span className="inline-flex items-center gap-1 font-mono">
153 <GitCommitHorizontal size={13} className="text-faint" />
154 <Link to={`${base}/commit/${deployment.sha}`} className="hover:text-fg">{deployment.sha.slice(0, 7)}</Link>
155 </span>
156 <span>
157 {deployment.state === "success" ? "Deployed" : "Updated"} <TimeAgo at={deployment.created_at} />
158 {deployment.run_url ? (
159 <>
160 {" "}
161 by{" "}
162 <Link to={deployment.run_url} className="underline-offset-4 hover:text-fg hover:underline">
163 its workflow
164 </Link>
165 </>
166 ) : (
167 " by its own pipeline"
168 )}
169 </span>
170 </>
171 ) : (
172 <span>Deploys itself</span>
173 )}
174 </p>
175 </>
176 ) : canChange ? (
177 <>
178 <p className="mt-2 text-lg font-medium">Where is production?</p>
179 <p className="mt-1 max-w-lg text-sm text-muted">
180 {project.name} deploys itself. Give production's address, and this card links to it.
181 </p>
182 <AddressForm field="productionUrl" placeholder="https://example.com" label="Production's address" extra={{ intent: "kind", choice: "elsewhere" }} />
183 </>
184 ) : (
185 <p className="mt-2 text-sm text-muted">Deploys itself.</p>
186 )}
187 </div>
188 </div>
189 </div>
190 );
191}
192
193const NOT_DEPLOYED: { value: string; label: string }[] = [
194 { value: "library", label: "A library or package" },
195 { value: "tool", label: "A tool or CLI" },
196 { value: "docs", label: "Documentation" },
197 { value: "other", label: "Something else" },
198];
199
200/**
201 * An app that nobody has said where it runs, with Deployments off: one
202 * question, answered in place, instead of a push to turn Deployments on.
203 */
204export function WhereItRuns({ project, base, canChange, canDeploy }: Head) {
205 const fetcher = useFetcher<{ error?: string }>();
206 const [elsewhere, setElsewhere] = useState(false);
207 if (!canChange) {
208 return (
209 <div className="p-5 sm:p-6">
210 <HeadLabel icon={<Globe />}>Homepage</HeadLabel>
211 {project.links.homepage ? <BigLink url={project.links.homepage} /> : <p className="mt-2 text-sm text-muted">No homepage given.</p>}
212 </div>
213 );
214 }
215 return (
216 <div className="p-5 sm:p-6">
217 <HeadLabel icon={<Rocket />}>Production</HeadLabel>
218 <p className="mt-2 text-lg font-medium">Where does {project.name} run?</p>
219 <p className="mt-1 max-w-xl text-sm text-muted">
220 Say once, and this page follows: production where it is deployed, or its packages and releases if it isn't
221 deployed at all. <span className="text-faint">{project.detected.reason.detail}</span>
222 </p>
223 <div className="mt-4 flex flex-wrap items-center gap-2">
224 {canDeploy && (
225 <ButtonLink to={`${base}/settings/deployments`} variant="outline">
226 <Rocket size={14} />
227 Deploy on g1t
228 </ButtonLink>
229 )}
230 <Button
231 type="button"
232 onClick={() => setElsewhere((open) => !open)}
233 aria-expanded={elsewhere}
234 variant="outline"
235 >
236 <Globe size={14} />
237 It deploys itself
238 </Button>
239 <DropdownMenu>
240 <DropdownMenuTrigger asChild>
241 <Button variant="outline">
242 <Box size={14} />
243 It isn't deployed
244 <ChevronDown size={13} className="text-faint" />
245 </Button>
246 </DropdownMenuTrigger>
247 <DropdownMenuContent align="start">
248 {NOT_DEPLOYED.map((option) => (
249 <DropdownMenuItem key={option.value} onSelect={() => fetcher.submit({ intent: "kind", choice: option.value }, { method: "post" })}>
250 {option.label}
251 </DropdownMenuItem>
252 ))}
253 </DropdownMenuContent>
254 </DropdownMenu>
255 </div>
256 {elsewhere && (
257 <AddressForm field="productionUrl" placeholder="Production's address, such as https://example.com" label="Production's address" extra={{ intent: "kind", choice: "elsewhere" }} />
258 )}
259 {fetcher.data?.error && <p className="mt-2 text-xs text-danger">{fetcher.data.error}</p>}
260 </div>
261 );
262}
263
264/** Documentation: where it is read, or a place to say so. */
265export function DocsHead({ project, base, canChange, canDeploy }: Head) {
266 const url = project.links.docs ?? project.productionUrl ?? project.links.homepage;
267 return (
268 <div className="flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:justify-between sm:p-6">
269 <div className="min-w-0">
270 <HeadLabel icon={<BookOpen />}>Documentation</HeadLabel>
271 {url ? (
272 <BigLink url={url} />
273 ) : canChange ? (
274 <>
275 <p className="mt-2 text-lg font-medium">Where are its docs read?</p>
276 <p className="mt-1 max-w-lg text-sm text-muted">Give the address, and this card and its listing link to it.</p>
277 <AddressForm field="docsUrl" placeholder="https://docs.example.com" label="Where its docs are read" extra={{ intent: "about" }} />
278 </>
279 ) : (
280 <p className="mt-2 text-sm text-muted">Its docs are in its repository.</p>
281 )}
282 <DeployQuietly base={base} canDeploy={canDeploy && project.runs == null} what="its docs as a site" />
283 </div>
284 {url && (
285 <div className="flex shrink-0 items-center gap-2">
286 <ButtonLink to={url} variant="accent" reloadDocument target="_blank" rel="noopener noreferrer">
287 Read
288 <ArrowUpRight size={14} />
289 </ButtonLink>
290 </div>
291 )}
292 </div>
293 );
294}
295
296/** Anything else: its homepage, or where to add its links. */
297export function OtherHead({ project, base, canChange }: Omit<Head, "canDeploy">) {
298 const url = project.links.homepage ?? project.links.docs ?? project.links.custom[0]?.url ?? null;
299 return (
300 <div className="p-5 sm:p-6">
301 <HeadLabel icon={<Globe />}>Homepage</HeadLabel>
302 {url ? (
303 <BigLink url={url} />
304 ) : canChange ? (
305 <p className="mt-2 text-sm text-muted">
306 No links yet.{" "}
307 <Link to={`${base}/settings#links`} className="text-accent hover:underline">
308 Add a homepage, docs or others
309 </Link>{" "}
310 and they show here, on its card and in its workspace's Projects.
311 </p>
312 ) : (
313 <p className="mt-2 text-sm text-muted">No homepage given.</p>
314 )}
315 </div>
316 );
317}
318
319/** Production as g1t serves it, with the project's homepage when that is somewhere else. */
320export function AlsoAt({ url }: { url: string | null }) {
321 if (!url) return null;
322 return (
323 <Hint label="Its homepage">
324 <DeployLink href={url} className="inline-flex items-center gap-1 text-faint hover:text-fg">
325 <Globe size={12} />
326 {host(url).replace(/\/$/, "")}
327 </DeployLink>
328 </Hint>
329 );
330}