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, useTeamAgents } from "../../../components/teams";

16

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

17

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

18

import { budgetFromText } from "../../../lib/people";

19

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

20

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

21

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

22

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

23

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

24

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

25

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

26

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

27

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

28

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

29

30

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

31

const NO_PARENT = "-";

32

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

33

const NO_LEAD = "none";

34

35

/**

36

* Its lead, channel and budget. An agent made lead that is on the team

37

* only through its home team is added to it first, as identity needs; a

38

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

39

*/

40

async function saveLeadChannelBudget(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

const budget = budgetFromText(String(form.get("budget") ?? ""));

45

if (budget === null) return { intent, error: "Give the budget in dollars, such as 150.", saved: false };

46

if (lead.startsWith("agent:")) {

47

const listed = await workspaceAgents.list(workspace, user).catch(() => null);

48

const agent = listed?.ok ? listed.value.find((a) => `agent:${a.id}` === lead) : null;

49

if (!agent) return { intent, error: "Choose one of the team's agents.", saved: false };

50

const added = await identity.setTeamAgent(user, workspace, slug, agent.id);

51

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

52

}

53

let channelId = "";

54

let channelName = "";

55

if (channel) {

56

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

57

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

58

channelId = found.value.channel.id;

59

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

60

}

61

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

62

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

63

channel_id: channelId,

64

channel_name: channelName,

65

budget_micros: budget,

66

});

67

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

68

}

69

70

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

71

const viewer = getViewer(context);

72

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

73

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

74

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

75

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

76

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

77

// Who can lead it: its own people (and its agents, from the layout).

78

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

79

]);

80

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

81

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

82

}

83

84

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

85

assertSameOrigin(request);

86

const user = requireUser(context, request);

87

const form = await request.formData();

88

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

89

if (intent === "delete") {

90

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

91

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

92

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

93

}

94

if (intent === "review") {

95

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

96

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

97

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

98

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

99

}

100

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

101

const changes = teamChangesFromForm(form);

102

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

103

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

104

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

105

// A new slug is a new address.

106

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

107

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

108

}

109

110

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

111

const team = useTeam();

112

const { agents } = useTeamAgents();

113

const { parents, people } = loaderData;

114

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

115

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

116

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

117

const review = team.review_assignment;

118

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

119

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

120

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>

141

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

</RadioGroup>

</fieldset>

{visibility === "visible" && (

147

<div>

148

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

</SelectTrigger>

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

155

{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

164

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.

171

</SwitchCard>

172

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

Save

</SubmitButton>

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

</div>

</Form>

</section>

Lead, channel and budget

185

</h2>

186

187

Everyone on {team.name}, agents included, is told who leads it and where it talks. Its budget caps what its agents spend

188

together in a month; each agent keeps its own budget too.

</p>

<SelectField

name="lead"

defaultValue={leadValue}

197

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

198

options={[

199

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

200

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

201

...agents.map((agent) => ({ value: `agent:${agent.id}`, label: `${agent.display_name}, an agent` })),

202

]}

203

/>

204

<span className="mt-1.5 block text-xs text-faint">Someone on the team. Agents page the lead first when a person is needed.</span>

</label>

</span>

</Field>

</span>

</Field>

Storage level <Coming />

218

</div>

219

<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

232

</h2>

233

234

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

235

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>

249

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

250

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

))}

</RadioGroup>

</fieldset>

<CheckboxOption

name="skip_busy"

checked={skipBusy}

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

260

label="Skip people who are busy"

261

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

/>

{skipBusy && (

</div>

)}

</div>

<CheckboxOption

name="include_child_teams"

271

defaultChecked={review.include_child_teams}

272

label="Pick from child teams too"

273

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

/>

<CheckboxOption

name="notify_team"

defaultChecked={review.notify_team}

278

label="Also tell the rest of the team"

279

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

/>

</Field>

</div>

)}

{!assigning && (

<>

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

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

294

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

295

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

296

</>

297

)}

298

<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{" "}

314

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

</p>

<ConfirmDialog

intent="delete"

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

320

description="This cannot be undone."

321

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

322

submit="Delete team"

323

busy="Deleting…"

324

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

trigger={(open) => (

Delete team

</Button>

)}

>

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

332

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

</ConfirmDialog>

</div>

</section>

</div>

);

}