Billing projection
-- {billing.plan} · {billing.seats} seats · $ - {(billing.monthlyCents / 100).toFixed(2)} -
- - Return to projects - -
@@ -70,26 +97,27 @@ function Header() {
);
}
-function Status({ status }: Readonly<{ status: Transfer["status"] }>) {
- return {status.replace("_", " ")};
-}
-
function Inventory({ rows }: Readonly<{ rows: Workspace["inventory"] }>) {
return (
-
);
}
@@ -115,9 +143,23 @@ export function App() {
const [selectedId, setSelectedId] = useState(
parameters.get("transfer") ?? "",
);
+ const [mobileView, setMobileView] = useState<
+ "list" | "create" | "detail" | "inventory"
+ >(() =>
+ parameters.get("view") === "inventory"
+ ? "inventory"
+ : parameters.has("transfer")
+ ? "detail"
+ : "list",
+ );
+ const railRef = useRef(null);
+ const panelRef = useRef(null);
const [workspace, setWorkspace] = useState();
const [loading, setLoading] = useState(true);
const [busy, setBusy] = useState(false);
+ const pending = useRef(false);
+ const attempt = useRef(new CommandAttempt());
+ const [needsRefresh, setNeedsRefresh] = useState(false);
const [notice, setNotice] = useState();
const [draft, setDraft] = useState<{
sourceId: WarehouseId;
@@ -152,36 +194,77 @@ export function App() {
? current
: (next.transfers[0]?.id ?? ""),
);
- } catch (error) {
- setNotice({ kind: "error", text: message(error) });
+ setNeedsRefresh(false);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
- void load();
+ void load().catch((error: unknown) => {
+ setNotice({ kind: "error", text: message(error) });
+ setNeedsRefresh(true);
+ });
}, [load]);
useEffect(() => {
updateLocation(view, selectedId);
}, [selectedId, updateLocation, view]);
+ useEffect(() => {
+ if (
+ mobileView !== "list" &&
+ window.matchMedia("(max-width: 980px)").matches
+ )
+ panelRef.current?.focus();
+ }, [mobileView]);
const run = async (
workloadId: WorkloadId,
- command: WorkloadCommand,
+ command: MutationInput,
success: string,
) => {
+ if (pending.current || needsRefresh) return;
+ pending.current = true;
setBusy(true);
setNotice(undefined);
try {
- const result = await api.command(workloadId, command);
- if (result.transfer) setSelectedId(result.transfer.id);
- await load();
- setNotice({ kind: "success", text: success });
+ const result = await api.command(
+ workloadId,
+ attempt.current.prepare(workloadId, command),
+ );
+ attempt.current.acknowledge();
+ if (result.transfer) {
+ const transfer = result.transfer;
+ setSelectedId(transfer.id);
+ setWorkspace((current) =>
+ current
+ ? {
+ ...current,
+ transfers: [
+ transfer,
+ ...current.transfers.filter(
+ (item) => item.id !== transfer.id,
+ ),
+ ],
+ }
+ : current,
+ );
+ setMobileView("detail");
+ }
+ try {
+ await load();
+ setNotice({ kind: "success", text: success });
+ } catch {
+ setNeedsRefresh(true);
+ setNotice({
+ kind: "error",
+ text: `${success} Refresh the workspace to load current stock before continuing.`,
+ });
+ }
} catch (error) {
setNotice({ kind: "error", text: message(error) });
} finally {
+ pending.current = false;
setBusy(false);
}
};
@@ -192,43 +275,75 @@ export function App() {
{
type: "transfer.create",
...draft,
- idempotencyKey: crypto.randomUUID(),
},
`${WORKLOADS.find(({ id }) => id === workloadId)?.shortLabel} created the transfer.`,
);
};
- if (loading) return Loading CedarStock… ;
+ if (loading)
+ return Loading warehouse workspace… ;
return (
-
+
-
+
{selected ? (
- <>
- ;
+}>) {
+ const releasing = transfer.status === "planned";
+ const warehouse = releasing ? transfer.sourceId : transfer.destinationId;
+ const otherWarehouse = warehouse === "north" ? "south" : "north";
+ const verb = releasing ? "Release" : "Receive";
+ const quantity = `${transfer.quantity} ${transfer.quantity === 1 ? "unit" : "units"}`;
+ const stock = (id: string) =>
+ inventory.find(
+ (row) => row.warehouseId === id && row.skuId === transfer.skuId,
+ )?.quantity;
+ const action = (id: "north" | "south", primary: boolean) => (
+
+ );
+
+ return (
+ <>
+
+
+ {transfer.status === "received" ? (
+
+
+ )}
+
+ );
+}
diff --git a/p10-warehouse-workloads/src/web/command-attempt.ts b/p10-warehouse-workloads/src/web/command-attempt.ts
new file mode 100644
index 0000000..7677f05
--- /dev/null
+++ b/p10-warehouse-workloads/src/web/command-attempt.ts
@@ -0,0 +1,32 @@
+import type { WorkloadId } from "../shared/catalog.ts";
+import type { WorkloadCommand } from "../shared/types.ts";
+
+type Mutation = Extract;
+export type MutationInput = Mutation extends infer Command
+ ? Command extends Mutation
+ ? Omit
+ : never
+ : never;
+
+/** An unanswered request may already have committed; retry the same operation. */
+export class CommandAttempt {
+ private pending:
+ | { workloadId: WorkloadId; fingerprint: string; command: Mutation }
+ | undefined;
+
+ prepare(workloadId: WorkloadId, input: MutationInput): Mutation {
+ const fingerprint = JSON.stringify(input);
+ if (
+ this.pending?.workloadId === workloadId &&
+ this.pending.fingerprint === fingerprint
+ )
+ return this.pending.command;
+ const command = { ...input, idempotencyKey: crypto.randomUUID() };
+ this.pending = { workloadId, fingerprint, command };
+ return command;
+ }
+
+ acknowledge(): void {
+ this.pending = undefined;
+ }
+}
diff --git a/p10-warehouse-workloads/src/web/styles.css b/p10-warehouse-workloads/src/web/styles.css
index 014ce45..dca5387 100644
--- a/p10-warehouse-workloads/src/web/styles.css
+++ b/p10-warehouse-workloads/src/web/styles.css
@@ -22,6 +22,7 @@ body,
width: 100%;
height: 100%;
margin: 0;
+ overflow: hidden;
}
body {
min-width: 320px;
@@ -35,12 +36,17 @@ button {
cursor: pointer;
}
button:focus-visible,
+summary:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 3px solid #00aeef;
outline-offset: 2px;
}
+.table-wrap:focus-visible {
+ outline: 3px solid #00aeef;
+ outline-offset: 2px;
+}
button:disabled {
cursor: not-allowed;
opacity: 0.58;
@@ -53,8 +59,9 @@ p {
}
.app-shell {
- min-height: 100dvh;
+ height: 100dvh;
display: grid;
+ grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
}
.brand-rail {
@@ -117,16 +124,27 @@ p {
}
.workspace {
+ min-width: 0;
min-height: 0;
display: grid;
- grid-template-columns: minmax(250px, 0.72fr) minmax(600px, 2fr);
+ grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
overflow: hidden;
}
+.mobile-back {
+ display: none;
+}
+.new-transfer {
+ width: 100%;
+ margin-bottom: 18px;
+}
.transfer-rail,
.main-panel {
min-height: 0;
- overflow: auto;
+ min-width: 0;
padding: clamp(20px, 3vw, 32px);
+ overflow-y: auto;
+ overscroll-behavior-y: contain;
+ scrollbar-color: #8fa09a var(--soft);
}
.transfer-rail {
background: var(--soft);
@@ -176,7 +194,7 @@ p {
border-color: var(--green);
}
.transfer-item.selected {
- box-shadow: inset 3px 0 var(--green);
+ background: var(--green-soft);
}
.transfer-item span,
.workload-list span {
@@ -197,25 +215,78 @@ p {
}
.transfer-layout {
display: grid;
- grid-template-columns: minmax(340px, 0.85fr) minmax(390px, 1.15fr);
- gap: 18px;
+ grid-template-columns: minmax(0, 1fr);
}
.panel-card {
- padding: 18px;
- border: 1px solid var(--border);
- border-radius: 8px;
+ min-width: 0;
+ overflow-wrap: anywhere;
+ max-width: 960px;
}
.panel-card h2 {
margin: 3px 0 16px;
color: var(--navy);
- font-size: 1.12rem;
+ font-size: 1.4rem;
+}
+.panel-card h3 {
+ color: var(--navy);
+ font-size: 1rem;
+ margin: 0 0 12px;
+}
+.panel-card p {
+ line-height: 1.5;
+ max-width: 70ch;
}
-.eyebrow {
+.transfer-reference {
color: var(--slate);
- font-size: 0.69rem;
+ font-size: 0.8rem;
+}
+.transfer-progress {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px 32px;
+ padding: 20px 0 20px 24px;
+ margin: 0;
+ border-bottom: 1px solid var(--border);
+ color: var(--slate);
+ text-transform: capitalize;
+ font-size: 0.85rem;
+}
+.transfer-progress [aria-current="step"] {
+ color: var(--green);
font-weight: 800;
- letter-spacing: 0.08em;
- text-transform: uppercase;
+}
+.stock-context,
+.transfer-operation {
+ margin-top: 24px;
+}
+.stock-context dl {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px 40px;
+ margin: 0;
+ font-size: 0.85rem;
+}
+.stock-context dt {
+ color: var(--slate);
+}
+.stock-context dd {
+ margin: 6px 0 0;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+}
+.baseline-comparison {
+ margin-top: 24px;
+ border-top: 1px solid var(--border);
+}
+.baseline-comparison summary {
+ padding-block: 16px;
+ cursor: pointer;
+ color: var(--navy);
+ font-weight: 700;
+}
+.baseline-comparison p {
+ color: var(--slate);
+ font-size: 0.85rem;
}
.form-grid {
display: grid;
@@ -223,6 +294,7 @@ p {
gap: 12px;
}
label {
+ min-width: 0;
display: grid;
gap: 6px;
color: var(--navy);
@@ -231,6 +303,9 @@ label {
}
input,
select {
+ min-width: 0;
+ min-height: 44px;
+ font-size: 1rem;
width: 100%;
padding: 9px 10px;
color: #262a29;
@@ -246,6 +321,7 @@ select {
}
.primary,
.secondary {
+ min-height: 44px;
padding: 9px 13px;
border-radius: 5px;
font-weight: 800;
@@ -288,7 +364,7 @@ select {
}
.facts {
display: grid;
- grid-template-columns: 2fr 1fr 1fr;
+ grid-template-columns: 1fr 1fr auto;
margin: 0;
border: 1px solid var(--border);
border-radius: 6px;
@@ -370,28 +446,41 @@ td {
}
footer {
- padding: 14px 20px;
+ padding: 2px 12px;
border-top: 1px solid var(--border);
}
footer nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
- gap: 8px 20px;
+ gap: 0 16px;
}
footer a {
+ display: inline-flex;
+ align-items: center;
+ min-height: 44px;
color: var(--navy);
font-size: 0.75rem;
}
+.view-tabs button {
+ min-height: 44px;
+}
+
@media (max-width: 980px) {
+ .brand-rail {
+ grid-template-columns: 38px minmax(0, 1fr) 40px;
+ gap: 10px;
+ padding: 9px 14px;
+ }
+ .brand-lockup {
+ width: 38px;
+ }
+ .workload-indicator strong {
+ display: none;
+ }
.workspace {
grid-template-columns: 1fr;
- overflow: visible;
- }
- .transfer-rail,
- .main-panel {
- overflow: visible;
}
.transfer-rail {
border-right: 0;
@@ -404,6 +493,28 @@ footer a {
.transfer-layout {
grid-template-columns: 1fr;
}
+ .mobile-list .main-panel,
+ .mobile-create .transfer-rail,
+ .mobile-detail .transfer-rail,
+ .mobile-inventory .transfer-rail,
+ .mobile-create .detail-card,
+ .mobile-detail .create-card {
+ display: none;
+ }
+ .mobile-back {
+ display: inline-block;
+ margin-bottom: 18px;
+ }
+}
+
+@media (max-height: 500px) {
+ .brand-rail {
+ min-height: 56px;
+ padding-block: 6px;
+ }
+ .topbar-copy p {
+ display: none;
+ }
}
@media (max-width: 760px) {
diff --git a/p10-warehouse-workloads/test/api.test.ts b/p10-warehouse-workloads/test/api.test.ts
index 1b1f1fe..0509cee 100644
--- a/p10-warehouse-workloads/test/api.test.ts
+++ b/p10-warehouse-workloads/test/api.test.ts
@@ -13,6 +13,40 @@ const verifier = {
};
describe("Warehouse API", () => {
+ it.each([
+ { transferId: "trf_north_south_planned" },
+ { type: "transfer.release" },
+ ])("rejects body overrides of the route command: %j", async (extra) => {
+ const database = new WarehouseDatabase(":memory:");
+ databases.push(database);
+ const app = await createApiApp({
+ database,
+ verifier,
+ authorization: { authorize: async () => true },
+ });
+ try {
+ const before = database.listInventory();
+ const response = await app.inject({
+ method: "POST",
+ url: "/api/transfers/trf_absent/release",
+ headers: { authorization: "Bearer valid-token" },
+ payload: {
+ expectedVersion: 1,
+ idempotencyKey: "55555555-5555-4555-8555-555555555555",
+ ...extra,
+ },
+ });
+ expect(response.statusCode).toBe(400);
+ expect(response.json().error).toBe("body_fields_invalid");
+ expect(database.getTransfer("trf_north_south_planned")?.status).toBe(
+ "planned",
+ );
+ expect(database.listInventory()).toEqual(before);
+ } finally {
+ await app.close();
+ }
+ });
+
it("authorizes transfer-list candidates independently", async () => {
const database = new WarehouseDatabase(":memory:");
databases.push(database);
diff --git a/p10-warehouse-workloads/test/browser-stack.test.ts b/p10-warehouse-workloads/test/browser-stack.test.ts
new file mode 100644
index 0000000..031a232
--- /dev/null
+++ b/p10-warehouse-workloads/test/browser-stack.test.ts
@@ -0,0 +1,138 @@
+import { join, resolve } from "node:path";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { WORKLOADS, workloadEnvironmentPrefix } from "../src/shared/catalog.ts";
+
+const mocks = vi.hoisted(() => ({
+ mkdir: vi.fn(),
+ mkdtemp: vi.fn(),
+ rm: vi.fn(),
+ canConnect: vi.fn(),
+ runCommand: vi.fn(),
+ ensure: vi.fn(),
+ stop: vi.fn(),
+ identity: vi.fn(),
+}));
+vi.mock("node:fs/promises", () => ({
+ mkdir: mocks.mkdir,
+ mkdtemp: mocks.mkdtemp,
+ rm: mocks.rm,
+}));
+vi.mock("../../shared/dev-supervisor.mjs", () => ({
+ canConnect: mocks.canConnect,
+ runCommand: mocks.runCommand,
+ issuerHealth: () => () => true,
+ serviceHealth: () => () => true,
+ DevSupervisor: class {
+ ensure = mocks.ensure;
+ stop = mocks.stop;
+ },
+}));
+vi.mock("../../shared/identity-provider/scripts/setup.mjs", () => ({
+ ensureProjectIdentity: mocks.identity,
+}));
+
+import startBrowserTestStack from "../scripts/browser-test-stack.mjs";
+
+beforeEach(() => {
+ vi.resetAllMocks();
+ mocks.canConnect.mockResolvedValue(false);
+ mocks.mkdtemp.mockImplementation(
+ async (prefix: string) => `${prefix}fixture`,
+ );
+ mocks.identity.mockReturnValue({
+ IDP_ISSUER: "http://localhost:18010",
+ P10_API_RESOURCE: "http://localhost:17010/api",
+ ...Object.fromEntries(
+ WORKLOADS.flatMap(({ id }) => {
+ const prefix = workloadEnvironmentPrefix(id);
+ return [
+ [`${prefix}_CLIENT_ID`, id],
+ [`${prefix}_CLIENT_SECRET`, `${id}-private-test-secret`],
+ ];
+ }),
+ ),
+ });
+});
+afterEach(() => {
+ vi.restoreAllMocks();
+ vi.unstubAllEnvs();
+});
+
+it("starts all seven services with private data and isolated workload credentials", async () => {
+ vi.stubEnv("P10_DATA_DIR", ".local/learner-data");
+ vi.stubEnv("P10_WAREHOUSE_NORTH_CLIENT_SECRET", "learner-secret");
+ const root = process.cwd();
+ const directory = join(root, ".local/e2e-fixture");
+ const cleanup = await startBrowserTestStack();
+ expect(mocks.identity).toHaveBeenCalledWith(
+ "P10",
+ join(directory, "idp.env"),
+ );
+ expect(mocks.ensure).toHaveBeenCalledTimes(7);
+ expect(mocks.ensure.mock.calls[1]?.[0]).toMatchObject({
+ args: ["dist/server/api-main.js"],
+ env: { P10_DATA_DIR: join(directory, "data") },
+ });
+ for (const [index, { id }] of WORKLOADS.entries()) {
+ const service = mocks.ensure.mock.calls[index + 2]?.[0];
+ const prefix = workloadEnvironmentPrefix(id);
+ expect(service).toMatchObject({
+ args: ["dist/server/agent-main.js", id],
+ reuseExisting: false,
+ env: {
+ [`${prefix}_CLIENT_SECRET`]: `${id}-private-test-secret`,
+ P10_SUPERVISED: "1",
+ },
+ });
+ const clientSecrets = Object.keys(service.env).filter(
+ (name) => name.endsWith("_CLIENT_SECRET") && name.startsWith("P10_"),
+ );
+ expect(clientSecrets).toEqual([`${prefix}_CLIENT_SECRET`]);
+ }
+ expect(
+ mocks.runCommand.mock.calls.map(([command, args, options]) => [
+ command,
+ args,
+ options.cwd,
+ ]),
+ ).toEqual([
+ [
+ expect.any(String),
+ ["build"],
+ resolve(root, "../shared/identity-provider"),
+ ],
+ [expect.any(String), ["build"], root],
+ ]);
+ await cleanup();
+ expect(mocks.stop).toHaveBeenCalledOnce();
+ expect(mocks.rm).toHaveBeenCalledWith(directory, {
+ recursive: true,
+ force: true,
+ });
+ expect(process.env.P10_DATA_DIR).toBe(".local/learner-data");
+});
+
+it("refuses an occupied internal port before preparing any state", async () => {
+ mocks.canConnect.mockImplementation(
+ async (_host: string, port: number) => port === 3113,
+ );
+ await expect(startBrowserTestStack()).rejects.toThrow(
+ "require free port 3113",
+ );
+ expect(mocks.mkdtemp).not.toHaveBeenCalled();
+ expect(mocks.identity).not.toHaveBeenCalled();
+ expect(mocks.runCommand).not.toHaveBeenCalled();
+ expect(mocks.ensure).not.toHaveBeenCalled();
+});
+
+it("stops owned services and removes temporary state after failed startup", async () => {
+ mocks.ensure
+ .mockResolvedValueOnce(undefined)
+ .mockRejectedValueOnce(new Error("API startup failed"));
+ await expect(startBrowserTestStack()).rejects.toThrow("API startup failed");
+ expect(mocks.stop).toHaveBeenCalledOnce();
+ expect(mocks.rm).toHaveBeenCalledWith(
+ join(process.cwd(), ".local/e2e-fixture"),
+ { recursive: true, force: true },
+ );
+});
diff --git a/p10-warehouse-workloads/test/build.test.ts b/p10-warehouse-workloads/test/build.test.ts
new file mode 100644
index 0000000..ed65dd0
--- /dev/null
+++ b/p10-warehouse-workloads/test/build.test.ts
@@ -0,0 +1,63 @@
+import { spawnSync } from "node:child_process";
+import {
+ existsSync,
+ mkdtempSync,
+ readFileSync,
+ rmSync,
+ writeFileSync,
+} from "node:fs";
+import { tmpdir } from "node:os";
+import { resolve } from "node:path";
+import { expect, it } from "vitest";
+
+it("rebuilds a missing server entry even when compiler metadata is cached", () => {
+ const root = mkdtempSync(resolve(tmpdir(), "server-build-"));
+ const project = resolve(import.meta.dirname, "..");
+ const configFile = resolve(root, "tsconfig.json");
+ const sourceConfig = JSON.parse(
+ readFileSync(resolve(project, "tsconfig.server.json"), "utf8"),
+ );
+ const manifest = JSON.parse(
+ readFileSync(resolve(project, "package.json"), "utf8"),
+ );
+ const compilerArgs = manifest.scripts.build
+ .split(" && ")
+ .at(-1)
+ .split(" ")
+ .slice(1)
+ .map((arg: string) => (arg === "tsconfig.server.json" ? configFile : arg));
+ const output = resolve(root, "dist/server/api-main.js");
+ try {
+ writeFileSync(
+ configFile,
+ JSON.stringify({
+ ...sourceConfig,
+ compilerOptions: {
+ ...sourceConfig.compilerOptions,
+ rootDir: resolve(project, "src"),
+ outDir: resolve(root, "dist"),
+ tsBuildInfoFile: resolve(root, "server.tsbuildinfo"),
+ typeRoots: [resolve(project, "node_modules/@types")],
+ },
+ include: sourceConfig.include.map((glob: string) =>
+ resolve(project, glob).replaceAll("\\", "/"),
+ ),
+ }),
+ );
+ const build = () => {
+ const result = spawnSync(
+ process.execPath,
+ [resolve(project, "node_modules/typescript/bin/tsc"), ...compilerArgs],
+ { cwd: project, encoding: "utf8", timeout: 20_000 },
+ );
+ expect(result.status, result.stdout + result.stderr).toBe(0);
+ };
+ build();
+ expect(existsSync(output)).toBe(true);
+ rmSync(output);
+ build();
+ expect(existsSync(output)).toBe(true);
+ } finally {
+ rmSync(root, { recursive: true, force: true });
+ }
+}, 45_000);
diff --git a/p10-warehouse-workloads/test/command-attempt.test.ts b/p10-warehouse-workloads/test/command-attempt.test.ts
new file mode 100644
index 0000000..6ef9004
--- /dev/null
+++ b/p10-warehouse-workloads/test/command-attempt.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+import { CommandAttempt } from "../src/web/command-attempt.ts";
+
+const create = {
+ type: "transfer.create",
+ sourceId: "north",
+ destinationId: "south",
+ skuId: "bearing-kit",
+ quantity: 1,
+} as const;
+
+describe("command retries", () => {
+ it("retains the exact command and key until the server acknowledges it", () => {
+ const attempts = new CommandAttempt();
+ const original = attempts.prepare("transfer-planner", create);
+ expect(attempts.prepare("transfer-planner", { ...create })).toBe(original);
+ attempts.acknowledge();
+ expect(
+ attempts.prepare("transfer-planner", create).idempotencyKey,
+ ).not.toBe(original.idempotencyKey);
+ });
+
+ it("starts a new attempt when the workload or command changes", () => {
+ const attempts = new CommandAttempt();
+ const original = attempts.prepare("transfer-planner", create);
+ const auditor = attempts.prepare("inventory-auditor", create);
+ expect(auditor.idempotencyKey).not.toBe(original.idempotencyKey);
+ const changed = attempts.prepare("inventory-auditor", {
+ ...create,
+ quantity: 2,
+ });
+ expect(changed.idempotencyKey).not.toBe(auditor.idempotencyKey);
+ const release = attempts.prepare("warehouse-north", {
+ type: "transfer.release",
+ transferId: "transfer-one",
+ expectedVersion: 1,
+ });
+ expect(release.idempotencyKey).not.toBe(changed.idempotencyKey);
+ expect(
+ attempts.prepare("warehouse-north", {
+ type: "transfer.release",
+ transferId: "transfer-two",
+ expectedVersion: 1,
+ }).idempotencyKey,
+ ).not.toBe(release.idempotencyKey);
+ });
+});
diff --git a/p10-warehouse-workloads/test/environment.test.ts b/p10-warehouse-workloads/test/environment.test.ts
new file mode 100644
index 0000000..0e9c3f3
--- /dev/null
+++ b/p10-warehouse-workloads/test/environment.test.ts
@@ -0,0 +1,34 @@
+import { resolve } from "node:path";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({ exists: vi.fn(), load: vi.fn() }));
+vi.mock("node:fs", () => ({ existsSync: mocks.exists }));
+vi.mock("node:process", () => ({ loadEnvFile: mocks.load }));
+
+import { loadLocalEnvironment } from "../src/server/environment.ts";
+
+beforeEach(() => {
+ vi.resetAllMocks();
+ mocks.exists.mockReturnValue(true);
+});
+afterEach(() => vi.unstubAllEnvs());
+
+it("does not import other workloads' credentials into supervised services", () => {
+ vi.stubEnv("P10_SUPERVISED", "1");
+ loadLocalEnvironment();
+ expect(mocks.exists).not.toHaveBeenCalled();
+ expect(mocks.load).not.toHaveBeenCalled();
+});
+
+it("retains local environment loading for standalone commands", () => {
+ vi.stubEnv("P10_SUPERVISED", undefined);
+ loadLocalEnvironment();
+ expect(mocks.load).toHaveBeenCalledWith(resolve(".env"));
+});
+
+it("leaves explicit environment and --env-file configuration alone when no local file exists", () => {
+ vi.stubEnv("P10_SUPERVISED", undefined);
+ mocks.exists.mockReturnValue(false);
+ loadLocalEnvironment();
+ expect(mocks.load).not.toHaveBeenCalled();
+});
diff --git a/p10-warehouse-workloads/test/setup.test.ts b/p10-warehouse-workloads/test/setup.test.ts
index d0f2200..1d88ee5 100644
--- a/p10-warehouse-workloads/test/setup.test.ts
+++ b/p10-warehouse-workloads/test/setup.test.ts
@@ -18,47 +18,59 @@ afterEach(() => {
rmSync(root, { recursive: true, force: true });
});
-it("synchronizes four workload registrations while preserving local settings", () => {
- const root = mkdtempSync(resolve(tmpdir(), "p10-setup-"));
- roots.push(root);
- const project = resolve(root, "p10-warehouse-workloads");
- const identity = resolve(project, ".local/idp");
- mkdirSync(project, { recursive: true });
- mkdirSync(identity, { recursive: true });
- const prefixes = [
- "P10_TRANSFER_PLANNER",
- "P10_WAREHOUSE_NORTH",
- "P10_WAREHOUSE_SOUTH",
- "P10_INVENTORY_AUDITOR",
- ];
- writeFileSync(
- resolve(identity, ".env"),
- [
- "IDP_ISSUER=http://localhost:18010",
- "P10_API_RESOURCE=http://localhost:17010/api",
- ...prefixes.flatMap((prefix, index) => [
- `${prefix}_CLIENT_ID=${prefix.toLowerCase().replaceAll("_", "-")}`,
- `${prefix}_CLIENT_SECRET=${String(index + 1).repeat(32)}`,
- ]),
- "",
- ].join("\n"),
- );
- const target = resolve(project, ".env");
- writeFileSync(target, "P10_LOCAL_NOTE=keep\n");
+it.each([17010, 4210])(
+ "synchronizes registration port %s while preserving internal endpoints and credentials",
+ (port) => {
+ const root = mkdtempSync(resolve(tmpdir(), "p10-setup-"));
+ roots.push(root);
+ const project = resolve(root, "p10-warehouse-workloads");
+ const identity = resolve(project, ".local/idp");
+ mkdirSync(project, { recursive: true });
+ mkdirSync(identity, { recursive: true });
+ const prefixes = [
+ "P10_TRANSFER_PLANNER",
+ "P10_WAREHOUSE_NORTH",
+ "P10_WAREHOUSE_SOUTH",
+ "P10_INVENTORY_AUDITOR",
+ ];
+ writeFileSync(
+ resolve(identity, ".env"),
+ [
+ "IDP_ISSUER=http://localhost:18010",
+ `P10_API_RESOURCE=http://localhost:${port}/api`,
+ ...prefixes.flatMap((prefix, index) => [
+ `${prefix}_CLIENT_ID=${prefix.toLowerCase().replaceAll("_", "-")}`,
+ `${prefix}_CLIENT_SECRET=${String(index + 1).repeat(32)}`,
+ ]),
+ "",
+ ].join("\n"),
+ );
+ const target = resolve(project, ".env");
+ writeFileSync(
+ target,
+ "P10_LOCAL_NOTE=keep\nP10_PORT=3010\nP10_BASE_URL=http://p10.localhost:3010\nP10_API_PORT=4110\nP10_WAREHOUSE_API_URL=http://127.0.0.1:4110\nP10_CONTROL_SECRET=learner-control-secret-32-characters\n",
+ );
- const result = spawnSync(process.execPath, [resolve("scripts/setup.ts")], {
- cwd: project,
- encoding: "utf8",
- });
- expect(result.status, result.stderr).toBe(0);
- const environment = parseEnv(readFileSync(target, "utf8"));
- expect(environment.P10_LOCAL_NOTE).toBe("keep");
- for (const [index, prefix] of prefixes.entries()) {
- expect(environment[`${prefix}_CLIENT_SECRET`]).toBe(
- String(index + 1).repeat(32),
+ const result = spawnSync(process.execPath, [resolve("scripts/setup.ts")], {
+ cwd: project,
+ encoding: "utf8",
+ });
+ expect(result.status, result.stderr).toBe(0);
+ const environment = parseEnv(readFileSync(target, "utf8"));
+ expect(environment.P10_LOCAL_NOTE).toBe("keep");
+ expect(environment.P10_PORT).toBe(String(port));
+ expect(environment.P10_BASE_URL).toBe(`http://localhost:${port}`);
+ expect(environment.P10_API_PORT).toBe("4110");
+ expect(environment.P10_WAREHOUSE_API_URL).toBe("http://127.0.0.1:4110");
+ for (const [index, prefix] of prefixes.entries()) {
+ expect(environment[`${prefix}_CLIENT_SECRET`]).toBe(
+ String(index + 1).repeat(32),
+ );
+ }
+ expect(environment.P10_CONTROL_SECRET).toBe(
+ "learner-control-secret-32-characters",
);
- }
- expect(environment.P10_CONTROL_SECRET).toHaveLength(43);
- if (process.platform !== "win32")
- expect(statSync(target).mode & 0o777).toBe(0o600);
-});
+ if (process.platform !== "win32")
+ expect(statSync(target).mode & 0o777).toBe(0o600);
+ },
+);
diff --git a/p11-saas-workspace/.dockerignore b/p11-saas-workspace/.dockerignore
index 902daf6..d936b17 100644
--- a/p11-saas-workspace/.dockerignore
+++ b/p11-saas-workspace/.dockerignore
@@ -1,7 +1,13 @@
node_modules
+dist
build
.react-router
.env
+.env.*
+!.env.example
.local
coverage
+test-results
+playwright-report
.git
+**/*.log
diff --git a/p11-saas-workspace/Dockerfile b/p11-saas-workspace/Dockerfile
index 441c215..477efe6 100644
--- a/p11-saas-workspace/Dockerfile
+++ b/p11-saas-workspace/Dockerfile
@@ -10,11 +10,14 @@ FROM node:24.21.0-bookworm-slim AS runtime
WORKDIR /app
ENV NODE_ENV=production
COPY --chown=node:node --from=build /app/package.json ./package.json
-COPY --chown=node:node --from=build /app/server.js ./server.js
+COPY --chown=node:node --from=build /app/server ./server
COPY --chown=node:node --from=build /app/node_modules ./node_modules
COPY --chown=node:node --from=build /app/build ./build
COPY --chown=node:node --from=build /app/migrations ./migrations
COPY --chown=node:node --from=build /app/fixtures ./fixtures
+
+COPY --chown=node:node --from=build /app/scripts/admin.ts ./scripts/admin.ts
+COPY --chown=node:node --from=build /app/scripts/reset.ts ./scripts/reset.ts
USER node
EXPOSE 17011
-CMD ["node", "server.js"]
+CMD ["node", "server/index.js"]
diff --git a/p11-saas-workspace/README.md b/p11-saas-workspace/README.md
index 5c3a8df..fa7e3db 100644
--- a/p11-saas-workspace/README.md
+++ b/p11-saas-workspace/README.md
@@ -1,92 +1,130 @@
# P11 - Securing Active-Tenant Switching in a SaaS Workspace with Cedarling
-P11 is a SaaS project workspace shared by two organizations. It shows how
-Cedarling centralizes authorization from current tenant, membership,
-invitation, session, project, and support-approval facts.
+P11 is a SaaS workspace for two organizations. Members switch workspaces,
+edit projects, invite colleagues, and open temporary support access.
-The protected workspace capabilities currently use a fake permissive decision;
-the Cedarling tutorial replaces that seam with policy-backed decisions.
+This learning baseline authenticates users and validates requests. Business
+permissions return `FAKE ALLOW`; Cedarling will enforce current tenant roles,
+membership, and support scope.
## Architecture
-```text
-Maya / Noah / Lena / Imani ── sign in ──→ Tutorial IdP
- │
- └── workspace request ──→ React Router Framework Mode
- │ typed loader or action (PEP)
- │ actor + current tenant/resource facts
- ▼
- Cedarling PDP
- │ │
- DENY ALLOW → workspace effect → PostgreSQL
+```mermaid
+flowchart TD
+ accTitle: P11 baseline request flow
+ accDescr: React Router loads current workspace facts before a permissive authorization check and a PostgreSQL operation.
+ Browser["Workspace browser"] -->|Sign in| IdP["Tutorial IdP"]
+ Browser --> App["React Router loaders and actions"]
+ App --> Facts["Current tenant, membership and support facts"]
+ Facts --> Fake["FAKE ALLOW"]
+ Fake --> DB["PostgreSQL workspace operation"]
```
## Prerequisites
-- Docker Desktop or Docker Engine with Compose, or
-- Node.js 24.21 or newer within 24.x, pnpm 10, PostgreSQL, and the project-local tutorial identity provider.
+- Docker Desktop or Docker Engine with Compose.
+- Node.js 24.21 or newer within 24.x.
+- pnpm 10.17.1.
+
+Native startup uses Docker for PostgreSQL on port 5435.
## Run
-Start the application and its own IdP:
+From this project directory, start with Docker:
```bash
docker compose up --build
```
-Open . The issuer is . Stop the stack with `Ctrl+C`, then `docker compose down`.
+Open . The tutorial IdP is .
+Stop with `Ctrl+C`, then `docker compose down`.
-For native development, run from this project directory:
+For native development:
```bash
pnpm --dir ../shared/identity-provider install --frozen-lockfile
-pnpm --dir ../shared/identity-provider build
pnpm install --frozen-lockfile
-pnpm run setup
pnpm dev
```
-`pnpm dev` starts this project’s IdP and application together.
+`pnpm dev` prepares configuration and starts the database, IdP, and application.
-Setup starts PostgreSQL through Compose for the default database URL,
-`postgresql://p11:p11@127.0.0.1:5435/p11`. For a Docker-free stack, create a local
-PostgreSQL database and set a different `P11_DATABASE_URL` in `.env` before setup.
-A shell value takes precedence over `.env`; setup saves the selected URL for
-later commands. Custom databases are used directly, without starting Docker.
+## Exercise
-For `pnpm build` followed by `pnpm start`, first run `node --env-file=.local/idp/.env ../shared/identity-provider/dist/main.js` in another terminal in this project directory.
+Choose an account. Use the prefilled username, or enter its lowercase first
+name, and any non-empty password such as `cedarling-is-awesome`.
-Use `pnpm dev -- --reset` only when you want to restore the tutorial fixtures.
+- Maya administers Aster (Tenant A) and is a viewer in Boreal (Tenant B).
+- Noah edits Aster projects; his intended role excludes billing.
+- Lena has a pending Aster invitation.
+- Imani has support approval to read `project-a1`.
-## Exercise
+Try editing an Aster project as Noah. As Lena, open **My invitations**, accept
+with `p11-lena-invite-token`, then choose **Open Tenant A · Aster**.
+As Imani, open **Support access**, start a session, and read the approved project.
+Use separate browser profiles when comparing accounts.
+
+Then reproduce the permission gaps:
+
+1. As Maya, switch to Boreal and save an edit despite her viewer role.
+2. Return to an Aster project. In another native terminal, run
+ `pnpm admin revoke user-maya aster`, then reload Maya's project: it still
+ opens. Restore membership with `pnpm admin restore user-maya aster`.
+3. With Imani's support session open, visit
+ and edit it.
+ Her approval covers only reads of `project-a1`.
+
+For Docker membership changes, use these commands instead:
+
+```bash
+docker compose exec cedarworkspace node --env-file=/run/config/app.env scripts/admin.ts revoke user-maya aster
+docker compose exec cedarworkspace node --env-file=/run/config/app.env scripts/admin.ts restore user-maya aster
+```
+
+Reload the project between revocation and restoration.
-The business workflow is a project workspace shared across organizations:
+Lena's invitation expires after fifteen minutes. To repeat, create an Aster
+invitation as Maya in **Members** and give its token to Lena.
-- **Maya** — Tenant A administrator and Tenant B viewer.
-- **Noah** — Tenant A project editor without billing authority.
-- **Lena** — Invitee with no membership until she accepts once.
-- **Imani** — Support agent limited to one approved project.
+Imani's approval lasts two hours; each support session lasts ten minutes.
+Renew the approval with `pnpm admin renew-support support-imani-a1`, then open
+a new session. For Docker:
-Switch tenants, revoke membership, reuse an old tab, accept an invitation, and
-redeem support access. The current seam over-trusts client context; Cedarling
-will decide from current tenant, membership, project, invitation, and approval.
+```bash
+docker compose exec cedarworkspace node --env-file=/run/config/app.env scripts/admin.ts renew-support support-imani-a1
+```
+
+## Data and reset
+
+Restarts preserve workspace changes. Stop the native app, run `pnpm reset`,
+then `pnpm dev` and sign in again. For a running Docker stack:
+
+```bash
+docker compose exec cedarworkspace node --env-file=/run/config/app.env scripts/reset.ts
+```
+
+Reset restores fixtures and clears workspace records and sessions in the
+configured `P11_DATABASE_URL`. Use a disposable tutorial database.
+Configuration and IdP credentials are preserved.
## Commands
| Command | Purpose |
| --- | --- |
-| `pnpm run setup` | Validate configuration and initialize PostgreSQL |
-| `pnpm dev` | Run the native IdP and Framework development server |
-| `pnpm start` | Run the production Framework build |
-| `pnpm reset` | Restore deterministic PostgreSQL fixtures |
-| `pnpm admin` | Apply tutorial administration changes |
-| `pnpm test:e2e` | Verify the Docker-backed browser workflow and restart persistence |
-| `pnpm check` | Run formatting, lint, types, unit tests, and build |
+| `pnpm run setup` | Prepare configuration and initialize PostgreSQL |
+| `pnpm start` | Run the built app; requires PostgreSQL and the IdP |
## Verify
+`pnpm check` runs formatting, lint, type checks, unit tests, and build.
+The integration scenario needs Docker and free application, IdP, and database
+ports; stop your P11 app and Compose stack first. It uses disposable data.
+Install Chromium once:
+
```bash
+pnpm exec playwright install chromium
pnpm check
pnpm test:e2e
-pnpm audit --audit-level low
```
+
+On Linux, add `--with-deps` to the Chromium installation command if needed.
diff --git a/p11-saas-workspace/src/web/assets/cedarling-mark.png b/p11-saas-workspace/app/assets/cedarling-mark.png
similarity index 100%
rename from p11-saas-workspace/src/web/assets/cedarling-mark.png
rename to p11-saas-workspace/app/assets/cedarling-mark.png
diff --git a/p11-saas-workspace/src/web/assets/cedarling-wordmark-dark.webp b/p11-saas-workspace/app/assets/cedarling-wordmark-dark.webp
similarity index 100%
rename from p11-saas-workspace/src/web/assets/cedarling-wordmark-dark.webp
rename to p11-saas-workspace/app/assets/cedarling-wordmark-dark.webp
diff --git a/p11-saas-workspace/app/components/icons.tsx b/p11-saas-workspace/app/components/icons.tsx
new file mode 100644
index 0000000..8abde30
--- /dev/null
+++ b/p11-saas-workspace/app/components/icons.tsx
@@ -0,0 +1,77 @@
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps & { size?: number; weight?: string };
+
+function Glyph({ children, size = 20, weight, ...props }: IconProps) {
+ return (
+
+ );
+}
+
+export const ArrowRight = (props: IconProps) => (
+
+
+);
+export const WarningCircle = (props: IconProps) => (
+
+
+);
+export const CheckCircle = (props: IconProps) => (
+
+
+);
+export const Shield = (props: IconProps) => (
+
+
+);
+export const Folder = (props: IconProps) => (
+
+
+);
+export const Users = (props: IconProps) => (
+
+
+);
+export const CreditCard = (props: IconProps) => (
+
+
+);
+export const Inbox = (props: IconProps) => (
+
+
+);
+export const ChevronDown = (props: IconProps) => (
+
+
+);
diff --git a/p11-saas-workspace/app/components/shell.tsx b/p11-saas-workspace/app/components/shell.tsx
index 6159cb9..a4cb60a 100644
--- a/p11-saas-workspace/app/components/shell.tsx
+++ b/p11-saas-workspace/app/components/shell.tsx
@@ -1,14 +1,14 @@
-import { Form, Link } from "react-router";
-import cedarlingMark from "../../src/web/assets/cedarling-mark.png";
-import cedarlingWordmark from "../../src/web/assets/cedarling-wordmark-dark.webp";
-import { ArrowRight, WarningCircle } from "../../src/web/icons.tsx";
+import { Form, Link, useNavigation } from "react-router";
+import cedarlingMark from "../assets/cedarling-mark.png";
+import cedarlingWordmark from "../assets/cedarling-wordmark-dark.webp";
+import { useDisclosure } from "../hooks/use-disclosure.ts";
+import { ArrowRight, CheckCircle, WarningCircle } from "./icons.tsx";
export const title =
"P11 - Securing Active-Tenant Switching in a SaaS Workspace with Cedarling";
-export const subtitle =
- "Resolve authority again when the organization changes.";
+export const subtitle = "Check current access when switching organizations.";
-export const personas = [
+const personas = [
{
id: "maya",
initials: "MA",
@@ -27,6 +27,7 @@ export function BrandRail({
identity?: { initials: string; name: string; detail: string };
csrfToken?: string;
}>) {
+ const menuRef = useDisclosure();
return (
@@ -38,7 +39,7 @@ export function BrandRail({
{identity && csrfToken ? (
-
- Auditor view
Current inventory
+Stock reported by the Inventory Auditor.
+
-
+ | Warehouse | Item | -Available | +On hand |
|---|
-
-
- Selected transfer
-
- {skuLabel(selected.skuId)}
--
-
- Route -
- - {warehouseLabel(selected.sourceId)} →{" "} - {warehouseLabel(selected.destinationId)} - -
- Quantity -
- {selected.quantity} units -
- Version -
- {selected.version} -
-
-
-
-
-
-
-
-
-
- )}
- {selected.status === "in_transit" && (
-
-
-
-
- )}
- {selected.status === "received" && (
- - Stock movement is complete. -
- )} - +Select a transfer
diff --git a/p10-warehouse-workloads/src/web/TransferDetails.tsx b/p10-warehouse-workloads/src/web/TransferDetails.tsx new file mode 100644 index 0000000..fc9e5d3 --- /dev/null +++ b/p10-warehouse-workloads/src/web/TransferDetails.tsx @@ -0,0 +1,136 @@ +import { + skuLabel, + type WorkloadId, + warehouseLabel, +} from "../shared/catalog.ts"; +import type { Transfer, Workspace } from "../shared/types.ts"; +import type { MutationInput } from "./command-attempt.ts"; + +export function TransferDetails({ + transfer, + inventory, + busy, + onRun, +}: Readonly<{ + transfer: Transfer; + inventory: Workspace["inventory"]; + busy: boolean; + onRun: ( + workload: WorkloadId, + command: MutationInput, + success: string, + ) => Promise
+
+
+
+
+ {transfer.status.replace("_", " ")}
+
+ {skuLabel(transfer.skuId)}
+
+ Transfer {transfer.id} · version {transfer.version}
+
-
+
- From +
- {warehouseLabel(transfer.sourceId)} +
- To +
- {warehouseLabel(transfer.destinationId)} +
- Quantity +
- {quantity} +
+
+
+
+
+
+ -
+ {(["planned", "in_transit", "received"] as const).map((status) => (
+
- + {status.replace("_", " ")} + + ))} +
Current stock
+-
+
- {warehouseLabel(transfer.sourceId)} +
- {stock(transfer.sourceId) ?? "Unavailable"} on hand +
- {warehouseLabel(transfer.destinationId)} +
- {stock(transfer.destinationId) ?? "Unavailable"} on hand +
+
+
+
+ Stock movement is complete.
+ ) : ( ++ {releasing ? "Release source stock" : "Confirm destination receipt"} +
++ {releasing + ? `Release ${quantity} from ${warehouseLabel(warehouse)} to put this transfer in transit.` + : `Confirm arrival to add ${quantity} to ${warehouseLabel(warehouse)}.`} +
+ {action(warehouse, true)} +
+
+ Try another workload
++ {warehouseLabel(otherWarehouse)} is not this transfer's{" "} + {releasing ? "source" : "destination"}. The baseline permits its + request so we can compare the result after adding Cedarling. +
+ {action(otherWarehouse, false)} +{subtitle}
+
);
}
-export function Outcome({ children }: { children: React.ReactNode }) {
+type NoticeTone = "info" | "success" | "error";
+
+export function Outcome({
+ children,
+ tone = "info",
+ requestId,
+}: Readonly<{
+ children: React.ReactNode;
+ tone?: NoticeTone;
+ requestId?: string | undefined;
+}>) {
+ return (
+
+
@@ -68,13 +84,37 @@ export function ProgramFooter() {
return (
);
@@ -88,7 +128,6 @@ export function Login() {
+
+
+ {identity.name}
+ {identity.detail}
+
+
+
Choose a tutorial identity
-Compare the same workspace across four identities.
+
+
+ );
+}
+
+export function EmptyState({
+ icon,
+ title: heading,
+ children,
+}: Readonly<{
+ icon?: React.ReactNode;
+ title: string;
+ children?: React.ReactNode;
+}>) {
return (
-
+ {children}
+ {requestId ? (
+ Reference: {requestId}
+ ) : null}
+
+
- {children}
+ >;
+}>) {
+ const switcher = useFetcher();
+ const switcherRef = useDisclosure();
+ const activeMembership = memberships.find(
+ (membership) => membership.organizationId === selection.organizationId,
+ );
+
+ return (
+
+ );
+}
+
+export function ProjectList({
+ organizationId,
+ projects,
+ activeProjectId,
+}: Readonly<{
+ organizationId: string;
+ projects: readonly Pick<
+ Project,
+ "id" | "organizationId" | "name" | "version"
+ >[];
+ activeProjectId?: string;
+}>) {
+ if (!projects.length) {
+ return (
+ ();
+ const hydrated = useHydrated();
+ const available = candidates.find((item) => item.state === "available");
+ const [recipient, setRecipient] = useState(available?.id ?? "");
+ useEffect(() => {
+ if (
+ !candidates.some(
+ (item) => item.id === recipient && item.state === "available",
+ )
+ ) {
+ setRecipient(available?.id ?? "");
+ }
+ }, [candidates, available?.id, recipient]);
+ useExpiries(
+ invitations
+ .filter((item) => item.state === "pending")
+ .map((item) => item.expiresAt),
+ );
+
+ return (
+ ();
+ const hydrated = useHydrated();
+ return (
+
+
+ );
+}
diff --git a/p11-saas-workspace/app/context.ts b/p11-saas-workspace/app/context.ts
index fe27e3c..c854bc9 100644
--- a/p11-saas-workspace/app/context.ts
+++ b/p11-saas-workspace/app/context.ts
@@ -1,22 +1,21 @@
-import { createContext, type RouterContextProvider } from "react-router";
-import type { AppConfig } from "../src/server/config.ts";
-import type { AppDatabase } from "../src/server/database.ts";
-import type { SessionManager } from "../src/server/session.ts";
-import type { WorkspaceService } from "../src/server/service.ts";
+import { createContext as createReactContext } from "react";
+import { createContext } from "react-router";
+import type { SessionManager } from "../server/auth/session.ts";
+import type { AppDatabase } from "../server/data/database.ts";
+import type { RequestService } from "../server/http/requests.ts";
+import type { WorkspaceService } from "../server/workspace/service.ts";
export type RequestServices = Readonly<{
- config: AppConfig;
database: AppDatabase;
sessions: SessionManager;
workspace: WorkspaceService;
+ requests: RequestService;
requestId: string;
nonce: string;
}>;
export const requestServicesContext = createContext();
-export function services(
- context: Readonly,
-): RequestServices {
- return context.get(requestServicesContext);
-}
+export const DocumentNonceContext = createReactContext(
+ undefined,
+);
diff --git a/p11-saas-workspace/app/entry.client.tsx b/p11-saas-workspace/app/entry.client.tsx
new file mode 100644
index 0000000..2297442
--- /dev/null
+++ b/p11-saas-workspace/app/entry.client.tsx
@@ -0,0 +1,17 @@
+import { StrictMode, startTransition } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+import { DocumentNonceContext } from "./context.ts";
+
+const nonce = document.querySelector("script[nonce]")?.nonce;
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+
+ ,
+ );
+});
diff --git a/p11-saas-workspace/app/entry.server.tsx b/p11-saas-workspace/app/entry.server.tsx
index fb7e306..c494209 100644
--- a/p11-saas-workspace/app/entry.server.tsx
+++ b/p11-saas-workspace/app/entry.server.tsx
@@ -1,57 +1 @@
-import { PassThrough } from "node:stream";
-import { createReadableStreamFromReadable } from "@react-router/node";
-import type { EntryContext, RouterContextProvider } from "react-router";
-import { ServerRouter } from "react-router";
-import { renderToPipeableStream } from "react-dom/server";
-import { requestServicesContext } from "./context.ts";
-
-export const streamTimeout = 5_000;
-
-export default function handleRequest(
- request: Request,
- responseStatusCode: number,
- responseHeaders: Headers,
- routerContext: EntryContext,
- loadContext: RouterContextProvider,
-): Promise | Response {
- if (request.method.toUpperCase() === "HEAD") {
- return new Response(null, {
- status: responseStatusCode,
- headers: responseHeaders,
- });
- }
- const nonce = loadContext.get(requestServicesContext).nonce;
- return new Promise((resolve, reject) => {
- let shellRendered = false;
- let timeout: ReturnType | undefined;
- const { pipe, abort } = renderToPipeableStream(
- (null);
+ useEffect(() => {
+ const closeOnEscape = (event: KeyboardEvent) => {
+ if (event.key !== "Escape" || !ref.current?.open) return;
+ ref.current.open = false;
+ ref.current.querySelector("summary")?.focus();
+ };
+ const closeOutside = (event: PointerEvent) => {
+ if (
+ event.target instanceof Node &&
+ ref.current &&
+ !ref.current.contains(event.target)
+ ) {
+ ref.current.open = false;
+ }
+ };
+ document.addEventListener("keydown", closeOnEscape);
+ document.addEventListener("pointerdown", closeOutside);
+ return () => {
+ document.removeEventListener("keydown", closeOnEscape);
+ document.removeEventListener("pointerdown", closeOutside);
+ };
+ }, []);
+ return ref;
+}
diff --git a/p11-saas-workspace/app/hooks/use-expiries.ts b/p11-saas-workspace/app/hooks/use-expiries.ts
new file mode 100644
index 0000000..ec96e5d
--- /dev/null
+++ b/p11-saas-workspace/app/hooks/use-expiries.ts
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { useRevalidator } from "react-router";
+
+/** Update expiry guidance once at each deadline; the server still validates every action. */
+export function useExpiries(
+ deadlines: readonly string[],
+ initialTime = 0,
+): number {
+ const [now, setNow] = useState(initialTime);
+ const { revalidate } = useRevalidator();
+ const key = deadlines.join("|");
+ useEffect(() => {
+ const current = Date.now();
+ setNow(current);
+ const next = key
+ .split("|")
+ .map(Date.parse)
+ .filter((time) => time > current)
+ .sort((a, b) => a - b)[0];
+ if (next === undefined) return;
+ const timer = setTimeout(
+ () => {
+ setNow(Date.now());
+ void revalidate();
+ },
+ Math.min(next - current + 25, 2_147_483_647),
+ );
+ return () => clearTimeout(timer);
+ }, [key, revalidate]);
+ return now;
+}
diff --git a/p11-saas-workspace/app/hooks/use-hydrated.ts b/p11-saas-workspace/app/hooks/use-hydrated.ts
new file mode 100644
index 0000000..769843c
--- /dev/null
+++ b/p11-saas-workspace/app/hooks/use-hydrated.ts
@@ -0,0 +1,7 @@
+import { useEffect, useState } from "react";
+
+export function useHydrated(): boolean {
+ const [hydrated, setHydrated] = useState(false);
+ useEffect(() => setHydrated(true), []);
+ return hydrated;
+}
diff --git a/p11-saas-workspace/app/root.tsx b/p11-saas-workspace/app/root.tsx
index e68c77d..caeecbd 100644
--- a/p11-saas-workspace/app/root.tsx
+++ b/p11-saas-workspace/app/root.tsx
@@ -1,3 +1,4 @@
+import { useContext } from "react";
import {
isRouteErrorResponse,
Links,
@@ -5,57 +6,81 @@ import {
Outlet,
Scripts,
ScrollRestoration,
- useLoaderData,
} from "react-router";
import type { Route } from "./+types/root";
-import { sessionView } from "./server.ts";
import {
BrandRail,
ProgramFooter,
+ RouteProgress,
ServiceError,
subtitle,
title,
} from "./components/shell.tsx";
-import "../src/web/styles.css";
+import { DocumentNonceContext, requestServicesContext } from "./context.ts";
+import stylesheet from "./styles/styles.css?url";
+
+export const links: Route.LinksFunction = () => [
+ { rel: "stylesheet", href: stylesheet },
+];
export const meta: Route.MetaFunction = () => [
{ title: `${title} | Cedarling Tutorials` },
{ name: "description", content: subtitle },
];
-export async function loader({ request, context }: Route.LoaderArgs) {
- return { session: await sessionView(request, context) };
+export async function loader({ request, context, params }: Route.LoaderArgs) {
+ const runtime = context.get(requestServicesContext);
+ try {
+ return {
+ session: await runtime.requests.sessionView(
+ request,
+ params.organizationId,
+ ),
+ };
+ } catch (error) {
+ return context.get(requestServicesContext).requests.loaderFailure(error);
+ }
}
export function Layout({ children }: { children: React.ReactNode }) {
+ const nonce = useContext(DocumentNonceContext);
return (
- ();
+export default function Root({
+ loaderData: { session },
+}: Route.ComponentProps) {
if (!session) return
+ {icon ? (
+
+ ) : null}
+ {heading}
+ {children ?
);
}
+
+export function RouteProgress() {
+ const navigation = useNavigation();
+ return (
+
+ );
+}
diff --git a/p11-saas-workspace/app/components/workspace.tsx b/p11-saas-workspace/app/components/workspace.tsx
new file mode 100644
index 0000000..d671b60
--- /dev/null
+++ b/p11-saas-workspace/app/components/workspace.tsx
@@ -0,0 +1,488 @@
+import { useEffect, useState } from "react";
+import { Link, NavLink, useFetcher } from "react-router";
+import { useDisclosure } from "../hooks/use-disclosure.ts";
+import { useExpiries } from "../hooks/use-expiries.ts";
+import { useHydrated } from "../hooks/use-hydrated.ts";
+import type { action as issueAction } from "../routes/organizations/issue-invitation.ts";
+import type { action as switchAction } from "../routes/organizations/switch.ts";
+import type {
+ Invitation,
+ InvitationCandidate,
+ Membership,
+ Project,
+} from "../types/contracts.ts";
+import { errorNotice } from "../utils/messages.ts";
+import { displayTime } from "../utils/time.ts";
+import {
+ CheckCircle,
+ ChevronDown,
+ CreditCard,
+ Folder,
+ Inbox,
+ Shield,
+ Users,
+} from "./icons.tsx";
+import { EmptyState, Outcome } from "./shell.tsx";
+
+export function WorkspaceSidebar({
+ organizationId,
+ memberships,
+ selection,
+ csrfToken,
+ switchKeys,
+}: Readonly<{
+ organizationId: string | null;
+ memberships: readonly Membership[];
+ selection: Readonly<{ organizationId: string | null; version: number }>;
+ csrfToken: string;
+ switchKeys: Readonly{children}
: null}-
+ {members.map((member) => {
+ const name = member.principalName ?? "Current member";
+ return (
+
- + + {name} + Workspace seat + + {member.role} + + ); + })} +
-
+ {invitations.map((item) => (
+
- + + {item.targetName} + + {item.state === "pending" + ? `Expires ${displayTime(item.expiresAt)}` + : item.state === "expired" + ? `Expired ${displayTime(item.expiresAt)}` + : item.state === "accepted" + ? "Invitation accepted" + : "Invitation revoked"} + + + {item.role} + + {item.state} + + + ))} +
+
+
+
+
+ {canInvite ? (
+
+
+
+
+
+
+
+
+
+
+
+
+ {!available ? (
+
+ {invitation.data.ok ? (
+
+ ) : null}
+
+ ) : null}
+
+ );
+}
+
+function InvitationToken({ token }: Readonly<{ token: string }>) {
+ const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">(
+ "idle",
+ );
+ async function copy() {
+ try {
+ await navigator.clipboard.writeText(token);
+ setCopyState("copied");
+ } catch {
+ setCopyState("failed");
+ }
+ }
+ return (
+
+
+ Members
+ {members.length} active +
+
+ Invitations
+ Invitations expire after 15 minutes. ++ Everyone listed is already a member or has a pending invitation. +
+ ) : null} + {invitation.data ? ( +
+
+ );
+}
+
+export function OpenWorkspace({
+ organizationId,
+ organizationName,
+ csrfToken,
+ selectionVersion,
+ commandKey,
+}: Readonly<{
+ organizationId: string;
+ organizationName: string;
+ csrfToken: string;
+ selectionVersion: number;
+ commandKey: string;
+}>) {
+ const open = useFetcherInvitation created. Share this token with your teammate.
+
+
+
+ {copyState === "copied"
+ ? "Token copied."
+ : copyState === "failed"
+ ? "Copy is unavailable. Select the token and copy it manually."
+ : ""}
+
+ {token}
+
+
+
+
+
+
+
+
+ {open.data ? (
+
+ {errorNotice(open.data.error, open.data.requestId)}
+
+ ) : null}
+
+ );
+}
+
+export function PageHeader({
+ title,
+ description,
+ children,
+}: Readonly<{
+ title: string;
+ description: string;
+ children?: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+ {title}
+{description}
+
+ ();
- return (
-
-
- );
-}
diff --git a/p11-saas-workspace/app/routes/health.ts b/p11-saas-workspace/app/routes/health.ts
deleted file mode 100644
index 217b411..0000000
--- a/p11-saas-workspace/app/routes/health.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Route } from "./+types/health";
-import { services } from "../context.ts";
-
-export async function loader({ context }: Route.LoaderArgs) {
- const runtime = services(context);
- await runtime.database.health();
- return Response.json({
- status: "ok",
- service: "p11-saas-workspace",
- authorizationMode: "permissive",
- });
-}
diff --git a/p11-saas-workspace/app/routes/home.tsx b/p11-saas-workspace/app/routes/home.tsx
index 08210be..01db4b4 100644
--- a/p11-saas-workspace/app/routes/home.tsx
+++ b/p11-saas-workspace/app/routes/home.tsx
@@ -1,20 +1,27 @@
import { redirect } from "react-router";
-import type { Route } from "./+types/home";
import { Login } from "../components/shell.tsx";
-import { sessionView } from "../server.ts";
+import { requestServicesContext } from "../context.ts";
+import type { Route } from "./+types/home";
export async function loader({ request, context }: Route.LoaderArgs) {
- const session = await sessionView(request, context);
- if (!session) return null;
- if (session.user.id === "user-imani") throw redirect("/support");
- if (session.user.id === "user-lena" && session.memberships.length === 0) {
- throw redirect("/invitations");
+ const runtime = context.get(requestServicesContext);
+ try {
+ const session = await runtime.sessions.optional(request);
+ if (!session) return null;
+ const workspace = await runtime.workspace.workspace(session.principal);
+ if (workspace.selection.organizationId) {
+ throw redirect(
+ `/organizations/${workspace.selection.organizationId}/projects`,
+ );
+ }
+ if (workspace.memberships.length) throw redirect("/invitations");
+ const approvals = await runtime.workspace.supportApprovals(
+ session.principal,
+ );
+ throw redirect(approvals.length ? "/support" : "/invitations");
+ } catch (error) {
+ return runtime.requests.loaderFailure(error);
}
- throw redirect(
- session.activeOrganizationId
- ? `/organizations/${session.activeOrganizationId}/projects`
- : "/invitations",
- );
}
export default function Home() {
diff --git a/p11-saas-workspace/app/routes/invitations.tsx b/p11-saas-workspace/app/routes/invitations.tsx
deleted file mode 100644
index 839a866..0000000
--- a/p11-saas-workspace/app/routes/invitations.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { useFetcher, useLoaderData } from "react-router";
-import type { Route } from "./+types/invitations";
-import { services } from "../context.ts";
-import { authenticated, commandKey, loaderFailure } from "../server.ts";
-import { Outcome } from "../components/shell.tsx";
-
-export async function loader({ request, context }: Route.LoaderArgs) {
- const runtime = services(context);
- try {
- const session = await authenticated(request, context);
- const invitations = await runtime.workspace.invitationsFor(
- session.principal,
- );
- return {
- csrfToken: session.csrfToken,
- invitations,
- commandKeys: Object.fromEntries(
- invitations.map((item) => [item.id, commandKey()]),
- ),
- };
- } catch (error) {
- loaderFailure(error, runtime.requestId);
- }
-}
-
-export default function Invitations() {
- const data = useLoaderData();
- const accept = useFetcher();
- return (
-
-
-
- {item.organizationId}
-
- {item.role} · {item.state} · v{item.version}
-
-
-
-
-
-
-
- ))
- ) : (
-
- {"error" in accept.data
- ? `${String(accept.data.error)} · ${String(accept.data.requestId)}`
- : "Invitation accepted once. Organization was not selected."}
-
- ) : null}
-
-
- );
-}
diff --git a/p11-saas-workspace/app/routes/invitations/accept.ts b/p11-saas-workspace/app/routes/invitations/accept.ts
new file mode 100644
index 0000000..0ded86a
--- /dev/null
+++ b/p11-saas-workspace/app/routes/invitations/accept.ts
@@ -0,0 +1,30 @@
+import { requestServicesContext } from "../../context.ts";
+import type { Route } from "./+types/accept";
+
+export async function action({ request, context, params }: Route.ActionArgs) {
+ const runtime = context.get(requestServicesContext);
+ try {
+ const { session, form } = await runtime.requests.mutation(request);
+ const token = runtime.requests.input.invitationToken(
+ runtime.requests.input.field(form, "token"),
+ );
+ const invitation = await runtime.workspace.acceptInvitation(
+ session.principal,
+ runtime.requestId,
+ {
+ invitationId: runtime.requests.input.identifier(
+ params.invitationId,
+ "invitation_id",
+ ),
+ token,
+ expectedVersion: runtime.requests.input.version(form),
+ idempotencyKey: runtime.requests.input.idempotencyKey(
+ runtime.requests.input.field(form, "idempotencyKey"),
+ ),
+ },
+ );
+ return { ok: true as const, invitation, requestId: runtime.requestId };
+ } catch (error) {
+ return runtime.requests.actionFailure(error);
+ }
+}
diff --git a/p11-saas-workspace/app/routes/invitations/index.tsx b/p11-saas-workspace/app/routes/invitations/index.tsx
new file mode 100644
index 0000000..037cac0
--- /dev/null
+++ b/p11-saas-workspace/app/routes/invitations/index.tsx
@@ -0,0 +1,187 @@
+import { Link, useFetcher, useOutletContext } from "react-router";
+import { Inbox } from "../../components/icons.tsx";
+import { EmptyState, Outcome } from "../../components/shell.tsx";
+import { OpenWorkspace, PageHeader } from "../../components/workspace.tsx";
+import { requestServicesContext } from "../../context.ts";
+import { useExpiries } from "../../hooks/use-expiries.ts";
+import { useHydrated } from "../../hooks/use-hydrated.ts";
+import { errorNotice } from "../../utils/messages.ts";
+import { displayTime } from "../../utils/time.ts";
+import type { WorkspaceContext } from "../workspace/layout.tsx";
+import type { Route } from "./+types/index";
+import type { action as acceptAction } from "./accept.ts";
+
+export async function loader({ request, context }: Route.LoaderArgs) {
+ const runtime = context.get(requestServicesContext);
+ try {
+ const session = await runtime.requests.authenticated(request);
+ const invitations = await runtime.workspace.invitationsFor(
+ session.principal,
+ );
+ return {
+ renderedAt: Date.now(),
+ invitations,
+ commandKeys: Object.fromEntries(
+ invitations.map((item) => [item.id, runtime.requests.commandKey()]),
+ ),
+ };
+ } catch (error) {
+ return runtime.requests.loaderFailure(error);
+ }
+}
+
+export default function Invitations({
+ loaderData: data,
+}: Route.ComponentProps) {
+ const workspace = useOutletContext();
+ const accept = useFetcher();
+ const hydrated = useHydrated();
+ const now = useExpiries(
+ data.invitations
+ .filter((item) => item.state === "pending")
+ .map((item) => item.expiresAt),
+ data.renderedAt,
+ );
+ return (
+ ();
- const invitation = useFetcher();
- const switcher = useFetcher();
- const activeMembership = data.memberships.find(
- (item) => item.organizationId === data.organizationId,
- );
- return (
- ();
+ const organizationName =
+ workspace?.memberships.find(
+ (membership) => membership.organizationId === organizationId,
+ )?.organizationName ?? organizationId;
+ const seatUsage =
+ billing.seats > 0
+ ? Math.min(100, Math.round((activeSeats / billing.seats) * 100))
+ : 0;
+ return (
+ ();
+ const activeOrganization = workspace.memberships.find(
+ (membership) => membership.organizationId === data.organizationId,
+ );
+ const organizationName =
+ activeOrganization?.organizationName ?? data.organizationId;
+ return (
+ ();
+ const activeOrganization = workspace.memberships.find(
+ (membership) => membership.organizationId === data.project.organizationId,
+ );
+ return (
+ (null);
+ const appliedSave = useRef(0);
+ const dirty = fields.name !== draft.name || fields.body !== draft.body;
+ const navigation = useNavigation();
+ const saving = navigation.state === "submitting";
+ useBlocker(
+ ({ currentLocation, nextLocation }) =>
+ dirty &&
+ currentLocation.pathname !== nextLocation.pathname &&
+ !window.confirm("Discard your unsaved project changes?"),
+ );
+ useBeforeUnload((event) => {
+ if (dirty) {
+ event.preventDefault();
+ event.returnValue = "";
+ }
+ });
+ useEffect(() => {
+ if (
+ result?.ok &&
+ result.project.id === data.project.id &&
+ result.project.version > appliedSave.current
+ ) {
+ appliedSave.current = result.project.version;
+ setDraft(result.project);
+ setFields({ name: result.project.name, body: result.project.body });
+ }
+ }, [result, data.project.id]);
+ useEffect(() => {
+ // Organization switching and logout use forms outside this editor.
+ const confirmLeaving = (event: SubmitEvent) => {
+ if (!dirty || event.target === formRef.current) return;
+ const target = event.target;
+ if (!(target instanceof HTMLFormElement)) return;
+ const path = new URL(target.action, location.href).pathname;
+ if (!path.endsWith("/switch") && path !== "/auth/logout") return;
+ if (!window.confirm("Discard your unsaved project changes?")) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ };
+ document.addEventListener("submit", confirmLeaving, true);
+ return () => document.removeEventListener("submit", confirmLeaving, true);
+ }, [dirty]);
+ return (
+ <>
+
Your invitations
- {data.invitations.length ? ( - data.invitations.map((item) => ( -No invitations.
- )} - {accept.data && typeof accept.data === "object" ? ( -
+
+
+ {data.invitations.length ? (
+ data.invitations.map((item) => {
+ const state =
+ item.state === "pending" && Date.parse(item.expiresAt) <= now
+ ? "expired"
+ : item.state;
+ const membership = workspace.memberships.find(
+ (member) => member.organizationId === item.organizationId,
+ );
+ return (
+
+
+
+ ) : state === "accepted" ? (
+ <>
+
+ );
+ })
+ ) : (
+
+ {!accept.data.ok
+ ? errorNotice(accept.data.error, accept.data.requestId)
+ : "Invitation accepted. Choose a workspace to continue."}
+
+ ) : null}
+
+
+ );
+}
diff --git a/p11-saas-workspace/app/routes/issue-invitation.ts b/p11-saas-workspace/app/routes/issue-invitation.ts
deleted file mode 100644
index 29f9fb7..0000000
--- a/p11-saas-workspace/app/routes/issue-invitation.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Route } from "./+types/issue-invitation";
-import { services } from "../context.ts";
-import { actionFailure, field, mutation, routeId, version } from "../server.ts";
-import {
- idempotencyKey,
- identifier,
- inviteRole,
-} from "../../src/server/validation.ts";
-
-export async function action({ request, context, params }: Route.ActionArgs) {
- const runtime = services(context);
- try {
- const { session, form } = await mutation(request, context);
- const result = await runtime.workspace.issueInvitation(
- session.principal,
- runtime.requestId,
- {
- organizationId: routeId(params.organizationId, "organization_id"),
- targetPrincipalId: identifier(
- field(form, "targetPrincipalId"),
- "target_principal_id",
- ),
- role: inviteRole(field(form, "role")),
- expectedSelectionVersion: version(form),
- idempotencyKey: idempotencyKey(field(form, "idempotencyKey")),
- },
- );
- return { ok: true as const, ...result, requestId: runtime.requestId };
- } catch (error) {
- return actionFailure(error, runtime.requestId);
- }
-}
diff --git a/p11-saas-workspace/app/routes/open-support.ts b/p11-saas-workspace/app/routes/open-support.ts
deleted file mode 100644
index 4c9efba..0000000
--- a/p11-saas-workspace/app/routes/open-support.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Route } from "./+types/open-support";
-import { services } from "../context.ts";
-import { actionFailure, field, mutation, routeId, version } from "../server.ts";
-import { idempotencyKey } from "../../src/server/validation.ts";
-
-export async function action({ request, context, params }: Route.ActionArgs) {
- const runtime = services(context);
- try {
- const { session, form } = await mutation(request, context);
- const approval = await runtime.workspace.openSupport(
- session.principal,
- runtime.requestId,
- routeId(params.approvalId, "approval_id"),
- version(form),
- idempotencyKey(field(form, "idempotencyKey")),
- );
- return { ok: true as const, approval, requestId: runtime.requestId };
- } catch (error) {
- return actionFailure(error, runtime.requestId);
- }
-}
diff --git a/p11-saas-workspace/app/routes/organization.tsx b/p11-saas-workspace/app/routes/organization.tsx
deleted file mode 100644
index d2f3767..0000000
--- a/p11-saas-workspace/app/routes/organization.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { Link, Outlet, useFetcher, useLoaderData } from "react-router";
-import type { Route } from "./+types/organization";
-import { services } from "../context.ts";
-import {
- authenticated,
- commandKey,
- loaderFailure,
- routeId,
-} from "../server.ts";
-import { Outcome } from "../components/shell.tsx";
-
-export async function loader({ request, context, params }: Route.LoaderArgs) {
- const runtime = services(context);
- try {
- const session = await authenticated(request, context);
- const organizationId = routeId(params.organizationId, "organization_id");
- const [workspace, projects, members, invitations] = await Promise.all([
- runtime.workspace.workspace(session.principal),
- runtime.workspace.listProjects(
- session.principal,
- runtime.requestId,
- organizationId,
- ),
- runtime.workspace.members(
- session.principal,
- runtime.requestId,
- organizationId,
- ),
- runtime.workspace.invitations(
- session.principal,
- runtime.requestId,
- organizationId,
- ),
- ]);
- return {
- organizationId,
- projects,
- members,
- invitations,
- memberships: workspace.memberships,
- selection: workspace.selection,
- csrfToken: session.csrfToken,
- switchKeys: Object.fromEntries(
- workspace.memberships.map((membership) => [
- membership.organizationId,
- commandKey(),
- ]),
- ),
- invitationKey: commandKey(),
- };
- } catch (error) {
- loaderFailure(error, runtime.requestId);
- }
-}
-
-export default function Organization() {
- const data = useLoaderData+ Choose a workspace from the menu, or open an accepted invitation + below. +
+ ) : null} +
+
+
+ {item.organizationName ?? item.organizationId}
+
+ Invited as {item.role}
+
+
+ {state}
+
+
+ {state === "pending" ? (
+ + Expires {displayTime(item.expiresAt)} +
+ + + + + ++ You accepted this invitation. + {membership + ? "" + : " Ask an admin for a new invitation if you need access again."} +
+ {membership ? ( + workspace.selection.organizationId === + item.organizationId ? ( + + Go to workspace + + ) : ( ++ {state === "expired" + ? `This invitation expired ${displayTime(item.expiresAt)}.` + : "This invitation was revoked."}{" "} + Ask a workspace admin for a new invitation. +
+ )} +
-
-
-
-
- );
-}
diff --git a/p11-saas-workspace/app/routes/organizations/billing.tsx b/p11-saas-workspace/app/routes/organizations/billing.tsx
new file mode 100644
index 0000000..cbe0535
--- /dev/null
+++ b/p11-saas-workspace/app/routes/organizations/billing.tsx
@@ -0,0 +1,95 @@
+import { Link, useOutletContext } from "react-router";
+import { PageHeader } from "../../components/workspace.tsx";
+import { requestServicesContext } from "../../context.ts";
+import type { WorkspaceContext } from "../workspace/layout.tsx";
+import type { Route } from "./+types/billing";
+
+export async function loader({ request, context, params }: Route.LoaderArgs) {
+ const runtime = context.get(requestServicesContext);
+ try {
+ const session = await runtime.requests.authenticated(request);
+ const organizationId = runtime.requests.input.identifier(
+ params.organizationId,
+ "organization_id",
+ );
+ const billing = await runtime.workspace.billing(
+ session.principal,
+ runtime.requestId,
+ organizationId,
+ );
+ return {
+ organizationId,
+ billing,
+ };
+ } catch (error) {
+ return runtime.requests.loaderFailure(error);
+ }
+}
+
+export default function Billing({
+ loaderData: { billing, organizationId },
+}: Route.ComponentProps) {
+ const { activeSeats } = billing;
+ const workspace = useOutletContext
-
-
-
-
-
-
-
-
-
-
- Billing
-
- Projects
- - {activeMembership?.organizationName ?? data.organizationId} - -
+
+
+ Return to projects
+
+
+
+
+
+
+ {seatUsage}%
+
+
+
+ );
+}
diff --git a/p11-saas-workspace/app/routes/organizations/issue-invitation.ts b/p11-saas-workspace/app/routes/organizations/issue-invitation.ts
new file mode 100644
index 0000000..7847180
--- /dev/null
+++ b/p11-saas-workspace/app/routes/organizations/issue-invitation.ts
@@ -0,0 +1,33 @@
+import { requestServicesContext } from "../../context.ts";
+import type { Route } from "./+types/issue-invitation";
+
+export async function action({ request, context, params }: Route.ActionArgs) {
+ const runtime = context.get(requestServicesContext);
+ try {
+ const { session, form } = await runtime.requests.mutation(request);
+ const result = await runtime.workspace.issueInvitation(
+ session.principal,
+ runtime.requestId,
+ {
+ organizationId: runtime.requests.input.identifier(
+ params.organizationId,
+ "organization_id",
+ ),
+ targetPrincipalId: runtime.requests.input.identifier(
+ runtime.requests.input.field(form, "targetPrincipalId"),
+ "target_principal_id",
+ ),
+ role: runtime.requests.input.inviteRole(
+ runtime.requests.input.field(form, "role"),
+ ),
+ expectedSelectionVersion: runtime.requests.input.version(form),
+ idempotencyKey: runtime.requests.input.idempotencyKey(
+ runtime.requests.input.field(form, "idempotencyKey"),
+ ),
+ },
+ );
+ return { ok: true as const, ...result, requestId: runtime.requestId };
+ } catch (error) {
+ return runtime.requests.actionFailure(error);
+ }
+}
diff --git a/p11-saas-workspace/app/routes/organizations/members.tsx b/p11-saas-workspace/app/routes/organizations/members.tsx
new file mode 100644
index 0000000..d84372d
--- /dev/null
+++ b/p11-saas-workspace/app/routes/organizations/members.tsx
@@ -0,0 +1,77 @@
+import { useOutletContext } from "react-router";
+import { PageHeader, TeamPanels } from "../../components/workspace.tsx";
+import { requestServicesContext } from "../../context.ts";
+import type { Invitation, InvitationCandidate } from "../../types/contracts.ts";
+import type { WorkspaceContext } from "../workspace/layout.tsx";
+import type { Route } from "./+types/members";
+
+export async function loader({ request, context, params }: Route.LoaderArgs) {
+ const runtime = context.get(requestServicesContext);
+ try {
+ const session = await runtime.requests.authenticated(request);
+ const organizationId = runtime.requests.input.identifier(
+ params.organizationId,
+ "organization_id",
+ );
+ const members = await runtime.workspace.members(
+ session.principal,
+ runtime.requestId,
+ organizationId,
+ );
+ let invitations: readonly Invitation[] = [];
+ let candidates: readonly InvitationCandidate[] = [];
+ let canInvite = true;
+ try {
+ const setup = await runtime.workspace.invitationSetup(
+ session.principal,
+ runtime.requestId,
+ organizationId,
+ );
+ invitations = setup.invitations;
+ candidates = setup.candidates;
+ } catch (error) {
+ if (!runtime.requests.isDenied(error)) throw error;
+ canInvite = false;
+ }
+ return {
+ organizationId,
+ members,
+ invitations,
+ candidates,
+ canInvite,
+ invitationKey: runtime.requests.commandKey(),
+ };
+ } catch (error) {
+ return runtime.requests.loaderFailure(error);
+ }
+}
+
+export default function Members({ loaderData: data }: Route.ComponentProps) {
+ const workspace = useOutletContext
+
+
+ Plan
+ {billing.plan}
+
+
+ Seats
+
+ {activeSeats}
+ / {billing.seats}
+
+
+
+ Monthly
+ ${(billing.monthlyCents / 100).toFixed(2)}
+
+
+
+ {seatUsage}%
+ Seat usage
+ Based on active workspace members ++ {activeSeats} active members out of {billing.seats} seats. +
+
+
+ {data.members.length} active
+
+
+ );
+}
diff --git a/p11-saas-workspace/app/routes/organizations/project.tsx b/p11-saas-workspace/app/routes/organizations/project.tsx
new file mode 100644
index 0000000..d0b91f8
--- /dev/null
+++ b/p11-saas-workspace/app/routes/organizations/project.tsx
@@ -0,0 +1,238 @@
+import { useEffect, useRef, useState } from "react";
+import {
+ Form,
+ useBeforeUnload,
+ useBlocker,
+ useNavigation,
+ useOutletContext,
+} from "react-router";
+import { Outcome } from "../../components/shell.tsx";
+import { ProjectList } from "../../components/workspace.tsx";
+import { requestServicesContext } from "../../context.ts";
+import { useHydrated } from "../../hooks/use-hydrated.ts";
+import { errorNotice } from "../../utils/messages.ts";
+import type { WorkspaceContext } from "../workspace/layout.tsx";
+import type { Route } from "./+types/project";
+
+export async function loader({ request, context, params }: Route.LoaderArgs) {
+ const runtime = context.get(requestServicesContext);
+ try {
+ const session = await runtime.requests.authenticated(request);
+ const project = await runtime.workspace.readProject(
+ session.principal,
+ runtime.requestId,
+ runtime.requests.input.identifier(
+ params.organizationId,
+ "organization_id",
+ ),
+ runtime.requests.input.identifier(params.projectId, "project_id"),
+ );
+ const projects = await runtime.workspace.listProjects(
+ session.principal,
+ runtime.requestId,
+ project.organizationId,
+ );
+ return {
+ project,
+ projects,
+ commandKey: runtime.requests.commandKey(),
+ };
+ } catch (error) {
+ return runtime.requests.loaderFailure(error);
+ }
+}
+
+export async function action({ request, context, params }: Route.ActionArgs) {
+ const runtime = context.get(requestServicesContext);
+ try {
+ const { session, form } = await runtime.requests.mutation(request);
+ const project = await runtime.workspace.writeProject(
+ session.principal,
+ runtime.requestId,
+ {
+ organizationId: runtime.requests.input.identifier(
+ params.organizationId,
+ "organization_id",
+ ),
+ projectId: runtime.requests.input.identifier(
+ params.projectId,
+ "project_id",
+ ),
+ name: runtime.requests.input.projectName(
+ runtime.requests.input.field(form, "name"),
+ ),
+ body: runtime.requests.input.projectBody(
+ runtime.requests.input.field(form, "body"),
+ ),
+ expectedVersion: runtime.requests.input.version(form),
+ idempotencyKey: runtime.requests.input.idempotencyKey(
+ runtime.requests.input.field(form, "idempotencyKey"),
+ ),
+ },
+ );
+ return { ok: true as const, project, requestId: runtime.requestId };
+ } catch (error) {
+ return runtime.requests.actionFailure(error);
+ }
+}
+
+export default function Project({
+ loaderData: data,
+ actionData: result,
+}: Route.ComponentProps) {
+ const workspace = useOutletContext
+
+
+
+
+
+ );
+}
+
+function ProjectEditor({
+ data,
+ result,
+ csrfToken,
+}: Readonly<{
+ data: Route.ComponentProps["loaderData"];
+ result: Route.ComponentProps["actionData"];
+ csrfToken: string;
+}>) {
+ const [draft, setDraft] = useState(data.project);
+ const [fields, setFields] = useState({
+ name: data.project.name,
+ body: data.project.body,
+ });
+ const hydrated = useHydrated();
+ const formRef = useRef
+
+
+ {data.projects.length}{" "}
+ {data.projects.length === 1 ? "project" : "projects"}
+
+