Skip to content
Sign in

flagon-io/g1t

public
0

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

664 lines27,817 bytesCodeBlame
1import { Mail, UserPlus, Users } from "lucide-react";
2import { useEffect, useState } from "react";
3import { Form, Link, useFetcher } from "react-router";
4
5import {
6 BASE_PERMISSION_LABELS,
7 REPO_ROLES,
8 REPO_ROLE_LABELS,
9 type Collaborator,
10 type RepoInvitation,
11 type RepoRole,
12 type RepoTeam,
13 type Team,
14 baseRole,
15} from "@g1t/contracts";
16
17import type { Route } from "./+types/settings-access";
18import { RoleSelect, RolesTable } from "../../components/access";
19import { RepoSettingsHeading } from "../../components/repo-settings-heading";
20import { StartPlanToInvite } from "../../components/start-plan";
21import { SettingsSection as Section } from "../../components/settings-section";
22import { Avatar, Button, ErrorText, Field, Input, SubmitButton } from "../../components/ui";
23import { Badge } from "../../components/ui/badge";
24import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select";
25import {
26 AlertDialog,
27 AlertDialogCancel,
28 AlertDialogContent,
29 AlertDialogDescription,
30 AlertDialogFooter,
31 AlertDialogHeader,
32 AlertDialogTitle,
33} from "../../components/ui/alert-dialog";
34import { page } from "../../lib/meta";
35import { refusal, requireInsider } from "../../lib/access.server";
36import { billing, identity } from "../../lib/services.server";
37import { assertSameOrigin, requireUser, roleIn, unwrap } from "../../lib/session.server";
38
39export function meta({ params, ...args }: Route.MetaArgs) {
40 return page(args, { title: `Access · ${params.owner}/${params.repo} · g1t` });
41}
42
43export async function loader({ params, context }: Route.LoaderArgs) {
44 // Write and up see who has access; Admins change it. To anyone without a
45 // role here the page does not exist.
46 const { viewer, access } = await requireInsider(context, params, "push");
47 const manage = access.can.manage_access;
48 // The workspace's teams, for Add team: only Admins add one, and a
49 // failure there leaves the rest of the page as it is.
50 const [found, teams, free] = await Promise.all([
51 identity.repoAccess(params.owner, params.repo, viewer),
52 manage ? identity.listTeams(viewer, params.owner).catch(() => null) : Promise.resolve(null),
53 // A free workspace invites no one from outside; identity refuses it
54 // either way, so a failure here only hides the note.
55 manage ? billing.freeWorkspaces([params.owner]).catch(() => [] as string[]) : Promise.resolve([] as string[]),
56 ]);
57 return {
58 access: unwrap(found),
59 teams: teams?.ok ? teams.value : ([] as Team[]),
60 manage,
61 free: free.includes(params.owner.toLowerCase()),
62 // Owners change the base permission, on the workspace's People page.
63 owner: roleIn(viewer, params.owner) === "owner",
64 };
65}
66
67/** What a form on this page came back with. */
68type Outcome = { intent: string; ok: boolean; message: string | null; error: string | null };
69
70const isRole = (value: string): value is RepoRole => (REPO_ROLES as readonly string[]).includes(value);
71
72export async function action({ request, params, context }: Route.ActionArgs): Promise<Outcome> {
73 assertSameOrigin(request);
74 const user = requireUser(context, request);
75 const form = await request.formData();
76 const intent = String(form.get("intent") ?? "");
77 const text = (name: string) => String(form.get(name) ?? "").trim();
78 const failed = (error: string): Outcome => ({ intent, ok: false, message: null, error });
79 const refused = await refusal(context, params, "manage_access");
80 if (refused) return failed(refused);
81 const role = text("role");
82
83 switch (intent) {
84 case "add": {
85 const invitee = text("invitee");
86 if (!invitee) return failed("Enter a username or an email address.");
87 if (!isRole(role)) return failed("Choose a role.");
88 const added = await identity.addCollaborator(user, params.owner, params.repo, invitee, role);
89 if (!added.ok) return failed(added.error.message);
90 const label = REPO_ROLE_LABELS[role];
91 if (added.value.result === "granted") {
92 return { intent, ok: true, error: null, message: `${added.value.collaborator.username} now has the ${label} role.` };
93 }
94 const invitation = added.value.invitation;
95 return {
96 intent,
97 ok: true,
98 error: null,
99 message: invitation.invitee
100 ? `We sent ${invitation.invitee} an invitation. They get the ${label} role when they accept it.`
101 : `We sent an invite to ${invitation.email ?? invitee}. They get the ${label} role once they make an account and join.`,
102 };
103 }
104 case "role": {
105 if (!isRole(role)) return failed("Choose a role.");
106 const changed = await identity.setCollaboratorRole(user, params.owner, params.repo, text("username"), role);
107 return changed.ok
108 ? { intent, ok: true, error: null, message: `${changed.value.username} has the ${REPO_ROLE_LABELS[changed.value.role]} role.` }
109 : failed(changed.error.message);
110 }
111 case "remove": {
112 const removed = await identity.removeCollaborator(user, params.owner, params.repo, text("username"));
113 return removed.ok
114 ? { intent, ok: true, error: null, message: `${text("username")} no longer has a role given here.` }
115 : failed(removed.error.message);
116 }
117 case "team-add":
118 case "team-role": {
119 const team = text("team");
120 if (!team) return failed("Choose a team.");
121 if (!isRole(role)) return failed("Choose a role.");
122 const set = await identity.setTeamRepo(user, params.owner, team, params.owner, params.repo, role);
123 return set.ok
124 ? { intent, ok: true, error: null, message: `${team} has the ${REPO_ROLE_LABELS[set.value.role]} role.` }
125 : failed(set.error.message);
126 }
127 case "team-remove": {
128 const team = text("team");
129 const removed = await identity.removeTeamRepo(user, params.owner, team, params.owner, params.repo);
130 return removed.ok
131 ? { intent, ok: true, error: null, message: `${team} no longer has a role here.` }
132 : failed(removed.error.message);
133 }
134 case "revoke": {
135 const revoked = await identity.revokeRepoInvitation(user, params.owner, params.repo, text("id"));
136 return revoked.ok ? { intent, ok: true, error: null, message: null } : failed(revoked.error.message);
137 }
138 default:
139 return failed("Unknown request.");
140 }
141}
142
143const SOURCE: Record<Collaborator["source"], string> = {
144 owner: "Owner of the workspace",
145 base: "Member, by the base permission",
146 direct: "Given a role here",
147 team: "Through a team",
148};
149
150export default function RepoAccessSettings({ loaderData, actionData, params }: Route.ComponentProps) {
151 const { access, manage, owner, teams, free } = loaderData;
152 const base = `/${params.owner}/${params.repo}`;
153 const full = `${params.owner}/${params.repo}`;
154 const pending = access.invitations.filter((invitation) => invitation.status === "pending");
155 const people = [...access.people].sort(
156 (a, b) => REPO_ROLES.indexOf(b.role) - REPO_ROLES.indexOf(a.role) || a.username.localeCompare(b.username),
157 );
158 const result = actionData?.intent === "add" ? actionData : undefined;
159 const teamResult = actionData?.intent === "team-add" ? actionData : undefined;
160 const repoTeams = [...(access.teams ?? [])].sort(
161 (a, b) => REPO_ROLES.indexOf(b.role) - REPO_ROLES.indexOf(a.role) || a.name.localeCompare(b.name),
162 );
163 const listed = new Set(repoTeams.map((team) => team.slug));
164 const addable = teams.filter((team) => !listed.has(team.slug));
165 // Roles are changed and people removed from their own rows, which say
166 // what went wrong; what went right is said once, under the list.
167 const [notice, setNotice] = useState<string | null>(null);
168 return (
169 <>
170 <RepoSettingsHeading base={base} />
171 <div className="max-w-4xl space-y-8">
172 <Section
173 title="Base permission"
174 about={`What every member of ${params.owner} gets on its repositories.`}
175 >
176 <div className="rounded-xl border border-line bg-surface p-4 text-sm">
177 <p>
178 Members have{" "}
179 <span className="font-medium text-fg">
180 {access.base_permission === "none" ? "no permission" : `the ${BASE_PERMISSION_LABELS[access.base_permission]} role`}
181 </span>{" "}
182 on {full}
183 {access.base_permission === "none" ? " unless they are given a role here." : ", or the higher role they are given here."}{" "}
184 Owners of the workspace are Admins on every repository.
185 </p>
186 <p className="mt-2 text-muted">
187 {owner ? (
188 <Link to={`/${params.owner}/-/people#base-permission`} className="text-accent hover:underline">
189 Change the base permission
190 </Link>
191 ) : (
192 "Owners of the workspace choose it."
193 )}
194 </p>
195 </div>
196 </Section>
197
198 {manage && (
199 <Section
200 title="Add people"
201 about="A member of the workspace gets the role at once. Anyone else gets an invitation, by email, and has the role once they accept it."
202 >
203 {free && <StartPlanToInvite workspace={params.owner} owner={owner} outside />}
204 <AddForm result={result} />
205 </Section>
206 )}
207
208 <Section
209 title="People with access"
210 about={
211 manage
212 ? "Who can see the repository, and what each can do. Outside collaborators are not members of the workspace; they see only the repositories shared with them."
213 : "Who can see the repository, and what each can do. Changing who has access needs the Admin role."
214 }
215 >
216 <ul className="divide-y divide-line rounded-xl border border-line">
217 {people.map((person) => (
218 <PersonRow
219 key={person.username}
220 person={person}
221 manage={manage}
222 base={access.base_permission}
223 full={full}
224 workspace={params.owner}
225 onDone={setNotice}
226 />
227 ))}
228 </ul>
229 {notice && (
230 <p className="text-sm text-success" role="status">
231 {notice}
232 </p>
233 )}
234 </Section>
235
236 <Section
237 title="Teams with access"
238 about={
239 manage
240 ? `Teams of ${params.owner} with a role here. Everyone on a team gets its role, and the team can be asked to review.`
241 : `Teams of ${params.owner} with a role here. Everyone on a team gets its role. Changing them needs the Admin role.`
242 }
243 >
244 {repoTeams.length === 0 ? (
245 <p className="rounded-xl border border-dashed border-line px-4 py-6 text-center text-sm text-muted">
246 No team has a role here.
247 </p>
248 ) : (
249 <ul className="divide-y divide-line rounded-xl border border-line">
250 {repoTeams.map((team) => (
251 <TeamRow key={team.slug} team={team} workspace={params.owner} full={full} manage={manage} onDone={setNotice} />
252 ))}
253 </ul>
254 )}
255 {manage && <AddTeamForm teams={addable} result={teamResult} workspace={params.owner} />}
256 </Section>
257
258 {manage && (
259 <Section title="Pending invitations" about="Invitations not yet accepted. Each expires after 7 days.">
260 {pending.length === 0 ? (
261 <p className="rounded-xl border border-dashed border-line px-4 py-6 text-center text-sm text-muted">
262 No invitations are waiting.
263 </p>
264 ) : (
265 <ul className="divide-y divide-line rounded-xl border border-line">
266 {pending.map((invitation) => (
267 <InvitationRow key={invitation.id} invitation={invitation} />
268 ))}
269 </ul>
270 )}
271 </Section>
272 )}
273
274 <Section
275 title="Roles"
276 about="What each role can do. Each role can do everything the one before it can. Transferring and deleting also need an owner of the workspace."
277 >
278 <RolesTable />
279 </Section>
280 </div>
281 </>
282 );
283}
284
285/** A username or an address, and the role to give. */
286function AddForm({ result }: { result: Outcome | undefined }) {
287 const [role, setRole] = useState<RepoRole>("write");
288 const [key, setKey] = useState(0);
289 // Cleared once someone was added, ready for the next.
290 useEffect(() => {
291 if (result?.ok) setKey((k) => k + 1);
292 }, [result]);
293 return (
294 <Form method="post" className="space-y-3 rounded-xl border border-line bg-surface p-4">
295 <input type="hidden" name="intent" value="add" />
296 <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_11rem_auto] sm:items-end">
297 <Field label="Username or email address">
298 <Input key={key} name="invitee" required maxLength={254} placeholder="username or name@example.com" />
299 </Field>
300 <div>
301 <span className="mb-1.5 block text-sm font-medium text-muted">Role</span>
302 <RoleSelect name="role" label="Role" value={role} onValueChange={(value) => setRole(value as RepoRole)} />
303 </div>
304 <SubmitButton match={{ intent: "add" }} pending="Adding…">
305 <UserPlus size={15} />
306 Add
307 </SubmitButton>
308 </div>
309 <p className="text-xs text-faint">{REPO_ROLE_LABELS[role]}: {roleLine(role)}</p>
310 {result &&
311 (result.ok ? (
312 <p className="flex items-start gap-2 text-sm text-fg" role="status">
313 <Mail size={14} className="mt-0.5 shrink-0 text-accent" />
314 {result.message}
315 </p>
316 ) : (
317 <ErrorText>{result.error}</ErrorText>
318 ))}
319 </Form>
320 );
321}
322
323function roleLine(role: RepoRole): string {
324 return {
325 read: "they can see and clone it, open issues and pull requests, and comment.",
326 triage: "they can also label, assign, close and reopen issues and pull requests.",
327 write: "they can also push, merge and put agents to work.",
328 maintain: "they can also change its settings, branch protection and guardrails.",
329 admin: "they can do everything, including webhooks, secrets, deployments and who has access.",
330 }[role];
331}
332
333/** One person: who they are, how they have access, and their role. */
334function PersonRow({
335 person,
336 manage,
337 base,
338 full,
339 workspace,
340 onDone,
341}: {
342 person: Collaborator;
343 manage: boolean;
344 base: Parameters<typeof baseRole>[0];
345 full: string;
346 workspace: string;
347 onDone: (notice: string | null) => void;
348}) {
349 const fetcher = useFetcher<Outcome>();
350 useEffect(() => {
351 if (fetcher.data) onDone(fetcher.data.ok ? fetcher.data.message : null);
352 }, [fetcher.data, onDone]);
353 const outside = person.workspace_role == null;
354 // A member keeps the base permission whatever role they are given here,
355 // so only higher roles mean anything for them.
356 const floor = outside ? null : baseRole(base);
357 const roles = floor ? REPO_ROLES.filter((role) => REPO_ROLES.indexOf(role) >= REPO_ROLES.indexOf(floor)) : REPO_ROLES;
358 const shown = fetcher.formData?.get("intent") === "role" ? String(fetcher.formData.get("role")) : person.role;
359 const editable = manage && person.source !== "owner";
360 return (
361 <li className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-3">
362 <Avatar name={person.username} image={person.avatar} size={32} />
363 <div className="min-w-0 grow basis-40">
364 <p className="flex flex-wrap items-center gap-x-2 gap-y-1">
365 <Link to={`/u/${person.username}`} className="font-mono text-sm hover:text-accent">
366 {person.username}
367 </Link>
368 {person.name && <span className="truncate text-sm text-muted">{person.name}</span>}
369 {person.source === "owner" && <Badge tone="accent">Owner</Badge>}
370 {outside && <Badge tone="info">Outside collaborator</Badge>}
371 </p>
372 <p className="mt-0.5 text-xs text-faint">
373 {person.source === "team" && person.team ? (
374 <>
375 Through team{" "}
376 <Link to={`/${workspace}/-/teams/${person.team}`} className="text-muted hover:text-accent hover:underline">
377 {person.team}
378 </Link>
379 </>
380 ) : (
381 SOURCE[person.source]
382 )}
383 {!outside && person.direct != null && person.source !== "direct" ? ` · given ${REPO_ROLE_LABELS[person.direct]} here` : ""}
384 </p>
385 {fetcher.data && !fetcher.data.ok && <ErrorText>{fetcher.data.error}</ErrorText>}
386 </div>
387 <div className="flex shrink-0 items-center gap-2">
388 {editable ? (
389 <RoleSelect
390 size="sm"
391 label={`Role of ${person.username}`}
392 roles={roles}
393 value={shown}
394 className="w-32"
395 disabled={fetcher.state !== "idle"}
396 onValueChange={(role) =>
397 fetcher.submit({ intent: "role", username: person.username, role }, { method: "post" })
398 }
399 />
400 ) : (
401 <span className="inline-flex h-8 w-32 items-center rounded-md border border-line px-2.5 text-[0.8125rem] text-muted">
402 {REPO_ROLE_LABELS[person.role]}
403 </span>
404 )}
405 {/* The same room for Remove on every row, so the roles line up. */}
406 {manage && (
407 <span className="flex w-[5.5rem] justify-end">
408 {editable && person.direct != null && (
409 <RemoveButton person={person} full={full} outside={outside} onDone={onDone} />
410 )}
411 </span>
412 )}
413 </div>
414 </li>
415 );
416}
417
418/** Taking someone's role here away, after saying what that means. */
419function RemoveButton({
420 person,
421 full,
422 outside,
423 onDone,
424}: {
425 person: Collaborator;
426 full: string;
427 outside: boolean;
428 onDone: (notice: string | null) => void;
429}) {
430 const fetcher = useFetcher<Outcome>();
431 const [open, setOpen] = useState(false);
432 // Said as soon as the answer comes, before the row leaves the list.
433 useEffect(() => {
434 if (fetcher.data) onDone(fetcher.data.ok ? fetcher.data.message : null);
435 }, [fetcher.data, onDone]);
436 useEffect(() => {
437 if (fetcher.state === "idle" && fetcher.data?.ok) setOpen(false);
438 }, [fetcher.state, fetcher.data]);
439 return (
440 <AlertDialog open={open} onOpenChange={setOpen}>
441 <Button type="button" variant="quiet" onClick={() => setOpen(true)}>
442 Remove
443 </Button>
444 <AlertDialogContent>
445 <fetcher.Form method="post" className="grid gap-4">
446 <input type="hidden" name="intent" value="remove" />
447 <input type="hidden" name="username" value={person.username} />
448 <AlertDialogHeader>
449 <AlertDialogTitle>
450 Remove {person.username} from {full}?
451 </AlertDialogTitle>
452 <AlertDialogDescription>
453 {outside
454 ? "They lose access to the repository at once, and stop seeing it in Shared with you. Their issues, pull requests and comments stay."
455 : "They lose the role given to them here, and keep what the workspace's base permission gives every member."}
456 </AlertDialogDescription>
457 </AlertDialogHeader>
458 {fetcher.data && !fetcher.data.ok && <ErrorText>{fetcher.data.error}</ErrorText>}
459 <AlertDialogFooter>
460 <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
461 <SubmitButton variant="danger" fetcher={fetcher} pending="Removing…">
462 Remove
463 </SubmitButton>
464 </AlertDialogFooter>
465 </fetcher.Form>
466 </AlertDialogContent>
467 </AlertDialog>
468 );
469}
470
471function day(at: string): string {
472 return new Date(at).toISOString().slice(0, 10);
473}
474
475/** A pending invitation: to whom, with which role, until when. */
476function InvitationRow({ invitation }: { invitation: RepoInvitation }) {
477 const fetcher = useFetcher<Outcome>();
478 const who = invitation.invitee ?? invitation.email ?? "Someone";
479 return (
480 <li className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-3">
481 {invitation.invitee ? (
482 <Avatar name={invitation.invitee} size={32} />
483 ) : (
484 <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-raised text-muted ring-1 ring-line">
485 <Mail size={14} />
486 </span>
487 )}
488 <div className="min-w-0 grow basis-40">
489 <p className="flex flex-wrap items-center gap-x-2 gap-y-1">
490 <span className={`min-w-0 truncate text-sm ${invitation.invitee ? "font-mono" : ""}`}>{who}</span>
491 <Badge>{REPO_ROLE_LABELS[invitation.role]}</Badge>
492 </p>
493 <p className="mt-0.5 text-xs text-faint">
494 Invited by {invitation.invited_by ?? "g1t"} on {day(invitation.created_at)} · expires {day(invitation.expires_at)}
495 </p>
496 {fetcher.data && !fetcher.data.ok && <ErrorText>{fetcher.data.error}</ErrorText>}
497 </div>
498 <fetcher.Form method="post" className="shrink-0">
499 <input type="hidden" name="intent" value="revoke" />
500 <input type="hidden" name="id" value={invitation.id} />
501 <SubmitButton variant="quiet" fetcher={fetcher} pending="Revoking…">
502 Revoke
503 </SubmitButton>
504 </fetcher.Form>
505 </li>
506 );
507}
508
509/** A team with a role here: its name, handle, size, and the role it gives. */
510function TeamRow({
511 team,
512 workspace,
513 full,
514 manage,
515 onDone,
516}: {
517 team: RepoTeam;
518 workspace: string;
519 full: string;
520 manage: boolean;
521 onDone: (notice: string | null) => void;
522}) {
523 const fetcher = useFetcher<Outcome>();
524 const [open, setOpen] = useState(false);
525 useEffect(() => {
526 if (fetcher.data) onDone(fetcher.data.ok ? fetcher.data.message : null);
527 }, [fetcher.data, onDone]);
528 useEffect(() => {
529 if (fetcher.state === "idle" && fetcher.data?.ok) setOpen(false);
530 }, [fetcher.state, fetcher.data]);
531 const shown = fetcher.formData?.get("intent") === "team-role" ? String(fetcher.formData.get("role")) : team.role;
532 const href = `/${workspace}/-/teams/${team.slug}`;
533 return (
534 <li className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-3">
535 <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line">
536 <Users size={15} />
537 </span>
538 <div className="min-w-0 grow basis-40">
539 <p className="flex flex-wrap items-center gap-x-2 gap-y-1">
540 <Link to={href} className="text-sm font-medium hover:text-accent">
541 {team.name}
542 </Link>
543 <span className="truncate font-mono text-xs text-muted">
544 @{workspace}/{team.slug}
545 </span>
546 {team.visibility === "secret" && <Badge tone="warn">Secret</Badge>}
547 </p>
548 <p className="mt-0.5 text-xs text-faint">
549 {team.members_count === 1 ? "1 member" : `${team.members_count} members`}
550 </p>
551 {fetcher.data && !fetcher.data.ok && !open && <ErrorText>{fetcher.data.error}</ErrorText>}
552 </div>
553 <div className="flex shrink-0 items-center gap-2">
554 {manage ? (
555 <RoleSelect
556 size="sm"
557 label={`Role of team ${team.name}`}
558 value={shown}
559 className="w-32"
560 disabled={fetcher.state !== "idle"}
561 onValueChange={(role) => fetcher.submit({ intent: "team-role", team: team.slug, role }, { method: "post" })}
562 />
563 ) : (
564 <span className="inline-flex h-8 w-32 items-center rounded-md border border-line px-2.5 text-[0.8125rem] text-muted">
565 {REPO_ROLE_LABELS[team.role]}
566 </span>
567 )}
568 {manage && (
569 <span className="flex w-[5.5rem] justify-end">
570 <AlertDialog open={open} onOpenChange={setOpen}>
571 <Button type="button" variant="quiet" onClick={() => setOpen(true)}>
572 Remove
573 </Button>
574 <AlertDialogContent>
575 <fetcher.Form method="post" className="grid gap-4">
576 <input type="hidden" name="intent" value="team-remove" />
577 <input type="hidden" name="team" value={team.slug} />
578 <AlertDialogHeader>
579 <AlertDialogTitle>
580 Remove {team.name} from {full}?
581 </AlertDialogTitle>
582 <AlertDialogDescription>
583 Its people lose the role it gave them here, and keep any role they have otherwise. The team itself stays.
584 </AlertDialogDescription>
585 </AlertDialogHeader>
586 {fetcher.data && !fetcher.data.ok && <ErrorText>{fetcher.data.error}</ErrorText>}
587 <AlertDialogFooter>
588 <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
589 <SubmitButton variant="danger" fetcher={fetcher} pending="Removing…">
590 Remove
591 </SubmitButton>
592 </AlertDialogFooter>
593 </fetcher.Form>
594 </AlertDialogContent>
595 </AlertDialog>
596 </span>
597 )}
598 </div>
599 </li>
600 );
601}
602
603/** One of the workspace's teams without a role here yet, and the role to give it. */
604function AddTeamForm({ teams, result, workspace }: { teams: Team[]; result: Outcome | undefined; workspace: string }) {
605 const [team, setTeam] = useState("");
606 const [role, setRole] = useState<RepoRole>("write");
607 // Cleared once the team was added, ready for the next.
608 useEffect(() => {
609 if (result?.ok) setTeam("");
610 }, [result]);
611 if (teams.length === 0) {
612 return (
613 <p className="text-sm text-muted">
614 No other team of {workspace} to add.{" "}
615 <Link to={`/${workspace}/-/teams`} className="text-accent hover:underline">
616 See its teams
617 </Link>
618 </p>
619 );
620 }
621 return (
622 <Form method="post" className="space-y-3 rounded-xl border border-line bg-surface p-4">
623 <input type="hidden" name="intent" value="team-add" />
624 <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_11rem_auto] sm:items-end">
625 <div>
626 <span className="mb-1.5 block text-sm font-medium text-muted">Team</span>
627 <Select name="team" value={team} onValueChange={setTeam} required>
628 <SelectTrigger aria-label="Team">
629 <SelectValue placeholder="Choose a team" />
630 </SelectTrigger>
631 <SelectContent align="start">
632 {teams.map((option) => (
633 <SelectItem
634 key={option.slug}
635 value={option.slug}
636 description={`@${option.workspace}/${option.slug} · ${option.members_count === 1 ? "1 member" : `${option.members_count} members`}`}
637 >
638 {option.name}
639 </SelectItem>
640 ))}
641 </SelectContent>
642 </Select>
643 </div>
644 <div>
645 <span className="mb-1.5 block text-sm font-medium text-muted">Role</span>
646 <RoleSelect name="role" label="Role" value={role} onValueChange={(value) => setRole(value as RepoRole)} />
647 </div>
648 <SubmitButton match={{ intent: "team-add" }} pending="Adding…" disabled={!team}>
649 <Users size={15} />
650 Add team
651 </SubmitButton>
652 </div>
653 <p className="text-xs text-faint">{REPO_ROLE_LABELS[role]}: everyone on the team {roleLine(role).replace(/^they /, "")}</p>
654 {result &&
655 (result.ok ? (
656 <p className="text-sm text-success" role="status">
657 {result.message}
658 </p>
659 ) : (
660 <ErrorText>{result.error}</ErrorText>
661 ))}
662 </Form>
663 );
664}