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

1

import { useState } from "react";

2

import { Form, data, redirect } from "react-router";

import {

MAX_ASSIGNED,

REVIEW_ALGORITHM_LABELS,

7

REVIEW_ALGORITHM_SUMMARIES,

8

TEAM_VISIBILITY_SUMMARIES,

9

type ReviewAlgorithm,

10

type TeamVisibility,

11

} from "@g1t/contracts";

12

13

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

14

import { ConfirmDialog } from "../../../components/repo-lifecycle";

15

import { useTeam } from "../../../components/teams";

16

import { Coming } from "../../../components/people";

17

import { SelectField } from "../../../components/ui/select";

18

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

19

import { Button } from "../../../components/ui/button";

20

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

21

import { Input as NumberInput } from "../../../components/ui/input";

22

import { Textarea } from "../../../components/ui/textarea";

23

import { CheckboxOption } from "../../../components/ui/checkbox";

24

import { RadioGroup, RadioOption } from "../../../components/ui/radio-group";

25

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select";

26

import { SwitchCard } from "../../../components/ui/switch";

27

import { parentChoices, reviewAssignmentFromForm, teamChangesFromForm, teamPath } from "../../../lib/teams";

28

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

29

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

30

31

/** The parent select's value for "no parent". */

32

const NO_PARENT = "-";

33

/** The lead select's value for no lead. */

34

const NO_LEAD = "none";

35

36

/**

37

* Its lead and channel. The lead is a person on the team; a channel is

38

* found by its name in Chat, as the viewer sees it.

39

*/

40

async function saveLeadChannel(form: FormData, workspace: string, slug: string, user: Parameters<typeof identity.updateTeam>[0]) {

41

const intent = "people";

42

const lead = String(form.get("lead") ?? NO_LEAD);

43

const channel = String(form.get("channel") ?? "").trim().replace(/^#/, "").toLowerCase();

44

if (lead !== NO_LEAD && !lead.startsWith("@")) return { intent, error: "Choose someone on the team.", saved: false };

45

let channelId = "";

46

let channelName = "";

47

if (channel) {

48

const found = await chat.channelByName(workspace, channel, user).catch(() => null);

49

if (!found?.ok || found.value.channel.kind !== "channel") return { intent, error: `There is no channel #${channel} you can see.`, saved: false };

50

channelId = found.value.channel.id;

51

channelName = found.value.channel.name ?? channel;

52

}

53

const saved = await identity.updateTeam(user, workspace, slug, {

54

lead: lead === NO_LEAD ? "" : lead,

55

channel_id: channelId,

56

channel_name: channelName,

57

});

58

return saved.ok ? { intent, error: null, saved: true } : { intent, error: saved.error.message, saved: false };

59

}

60

61

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

62

const viewer = getViewer(context);

63

if (!roleIn(viewer, params.owner)) throw data(null, { status: 404 });

64

const team = unwrap(await identity.getTeam(viewer, params.owner, params.team));

65

if (!team.can_manage) throw data(null, { status: 404 });

66

const [all, members] = await Promise.all([

67

identity.listTeams(viewer, params.owner).then((found) => (found.ok ? found.value : [])),

68

// Who can lead it: its own people.

69

identity.teamMembers(viewer, params.owner, params.team, false).then((found) => (found.ok ? found.value : [])),

70

]);

71

const parents = parentChoices(all, team.slug).filter((other) => other.can_manage || other.slug === team.parent?.slug);

72

return { parents, people: members.map((member) => ({ username: member.username, name: member.name })) };

73

}

74

75

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

76

assertSameOrigin(request);

77

const user = requireUser(context, request);

78

const form = await request.formData();

79

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

80

if (intent === "delete") {

81

const deleted = await identity.deleteTeam(user, params.owner, params.team);

82

if (!deleted.ok) return { intent, error: deleted.error.message, saved: false };

83

throw redirect(`/${params.owner}/-/teams`);

84

}

85

if (intent === "review") {

86

const current = unwrap(await identity.getTeam(user, params.owner, params.team));

87

const review = reviewAssignmentFromForm(form, current.review_assignment);

88

const saved = await identity.updateTeam(user, params.owner, params.team, { review_assignment: review });

89

return saved.ok ? { intent, error: null, saved: true } : { intent, error: saved.error.message, saved: false };

90

}

91

if (intent === "people") return saveLeadChannel(form, params.owner, params.team, user);

92

const changes = teamChangesFromForm(form);

93

if (changes.parent === NO_PARENT) changes.parent = "";

94

const saved = await identity.updateTeam(user, params.owner, params.team, changes);

95

if (!saved.ok) return { intent, error: saved.error.message, saved: false };

96

// A new slug is a new address.

97

if (saved.value.slug !== params.team) throw redirect(teamPath(saved.value.workspace, saved.value.slug, "settings"));

98

return { intent, error: null, saved: true };

99

}

100

101

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

102

const team = useTeam();

103

const { parents, people } = loaderData;

104

// An old agent lead (agents no longer exist) shows as no lead.

105

const leadValue = team.lead?.kind === "user" ? `@${team.lead.username}` : NO_LEAD;

106

const said = (intent: string) => (actionData?.intent === intent ? actionData : null);

107

const [visibility, setVisibility] = useState<TeamVisibility>(team.visibility);

108

const review = team.review_assignment;

109

const [assigning, setAssigning] = useState(review.enabled);

110

const [algorithm, setAlgorithm] = useState<ReviewAlgorithm>(review.algorithm);

111

const [skipBusy, setSkipBusy] = useState(review.skip_busy);

return (

Profile

</h2>

</Field>

<Field label="Slug" hint={`Mentioned as @${team.workspace}/<slug>. Changing it changes the team's address and how it is mentioned.`}>

</Field>

</Field>

<legend className="mb-2 text-sm font-medium text-muted">Visibility</legend>

132

<RadioGroup name="visibility" value={visibility} onValueChange={(value) => setVisibility(value as TeamVisibility)} className="space-y-3">

</RadioGroup>

</fieldset>

{visibility === "visible" && (

138

<div>

139

<span className="mb-1.5 block text-sm font-medium text-muted">Parent team</span>

</SelectTrigger>

<SelectItem value={NO_PARENT}>No parent</SelectItem>

146

{parents.map((parent) => (

{parent.name}

</SelectItem>

))}

</SelectContent>

</Select>

It has its parent's roles on repositories, and hears what is asked of its parent. Moving it needs you to

155

maintain both teams, or own the workspace.

</span>

</div>

)}

Everyone in it, and in its child teams, hears of @{team.workspace}/{team.slug} in their notifications.

162

</SwitchCard>

163

<ErrorText>{said("profile")?.error ?? null}</ErrorText>

Save

</SubmitButton>

{said("profile")?.saved && <span className="text-sm text-muted">Saved.</span>}

</div>

</Form>

</section>

Lead and channel

</h2>

<p className="mt-1 text-sm text-muted">Who leads {team.name}, and where it talks.</p>

<SelectField

name="lead"

defaultValue={leadValue}

185

className="w-full sm:max-w-72"

186

options={[

187

{ value: NO_LEAD, label: "No lead" },

188

...people.map((person) => ({ value: `@${person.username}`, label: person.name ? `${person.name} (@${person.username})` : `@${person.username}` })),

189

]}

190

/>

191

<span className="mt-1.5 block text-xs text-faint">Someone on the team.</span>

</label>

</span>

</Field>

Storage level <Coming />

200

</div>

201

<ErrorText>{said("people")?.error ?? null}</ErrorText>

Save

</SubmitButton>

{said("people")?.saved && <span className="text-sm text-muted">Saved.</span>}

</div>

</Form>

</section>

Code review assignment

214

</h2>

215

216

When {team.name} is asked to review a pull request, by a person or by a CODEOWNERS file. Off, everyone in the

217

team is asked. On, g1t picks people from it; the team stays shown as asked.

</p>

Never the pull request's author, and people from the team already asked count.

</SwitchCard>

{assigning && (

</Field>

<legend className="mb-2 text-sm font-medium text-muted">Who goes first</legend>

231

<RadioGroup name="algorithm" value={algorithm} onValueChange={(value) => setAlgorithm(value as ReviewAlgorithm)} className="space-y-3">

232

{(["round_robin", "load_balance"] as const).map((value) => (

))}

</RadioGroup>

</fieldset>

<CheckboxOption

name="skip_busy"

checked={skipBusy}

onCheckedChange={(on) => setSkipBusy(on === true)}

242

label="Skip people who are busy"

243

description="Busy: this many or more open pull requests are waiting on their review."

/>

{skipBusy && (

</div>

)}

</div>

<CheckboxOption

name="include_child_teams"

253

defaultChecked={review.include_child_teams}

254

label="Pick from child teams too"

255

description="Otherwise only the team's own people are picked."

/>

<CheckboxOption

name="notify_team"

defaultChecked={review.notify_team}

260

label="Also tell the rest of the team"

261

description="Everyone in the team hears of the request, not only the people picked."

/>

</Field>

</Card>

)}

{!assigning && (

<>

{/* Kept as they are while assignment is off. */}

{review.skip_busy && <input type="hidden" name="skip_busy" value="on" />}

276

{review.include_child_teams && <input type="hidden" name="include_child_teams" value="on" />}

277

{review.notify_team && <input type="hidden" name="notify_team" value="on" />}

278

</>

279

)}

280

<ErrorText>{said("review")?.error ?? null}</ErrorText>

Save

</SubmitButton>

{said("review")?.saved && <span className="text-sm text-muted">Saved.</span>}

</div>

</Form>

</section>

Delete this team

</h2>

Its people stay in {team.workspace}, and lose the roles the team gave them. Its child teams move up to{" "}

296

{team.parent ? team.parent.name : "the top"}.

</p>

<ConfirmDialog

intent="delete"

title={`Delete ${team.name}?`}

302

description="This cannot be undone."

303

confirm={`${team.workspace}/${team.slug}`}

304

submit="Delete team"

305

busy="Deleting…"

306

error={said("delete")?.error ?? null}

trigger={(open) => (

Delete team

</Button>

)}

>

<li>Mentions of @{team.workspace}/{team.slug} stop telling anyone.</li>

314

<li>Pull requests that asked it to review keep the people it picked.</li>

</ConfirmDialog>

</div>

</section>

</div>

);

}