milestone 32: task-shaped configuration, file mode as a rendering, config status api

admin/src/shell/AppShell.test.tsx

@@ -1,25 +1,22 @@
-import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
 import { AuthProvider, resetAuthProbeForTests } from "@/auth/store";
 import { createQueryClient } from "@/lib/queryClient";
 import { createAppRouter } from "@/routes";
-import { formatClock } from "@/lib/format";
+import { formatClock, formatTime } from "@/lib/format";
 import { health } from "@/lib/healthFixture";
-import type { Health } from "@/lib/types";
+import type { ConfigStatus, Health } from "@/lib/types";
 
-const NAV_LABELS = [
-	"Overview",
-	"Activity",
-	"Clients",
-	"Groups",
-	"Blocklists",
-	"Rules",
-	"Local DNS",
-	"Upstreams",
-	"Diagnostics",
-	"Settings",
-];
+const NAV_LABELS = ["Overview", "Activity", "Clients", "Diagnostics"];
+const CONFIGURATION_LABELS = ["Protection", "Resolution", "System"];
+/** The pages the redesign folded into the three configuration ones. */
+const GONE_LABELS = ["Groups", "Blocklists", "Rules", "Local DNS", "Upstreams", "Settings"];
+
+const CONFIG_PATH = "/etc/nxdns/config.zon";
+const RECONCILED_AT = 1754899200;
+
+const DATABASE: ConfigStatus = { authority: "database", path: null, reconciled_at: null, restart_pending: false };
 
 const RESPONSES: Record<string, unknown> = {
 	"/api/stats?period=24h": {
@@ -69,6 +66,8 @@ const RESPONSES: Record<string, unknown> = {
 
 /** Null makes the health poll fail, which the nav badge has to treat as unknown. */
 let healthBody: Health | null;
+/** Null makes the config status poll fail, which the shell has to say out loud. */
+let configStatus: ConfigStatus | null;
 
 function stubFetch(extra: (url: string) => Response | null = () => null) {
 	vi.stubGlobal(
@@ -77,6 +76,13 @@ function stubFetch(extra: (url: string) => Response | null = () => null) {
 			const url = String(input);
 			const override = extra(url);
 			if (override !== null) return override;
+			if (url === "/api/config/status") {
+				const failed = configStatus === null;
+				return new Response(JSON.stringify(failed ? { error: "config status unavailable" } : configStatus), {
+					status: failed ? 503 : 200,
+					headers: { "content-type": "application/json" },
+				});
+			}
 			if (url === "/api/health") {
 				const failed = healthBody === null;
 				return new Response(JSON.stringify(failed ? { error: "health unavailable" } : healthBody), {
@@ -117,6 +123,7 @@ beforeEach(() => {
 	sessionStorage.clear();
 	resetAuthProbeForTests();
 	healthBody = health();
+	configStatus = DATABASE;
 	stubFetch();
 });
 
@@ -131,9 +138,82 @@ test("shell renders the overview route with all nav links", async () => {
 
 	const nav = screen.getByRole("navigation", { name: "Main" });
 	expect(nav).toBeTruthy();
-	for (const label of NAV_LABELS) {
+	for (const label of [...NAV_LABELS, ...CONFIGURATION_LABELS]) {
 		expect(screen.getByRole("link", { name: label })).toBeTruthy();
 	}
+	for (const label of GONE_LABELS) {
+		expect(screen.queryByRole("link", { name: label })).toBeNull();
+	}
+});
+
+test("the three configuration pages sit under a labelled group, after the rest", async () => {
+	renderShell();
+	await screen.findByRole("heading", { name: "Overview" });
+
+	const group = screen.getByRole("list", { name: "Configuration" });
+	expect(
+		within(group)
+			.getAllByRole("link")
+			.map((link) => link.textContent),
+	).toEqual(CONFIGURATION_LABELS);
+	// The group is a section of Main, not a nav of its own.
+	const nav = screen.getByRole("navigation", { name: "Main" });
+	expect(nav.contains(group)).toBe(true);
+	const clients = within(nav).getByRole("link", { name: "Clients" });
+	expect(clients.compareDocumentPosition(group) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+});
+
+test("under file authority the nav states the file and when it was loaded", async () => {
+	configStatus = {
+		authority: "managed_file",
+		path: CONFIG_PATH,
+		reconciled_at: RECONCILED_AT,
+		restart_pending: false,
+	};
+	renderShell();
+	await screen.findByRole("heading", { name: "Overview" });
+
+	const line = await screen.findByText(/^File-managed ·/);
+	expect(line.textContent).toBe(`File-managed · ${CONFIG_PATH} · loaded ${formatTime(RECONCILED_AT)}`);
+	const group = screen.getByRole("list", { name: "Configuration" });
+	expect(group.parentElement?.contains(line)).toBe(true);
+});
+
+test("under database authority there is no authority line to read", async () => {
+	renderShell();
+	await screen.findByRole("heading", { name: "Overview" });
+	await screen.findByRole("list", { name: "Configuration" });
+
+	expect(screen.queryByText(/File-managed/)).toBeNull();
+});
+
+test("a pending restart is announced on every page, with no way to dismiss it", async () => {
+	configStatus = { ...DATABASE, restart_pending: true };
+	renderShell();
+
+	const notice = await screen.findByText(/Saved changes are not running yet\. Restart nxdns to apply them\./);
+	expect(within(notice).queryByRole("button")).toBeNull();
+	expect(screen.queryByRole("button", { name: /dismiss/i })).toBeNull();
+});
+
+test("the restart notice is server state, so a browser refresh does not clear it", async () => {
+	configStatus = { ...DATABASE, restart_pending: true };
+	renderShell();
+	await screen.findByText(/Saved changes are not running yet/);
+
+	// A refresh: everything client-side is thrown away and rebuilt from the API.
+	cleanup();
+	renderShell();
+
+	await screen.findByText(/Saved changes are not running yet/);
+});
+
+test("a failed config status is stated rather than passed off as database authority", async () => {
+	configStatus = null;
+	renderShell();
+	await screen.findByRole("heading", { name: "Overview" });
+
+	await screen.findByText(/Configuration status unavailable — file authority and pending restarts cannot be shown\./);
 });
 
 test("mount probe reveals the logout button and a failed logout surfaces inline", async () => {
@@ -162,8 +242,12 @@ test("mount probe reveals the logout button and a failed logout surfaces inline"
 test("the header carries no protection display at all any more", async () => {
 	renderShell();
 	await screen.findByRole("heading", { name: "Overview" });
+	// Scoped to the header: "Protection" is a nav destination now, and that is
+	// not the status pill this test buried.
+	const header = within(document.querySelector("header") as HTMLElement);
 	for (const gone of [/^Protection/, /^Paused/]) {
-		expect(screen.queryByRole("link", { name: gone })).toBeNull();
+		expect(header.queryByRole("link", { name: gone })).toBeNull();
+		expect(header.queryByText(gone)).toBeNull();
 	}
 });