New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.
6 files+66−770/6 viewed
| 249 | 249 | ||
| 250 | 250 | ## Create a project | |
| 251 | 251 | ||
| 252 | − | 1. Choose **New project** in the sidebar, or go to `g1t.sh/new`. | |
| 252 | + | 1. In the workspace the project belongs to, choose **New project** in the | |
| 253 | + | sidebar, or go to `g1t.sh/new`. It's made in the workspace you're in; to | |
| 254 | + | make one somewhere else, switch workspaces first. | |
| 253 | 255 | 2. Choose where its code comes from: | |
| 254 | 256 | - **Start empty**: a new repository on g1t. | |
| 255 | 257 | - **Import code**: copy a public repository from GitHub or any git host |
| 767 | 767 | done: repos.length > 0, | |
| 768 | 768 | title: "Add a project", | |
| 769 | 769 | about: "Create a repository, or import one by its address. Push to it with git as usual.", | |
| 770 | − | to: workspace ? `/new?workspace=${workspace}` : "/new", | |
| 770 | + | to: "/new", | |
| 771 | 771 | action: "Add", | |
| 772 | 772 | }, | |
| 773 | 773 | trial?.open | |
| ⋯ | |||
| 864 | 864 | </div> | |
| 865 | 865 | ) : ( | |
| 866 | 866 | <Link | |
| 867 | − | to={workspace ? `/new?workspace=${workspace}` : "/new"} | |
| 867 | + | to={"/new"} | |
| 868 | 868 | className="inline-flex items-center gap-1.5 rounded-md border border-line-strong px-3 py-2 text-sm font-medium text-fg/90 hover:bg-raised hover:text-fg" | |
| 869 | 869 | > | |
| 870 | 870 | <Plus size={14} /> New project | |
| ⋯ | |||
| 1030 | 1030 | <Empty | |
| 1031 | 1031 | action={ | |
| 1032 | 1032 | <Link | |
| 1033 | − | to={workspace ? `/new?workspace=${workspace}` : "/new"} | |
| 1033 | + | to={"/new"} | |
| 1034 | 1034 | className="rounded-md bg-fg px-3 py-1.5 text-sm font-medium text-bg hover:bg-fg-hover" | |
| 1035 | 1035 | > | |
| 1036 | 1036 | Create or import a project | |
| 626 | 626 | <SidebarGroup | |
| 627 | 627 | title="Projects" | |
| 628 | 628 | action={ | |
| 629 | − | <Link to={`/new?workspace=${slug}`} aria-label="New project" className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"> | |
| 629 | + | <Link to="/new" aria-label="New project" className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"> | |
| 630 | 630 | <Plus size={13} /> | |
| 631 | 631 | </Link> | |
| 632 | 632 | } |
| 1 | + | /** | |
| 2 | + | * The workspace a page outside `/<workspace>` acts on (New project, Import | |
| 3 | + | * from GitHub): always the one you're in, as the sidebar shows it, never a | |
| 4 | + | * choice made on the page. A link that names another of your workspaces | |
| 5 | + | * (`?workspace=`) switches you to it first, so the page and the shell | |
| 6 | + | * agree, and then drops it from the address. | |
| 7 | + | */ | |
| 8 | + | import { redirect } from "react-router"; | |
| 9 | + | import type { User } from "@g1t/contracts"; | |
| 10 | + | ||
| 11 | + | import { readCookie } from "./mission"; | |
| 12 | + | import { WORKSPACE_COOKIE, chosenWorkspace, rememberWorkspace } from "./workspace-choice"; | |
| 13 | + | import { pagePath } from "./workspace-nav"; | |
| 14 | + | ||
| 15 | + | export function currentWorkspace(user: User, request: Request) { | |
| 16 | + | const memberships = user.workspaces ?? []; | |
| 17 | + | const url = new URL(request.url); | |
| 18 | + | const asked = url.searchParams.get("workspace")?.trim().toLowerCase(); | |
| 19 | + | const current = chosenWorkspace(memberships, readCookie(request.headers.get("cookie"), WORKSPACE_COOKIE)); | |
| 20 | + | if (asked) { | |
| 21 | + | const named = memberships.find((membership) => membership.slug.toLowerCase() === asked); | |
| 22 | + | url.searchParams.delete("workspace"); | |
| 23 | + | // A click asks for `<path>.data?_routes=…`; the address given is the page's own. | |
| 24 | + | url.searchParams.delete("_routes"); | |
| 25 | + | const headers = named && named.slug !== current?.slug ? { "set-cookie": rememberWorkspace(named.slug, url.protocol === "https:") } : undefined; | |
| 26 | + | throw redirect(`${pagePath(url.pathname)}${url.search}`, { headers }); | |
| 27 | + | } | |
| 28 | + | return current; | |
| 29 | + | } |
| 11 | 11 | import { githubApp } from "../lib/github.server"; | |
| 12 | 12 | import { page } from "../lib/meta"; | |
| 13 | 13 | import { assertSameOrigin, requireUser, roleIn } from "../lib/session.server"; | |
| 14 | + | import { currentWorkspace } from "../lib/current-workspace.server"; | |
| 14 | 15 | ||
| 15 | 16 | export function meta(args: Route.MetaArgs) { | |
| 16 | 17 | return page(args, { title: "Import from GitHub · g1t" }); | |
| ⋯ | |||
| 19 | 20 | export async function loader({ request, context }: Route.LoaderArgs) { | |
| 20 | 21 | const user = requireUser(context, request); | |
| 21 | 22 | const url = new URL(request.url); | |
| 22 | − | const workspaces = (user.workspaces ?? []).map((membership) => ({ | |
| 23 | − | slug: membership.slug, | |
| 24 | − | name: membership.name ?? membership.slug, | |
| 25 | − | owner: membership.role === "owner", | |
| 26 | − | })); | |
| 27 | − | if (workspaces.length === 0) throw redirect("/workspaces/new"); | |
| 28 | − | const asked = url.searchParams.get("workspace")?.toLowerCase(); | |
| 29 | − | const workspace = workspaces.find((option) => option.slug === asked)?.slug ?? workspaces[0].slug; | |
| 23 | + | const current = currentWorkspace(user, request); | |
| 24 | + | if (!current) throw redirect("/workspaces/new"); | |
| 25 | + | const workspace = current.slug; | |
| 26 | + | const workspaceName = current.name?.trim() || current.slug; | |
| 30 | 27 | // What the person can see on GitHub is asked for alongside the status: | |
| 31 | 28 | // an installation made there directly is offered here to be added. | |
| 32 | 29 | const [status, visible] = await Promise.all([ | |
| 33 | 30 | githubApp.status(user, workspace), | |
| 34 | 31 | githubApp.visibleInstallations(user).catch(() => null), | |
| 35 | 32 | ]); | |
| 36 | − | if (!status.ok || !status.value.configured) throw redirect(`/new?workspace=${workspace}`); | |
| 33 | + | if (!status.ok || !status.value.configured) throw redirect("/new"); | |
| 37 | 34 | const { installations, linked } = status.value; | |
| 38 | 35 | const recorded = new Set(installations.map((item) => item.id)); | |
| 39 | 36 | const claimable = | |
| ⋯ | |||
| 53 | 50 | else error = listed.error.message; | |
| 54 | 51 | } | |
| 55 | 52 | return { | |
| 56 | − | workspaces, | |
| 57 | 53 | workspace, | |
| 54 | + | workspaceName, | |
| 58 | 55 | owner: roleIn(user, workspace) === "owner", | |
| 59 | 56 | linked, | |
| 60 | 57 | installations, | |
| ⋯ | |||
| 75 | 72 | if (form.get("intent") === "add-installation") { | |
| 76 | 73 | const added = await githubApp.addInstallation(user, workspace, installationId); | |
| 77 | 74 | if (!added.ok) return { error: null, addError: added.error.message, results: [] }; | |
| 78 | − | throw redirect(`/new/github?workspace=${encodeURIComponent(workspace)}&installation=${installationId}`); | |
| 75 | + | throw redirect(`/new/github?installation=${installationId}`); | |
| 79 | 76 | } | |
| 80 | 77 | if (form.get("intent") === "remove-installation") { | |
| 81 | 78 | const removed = await githubApp.removeInstallation(user, workspace, installationId); | |
| 82 | 79 | // Shown by the list it was removed from, which is there with or without an account chosen. | |
| 83 | 80 | if (!removed.ok) return { error: null, removeError: removed.error.message, results: [] }; | |
| 84 | − | throw redirect(`/new/github?workspace=${encodeURIComponent(workspace)}`); | |
| 81 | + | throw redirect("/new/github"); | |
| 85 | 82 | } | |
| 86 | 83 | const mode = (["import", "mirror", "push"] as const).find((option) => option === form.get("mode")) ?? "import"; | |
| 87 | 84 | const chosen = form.getAll("repo").map(Number).filter((id) => Number.isSafeInteger(id) && id > 0).slice(0, 20); | |
| ⋯ | |||
| 102 | 99 | } | |
| 103 | 100 | ||
| 104 | 101 | export default function NewFromGithub({ loaderData, actionData }: Route.ComponentProps) { | |
| 105 | − | const { workspace, workspaces, installations, claimable, installation, repositories, linked, owner } = loaderData; | |
| 106 | − | const workspaceName = workspaces.find((option) => option.slug === workspace)?.name ?? workspace; | |
| 102 | + | const { workspace, workspaceName, installations, claimable, installation, repositories, linked, owner } = loaderData; | |
| 107 | 103 | const these = claimable.length === 1 ? "this account" : "these accounts"; | |
| 108 | − | const here = `/new/github?workspace=${workspace}`; | |
| 104 | + | const here = "/new/github"; | |
| 109 | 105 | const names = new Map((repositories?.repositories ?? []).map((repo) => [repo.id, repo.fullName])); | |
| 110 | 106 | return ( | |
| 111 | 107 | <main className="mx-auto max-w-2xl px-4 py-12"> | |
| 112 | − | <Link to={`/new?workspace=${workspace}`} className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg"> | |
| 108 | + | <Link to="/new" className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg"> | |
| 113 | 109 | <ArrowLeft size={14} /> New project | |
| 114 | 110 | </Link> | |
| 115 | 111 | <span className="mt-6 flex size-10 items-center justify-center rounded-xl bg-accent/10 text-accent ring-1 ring-accent/30"> | |
| ⋯ | |||
| 121 | 117 | which repositories it can see on GitHub; nothing else is read. | |
| 122 | 118 | </p> | |
| 123 | 119 | ||
| 124 | − | {workspaces.length > 1 && ( | |
| 125 | − | <nav className="mt-6 flex flex-wrap gap-2" aria-label="Workspace"> | |
| 126 | − | {workspaces.map((option) => ( | |
| 127 | − | <Link | |
| 128 | − | key={option.slug} | |
| 129 | − | to={`/new/github?workspace=${option.slug}`} | |
| 130 | − | className={`rounded-full border px-3 py-1 text-sm ${option.slug === workspace ? "border-accent/60 text-fg" : "border-line text-muted hover:text-fg"}`} | |
| 131 | − | > | |
| 132 | − | {option.name} | |
| 133 | − | </Link> | |
| 134 | − | ))} | |
| 135 | − | </nav> | |
| 136 | − | )} | |
| 137 | 120 | ||
| 138 | 121 | {!linked ? ( | |
| 139 | 122 | <section className="mt-8 rounded-lg border border-line p-6"> | |
| ⋯ | |||
| 231 | 214 | {installations.map((item) => ( | |
| 232 | 215 | <li key={item.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-2.5 text-sm"> | |
| 233 | 216 | <Link | |
| 234 | − | to={`${here}&installation=${item.id}`} | |
| 217 | + | to={`${here}?installation=${item.id}`} | |
| 235 | 218 | className={`whitespace-nowrap ${item.id === installation?.id ? "font-medium text-fg" : "text-muted hover:text-fg"}`} | |
| 236 | 219 | > | |
| 237 | 220 | {item.account} | |
| ⋯ | |||
| 310 | 293 | {repositories && repositories.total > repositories.perPage && ( | |
| 311 | 294 | <div className="flex justify-between text-sm"> | |
| 312 | 295 | {repositories.page > 1 ? ( | |
| 313 | − | <Link to={`${here}&installation=${installation.id}&page=${repositories.page - 1}`} className="text-muted hover:text-fg"> | |
| 296 | + | <Link to={`${here}?installation=${installation.id}&page=${repositories.page - 1}`} className="text-muted hover:text-fg"> | |
| 314 | 297 | Previous | |
| 315 | 298 | </Link> | |
| 316 | 299 | ) : ( | |
| 317 | 300 | <span /> | |
| 318 | 301 | )} | |
| 319 | 302 | {repositories.page * repositories.perPage < repositories.total && ( | |
| 320 | − | <Link to={`${here}&installation=${installation.id}&page=${repositories.page + 1}`} className="text-muted hover:text-fg"> | |
| 303 | + | <Link to={`${here}?installation=${installation.id}&page=${repositories.page + 1}`} className="text-muted hover:text-fg"> | |
| 321 | 304 | Next | |
| 322 | 305 | </Link> | |
| 323 | 306 | )} | |
| ⋯ | |||
| 362 | 345 | <SubmitButton variant="accent" pending="Bringing them across…" match={{ intent: "import" }}> | |
| 363 | 346 | Bring to g1t | |
| 364 | 347 | </SubmitButton> | |
| 365 | − | <ButtonLink to={`/new?workspace=${workspace}`} variant="quiet"> | |
| 348 | + | <ButtonLink to="/new" variant="quiet"> | |
| 366 | 349 | Cancel | |
| 367 | 350 | </ButtonLink> | |
| 368 | 351 | </div> | |
| 4 | 4 | ||
| 5 | 5 | import type { Route } from "./+types/new"; | |
| 6 | 6 | import { page } from "../lib/meta"; | |
| 7 | − | import { Avatar, ErrorText, SubmitButton } from "../components/ui"; | |
| 7 | + | import { ErrorText, SubmitButton } from "../components/ui"; | |
| 8 | 8 | import { Field, FieldDescription, FieldLabel, FieldLegend, FieldSet } from "../components/ui/field"; | |
| 9 | 9 | import { Input, InputAddon, InputGroup } from "../components/ui/input"; | |
| 10 | 10 | import { RadioCard, RadioGroup } from "../components/ui/radio-group"; | |
| 11 | − | import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../components/ui/select"; | |
| 12 | 11 | import { repos } from "../lib/services.server"; | |
| 13 | 12 | import { GithubMark } from "../components/github"; | |
| 14 | 13 | import { githubApp } from "../lib/github.server"; | |
| 15 | 14 | import { assertSameOrigin, requireUser } from "../lib/session.server"; | |
| 15 | + | import { currentWorkspace } from "../lib/current-workspace.server"; | |
| 16 | 16 | ||
| 17 | 17 | export function meta(args: Route.MetaArgs) { | |
| 18 | 18 | return page(args, { title: "New project · g1t" }); | |
| ⋯ | |||
| 20 | 20 | ||
| 21 | 21 | export async function loader({ request, context }: Route.LoaderArgs) { | |
| 22 | 22 | const user = requireUser(context, request); | |
| 23 | − | const workspaces = (user.workspaces ?? []).map((membership) => ({ | |
| 24 | − | slug: membership.slug, | |
| 25 | − | role: membership.role, | |
| 26 | − | name: membership.name ?? membership.slug, | |
| 27 | − | avatar: membership.avatar ?? null, | |
| 28 | − | })); | |
| 29 | − | // Projects live in a workspace, so there has to be one first. | |
| 30 | − | if (workspaces.length === 0) throw redirect("/workspaces/new"); | |
| 31 | − | const asked = new URL(request.url).searchParams.get("workspace"); | |
| 32 | − | const selected = asked && workspaces.some((workspace) => workspace.slug === asked) ? asked : workspaces[0].slug; | |
| 23 | + | // Projects live in a workspace, so there has to be one first; a new one | |
| 24 | + | // goes in the workspace you're in. | |
| 25 | + | const current = currentWorkspace(user, request); | |
| 26 | + | if (!current) throw redirect("/workspaces/new"); | |
| 27 | + | const selected = current.slug; | |
| 33 | 28 | // With g1t's GitHub App configured, repositories can come from GitHub. | |
| 34 | 29 | const github = await githubApp.status(user, selected).catch(() => null); | |
| 35 | − | return { workspaces, selected, github: Boolean(github?.ok && github.value.configured) }; | |
| 30 | + | return { selected, name: current.name?.trim() || current.slug, github: Boolean(github?.ok && github.value.configured) }; | |
| 36 | 31 | } | |
| 37 | 32 | ||
| 38 | 33 | export async function action({ request, context }: Route.ActionArgs) { | |
| ⋯ | |||
| 76 | 71 | }, | |
| 77 | 72 | ]; | |
| 78 | 73 | ||
| 79 | − | const ROLE_LABELS: Record<string, string> = { owner: "Owner", admin: "Admin", member: "Member" }; | |
| 80 | 74 | ||
| 81 | 75 | /** Replaces the mirror card when g1t's GitHub App is configured. */ | |
| 82 | 76 | const GITHUB_SOURCE = { | |
| ⋯ | |||
| 91 | 85 | const [source, setSource] = useState<Source>("empty"); | |
| 92 | 86 | const navigate = useNavigate(); | |
| 93 | 87 | const sources = loaderData.github ? SOURCES.map((option) => (option.id === "mirror" ? GITHUB_SOURCE : option)) : SOURCES; | |
| 94 | − | const [workspace, setWorkspace] = useState(loaderData.selected); | |
| 88 | + | const workspace = loaderData.selected; | |
| 95 | 89 | const [name, setName] = useState(""); | |
| 96 | 90 | return ( | |
| 97 | 91 | <main className="mx-auto max-w-2xl px-4 py-12"> | |
| ⋯ | |||
| 111 | 105 | name="source" | |
| 112 | 106 | value={source} | |
| 113 | 107 | onValueChange={(value) => | |
| 114 | − | value === "github" ? navigate(`/new/github?workspace=${workspace}`) : setSource(value as Source) | |
| 108 | + | value === "github" ? navigate("/new/github") : setSource(value as Source) | |
| 115 | 109 | } | |
| 116 | 110 | aria-label="Where its code comes from" | |
| 117 | 111 | className="gap-3 sm:grid-cols-3" | |
| ⋯ | |||
| 141 | 135 | <Field> | |
| 142 | 136 | <FieldLabel htmlFor="name">Name</FieldLabel> | |
| 143 | 137 | <InputGroup className="h-10"> | |
| 144 | − | <Select name="workspace" value={workspace} onValueChange={setWorkspace}> | |
| 145 | − | <SelectTrigger | |
| 146 | − | aria-label="Workspace" | |
| 147 | − | className="h-full w-auto max-w-[55%] shrink-0 rounded-none border-0 bg-surface px-2.5 font-medium hover:bg-raised focus-visible:ring-0 data-[state=open]:bg-raised data-[state=open]:ring-0 sm:max-w-[45%]" | |
| 148 | − | > | |
| 149 | − | <SelectValue /> | |
| 150 | − | </SelectTrigger> | |
| 151 | − | <SelectContent align="start" className="min-w-64"> | |
| 152 | − | <SelectGroup> | |
| 153 | − | <SelectLabel>Workspaces</SelectLabel> | |
| 154 | − | {loaderData.workspaces.map((option) => ( | |
| 155 | − | <SelectItem | |
| 156 | − | key={option.slug} | |
| 157 | − | value={option.slug} | |
| 158 | − | icon={<Avatar name={option.name} image={option.avatar} size={18} square />} | |
| 159 | − | description={`g1t.sh/${option.slug} · ${ROLE_LABELS[option.role] ?? option.role}`} | |
| 160 | − | > | |
| 161 | − | {option.name} | |
| 162 | − | </SelectItem> | |
| 163 | − | ))} | |
| 164 | − | </SelectGroup> | |
| 165 | − | </SelectContent> | |
| 166 | − | </Select> | |
| 138 | + | <input type="hidden" name="workspace" value={workspace} /> | |
| 139 | + | <InputAddon className="max-w-[55%] shrink-0 gap-2 bg-surface px-2.5 font-medium text-fg sm:max-w-[45%]"> | |
| 140 | + | <span className="truncate">{loaderData.name}</span> | |
| 141 | + | </InputAddon> | |
| 167 | 142 | <InputAddon className="border-l border-line px-2 font-mono text-base text-faint">/</InputAddon> | |
| 168 | 143 | <Input | |
| 169 | 144 | id="name" | |