Skip to content
Sign up

flagon-io/g1t

public
0
192 linesCodeBlameRaw
1import { Form, Link } from "react-router";
2
3import type { DetectedKind } from "@g1t/contracts";
4
5import type { Route } from "./+types/settings-deployments";
6import { page } from "../../lib/meta";
7import { RepoSettingsHeading } from "../../components/repo-settings-heading";
8import { ErrorText, Field, Input, SubmitButton } from "../../components/ui";
9import { Card } from "../../components/ui/card";
10import { SwitchCard } from "../../components/ui/switch";
11import { neverDeploys } from "../../lib/project-kind";
12import { deployments, projects } from "../../lib/services.server";
13import { assertSameOrigin, getViewer, requireUser, unwrap } from "../../lib/session.server";
14import { requireCapability, requireInsider } from "../../lib/access.server";
15
16export function meta({ params, ...args }: Route.MetaArgs) {
17 return page(args, { title: `Deployment settings · ${params.owner}/${params.repo} · g1t` });
18}
19
20export async function loader({ params, context }: Route.LoaderArgs) {
21 const viewer = getViewer(context);
22 // Admins; to anyone without a role here the page does not exist.
23 await requireInsider(context, params, "manage_integrations");
24 const [settings, project] = await Promise.all([
25 deployments.settings({ workspace: params.owner, slug: params.repo }, viewer),
26 projects.get(params.owner, params.repo, viewer).catch(() => null),
27 ]);
28 // Set not to deploy in General settings: turning them on is refused until that changes.
29 const notDeploying = project?.ok ? neverDeploys(project.value) : false;
30 return { settings: unwrap(settings), notDeploying };
31}
32
33export async function action({ request, params, context }: Route.ActionArgs) {
34 assertSameOrigin(request);
35 const user = requireUser(context, request);
36 await requireCapability(context, params, "manage_integrations");
37 const form = await request.formData();
38 const ref = { workspace: params.owner, slug: params.repo };
39 const intent = form.get("intent");
40 if (intent === "enable" || intent === "disable") {
41 const saved = await deployments.updateSettings(user, ref, { enabled: intent === "enable" });
42 return saved.ok
43 ? { notice: intent === "enable" ? "Deployments are on. Production is building." : "Deployments are off, and every app is down." }
44 : { error: saved.error.message };
45 }
46 const on = (name: string) => form.get(name) === "on";
47 const saved = await deployments.updateSettings(user, ref, {
48 previews: on("previews"),
49 production: on("production"),
50 buildCommand: String(form.get("buildCommand") ?? ""),
51 outputDir: String(form.get("outputDir") ?? ""),
52 idleDays: Number(form.get("idleDays")),
53 });
54 return saved.ok ? { notice: "Saved." } : { error: saved.error.message };
55}
56
57function Check({ name, on, title, children }: { name: string; on: boolean; title: string; children: string }) {
58 return (
59 <SwitchCard name={name} defaultChecked={on} title={title}>
60 {children}
61 </SwitchCard>
62 );
63}
64
65/** What each kind of project is called, and what running it costs, in a line. */
66const DETECTED: Record<DetectedKind, { label: string; cost: string }> = {
67 static: {
68 label: "Static site",
69 cost: "Serving its files runs no code, so it adds no requests or CPU time. Builds are metered.",
70 },
71 html: {
72 label: "Plain HTML",
73 cost: "Its files are served as they are and run no code, so serving adds no requests or CPU time. Builds are metered.",
74 },
75 workers: {
76 label: "Workers project",
77 cost: "Its code runs on every request: requests and CPU time are metered, and so are builds.",
78 },
79};
80
81/** What g1t found the project to be at its last build, and what that costs. */
82function Detected({ kind }: { kind: DetectedKind | null }) {
83 const found = kind ? DETECTED[kind] : null;
84 return (
85 <Card asChild className="mb-6 p-5">
86 <section>
87 <h2 className="text-sm font-medium">What g1t detected</h2>
88 <p className="mt-1 text-sm">
89 {found ? found.label : <span className="text-muted">Detected at the first build</span>}
90 </p>
91 <p className="mt-1 text-xs text-muted">
92 {found
93 ? found.cost
94 : "A static site's files cost nothing to serve; a Workers project's requests and CPU time are metered. Builds are metered either way."}
95 </p>
96 </section>
97 </Card>
98 );
99}
100
101export default function DeploymentSettings({ loaderData, actionData, params }: Route.ComponentProps) {
102 const { settings, notDeploying } = loaderData;
103 const base = `/${params.owner}/${params.repo}`;
104 return (
105 <div className="max-w-4xl">
106 <RepoSettingsHeading base={base} />
107 <div className="min-h-6">
108 {actionData && "notice" in actionData && <p className="text-sm text-success">{actionData.notice}</p>}
109 <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>
110 </div>
111
112 <Detected kind={settings.detected ?? null} />
113
114 {!settings.enabled ? (
115 <Card asChild className="p-5">
116 <section>
117 <h2 className="font-medium">Deployments are off</h2>
118 <p className="mt-1 text-sm text-muted">
119 Deployments are opt-in for each project, and nothing builds or runs until you turn them on. Then g1t builds
120 production at{" "}
121 <span className="font-mono text-fg">{settings.productionUrl.replace("https://", "")}</span> and a preview for
122 every pull request. The workspace needs the g1t plan, under Billing.
123 </p>
124 {notDeploying ? (
125 <p className="mt-4 text-sm text-muted">
126 This project is set to be something that doesn't deploy, such as a library or a tool. To deploy it, choose
127 App or site, deployed on g1t, under{" "}
128 <Link to={`${base}/settings#kind`} className="text-fg underline underline-offset-4">
129 General
130 </Link>{" "}
131 first.
132 </p>
133 ) : (
134 <Form method="post" className="mt-4">
135 <SubmitButton variant="accent" name="intent" value="enable" pending="Turning on…">
136 Turn on deployments
137 </SubmitButton>
138 </Form>
139 )}
140 </section>
141 </Card>
142 ) : (
143 <>
144 <Form method="post" className="space-y-5">
145 <div className="grid gap-3 md:grid-cols-2">
146 <Check name="production" on={settings.production} title="Production">
147 Deploy the default branch on every push.
148 </Check>
149 <Check name="previews" on={settings.previews} title="Previews">
150 A preview for every branch with an open pull request, linked on it.
151 </Check>
152 </div>
153 <div className="grid gap-4 md:grid-cols-3">
154 <Field label="Build command" hint="Instead of the project's own build script.">
155 <Input name="buildCommand" defaultValue={settings.buildCommand ?? ""} placeholder="npm run build" />
156 </Field>
157 <Field label="Output directory" hint="For a static site; found by itself when empty.">
158 <Input name="outputDir" defaultValue={settings.outputDir ?? ""} placeholder="dist" />
159 </Field>
160 <Field label="Idle days" hint="A preview no one visits for this long comes down.">
161 <Input name="idleDays" type="number" min={1} max={90} defaultValue={settings.idleDays} />
162 </Field>
163 </div>
164 <p className="text-sm text-muted">
165 Builds and running apps read the{" "}
166 <Link to={`${base}/settings/secrets`} className="text-fg hover:underline">
167 secrets and variables
168 </Link>{" "}
169 available to Deployments: each row for Production or Preview, or for all environments.
170 </p>
171 <SubmitButton name="intent" value="save" pending="Saving…">
172 Save
173 </SubmitButton>
174 </Form>
175
176 <section className="mt-10 rounded-xl border border-danger/30 p-5">
177 <h2 className="text-sm font-medium">Turn off deployments</h2>
178 <p className="mt-1 text-sm text-muted">
179 Takes production and every preview down now, and stops building. Nothing of this project's keeps
180 running or costing anything. The workspace's plan stays on; turn it off under Billing.
181 </p>
182 <Form method="post" className="mt-3">
183 <SubmitButton variant="outline" name="intent" value="disable" pending="Turning off…">
184 Turn off deployments
185 </SubmitButton>
186 </Form>
187 </section>
188 </>
189 )}
190 </div>
191 );
192}