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