Skip to content
Sign up

flagon-io/g1t

public
00

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

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