apps/web/app/routes/workspace/folios/space-settings.tsx · flagon-io/g1t

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../../../components/ui/alert-dialog";

13

import { Button } from "../../../components/ui/button";

14

import { Card } from "../../../components/ui/card";

15

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

16

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

17

import { spacePath } from "../../../lib/folios";

18

import { page } from "../../../lib/meta";

19

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

20

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

21

import { Unavailable } from "../../../components/boundary";

22

import { isFailed, orElse, part, type Failed } from "../../../lib/partial";

23

24

export function meta({ loaderData: loaded, params, ...args }: Route.MetaArgs) {

25

return page(args, { title: `Settings · ${loaded?.space.name ?? "Space"} · Artifacts · ${params.owner} · g1t` });

26

}

27

28

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ space: DocSpace; members: DocSpaceMember[]; teams: { slug: string; name: string }[] | Failed }> {

29

const viewer = requireUser(context, request);

30

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

31

const slug = params.owner.toLowerCase();

32

// The teams it can be for are beside the space: without them its form is

33

// not offered (a space for a team would read as one for nobody), while

34

// sharing and members still are.

35

const [found, teams] = await Promise.all([docs.space(slug, params.space, viewer), part(identity.listTeams(viewer, slug), "This space's settings")]);

36

if (!found.ok) throw data(null, { status: 404 });

37

if (found.value.space.viewer_role !== "manage") throw data(null, { status: 403 });

38

return { space: found.value.space, members: found.value.members, teams: isFailed(teams) ? teams : teams.ok ? teams.value.map((t) => ({ slug: t.slug, name: t.name })) : [] };

39

}

40

41

const ROLE_OPTIONS = DOC_ROLES.map((r) => ({ value: r, label: DOC_ROLE_LABELS[r], description: DOC_ROLE_SUMMARIES[r] }));

42

43

/** A space's settings: what it is, who it's for, its members and their roles, and whether editors can share. */

44

export default function SpaceSettings({ loaderData, params }: Route.ComponentProps) {

45

const slug = params.owner.toLowerCase();

46

const { space, members, teams } = loaderData;

47

const layout = useFoliosData();

48

const navigate = useNavigate();

49

const settings = useFoliosAction(slug);

50

const people = useFoliosAction(slug);

51

const sharing = useFoliosAction(slug);

52

const [adding, setAdding] = useState("");

53

const [addRole, setAddRole] = useState<DocRole>("edit");

54

const [archiving, setArchiving] = useState(false);

55

const [deleting, setDeleting] = useState(false);

56

// How many artifacts the sidebar shows in it, when it shows the space.

57

const inside = layout?.sidebar?.spaces.find((s) => s.id === space.id)?.page_count ?? null;

58

const listed = new Set(members.map((m) => m.key));

59

const candidates = [

60

...(layout?.mentionables ?? []).map((m) => ({ value: `username:${m.name}`, label: `${m.display_name} (@${m.name})` })),

61

...orElse(teams, []).map((t) => ({ value: `team:${t.slug}`, label: `${t.name} (team)` })),

62

].filter((c) => !listed.has(c.value));

return (

{space.name}

</Link>{" "}

/ Settings

</p>

<h1 className="mt-1 text-xl font-semibold tracking-tight">Space settings</h1>

{isFailed(teams) ? (

) : (

<SpaceForm

initial={initialSpace(space)}

78

teams={teams}

79

isDefault={space.is_default}

80

submitLabel="Save"

81

busy={settings.busy}

82

error={settings.error}

83

onSubmit={async (value) => {

84

const saved = await settings.send<DocSpace>("update_space", { space_id: space.id, space_change: spaceInput(value) });

85

if (saved.ok && saved.value.slug !== space.slug) navigate(`${spacePath(slug, saved.value.slug)}/settings`, { replace: true });

}}

/>

)}

</div>

<SectionTitle>Sharing</SectionTitle>

<label>

<span className="block text-sm text-fg">Editors can share</span>

98

<span className="mt-0.5 block text-xs leading-relaxed text-faint">People who can edit what's in this space can also share it with others, up to Can edit. Off: only people with full access can share.</span>

99

</span>

100

<Switch

101

checked={space.editors_can_share}

102

disabled={sharing.busy}

103

onCheckedChange={(on) => sharing.send("update_space", { space_id: space.id, space_change: { editors_can_share: on } })}

104

aria-label="Editors can share"

/>

</label>

</Card>

{sharing.error && (

<ErrorText>{sharing.error}</ErrorText>

</div>

)}

</section>

<SectionTitle>Members</SectionTitle>

117

118

{space.kind === "private"

119

? "Only the people and teams here can open this space."

120

: "Everyone the space is for already has its base role; add people here to give them more. Workspace owners always have full access."}

</p>

<ul>

{members.map((m) => (

125

126

{m.kind === "team" ? (

) : (

)}

<span className="block truncate text-sm">{m.display_name}</span>

133

<span className="block text-xs text-faint">{m.kind === "team" ? "Team" : m.kind === "agent" ? "Agent" : `@${m.name}`}</span>

134

</span>

135

<SelectField aria-label={`${m.display_name}'s role`} value={m.role} onValueChange={(role) => people.send("set_member", { space_id: space.id, member: m.key, role })} options={ROLE_OPTIONS} className="h-8 w-40" />

136

<Button type="button" onClick={() => people.send("set_member", { space_id: space.id, member: m.key, role: null })} variant="link" size="inline" className="text-xs text-faint hover:text-danger font-normal">

Remove

</Button>

</li>

))}

{members.length === 0 && <li className="px-4 py-3 text-sm text-muted">Nobody added yet.</li>}

</ul>

</Card>

<SelectField aria-label="Their role" value={addRole} onValueChange={(r) => setAddRole(r as DocRole)} options={ROLE_OPTIONS} className="h-9 w-40" />

<Button

type="button"

variant="outline"

disabled={!adding || people.busy}

151

onClick={async () => {

152

// People are named by username here; the service keys them by id.

153

const member = adding.startsWith("username:") ? await memberKey(slug, adding.slice(9)) : adding;

154

if (!member) return people.setError("That person isn't in the workspace.");

155

const done = await people.send("set_member", { space_id: space.id, member, role: addRole });

156

if (done.ok) setAdding("");

}}

>

Add

</Button>

</div>

{people.error && (

<ErrorText>{people.error}</ErrorText>

</div>

)}

</section>

<h2 className="text-sm font-semibold">Archive this space</h2>

171

<p className="mt-1 text-xs leading-relaxed text-muted">It leaves the sidebar and search. What's in it, its history and comments are kept, and it comes back from the Spaces page.</p>

172

<Button type="button" variant="destructive" onClick={() => setArchiving(true)} className="mt-3">

173

<Archive size={14} /> Archive space

174

</Button>

175

<h2 className="mt-6 text-sm font-semibold">Delete this space</h2>

176

177

Everything in it goes to the trash, where anyone who could edit it can restore it for 30 days. The space itself, its members and settings are gone for good.

178

{space.is_default ? " A workspace needs no General space; none takes its place." : ""}

179

</p>

180

<Button type="button" variant="destructive" onClick={() => setDeleting(true)} className="mt-3">

181

<Trash2 size={14} /> Delete space

</Button>

</section>

<AlertDialogTitle>Delete {space.name}?</AlertDialogTitle>

188

189

{inside === null ? "Everything in it goes" : inside === 1 ? "The artifact in it goes" : `The ${inside} artifacts in it go`} to the trash, where anyone who could edit it can restore it for 30 days. The space can't be brought back.

190

</AlertDialogDescription>

</AlertDialogHeader>

<AlertDialogAction

onClick={async () => {

196