Sign in

flagon-io/g1t

public

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

g1t/apps/web/app/routes/repo/settings-deployments.tsx

132 lines6,328 bytesCodeBlame
1import { Form, Link, data, useNavigation } from "react-router";
2
3import type { Route } from "./+types/settings-deployments";
4import { page } from "../../lib/meta";
5import { RepoSettingsTabs } from "../../components/repo-settings-tabs";
6import { Button, ErrorText, Field, Input } from "../../components/ui";
7import { deployments } from "../../lib/services.server";
8import { assertSameOrigin, getViewer, requireUser, roleIn, unwrap } from "../../lib/session.server";
9
10export function meta({ params, ...args }: Route.MetaArgs) {
11 return page(args, { title: `Deployment settings · ${params.owner}/${params.repo} · g1t` });
12}
13
14export async function loader({ params, context }: Route.LoaderArgs) {
15 const viewer = getViewer(context);
16 if (!roleIn(viewer, params.owner)) throw data(null, { status: 404 });
17 const settings = await deployments.settings({ workspace: params.owner, slug: params.repo }, viewer);
18 return { settings: unwrap(settings) };
19}
20
21export async function action({ request, params, context }: Route.ActionArgs) {
22 assertSameOrigin(request);
23 const user = requireUser(context, request);
24 const form = await request.formData();
25 const ref = { workspace: params.owner, slug: params.repo };
26 const intent = form.get("intent");
27 if (intent === "enable" || intent === "disable") {
28 const saved = await deployments.updateSettings(user, ref, { enabled: intent === "enable" });
29 return saved.ok
30 ? { notice: intent === "enable" ? "Deployments are on. Production is building." : "Deployments are off, and every app is down." }
31 : { error: saved.error.message };
32 }
33 const on = (name: string) => form.get(name) === "on";
34 const saved = await deployments.updateSettings(user, ref, {
35 previews: on("previews"),
36 production: on("production"),
37 buildCommand: String(form.get("buildCommand") ?? ""),
38 outputDir: String(form.get("outputDir") ?? ""),
39 idleDays: Number(form.get("idleDays")),
40 });
41 return saved.ok ? { notice: "Saved." } : { error: saved.error.message };
42}
43
44function Check({ name, on, title, children }: { name: string; on: boolean; title: string; children: string }) {
45 return (
46 <label className="flex cursor-pointer items-start gap-3 rounded-xl border border-line bg-surface p-4 hover:border-line-strong">
47 <input type="checkbox" name={name} defaultChecked={on} className="mt-1 accent-accent" />
48 <span>
49 <span className="block text-sm font-medium">{title}</span>
50 <span className="mt-1 block text-sm text-muted">{children}</span>
51 </span>
52 </label>
53 );
54}
55
56export default function DeploymentSettings({ loaderData, actionData, params }: Route.ComponentProps) {
57 const { settings } = loaderData;
58 const busy = useNavigation().state === "submitting";
59 const base = `/${params.owner}/${params.repo}`;
60 return (
61 <div className="max-w-4xl">
62 <RepoSettingsTabs base={base} />
63 <div className="min-h-6">
64 {actionData && "notice" in actionData && <p className="text-sm text-accent">{actionData.notice}</p>}
65 <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>
66 </div>
67
68 {!settings.enabled ? (
69 <section className="rounded-xl border border-line bg-surface p-5">
70 <h2 className="font-medium">Deployments are off</h2>
71 <p className="mt-1 text-sm text-muted">
72 Turn them on to build production at{" "}
73 <span className="font-mono text-fg">{settings.productionUrl.replace("https://", "")}</span> and a preview for
74 every pull request. The workspace needs the Deployments plan, under Billing.
75 </p>
76 <Form method="post" className="mt-4">
77 <Button variant="accent" type="submit" name="intent" value="enable" disabled={busy}>
78 Turn on deployments
79 </Button>
80 </Form>
81 </section>
82 ) : (
83 <>
84 <Form method="post" className="space-y-5">
85 <div className="grid gap-3 md:grid-cols-2">
86 <Check name="production" on={settings.production} title="Production">
87 Deploy the default branch on every push.
88 </Check>
89 <Check name="previews" on={settings.previews} title="Previews">
90 A preview for every branch with an open pull request, linked on it.
91 </Check>
92 </div>
93 <div className="grid gap-4 md:grid-cols-3">
94 <Field label="Build command" hint="Instead of the project's own build script.">
95 <Input name="buildCommand" defaultValue={settings.buildCommand ?? ""} placeholder="npm run build" />
96 </Field>
97 <Field label="Output directory" hint="For a static site; found by itself when empty.">
98 <Input name="outputDir" defaultValue={settings.outputDir ?? ""} placeholder="dist" />
99 </Field>
100 <Field label="Idle days" hint="A preview no one visits for this long comes down.">
101 <Input name="idleDays" type="number" min={1} max={90} defaultValue={settings.idleDays} />
102 </Field>
103 </div>
104 <p className="text-sm text-muted">
105 Builds and running apps read the{" "}
106 <Link to={`${base}/settings/secrets`} className="text-fg hover:underline">
107 secrets and variables
108 </Link>{" "}
109 available to Deployments: each row for Production or Preview, or for all environments.
110 </p>
111 <Button type="submit" disabled={busy}>
112 Save
113 </Button>
114 </Form>
115
116 <section className="mt-10 rounded-xl border border-danger/30 p-5">
117 <h2 className="text-sm font-medium">Turn off deployments</h2>
118 <p className="mt-1 text-sm text-muted">
119 Takes production and every preview down now, and stops building. Nothing of this project's keeps
120 running or costing anything. The workspace's plan stays on; turn it off under Billing.
121 </p>
122 <Form method="post" className="mt-3">
123 <Button variant="quiet" type="submit" name="intent" value="disable" disabled={busy}>
124 Turn off deployments
125 </Button>
126 </Form>
127 </section>
128 </>
129 )}
130 </div>
131 );
132}