feat(shell): give every Dashboard page a real URL
CI / verify (pull_request) Successful in 1m7s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 49s
CI / migration-smoke (pull_request) Successful in 2m17s
CI / image-build (pull_request) Successful in 1m10s
CI / deploy-smoke (same-origin) (pull_request) Successful in 45s
CI / package-publication (pull_request) Successful in 57s
CI / deploy-smoke (split) (pull_request) Successful in 2m37s
CI / verify (pull_request) Successful in 1m7s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 49s
CI / migration-smoke (pull_request) Successful in 2m17s
CI / image-build (pull_request) Successful in 1m10s
CI / deploy-smoke (same-origin) (pull_request) Successful in 45s
CI / package-publication (pull_request) Successful in 57s
CI / deploy-smoke (split) (pull_request) Successful in 2m37s
The Dashboard had one address. The API served the page only at `/`, both reference proxies forwarded only `/`, and the open module lived in React state, so a refresh went back to the first module, nothing could be bookmarked, and Back left the Dashboard (DESIGN.md §2.7). ADR 0057 makes the address bar the source of truth: - `/` is a host-owned Overview, now the landing page; `/modules/<id>` mounts that module. An id the server's navigation does not list shows "This page isn't available" and loads nothing; any other Dashboard address is a host-owned "Page not found". - `/modules`, `/settings`, and `/account` are reserved whole, from one list (`@ekklesia/shell/dashboard-routes`) that the shell's router and the API's page routes both read. The API serves the same frozen page, ETag, and security headers anywhere inside them; look-alikes and other methods stay the sanitized 404. - A small host-owned history replaces the selected-module state, built in the entry point so it stays the only file touching `window`. Navigation items are real links; modified clicks are left to the browser. Focus moves to the page after an in-place change, and the tab is named after the page. - Sign-in still happens in place with no return value (ADR 0034), so a deep link opens its own page after sign-in. - Both reference Caddyfiles forward the new paths; the deploy smoke now reloads a module's address through the real proxy and requires it to mount again. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
44430b5d59
commit
9afe9376c4
@@ -3,6 +3,7 @@ import { act } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { HostApp } from "../src/browser/HostApp.js";
|
||||
import { createBrowserHostHistory } from "../src/browser/host-history.js";
|
||||
import type { EkklesiaHostConfig } from "../src/host-protocol.js";
|
||||
import { isolatedMountTarget, isolatedText } from "./support/isolated-dom.js";
|
||||
|
||||
@@ -122,12 +123,27 @@ function artifact(id: string, version: string, options: ArtifactOptions = {}) {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the shell over the real (happy-dom) address bar. `path` opens that page first, exactly as
|
||||
* a deep link or a refresh would (ADR 0057); left out, the shell opens wherever the location already
|
||||
* is — `/`, the Overview, unless a test put something else there.
|
||||
*/
|
||||
async function render(
|
||||
config: EkklesiaHostConfig,
|
||||
importModule?: (url: string) => Promise<unknown>,
|
||||
path?: string,
|
||||
): Promise<void> {
|
||||
if (path !== undefined) {
|
||||
window.history.replaceState(null, "", path);
|
||||
}
|
||||
await act(async () => {
|
||||
root.render(<HostApp config={config} {...(importModule ? { importModule } : {})} />);
|
||||
root.render(
|
||||
<HostApp
|
||||
config={config}
|
||||
history={createBrowserHostHistory(window)}
|
||||
{...(importModule ? { importModule } : {})}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -268,6 +284,11 @@ describe("Ekklesia shell — bootstrap", () => {
|
||||
});
|
||||
|
||||
describe("Ekklesia shell — browser authentication", () => {
|
||||
// These tests exercise a mounted module, so each opens the default fixture's own page, exactly as
|
||||
// its deep link would (ADR 0057). The Dashboard root is the Overview and mounts nothing.
|
||||
beforeEach(() => {
|
||||
window.history.replaceState(null, "", "/modules/example");
|
||||
});
|
||||
it("renders only a neutral loading state until principal resolves and fetches no navigation early", async () => {
|
||||
let releasePrincipal: (() => void) | undefined;
|
||||
const principalPending = new Promise<void>((resolve) => {
|
||||
@@ -539,6 +560,11 @@ describe("Ekklesia shell — browser authentication", () => {
|
||||
});
|
||||
|
||||
describe("Ekklesia shell — logout and session expiration", () => {
|
||||
// These tests exercise a mounted module, so each opens the default fixture's own page, exactly as
|
||||
// its deep link would (ADR 0057). The Dashboard root is the Overview and mounts nothing.
|
||||
beforeEach(() => {
|
||||
window.history.replaceState(null, "", "/modules/example");
|
||||
});
|
||||
it("unmounts module UI and closes realtime before completing server-side logout", async () => {
|
||||
let releaseSignOut: (() => void) | undefined;
|
||||
const signOutPending = new Promise<void>((resolve) => {
|
||||
@@ -856,10 +882,8 @@ describe("Ekklesia shell — Dashboard navigation", () => {
|
||||
|
||||
const labels = [...container.querySelectorAll("h2")].map((heading) => heading.textContent);
|
||||
expect(labels).toEqual(["Planning", "Media"]);
|
||||
const buttons = [...container.querySelectorAll("nav button")].map(
|
||||
(button) => button.textContent,
|
||||
);
|
||||
expect(buttons).toEqual(["Calendar", "Livestream", "Video"]);
|
||||
const links = [...container.querySelectorAll("nav section a")].map((link) => link.textContent);
|
||||
expect(links).toEqual(["Calendar", "Livestream", "Video"]);
|
||||
});
|
||||
|
||||
it("renders ungrouped modules alongside groups, under a heading", async () => {
|
||||
@@ -897,14 +921,29 @@ describe("Ekklesia shell — Dashboard navigation", () => {
|
||||
expect(query("group-media")?.textContent).toBe("Media");
|
||||
});
|
||||
|
||||
it("selects the first module in the arranged order and marks it active", async () => {
|
||||
it("opens on the Overview rather than choosing a module, whatever the arrangement", async () => {
|
||||
const importModule = vi.fn(async () => artifact("video", "0.1.0"));
|
||||
await render(
|
||||
{ apiBaseUrl, fetch: platformFetch({ groups: [mediaGroup(), planningGroup()] }) },
|
||||
async (url) => artifact(url.includes("/video/") ? "video" : "other", "0.1.0"),
|
||||
importModule,
|
||||
);
|
||||
|
||||
expect(query("select-video")?.getAttribute("aria-current")).toBe("page");
|
||||
expect(query("select-livestream")?.getAttribute("aria-current")).toBeNull();
|
||||
expect(query("select-overview")?.getAttribute("aria-current")).toBe("page");
|
||||
expect(query("select-video")?.getAttribute("aria-current")).toBeNull();
|
||||
expect(query("module-container")).toBeNull();
|
||||
expect(importModule).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("marks the open module's link as the current page", async () => {
|
||||
await render(
|
||||
{ apiBaseUrl, fetch: platformFetch({ groups: [mediaGroup(), planningGroup()] }) },
|
||||
async () => artifact("livestream", "2.0.0"),
|
||||
"/modules/livestream",
|
||||
);
|
||||
|
||||
expect(query("select-livestream")?.getAttribute("aria-current")).toBe("page");
|
||||
expect(query("select-video")?.getAttribute("aria-current")).toBeNull();
|
||||
expect(query("select-overview")?.getAttribute("aria-current")).toBeNull();
|
||||
});
|
||||
|
||||
it("mounts a module selected from inside a group, using the descriptor the group carried", async () => {
|
||||
@@ -915,6 +954,7 @@ describe("Ekklesia shell — Dashboard navigation", () => {
|
||||
requested.push(url);
|
||||
return artifact(url.includes("/calendar/") ? "calendar" : "video", "0.1.0");
|
||||
},
|
||||
"/modules/video",
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
@@ -972,6 +1012,11 @@ describe("Ekklesia shell — Dashboard navigation", () => {
|
||||
});
|
||||
|
||||
describe("Ekklesia shell — mount lifecycle", () => {
|
||||
// These tests exercise a mounted module, so each opens the default fixture's own page, exactly as
|
||||
// its deep link would (ADR 0057). The Dashboard root is the Overview and mounts nothing.
|
||||
beforeEach(() => {
|
||||
window.history.replaceState(null, "", "/modules/example");
|
||||
});
|
||||
it("keeps fixed shell tracks while module content changes size", async () => {
|
||||
await render({ apiBaseUrl, fetch: platformFetch() }, async () => artifact("example", "0.1.0"));
|
||||
|
||||
@@ -1140,6 +1185,11 @@ describe("Ekklesia shell — mount lifecycle", () => {
|
||||
});
|
||||
|
||||
describe("Ekklesia shell — failure is host-owned", () => {
|
||||
// These tests exercise a mounted module, so each opens the default fixture's own page, exactly as
|
||||
// its deep link would (ADR 0057). The Dashboard root is the Overview and mounts nothing.
|
||||
beforeEach(() => {
|
||||
window.history.replaceState(null, "", "/modules/example");
|
||||
});
|
||||
it("renders its own error when the artifact cannot be imported", async () => {
|
||||
await render({ apiBaseUrl, fetch: platformFetch() }, async () => {
|
||||
throw new Error("/srv/ekklesia/modules/example/dist/ui/index.js is missing");
|
||||
|
||||
Reference in New Issue
Block a user