apps/web/app/routes/repo/settings.tsx · flagon-io/g1t

1

import { Box, Code2, GitBranch, Image as ImageIcon, Link2, Rocket } from "lucide-react";

2

import { useState } from "react";

3

import { Form, Link } from "react-router";

4

5

import type { Route } from "./+types/settings";

6

import { page } from "../../lib/meta";

7

import { useAddresses } from "../../lib/addresses";

8

import { productionImageUrl, readProductionImageUpload } from "../../lib/production-image";

9

import { KindFields, LinkFields } from "../../components/project-about";

10

import { ProductionImageField } from "../../components/production-image-field";

11

import { RepoSettingsHeading } from "../../components/repo-settings-heading";

12

import { ErrorText, Field, Input, SubmitButton, TimeAgo } from "../../components/ui";

13

import { Card } from "../../components/ui/card";

14

import { KIND_CHOICE_SETS, type KindChoice, choiceOf, linksFromForm, neverDeploys } from "../../lib/project-kind";

15

import { deployments, identity, projects } from "../../lib/services.server";

16

import { assertSameOrigin, getViewer, requireUser, unwrap } from "../../lib/session.server";

17

import { requireCapability, requireInsider } from "../../lib/access.server";

18

19

export function meta({ params, ...args }: Route.MetaArgs) {

20

return page(args, { title: `Settings · ${params.owner}/${params.repo} · g1t` });

21

}

22

23

export async function loader({ params, context }: Route.LoaderArgs) {

24

const viewer = getViewer(context);

25

// Maintain and up; to anyone without a role here the page does not exist.

26

await requireInsider(context, params, "manage_settings");

27

const [project, deploys] = await Promise.all([

28

projects.get(params.owner, params.repo, viewer),

29

// Whether Deployments are on: needs Admin, so unknown (null) below it.

30

deployments.settings({ workspace: params.owner, slug: params.repo }, viewer).catch(() => null),

31

]);

32

const found = unwrap(project);

33

// Who made it is kept as an id: named by identity, or left out if it cannot say.

34

const names = await identity.usernames([found.createdBy]).catch(() => ({}) as Record<string, string>);

35

return {

36

project: found,

37

deploymentsOn: deploys?.ok ? deploys.value.enabled : null,

38

mine: viewer?.id === found.createdBy,

39

creator: names[found.createdBy] ?? null,

};

}

export async function action({ request, params, context }: Route.ActionArgs) {

44

assertSameOrigin(request);

45

const user = requireUser(context, request);

46

await requireCapability(context, params, "manage_settings");

47

const form = await request.formData();

48

// Production's picture on the overview: whoever may change its address may change it.

49

const intent = form.get("intent");

50

if (intent === "production-image" || intent === "remove-production-image" || intent === "prefer-production-image") {

51

let change: { image?: string | null; preferred?: boolean };

52

if (intent === "production-image") {

53

const upload = await readProductionImageUpload(form);

54

if ("error" in upload) return { error: upload.error };

55

change = { image: upload.image };

56

} else {

57

change = intent === "remove-production-image" ? { image: null } : { preferred: form.get("preferred") === "on" };

58

}

59

const saved = await projects.setProductionImage(user, params.owner, params.repo, change);

60

return saved.ok ? { imageSaved: true as const } : { error: saved.error.message };

61

}

62

const choice = form.get("choice") as KindChoice | null;

63

const set = choice && choice in KIND_CHOICE_SETS ? KIND_CHOICE_SETS[choice] : null;

64

const saved = await projects.update(user, params.owner, params.repo, {

65

name: String(form.get("name") ?? ""),

66

// Blank clears it.

67

description: String(form.get("description") ?? ""),

68

rootDir: String(form.get("rootDir") ?? ""),

69

...(set ?? {}),

70

// Production's address is asked for beside Deploys itself, and kept otherwise.

71

...(form.has("productionUrl") ? { productionUrl: String(form.get("productionUrl")) } : {}),

72

homepage: String(form.get("homepage") ?? ""),

73

docsUrl: String(form.get("docsUrl") ?? ""),

74

links: linksFromForm(form),

75

});

76

return saved.ok ? { saved: true as const } : { error: saved.error.message };

77

}

78

79

export default function ProjectSettings({ loaderData, actionData, params }: Route.ComponentProps) {

80

const { project, deploymentsOn, mine, creator } = loaderData;

81

const [choice, setChoice] = useState<KindChoice | null>(choiceOf(project.setting));

82

// Something that never deploys, while Deployments are on, is refused: they are turned off first.

83

const stops = choice === "library" || choice === "tool" || choice === "other";

84

const blocked = stops && !neverDeploys(project) && deploymentsOn === true;

85

const base = `/${params.owner}/${params.repo}`;

86

const source = project.source.kind === "hosted" ? project.source : null;

87

const { usercontent } = useAddresses();

return (

{/* Enter in a field saves: the form's first submit button is the one

93

Enter presses, and otherwise it would be the description reset. */}

Project

</h2>

</Field>

<Input

key={project.description ?? ""}

107

name="description"

108

defaultValue={project.description ?? ""}

109

maxLength={200}

110

placeholder="What it is, in a line"

/>

</Field>

</div>

</section>

Source

</h2>

{source && (

<div>

{source.repo.namespace}/{source.repo.name}

127

</Link>

128

129

Hosted on g1t · <GitBranch size={11} className="inline" /> {source.defaultBranch}

</p>

</div>

Repository settings

</Link>

</div>

</Card>

)}

<Field

label="Root directory"

140

hint="Where in the repository this project lives, such as apps/web. Builds run there. Empty for the whole repository."

>

</Field>

</section>

{/* Old links to #deploys land here too. */}

What it is

</h2>

Its overview follows: production for what is deployed, packages and releases for a library or a tool, and

155

the steps that apply to it. Only an app or site hosted on g1t.page is asked to turn on Deployments.

</p>

{blocked && (

Deployments are on for {project.name}. Turn them off in{" "}

Deployments settings

</Link>{" "}

first, then choose this here.

</p>

)}

</section>

Links

</h2>

Shown on its overview, its card, and its workspace's Projects. Each is an http or https address;

176

https:// is added when you leave it out.

</p>

</section>

Save

</SubmitButton>

{actionData && "saved" in actionData && <span className="text-sm text-success">Saved.</span>}

Created{" "}

{mine ? (

"by you "

) : creator ? (

<>

by{" "}

{creator}

</Link>{" "}

</>

) : null}

</span>

</div>

<ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>

202

</Form>

203

204

{/* Its own forms, sent as soon as an image is picked: outside the settings form. */}

Production image

</h2>

The picture on its overview's production card. A screenshot is taken by itself for an app hosted on g1t.page,

212

and of production's address for one that deploys itself, about once a day and after each production deployment

213

reported to g1t.

214

</p>

215

<ProductionImageField

216

image={project.productionImage}

217

src={project.productionImage ? productionImageUrl(project.productionImage.file, usercontent) : null}

218

screenshots={project.runs === "g1t" || (project.runs === "elsewhere" && !!project.productionUrl)}

/>

</section>

</div>

);

}