Sign in

flagon-io/g1t

public

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

211 lines9,391 bytesCodeBlame
1import { Box, Code2, GitBranch, Rocket } from "lucide-react";
2import { useState } from "react";
3import { Form, Link, useNavigation } from "react-router";
4
5import type { DeploysSetting } from "@g1t/contracts";
6
7import type { Route } from "./+types/settings";
8import { page } from "../../lib/meta";
9import { RepoSettingsHeading } from "../../components/repo-settings-heading";
10import { Button, ErrorText, Field, Input, TimeAgo } from "../../components/ui";
11import { RadioGroup, RadioOption } from "../../components/ui/radio-group";
12import { DEPLOYS_CHOICES } from "../../lib/project-kind";
13import { deployments, identity, projects } from "../../lib/services.server";
14import { assertSameOrigin, getViewer, requireUser, unwrap } from "../../lib/session.server";
15import { requireCapability, requireInsider } from "../../lib/access.server";
16
17export function meta({ params, ...args }: Route.MetaArgs) {
18 return page(args, { title: `Settings · ${params.owner}/${params.repo} · g1t` });
19}
20
21export async function loader({ params, context }: Route.LoaderArgs) {
22 const viewer = getViewer(context);
23 // Maintain and up; to anyone without a role here the page does not exist.
24 await requireInsider(context, params, "manage_settings");
25 const [project, deploys] = await Promise.all([
26 projects.get(params.owner, params.repo, viewer),
27 // Whether Deployments are on: needs Admin, so unknown (null) below it.
28 deployments.settings({ workspace: params.owner, slug: params.repo }, viewer).catch(() => null),
29 ]);
30 const found = unwrap(project);
31 // Who made it is kept as an id: named by identity, or left out if it cannot say.
32 const names = await identity.usernames([found.createdBy]).catch(() => ({}) as Record<string, string>);
33 return {
34 project: found,
35 deploymentsOn: deploys?.ok ? deploys.value.enabled : null,
36 mine: viewer?.id === found.createdBy,
37 creator: names[found.createdBy] ?? null,
38 };
39}
40
41export async function action({ request, params, context }: Route.ActionArgs) {
42 assertSameOrigin(request);
43 const user = requireUser(context, request);
44 await requireCapability(context, params, "manage_settings");
45 const form = await request.formData();
46 const saved = await projects.update(user, params.owner, params.repo, {
47 name: String(form.get("name") ?? ""),
48 // Blank, or the reset, and it follows the repository's description again.
49 description: form.get("inherit") === "description" ? null : String(form.get("description") ?? ""),
50 rootDir: String(form.get("rootDir") ?? ""),
51 deploys: (form.get("deploys") as DeploysSetting | null) ?? undefined,
52 });
53 return saved.ok ? { saved: true as const } : { error: saved.error.message };
54}
55
56export default function ProjectSettings({ loaderData, actionData, params }: Route.ComponentProps) {
57 const { project, deploymentsOn, mine, creator } = loaderData;
58 const [deploys, setDeploys] = useState<DeploysSetting>(project.deploys);
59 // Not deploying while Deployments are on is refused: they are turned off first.
60 const blocked = deploys === "no" && project.deploys !== "no" && deploymentsOn === true;
61 const saving = useNavigation().state === "submitting";
62 const base = `/${params.owner}/${params.repo}`;
63 const source = project.source.kind === "hosted" ? project.source : null;
64 return (
65 <div className="max-w-4xl">
66 <RepoSettingsHeading base={base} />
67 <Form method="post" className="space-y-8">
68 <section className="space-y-4">
69 <h2 className="flex items-center gap-2 text-sm font-medium">
70 <Box size={15} className="text-accent" />
71 Project
72 </h2>
73 <div className="grid gap-4 md:grid-cols-2">
74 <Field label="Name" hint={`Its address stays g1t.sh/${project.workspace}/${project.slug}.`}>
75 <Input name="name" defaultValue={project.name} required maxLength={100} />
76 </Field>
77 <div>
78 <Field
79 label="Description"
80 hint={
81 project.descriptionInherited
82 ? "Follows the repository's description. Write one to give the project its own."
83 : "The project's own. Empty follows the repository's description."
84 }
85 >
86 <Input
87 key={`${project.descriptionInherited}:${project.description ?? ""}`}
88 name="description"
89 defaultValue={project.descriptionInherited ? "" : (project.description ?? "")}
90 maxLength={200}
91 placeholder={(project.descriptionInherited && project.description) || "What it is, in a line"}
92 />
93 </Field>
94 {!project.descriptionInherited && (
95 <button
96 type="submit"
97 name="inherit"
98 value="description"
99 disabled={saving}
100 className="mt-1.5 text-xs text-muted hover:text-fg disabled:opacity-50"
101 >
102 Use the repository's description
103 </button>
104 )}
105 </div>
106 </div>
107 </section>
108
109 <section className="space-y-4">
110 <h2 className="flex items-center gap-2 text-sm font-medium">
111 <Code2 size={15} className="text-accent" />
112 Source
113 </h2>
114 {source && (
115 <div className="rounded-xl border border-line bg-surface p-4 text-sm">
116 <div className="flex flex-wrap items-center justify-between gap-3">
117 <div>
118 <Link to={`${base}/code`} className="font-mono hover:text-accent">
119 {source.repo.namespace}/{source.repo.name}
120 </Link>
121 <p className="mt-0.5 text-xs text-muted">
122 Hosted on g1t · <GitBranch size={11} className="inline" /> {source.defaultBranch}
123 </p>
124 </div>
125 <Link to={`${base}/settings/repository`} className="text-xs text-muted hover:text-fg">
126 Repository settings
127 </Link>
128 </div>
129 <p className="mt-3 text-xs text-faint">
130 Mirroring a repository from GitHub, GitLab or Bitbucket as a project's source is coming next.
131 </p>
132 </div>
133 )}
134 <Field
135 label="Root directory"
136 hint="Where in the repository this project lives, such as apps/web. Builds run there. Empty for the whole repository."
137 >
138 <Input name="rootDir" defaultValue={source?.rootDir ?? ""} placeholder="apps/web" className="font-mono" />
139 </Field>
140 </section>
141
142 <section className="space-y-4" id="deploys">
143 <h2 className="flex items-center gap-2 text-sm font-medium">
144 <Rocket size={15} className="text-accent" />
145 Deployments for this project
146 </h2>
147 <RadioGroup
148 name="deploys"
149 value={deploys}
150 onValueChange={(value) => setDeploys(value as DeploysSetting)}
151 aria-label="Deployments for this project"
152 className="gap-3"
153 >
154 {DEPLOYS_CHOICES.map((choice) => (
155 <RadioOption
156 key={choice.value}
157 value={choice.value}
158 label={choice.label}
159 description={
160 choice.value === "auto" ? (
161 <>
162 {project.detected.kind === "library" ? "Detected: a library, so it doesn't deploy." : "Detected: an app, so it deploys."}{" "}
163 {project.detected.reason.detail}
164 </>
165 ) : (
166 choice.hint
167 )
168 }
169 />
170 ))}
171 </RadioGroup>
172 {blocked && (
173 <p className="rounded-lg border border-warn/40 bg-warn/5 px-3.5 py-2.5 text-sm text-fg-soft">
174 Deployments are on for {project.name}. Turn them off in{" "}
175 <Link to={`${base}/settings/deployments`} className="text-fg underline underline-offset-4">
176 Deployments settings
177 </Link>{" "}
178 first, then choose Doesn't deploy here.
179 </p>
180 )}
181 <p className="text-xs text-faint">
182 A project that doesn't deploy shows its packages and releases on its overview instead of production. Its
183 Deployments page stays in the sidebar.
184 </p>
185 </section>
186
187 <div className="flex items-center gap-3">
188 <Button type="submit" disabled={saving || blocked}>
189 Save
190 </Button>
191 {actionData && "saved" in actionData && <span className="text-sm text-accent">Saved.</span>}
192 <span className="ml-auto text-xs text-faint">
193 Created{" "}
194 {mine ? (
195 "by you "
196 ) : creator ? (
197 <>
198 by{" "}
199 <Link to={`/${creator}`} className="text-muted hover:text-fg">
200 {creator}
201 </Link>{" "}
202 </>
203 ) : null}
204 <TimeAgo at={project.createdAt} />
205 </span>
206 </div>
207 <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>
208 </Form>
209 </div>
210 );
211}