feat(admin): hide public footer and help banner on /admin routes (#3240, #3262)

Author: LucasCharrier

packages/app/src/app/layout.tsx

@@ -4,10 +4,9 @@ import Script from "next/script";
 import { MatomoAnalytics } from "~/modules/analytics";
 import { SessionProviderWrapper } from "~/modules/auth";
 import {
-	Footer,
 	Header,
 	ImpersonateBanner,
-	ResourceBanner,
+	PublicChrome,
 	SkipLinks,
 } from "~/modules/layout";
 import { ProfileModal } from "~/modules/profile";
@@ -59,8 +58,7 @@ export default function RootLayout({
 						<ImpersonateBanner />
 						<Header />
 						{children}
-						<ResourceBanner />
-						<Footer />
+						<PublicChrome />
 						<ProfileModal />
 					</TRPCReactProvider>
 				</SessionProviderWrapper>

packages/app/src/e2e/admin.e2e.ts

@@ -10,6 +10,16 @@ test("admin user can access /admin and sees backoffice page", async ({
 	await expect(page.getByText("administrateur")).toBeVisible();
 });
 
+test("admin routes hide the public footer and help banner", async ({
+	page,
+}) => {
+	await page.goto("/admin");
+	await expect(page.locator("footer#footer")).toHaveCount(0);
+	await expect(
+		page.getByRole("region", { name: "Ressources et aide" }),
+	).toHaveCount(0);
+});
+
 test("admin user can access /admin/impersonate and sees impersonate page", async ({
 	page,
 }) => {

packages/app/src/modules/layout/PublicChrome.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import { Footer } from "./Footer";
+import { ResourceBanner } from "./ResourceBanner";
+
+/**
+ * Renders the public help banner + footer on every route except the backoffice.
+ * Admin pages (`/admin/**`) get a stripped-down chrome so the sidebar + admin
+ * content fill the viewport without competing with public navigation.
+ */
+export function PublicChrome() {
+	const pathname = usePathname();
+	if (pathname?.startsWith("/admin")) {
+		return null;
+	}
+	return (
+		<>
+			<ResourceBanner />
+			<Footer />
+		</>
+	);
+}

packages/app/src/modules/layout/__tests__/PublicChrome.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { usePathname } from "next/navigation";
+import { beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+
+import { PublicChrome } from "../PublicChrome";
+
+vi.mock("../Footer", () => ({
+	Footer: () => <footer data-testid="public-footer">footer</footer>,
+}));
+vi.mock("../ResourceBanner", () => ({
+	ResourceBanner: () => (
+		<section data-testid="public-resource-banner">banner</section>
+	),
+}));
+
+describe("PublicChrome", () => {
+	beforeEach(() => {
+		(usePathname as Mock).mockReturnValue("/");
+	});
+
+	it("renders ResourceBanner + Footer on public routes", () => {
+		render(<PublicChrome />);
+		expect(screen.getByTestId("public-resource-banner")).toBeInTheDocument();
+		expect(screen.getByTestId("public-footer")).toBeInTheDocument();
+	});
+
+	it("renders nothing on /admin", () => {
+		(usePathname as Mock).mockReturnValue("/admin");
+		const { container } = render(<PublicChrome />);
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it("renders nothing on nested /admin/* routes", () => {
+		(usePathname as Mock).mockReturnValue("/admin/declarations");
+		const { container } = render(<PublicChrome />);
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it("renders chrome on non-admin nested routes", () => {
+		(usePathname as Mock).mockReturnValue("/mon-espace/declarations");
+		render(<PublicChrome />);
+		expect(screen.getByTestId("public-footer")).toBeInTheDocument();
+	});
+});

packages/app/src/modules/layout/index.ts

@@ -2,6 +2,7 @@ export { Breadcrumb } from "./Breadcrumb";
 export { Footer } from "./Footer";
 export { Header } from "./Header";
 export { ImpersonateBanner } from "./ImpersonateBanner";
+export { PublicChrome } from "./PublicChrome";
 export { ResourceBanner } from "./ResourceBanner";
 export { DsfrPictogram } from "./shared/DsfrPictogram";
 export { NewTabNotice } from "./shared/NewTabNotice";