feat(admin): add sidemenu navigation to backoffice (#3195)

Author: LucasCharrier

packages/app/drizzle/0025_add_user_is_admin.sql

@@ -0,0 +1,2 @@
+-- Add isAdmin flag on user table for backoffice (admin) access control
+ALTER TABLE "app_user" ADD COLUMN IF NOT EXISTS "is_admin" boolean DEFAULT false NOT NULL;

packages/app/drizzle/meta/_journal.json

@@ -176,6 +176,13 @@
 			"when": 1775600000000,
 			"tag": "0024_add_admin_impersonation_events",
 			"breakpoints": true
+		},
+		{
+			"idx": 25,
+			"version": "7",
+			"when": 1775700000000,
+			"tag": "0025_add_user_is_admin",
+			"breakpoints": true
 		}
 	]
 }

packages/app/src/app/admin/layout.tsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import type { ReactNode } from "react";
 
+import { AdminNavigation } from "~/modules/admin";
 import { auth } from "~/server/auth";
 
 export default async function AdminLayout({
@@ -18,5 +19,14 @@ export default async function AdminLayout({
 		redirect("/mon-espace");
 	}
 
-	return <>{children}</>;
+	return (
+		<div className="fr-container fr-py-6w">
+			<div className="fr-grid-row fr-grid-row--gutters">
+				<div className="fr-col-12 fr-col-md-4">
+					<AdminNavigation />
+				</div>
+				<div className="fr-col-12 fr-col-md-8">{children}</div>
+			</div>
+		</div>
+	);
 }

packages/app/src/env.js

@@ -61,9 +61,9 @@ export const env = createEnv({
 		EGAPRO_SUIT_PUBLIC_KEY_PEM: z.string().optional(),
 		/**
 		 * Comma-separated list of emails that should be granted the admin role
-		 * on login. The flag is resolved in the NextAuth JWT callback.
+		 * on login. The flag is then persisted in the `app_user.is_admin` column.
 		 */
-		ADMIN_EMAILS: z.string().min(1),
+		ADMIN_EMAILS: z.string().optional().default(""),
 		// Audit log (issue #3174) — bearer token for the cleanup cron + retention
 		// thresholds (CNIL: 6 months for access logs, 12 months for security logs).
 		// Required (not optional): the /api/audit/cleanup route destroys data, so

packages/app/src/modules/admin/AdminHomePage.tsx

@@ -5,13 +5,13 @@ type Props = {
 
 export function AdminHomePage({ userName, userEmail }: Props) {
 	return (
-		<div className="fr-container fr-py-6w">
+		<>
 			<h1 className="fr-h1">Backoffice</h1>
 			<p className="fr-text--lead">Bienvenue, {userName}.</p>
 			<p>
 				Vous êtes connecté en tant qu'administrateur avec l'adresse{" "}
 				<strong>{userEmail}</strong>.
 			</p>
-		</div>
+		</>
 	);
 }

packages/app/src/modules/admin/AdminNavigation.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const adminLinks = [
+	{ href: "/admin", label: "Accueil" },
+	{ href: "/admin/impersonate", label: "Mimoquer un Siren" },
+] as const;
+
+export function AdminNavigation() {
+	const pathname = usePathname();
+
+	return (
+		<nav aria-labelledby="fr-sidemenu-title" className="fr-sidemenu">
+			<div className="fr-sidemenu__inner">
+				<button
+					aria-controls="fr-sidemenu-wrapper"
+					aria-expanded="false"
+					className="fr-sidemenu__btn"
+					type="button"
+				>
+					Administration
+				</button>
+				<div className="fr-collapse" id="fr-sidemenu-wrapper">
+					<div className="fr-sidemenu__title" id="fr-sidemenu-title">
+						Administration
+					</div>
+					<ul className="fr-sidemenu__list">
+						{adminLinks.map(({ href, label }) => {
+							const isActive =
+								href === "/admin"
+									? pathname === "/admin"
+									: pathname.startsWith(href);
+
+							const itemClass = isActive
+								? "fr-sidemenu__item fr-sidemenu__item--active"
+								: "fr-sidemenu__item";
+
+							return (
+								<li className={itemClass} key={href}>
+									<Link
+										aria-current={isActive ? "page" : undefined}
+										className="fr-sidemenu__link"
+										href={href}
+									>
+										{label}
+									</Link>
+								</li>
+							);
+						})}
+					</ul>
+				</div>
+			</div>
+		</nav>
+	);
+}

packages/app/src/modules/admin/__tests__/AdminNavigation.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { usePathname } from "next/navigation";
+import { beforeEach, describe, expect, it, type Mock } from "vitest";
+
+import { AdminNavigation } from "../AdminNavigation";
+
+describe("AdminNavigation", () => {
+	beforeEach(() => {
+		(usePathname as Mock).mockReturnValue("/admin");
+	});
+
+	it("renders a sidemenu nav with the admin title", () => {
+		render(<AdminNavigation />);
+		expect(
+			screen.getByRole("navigation", { name: "Administration" }),
+		).toBeInTheDocument();
+	});
+
+	it("renders all admin links", () => {
+		render(<AdminNavigation />);
+		expect(screen.getByRole("link", { name: "Accueil" })).toBeInTheDocument();
+		expect(
+			screen.getByRole("link", { name: "Mimoquer un Siren" }),
+		).toBeInTheDocument();
+	});
+
+	it("marks /admin as active when on /admin", () => {
+		(usePathname as Mock).mockReturnValue("/admin");
+		render(<AdminNavigation />);
+		const activeLink = screen.getByRole("link", { name: "Accueil" });
+		expect(activeLink).toHaveAttribute("aria-current", "page");
+		expect(activeLink.closest("li")).toHaveClass(
+			"fr-sidemenu__item",
+			"fr-sidemenu__item--active",
+		);
+		expect(
+			screen.getByRole("link", { name: "Mimoquer un Siren" }),
+		).not.toHaveAttribute("aria-current");
+	});
+
+	it("marks /admin/impersonate as active when on that page", () => {
+		(usePathname as Mock).mockReturnValue("/admin/impersonate");
+		render(<AdminNavigation />);
+		expect(
+			screen.getByRole("link", { name: "Mimoquer un Siren" }),
+		).toHaveAttribute("aria-current", "page");
+		expect(screen.getByRole("link", { name: "Accueil" })).not.toHaveAttribute(
+			"aria-current",
+		);
+	});
+});

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

@@ -1,4 +1,5 @@
 export { AdminHomePage } from "./AdminHomePage";
+export { AdminNavigation } from "./AdminNavigation";
 export { ImpersonatePage } from "./impersonate/ImpersonatePage";
 export {
 	type ImpersonateSearchInput,

packages/app/src/modules/layout/Header/HeaderQuickAccessLinks.tsx

@@ -30,6 +30,7 @@ export function HeaderQuickAccessLinks({ session }: Props) {
 			<li>
 				{session?.user ? (
 					<UserAccountMenu
+						isAdmin={session.user.isAdmin}
 						userEmail={session.user.email ?? ""}
 						userName={session.user.name ?? "Utilisateur"}
 						userPhone={session.user.phone ?? undefined}

packages/app/src/modules/layout/Header/UserAccountMenu.tsx

@@ -10,13 +10,15 @@ interface UserAccountMenuProps {
 	userName: string;
 	userEmail: string;
 	userPhone?: string;
+	isAdmin?: boolean;
 }
 
 /** Dropdown menu in the header for authenticated users. */
 export function UserAccountMenu({
 	userName,
 	userEmail,
 	userPhone,
+	isAdmin,
 }: UserAccountMenuProps) {
 	const [isOpen, setIsOpen] = useState(false);
 	const wrapperRef = useRef<HTMLDivElement>(null);
@@ -121,6 +123,16 @@ export function UserAccountMenu({
 					</div>
 
 					<div className={styles.links}>
+						{isAdmin && (
+							<Link
+								className={styles.menuLink}
+								href="/admin"
+								onClick={close}
+								role="menuitem"
+							>
+								Administration
+							</Link>
+						)}
 						<Link
 							className={styles.menuLink}
 							href="/mon-espace/mes-entreprises"