apps/web/app/routes/workspace/new.tsx · flagon-io/g1t

1

import { Form, Link, redirect } from "react-router";

2

3

import type { Route } from "./+types/new";

4

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

5

import { planHref } from "../../components/start-plan";

6

import { ButtonLink, ErrorText, Field, Input, SubmitButton } from "../../components/ui";

7

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

8

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

9

import { InvitationList } from "../../components/invitation-list";

10

import { answerInvitation, loadInvitations } from "../../lib/invitations.server";

11

import { declinedLine } from "../../lib/invitations";

12

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

13

14

export function meta(args: Route.MetaArgs) {

15

return page(args, { title: "New workspace · g1t" });

16

}

17

18

export async function loader({ request, context }: Route.LoaderArgs) {

19

const user = requireUser(context, request);

20

const owned = (user.workspaces ?? []).filter((membership) => membership.role === "owner").map((membership) => membership.slug);

21

// A person owns at most one free workspace; identity refuses a second

22

// either way, so a failure here only leaves the form up.

23

const first = (user.workspaces ?? []).length === 0;

24

const [free, invitations] = await Promise.all([

25

owned.length > 0 ? billing.freeWorkspaces(owned).catch(() => [] as string[]) : Promise.resolve([] as string[]),

26

// Someone without a workspace may have been invited to one.

27

first ? loadInvitations(user) : Promise.resolve([]),

28

]);

29

const next = nextPath(request);

30

return { user, first, free, invitations, next: next === "/" ? null : next };

31

}

32

33

export async function action({ request, context }: Route.ActionArgs) {

34

assertSameOrigin(request);

35

const user = requireUser(context, request);

36

const form = await request.formData();

37

// Accepting or declining an invitation shown here (lib/invitations.server.ts).

38

const answered = await answerInvitation(user, form, request);

39

if (answered) return answered;

40

const result = await identity.createWorkspace(user, String(form.get("slug") ?? ""), String(form.get("displayName") ?? ""));

41

if (!result.ok) return { error: result.error.message };

42

// Someone sent here on their way elsewhere carries on to it.

43

const next = nextPath(request);

44

throw redirect(next === "/" ? `/${result.value.slug}` : next);

45

}

46

47

export default function NewWorkspace({ loaderData, actionData }: Route.ComponentProps) {

48

const { user, first, free, invitations, next } = loaderData;

49

const said = actionData as { error?: string; invitationError?: string; invitationId?: string; declined?: string } | undefined;

50

return (

51

52

<h1 className="text-xl font-semibold">{first ? "Create your workspace or ask to join one" : "New workspace"}</h1>

53

{first && (

54

55

{said?.declined !== undefined && (

56

57

{declinedLine(said.declined)}

58

</p>

59

)}

60

{invitations.length > 0 ? (

61

<>

62

<h2 className="text-sm font-medium">You are invited</h2>

63

<p className="mt-1 mb-3 text-sm text-muted">Accept an invitation to join that workspace, or decline it.</p>

</>

) : (

To join a team that is on g1t already, ask one of its workspace's owners to invite you by your username,{" "}

69

<span className="font-mono text-fg">{user.username}</span>. Their invitation shows here and in your notifications.

70

</p>

71

)}

72

<h2 className="mt-8 text-sm font-medium">Or create your own</h2>

</section>

)}

{first && "Everything on g1t lives in a workspace, so this comes first. "}A workspace holds repositories, the people who work on them and the access

77

tokens that automate them, and is the first part of every address: <span className="font-mono text-fg">g1t.sh/workspace/repo</span>. Use one for

78

yourself, and one for each team or company you work with.

</p>

{free.length > 0 ? (

) : (

<>

</div>

</Field>

</Field>

<p className="text-xs text-faint">A new workspace is free. Each person can own one free workspace; more need the plan on the ones you have.</p>

95

<ErrorText>{said?.error}</ErrorText>

96

<SubmitButton pending="Creating…">Create workspace</SubmitButton>

</Form>

</>

)}

</main>

);

}

/** Why there is no form: the person owns a free workspace already. */

105

function OneFreeWorkspace({ free }: { free: string[] }) {

106

const [first] = free;

return (

<h2 className="font-medium">You already own a free workspace</h2>

111

112

Each person can own one workspace that is not on the g1t plan.{" "}

113

{free.length === 1 ? (

114

<>

115

Yours is <span className="font-mono text-fg">{first}</span>.

</>

) : (

<>

You own {free.length} from before (

120

{free.map((slug, i) => (

{i > 0 && ", "}

</span>

))}

), and keep them all.

127

</>

128

)}{" "}

129

A new workspace starts free, so to make one, start the plan on {free.length === 1 ? "it" : "each of them"}, or delete{" "}

130

{free.length === 1 ? "it" : "the ones"} you no longer use.

131

</p>

132

133

<ButtonLink to={planHref(first)}>Start the plan on {first}</ButtonLink>

Workspace settings

</Link>

</div>

The plan is one price for everyone in the workspace, never per person.{" "}

Pricing

</Link>

</p>

</section>

</Card>

);

}