| 1 | import { Package, Plus } from "lucide-react"; |
| 2 | import { Outlet, data, redirect, useLocation, useNavigation } from "react-router"; |
| 3 | |
| 4 | import type { Route } from "./+types/layout"; |
| 5 | import { page } from "../../lib/meta"; |
| 6 | import { ButtonLink } from "../../components/ui"; |
| 7 | import { Avatar } from "../../components/ui/avatar"; |
| 8 | import { Badge } from "../../components/ui/badge"; |
| 9 | import { WelcomeBanner } from "../../components/welcome"; |
| 10 | import { clearWelcome, welcomes } from "../../lib/invites"; |
| 11 | import { notFound } from "../../lib/not-found.server"; |
| 12 | import { redirectIfRenamed } from "../../lib/renamed.server"; |
| 13 | import { rememberWorkspace } from "../../lib/workspace-choice"; |
| 14 | import { workspacePage, workspaceRedirect } from "../../lib/workspace-nav"; |
| 15 | import { shortcutOf, workspaceProjects } from "../../lib/workspace-projects.server"; |
| 16 | import { WorkspacePageSkeleton } from "../../components/workspace-skeletons"; |
| 17 | import { identity } from "../../lib/services.server"; |
| 18 | import { getViewer, roleIn } from "../../lib/session.server"; |
| 19 | |
| 20 | export function meta({ loaderData, params, ...args }: Route.MetaArgs) { |
| 21 | return page(args, { title: `${loaderData?.workspace.name ?? params.owner} · g1t` }); |
| 22 | } |
| 23 | |
| 24 | export async function loader({ params, context, request }: Route.LoaderArgs) { |
| 25 | const url = new URL(request.url); |
| 26 | // `?tab=projects` and the like, from the tabs this page once had: that |
| 27 | // page's own address. |
| 28 | const moved = url.search ? workspaceRedirect(url.pathname, url.search) : null; |
| 29 | if (moved) throw redirect(moved); |
| 30 | const viewer = getViewer(context); |
| 31 | const workspace = await identity.getWorkspace(params.owner); |
| 32 | if (!workspace) { |
| 33 | // A workspace's old name, after a rename: its pages are at the new one. |
| 34 | await redirectIfRenamed(request, params.owner); |
| 35 | throw notFound("workspace"); |
| 36 | } |
| 37 | const role = roleIn(viewer, workspace.slug); |
| 38 | // Opening one of your workspaces makes it the one you are in. |
| 39 | if (!role) { |
| 40 | const listed = await workspaceProjects(workspace.slug, viewer); |
| 41 | return { workspace, role, welcome: false, projects: listed.ok ? listed.value.map(shortcutOf) : [] }; |
| 42 | } |
| 43 | const secure = new URL(request.url).protocol === "https:"; |
| 44 | const headers = new Headers({ "Set-Cookie": rememberWorkspace(workspace.slug, secure) }); |
| 45 | // Just joined with an invite: welcomed once (routes/invite.tsx). |
| 46 | const welcome = welcomes(request.headers.get("cookie"), workspace.slug); |
| 47 | if (welcome) headers.append("Set-Cookie", clearWelcome(secure)); |
| 48 | return data({ workspace, role, welcome }, { headers }); |
| 49 | } |
| 50 | |
| 51 | /** A workspace's own pages, each with its title and what it is for. */ |
| 52 | const PAGES: Record<string, { title: string; about: string }> = { |
| 53 | workspace: { |
| 54 | title: "Workspace", |
| 55 | about: "Who is in it, what it is on, and what it has spent this month. Everything about the workspace itself is in this sidebar.", |
| 56 | }, |
| 57 | settings: { title: "General", about: "The workspace's name, icon, address and description, two-factor authentication, where its data lives, and deleting it." }, |
| 58 | people: { |
| 59 | title: "People", |
| 60 | about: "Everyone in the workspace, in one directory: who they are, what they own, the teams they're on and who's around.", |
| 61 | }, |
| 62 | members: { |
| 63 | title: "Members", |
| 64 | about: "Who is in the workspace and their roles. Owners invite people, manage members and owners, and see the outside collaborators; what members may do is under Permissions.", |
| 65 | }, |
| 66 | "members/invitations": { |
| 67 | title: "Invitations", |
| 68 | about: "Every invitation to join the workspace: who it is for, who sent it, the role, and where it stands. Send one again, revoke it, or copy its link.", |
| 69 | }, |
| 70 | permissions: { |
| 71 | title: "Permissions", |
| 72 | about: "Who may do what in the workspace, part by part: repositories, teams, chat, artifacts, deployments and packages. Owners only.", |
| 73 | }, |
| 74 | projects: { |
| 75 | title: "Projects", |
| 76 | about: "Everything the workspace builds and runs. Search, filter and sort them, and pin the ones you use most to keep them in your sidebar.", |
| 77 | }, |
| 78 | teams: { |
| 79 | title: "Teams", |
| 80 | about: "People with a lead, a channel and roles on repositories. Everyone on a team knows who their teammates are.", |
| 81 | }, |
| 82 | repositories: { |
| 83 | title: "Repositories", |
| 84 | about: "Every repository in the workspace: who can see it, whether it is archived, and the ones deleted recently.", |
| 85 | }, |
| 86 | tokens: { |
| 87 | title: "Access tokens", |
| 88 | about: "Tokens that belong to the workspace, not a person: for CI, integrations and coding agents that work for the whole team. Each has the permissions an owner gives it, in all of the workspace's repositories or the ones chosen.", |
| 89 | }, |
| 90 | "personal-access-tokens": { |
| 91 | title: "Personal access tokens", |
| 92 | about: "Which of your members' own tokens may reach the workspace and for how long, the tokens made for it that wait for an owner's approval, and every token that can reach it.", |
| 93 | }, |
| 94 | packages: { |
| 95 | title: "Packages", |
| 96 | about: "What the workspace publishes and installs, beside its code: container images, npm, Composer, Go, Cargo, Maven, NuGet and RubyGems, with the same members, roles and tokens.", |
| 97 | }, |
| 98 | insights: { title: "Insights", about: "Delivery, review times, work in progress and costs across your workspace." }, |
| 99 | usage: { title: "Usage", about: "What the workspace used and what it cost, by product, project and day." }, |
| 100 | billing: { title: "Billing and plans", about: "The g1t plan, the trial, your spend limit, prepaying, and every charge." }, |
| 101 | audit: { |
| 102 | title: "Audit log", |
| 103 | about: "Every change people, tokens and g1t's own runs made: by whom, on whose behalf, to what, and whether it was allowed.", |
| 104 | }, |
| 105 | guardrails: { |
| 106 | title: "Guardrails", |
| 107 | about: "How long every project's runs may take. Each project can override these under its settings.", |
| 108 | }, |
| 109 | webhooks: { |
| 110 | title: "Webhooks", |
| 111 | about: "Every repository's events, sent to your own addresses as they happen. A repository can also have its own, under its settings.", |
| 112 | }, |
| 113 | secrets: { |
| 114 | title: "Secrets and variables", |
| 115 | about: "Shared with every repository, or the ones you link: read by workflows, deployments, or both. A repository's own row of the same key wins.", |
| 116 | }, |
| 117 | security: { |
| 118 | title: "Security", |
| 119 | about: "Open alerts in every project: secrets found in pushes and history, and vulnerable dependencies. Each project's Security page has the details and the security update g1t opened for each.", |
| 120 | }, |
| 121 | integrations: { |
| 122 | title: "Integrations", |
| 123 | about: |
| 124 | "The tools your team works with, connected once for everyone in the workspace. Secrets are sealed when saved, and never shown again.", |
| 125 | }, |
| 126 | }; |
| 127 | |
| 128 | /** A workspace page's heading: its title and what it is for. */ |
| 129 | function PageHeader({ title, about }: { title: string; about: string }) { |
| 130 | return ( |
| 131 | <header className="mb-8 border-b border-line pb-6"> |
| 132 | <h1 className="text-2xl font-semibold tracking-tight">{title}</h1> |
| 133 | <p className="mt-1.5 text-sm text-muted">{about}</p> |
| 134 | </header> |
| 135 | ); |
| 136 | } |
| 137 | |
| 138 | /** Artifacts' pages that are lists, not one artifact. */ |
| 139 | const ARTIFACT_LISTS = new Set(["new", "templates", "trash", "stale", "spaces"]); |
| 140 | |
| 141 | /** Whether the page (its path after `/-/`, in parts) is one artifact or a project's doc file. */ |
| 142 | function isArtifactPage(parts: string[]): boolean { |
| 143 | if (parts[0] !== "artifacts" || parts.length < 2) return false; |
| 144 | if (parts[1] === "repo") return true; |
| 145 | return !ARTIFACT_LISTS.has(parts[1]!) && parts.length === 2; |
| 146 | } |
| 147 | |
| 148 | export default function WorkspaceLayout({ loaderData }: Route.ComponentProps) { |
| 149 | const { workspace, role, welcome } = loaderData; |
| 150 | const { pathname } = useLocation(); |
| 151 | const going = useNavigation().location; |
| 152 | // The workspace's own page is its overview. Its other pages are found |
| 153 | // from the sidebar, which lights the one you are on, and the top bar's |
| 154 | // trail leads back here; each has a heading of its own. |
| 155 | const here = workspacePage(pathname, workspace.slug); |
| 156 | // On the way to another of its pages: that page's heading and shape |
| 157 | // until it arrives. |
| 158 | const next = going && going.pathname !== pathname ? workspacePage(going.pathname, workspace.slug) : null; |
| 159 | const shown = next ?? here; |
| 160 | const parts = (pathname.split("/-/")[1] ?? "").split("/").filter(Boolean); |
| 161 | // Chat fills the page edge to edge: its conversation, thread and details |
| 162 | // are columns of their own (components/chat/channel.tsx). |
| 163 | if (parts[0] === "chat" && !next) return <Outlet />; |
| 164 | // Code's Overview lays itself out, as Mission control did. |
| 165 | if (parts[0] === "overview" && parts.length === 1 && !next) return <Outlet />; |
| 166 | // An open artifact, or a project's doc, fills the panel: its header runs edge to edge right under |
| 167 | // the top bar (components/folios/shell.tsx), and its page sets its own width. |
| 168 | if (isArtifactPage(parts) && !next) { |
| 169 | return ( |
| 170 | <div className="px-4 pb-10 sm:px-6 lg:px-8"> |
| 171 | <Outlet /> |
| 172 | </div> |
| 173 | ); |
| 174 | } |
| 175 | if (shown !== "overview") { |
| 176 | // A page of its own under another's address (Invitations under Members) has its own heading. |
| 177 | const whole = parts.join("/"); |
| 178 | const key = shown ?? (PAGES[whole] ? whole : (parts[0] ?? "")); |
| 179 | const heading = PAGES[key]; |
| 180 | // Pages within one (a single package or team) have headings of their own. |
| 181 | const titled = heading && (shown != null || parts.length === 1 || key === whole); |
| 182 | return ( |
| 183 | <div className="mx-auto max-w-5xl px-4 py-10 sm:px-8"> |
| 184 | {titled && ( |
| 185 | <PageHeader title={heading.title} about={heading.about} /> |
| 186 | )} |
| 187 | {next ? <WorkspacePageSkeleton page={next} /> : <Outlet />} |
| 188 | </div> |
| 189 | ); |
| 190 | } |
| 191 | return ( |
| 192 | <> |
| 193 | {/* The workspace's own header band, above its overview. */} |
| 194 | <div className="border-b border-line bg-surface/60"> |
| 195 | <div className="mx-auto max-w-6xl px-4 py-8"> |
| 196 | {welcome && ( |
| 197 | <div className="mb-6"> |
| 198 | <WelcomeBanner title={`You're in ${workspace.name}`}> |
| 199 | You joined as a {role}. Its projects, issues and people are all here. |
| 200 | </WelcomeBanner> |
| 201 | </div> |
| 202 | )} |
| 203 | <div className="flex flex-wrap items-center gap-4"> |
| 204 | <Avatar name={workspace.slug} image={workspace.avatar} size={52} square /> |
| 205 | <div className="min-w-0 grow"> |
| 206 | <div className="flex flex-wrap items-center gap-2.5"> |
| 207 | <h1 className="truncate text-2xl font-semibold tracking-tight"> |
| 208 | {workspace.name} |
| 209 | </h1> |
| 210 | <Badge size="md">Workspace</Badge> |
| 211 | {role && <Badge size="md">{role}</Badge>} |
| 212 | </div> |
| 213 | <p className="font-mono text-sm text-muted">g1t.sh/{workspace.slug}</p> |
| 214 | </div> |
| 215 | {role ? ( |
| 216 | <ButtonLink to={`/new?workspace=${workspace.slug}`}> |
| 217 | <Plus size={15} /> |
| 218 | New project |
| 219 | </ButtonLink> |
| 220 | ) : ( |
| 221 | <ButtonLink to={`/${workspace.slug}/-/packages`} variant="outline" prefetch="intent"> |
| 222 | <Package size={15} /> |
| 223 | Packages |
| 224 | </ButtonLink> |
| 225 | )} |
| 226 | </div> |
| 227 | {workspace.description && ( |
| 228 | <p className="mt-4 max-w-2xl text-sm text-muted">{workspace.description}</p> |
| 229 | )} |
| 230 | </div> |
| 231 | </div> |
| 232 | <div className="mx-auto max-w-6xl px-4 py-8"> |
| 233 | {next ? <WorkspacePageSkeleton page="overview" /> : <Outlet />} |
| 234 | </div> |
| 235 | </> |
| 236 | ); |
| 237 | } |