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