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