Skip to content
Sign up

flagon-io/g1t

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