flaxo/ghost

public

Source code of Ghost - On Ghost

Add organizations with teams, policies, transfers and a shared namespace83bc1c616 days ago274 lines · 8.7 KB

1	"use client";
2
3	import { Users } from "lucide-react";
4	import { useRouter } from "next/navigation";
5	import { useAction } from "next-safe-action/hooks";
6	import { Fragment, type ReactNode, useState } from "react";
7	import { toast } from "sonner";
8
9	import { FromNowHoverCard } from "@/components/from-now-card";
10	import { RoleSelect } from "@/components/role-select";
11	import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
12	import { Badge } from "@/components/ui/badge";
13	import { Button } from "@/components/ui/button";
14	import { Card } from "@/components/ui/card";
15	import {
16	Empty,
17	EmptyDescription,
18	EmptyHeader,
19	EmptyMedia,
20	EmptyTitle,
21	} from "@/components/ui/empty";
22	import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
23	import { Input } from "@/components/ui/input";
24	import {
25	Item,
26	ItemActions,
27	ItemContent,
28	ItemDescription,
29	ItemGroup,
30	ItemMedia,
31	ItemSeparator,
32	ItemTitle,
33	} from "@/components/ui/item";
34	import type { components } from "@/lib/api/v1";
35	import {
36	type CollaboratorRole,
37	collaboratorRoles,
38	roleDescriptions,
39	} from "@/lib/repository-role";
40
41	import { inviteCollaborator, removeCollaborator } from "./actions";
42	import { SettingCard } from "./setting-card";
43
44	type Collaborator = components["schemas"]["CollaboratorDTO"];
45
46	type RepositoryProps = {
47	username: string;
48	slug: string;
49	};
50
51	export function RepositoryCollaborators({
52	username,
53	slug,
54	collaborators,
55	}: RepositoryProps & { collaborators: Collaborator[] }) {
56	const router = useRouter();
57
58	const change = useAction(inviteCollaborator, {
59	onSuccess: () => router.refresh(),
60	onError: ({ error }) =>
61	toast.error(error.serverError ?? "Could not change this role."),
62	});
63	const remove = useAction(removeCollaborator, {
64	onSuccess: () => router.refresh(),
65	onError: ({ error }) =>
66	toast.error(error.serverError ?? "Could not remove this collaborator."),
67	});
68	const setRole = (collaborator: string, role: CollaboratorRole) =>
69	change.execute({ username, slug, collaborator, role });
70	const removeUser = (collaborator: string) =>
71	remove.execute({ username, slug, collaborator });
72
73	const members = collaborators.filter((c) => c.status === "accepted");
74	const invited = collaborators.filter((c) => c.status !== "accepted");
75	const busy = change.isExecuting \|\| remove.isExecuting;
76
77	return (
78	<div className="flex flex-col gap-8">
79	<InviteCard username={username} slug={slug} />
80
81	<section>
82	<h2 className="mb-3 text-sm font-semibold">
83	Collaborators
84	<span className="ml-2 font-normal text-muted-foreground tabular-nums">
85	{members.length}
86	</span>
87	</h2>
88	<Card className="py-0">
89	{members.length === 0 ? (
90	<Empty className="py-10">
91	<EmptyHeader>
92	<EmptyMedia variant="icon">
93	<Users />
94	</EmptyMedia>
95	<EmptyTitle>No collaborators yet</EmptyTitle>
96	<EmptyDescription>
97	People you invite show up here once they accept.
98	</EmptyDescription>
99	</EmptyHeader>
100	</Empty>
101	) : (
102	<ItemGroup className="gap-0!">
103	{members.map((collaborator, index) => (
104	<Fragment key={collaborator.username}>
105	{index > 0 && <ItemSeparator className="my-0!" />}
106	<PersonRow collaborator={collaborator}>
107	<RoleSelect
108	roles={collaboratorRoles}
109	value={collaborator.role}
110	disabled={busy}
111	onChange={(role) => setRole(collaborator.username, role)}
112	label={`Role for ${collaborator.username}`}
113	/>
114	<Button
115	size="sm"
116	variant="ghost"
117	disabled={busy}
118	onClick={() => removeUser(collaborator.username)}
119	>
120	Remove
121	</Button>
122	</PersonRow>
123	</Fragment>
124	))}
125	</ItemGroup>
126	)}
127	</Card>
128	</section>
129
130	{invited.length > 0 && (
131	<section>
132	<h2 className="mb-3 text-sm font-semibold">Pending invitations</h2>
133	<Card className="py-0">
134	<ItemGroup className="gap-0!">
135	{invited.map((collaborator, index) => (
136	<Fragment key={collaborator.username}>
137	{index > 0 && <ItemSeparator className="my-0!" />}
138	<PersonRow collaborator={collaborator}>
139	{collaborator.status === "expired" && (
140	<Button
141	size="sm"
142	variant="outline"
143	disabled={busy}
144	onClick={() =>
145	setRole(collaborator.username, collaborator.role)
146	}
147	>
148	Resend
149	</Button>
150	)}
151	<Button
152	size="sm"
153	variant="ghost"
154	disabled={busy}
155	onClick={() => removeUser(collaborator.username)}
156	>
157	Cancel
158	</Button>
159	</PersonRow>
160	</Fragment>
161	))}
162	</ItemGroup>
163	</Card>
164	</section>
165	)}
166	</div>
167	);
168	}
169
170	function InviteCard({ username, slug }: RepositoryProps) {
171	const router = useRouter();
172	const [invitee, setInvitee] = useState("");
173	const [role, setRole] = useState<CollaboratorRole>("write");
174
175	const invite = useAction(inviteCollaborator, {
176	onSuccess: ({ input }) => {
177	toast.success(`Invitation sent to ${input.collaborator}`);
178	setInvitee("");
179	router.refresh();
180	},
181	onError: ({ error }) =>
182	toast.error(error.serverError ?? "Could not invite this user."),
183	});
184
185	return (
186	<SettingCard
187	title="Invite a collaborator"
188	hint="They get access once they accept. Invitations lapse after 7 days."
189	onSubmit={() =>
190	invite.execute({ username, slug, collaborator: invitee.trim(), role })
191	}
192	pending={invite.isExecuting}
193	canSave={Boolean(invitee.trim())}
194	submitText="Send invitation"
195	>
196	<div className="flex flex-col gap-4 sm:flex-row">
197	<Field className="sm:flex-1">
198	<FieldLabel htmlFor="invite-username">Username</FieldLabel>
199	<Input
200	id="invite-username"
201	autoComplete="off"
202	placeholder="octocat"
203	value={invitee}
204	onChange={(event) => setInvitee(event.target.value)}
205	/>
206	</Field>
207	<Field className="sm:w-40">
208	<FieldLabel htmlFor="invite-role">Role</FieldLabel>
209	<RoleSelect
210	id="invite-role"
211	roles={collaboratorRoles}
212	value={role}
213	onChange={setRole}
214	/>
215	</Field>
216	</div>
217	<FieldDescription className="mt-3">
218	<span className="font-medium capitalize text-foreground">{role}</span>
219	{": "}
220	{roleDescriptions[role]}
221	</FieldDescription>
222	</SettingCard>
223	);
224	}
225
226	function PersonRow({
227	collaborator,
228	children,
229	}: {
230	collaborator: Collaborator;
231	children: ReactNode;
232	}) {
233	return (
234	<Item className="flex-wrap">
235	<ItemMedia>
236	<Avatar className="size-9">
237	{collaborator.image && (
238	<AvatarImage src={collaborator.image} alt="" />
239	)}
240	<AvatarFallback>
241	{collaborator.username.slice(0, 2).toUpperCase()}
242	</AvatarFallback>
243	</Avatar>
244	</ItemMedia>
245	<ItemContent className="min-w-0">
246	<ItemTitle>
247	{collaborator.username}
248	{collaborator.status !== "accepted" && (
249	<Badge variant="outline" className="capitalize">
250	{collaborator.role}
251	</Badge>
252	)}
253	{collaborator.status === "expired" && (
254	<Badge variant="outline" className="text-destructive">
255	Expired
256	</Badge>
257	)}
258	</ItemTitle>
259	<ItemDescription className="truncate">
260	{collaborator.status === "accepted" \|\| !collaborator.expiresAt ? (
261	collaborator.name
262	) : (
263	<>
264	Invited <FromNowHoverCard date={collaborator.invitedAt} /> ·{" "}
265	{collaborator.status === "expired" ? "expired" : "expires"}{" "}
266	<FromNowHoverCard date={collaborator.expiresAt} />
267	</>
268	)}
269	</ItemDescription>
270	</ItemContent>
271	<ItemActions>{children}</ItemActions>
272	</Item>
273	);
274	}