app/routes/workspace.tsx

Functions

Imports

It imports app/components/admin/shell-parts.tsx, app/lab/access.server.ts, app/lab/actor.server.ts, app/lab/titles.mjs, app/lib/context.ts, app/lib/origin.mjs, app/lib/seo.ts, app/root.tsx. No module of this repo imports it.

Source

1import { Outlet, data, isRouteErrorResponse, useLocation, useRouteLoaderData } from "react-router";
2import { can } from "@dustinedwards/site-runtime/members";
3import { Empty } from "capsomer/react/empty";
4import { MessageProvider } from "capsomer/react/message";
5import { AdminShell, type AdminEntry } from "capsomer/react/admin-shell";
6import { ThemeSwitch } from "capsomer/react/theme-switch";
7
8import { Icon, THEME_SCRIPT, shellLink } from "~/components/admin/shell-parts";
9import { labIdentity } from "~/lab/access.server";
10import { labActorContext, loadLabActor, primaryOwnerSet } from "~/lab/actor.server";
11import { PERMISSION, titleLabel } from "~/lab/titles.mjs";
12import { getEnv } from "~/lib/context";
13import { ORIGIN_REFUSAL, originVerdict } from "~/lib/origin.mjs";
14import { SITE_ORIGIN } from "~/lib/seo";
15import type { Route } from "./+types/workspace";
16import type { loader as rootLoader } from "~/root";
17
18/*
19 * The lab workspace (docs/KNOWLEDGE-BASE.md step 5; capsid docs/design/design-identity-roles.md). Lab members sign in
20 * through their own Cloudflare Access application, never /admin's, and their row in `members` decides what they may
21 * do. /admin stays the Primary Owner's alone. Capsomer's shell and stylesheets, as the admin plane.
22 */
23import "@fontsource/schibsted-grotesk/400.css";
24import "@fontsource/schibsted-grotesk/500.css";
25import "@fontsource/schibsted-grotesk/600.css";
26import "@fontsource/schibsted-grotesk/800.css";
27import "@fontsource/martian-mono/400.css";
28import "~/admin.css";
29import "~/lab.css";
30
31export function meta() {
32  return [{ title: "Lab" }, { name: "robots", content: "noindex" }];
33}
34
35export const handle = { hydrate: true };
36
37const PRIVATE = {
38  "content-type": "text/plain; charset=utf-8",
39  "cache-control": "private, no-store",
40  "x-robots-tag": "noindex, nofollow",
41};
42
43/** The words a person with no access reads. It names nobody, and it is the same for a stranger and a removed member. */
44export function noAccessText(email: string): string {
45  return `No access. Ask your lab manager to add ${email}.`;
46}
47
48/**
49 * Default deny: Access must vouch for a person with this application's own token, and that person must hold an
50 * active, unexpired row (or be the Primary Owner). Anything else is refused before any child runs, and the row is read
51 * on every request, so a removal takes effect on the next click.
52 */
53export const middleware: Route.MiddlewareFunction[] = [
54  async ({ request, context }, next) => {
55    const env = getEnv(context);
56    if (request.method !== "GET" && request.method !== "HEAD") {
57      const verdict = originVerdict(request.headers.get("origin"), request.url);
58      if (!verdict.ok) throw new Response(ORIGIN_REFUSAL, { status: 403, headers: PRIVATE });
59    }
60
61    const identity = await labIdentity(env, request);
62    if (identity.kind === "refused") {
63      throw new Response(`Refused: the Cloudflare Access token did not verify (${identity.reason}).`, { status: 401, headers: PRIVATE });
64    }
65    if (identity.kind !== "human") {
66      const configured = Boolean(env.ACCESS_LAB_AUD);
67      throw new Response(
68        configured
69          ? `The lab signs in at ${SITE_ORIGIN}/lab, through Cloudflare Access.`
70          : "The lab workspace is not set up yet: its Cloudflare Access application (ACCESS_LAB_AUD) is not configured.",
71        { status: identity.kind === "service" ? 403 : configured ? 403 : 503, headers: PRIVATE },
72      );
73    }
74    if (!primaryOwnerSet(env)) {
75      throw new Response("The lab workspace is not set up yet: PRIMARY_OWNER_EMAIL is not set.", { status: 503, headers: PRIVATE });
76    }
77
78    const actor = await loadLabActor(env, identity.email, Date.now());
79    if (!actor) throw new Response(noAccessText(identity.email), { status: 403, headers: PRIVATE });
80    context.set(labActorContext, actor);
81    return next();
82  },
83];
84
85export async function loader({ context }: Route.LoaderArgs) {
86  const actor = context.get(labActorContext);
87  return data(
88    {
89      email: actor.email,
90      title: titleLabel(actor.title),
91      manages: can(actor, PERMISSION.manageMembers),
92      reads: can(actor, PERMISSION.read),
93      records: can(actor, PERMISSION.recordRun),
94    },
95    { headers: { "cache-control": "private, no-store" } },
96  );
97}
98
99const ICONS = {
100  overview: <Icon d="M4 11l8-7 8 7v9h-5v-6H9v6H4z" />,
101  inventory: <Icon d="M4 7l8-4 8 4v10l-8 4-8-4zM4 7l8 4 8-4M12 11v10" />,
102  runs: <Icon d="M9 3h6M10 3v6l-5 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-9V3M7.5 14h9" />,
103  members: <Icon d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM2 21v-1a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v1M16 3.5a4 4 0 0 1 0 7M18 14a6 6 0 0 1 4 6v1" />,
104};
105
106const RouterLink = shellLink("/lab");
107
108const ACCESS_LOGOUT_PATH = "/cdn-cgi/access/logout";
109
110export default function LabLayout({ loaderData }: Route.ComponentProps) {
111  const rootData = useRouteLoaderData<typeof rootLoader>("root");
112  const { pathname } = useLocation();
113  const at = (prefix: string) => pathname === prefix || pathname.startsWith(`${prefix}/`);
114  const nav: AdminEntry[] = [
115    { id: "overview", label: "Overview", href: "/lab", icon: ICONS.overview, current: pathname === "/lab" || pathname === "/lab/" },
116    ...(loaderData.reads
117      ? [{ id: "inventory", label: "Inventory", href: "/lab/inventory", group: "Bench", icon: ICONS.inventory, current: at("/lab/inventory") }]
118      : []),
119    ...(loaderData.records
120      ? [{ id: "runs", label: "Runs", href: "/lab/runs", group: "Bench", icon: ICONS.runs, current: at("/lab/runs") }]
121      : []),
122    ...(loaderData.manages
123      ? [{ id: "members", label: "Members", href: "/lab/members", group: "People", icon: ICONS.members, current: at("/lab/members") }]
124      : []),
125  ];
126  const theme = rootData?.theme;
127  const initials = loaderData.email.slice(0, 2).toUpperCase();
128
129  return (
130    <>
131      <script nonce={rootData?.nonce} dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
132      <AdminShell
133        title="Lab"
134        apps={[{ id: "lab", label: "Lab", href: "/lab", mono: "L", current: true }]}
135        nav={nav}
136        tabs={nav}
137        renderLink={RouterLink}
138        account={{
139          name: loaderData.email,
140          initials,
141          role: loaderData.title,
142          email: loaderData.email,
143          appLinks: [{ label: "View site", href: "/" }],
144          onSignOut: () => window.location.assign(ACCESS_LOGOUT_PATH),
145        }}
146        status={<span className="cap-muted">Signed in as {loaderData.email}</span>}
147        actions={<ThemeSwitch initial={theme === "light" || theme === "dark" ? theme : undefined} />}
148        prefKey="lab-rail"
149      >
150        <MessageProvider>
151          <div className="cap-admin-page">
152            <Outlet />
153          </div>
154        </MessageProvider>
155      </AdminShell>
156    </>
157  );
158}
159
160/** The lab's own error page, in Capsomer: a refusal's words are the answer, never a login page. */
161export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
162  const known = isRouteErrorResponse(error);
163  const title = known ? (error.status === 403 ? "No access" : `${error.status} ${error.statusText}`) : "Something went wrong";
164  return (
165    <main className="app-page">
166      <Empty kind={known && error.status === 404 ? "no-match" : "failed"} title={title}>
167        {known && typeof error.data === "string" ? error.data : "Nothing you entered is lost."}
168      </Empty>
169    </main>
170  );
171}