From 133c0a2b66943b7e38f95b871de371230287c356 Mon Sep 17 00:00:00 2001
From: Mark Janssen <20283+praseodym@users.noreply.github.com>
Date: Mon, 3 Feb 2025 21:32:23 +0100
Subject: [PATCH] Use React Router `NavLink` component

---
 .../app/component/navbar/NavBar.module.css    |  2 +-
 frontend/app/component/navbar/NavBar.test.tsx | 40 ++---------
 frontend/app/component/navbar/NavBarLinks.tsx | 69 +++----------------
 3 files changed, 19 insertions(+), 92 deletions(-)

diff --git a/frontend/app/component/navbar/NavBar.module.css b/frontend/app/component/navbar/NavBar.module.css
index 4ac078025..2284e76b0 100644
--- a/frontend/app/component/navbar/NavBar.module.css
+++ b/frontend/app/component/navbar/NavBar.module.css
@@ -39,7 +39,7 @@
       padding-left: 0;
     }
 
-    > span:global(.active) {
+    > :global(.active) {
       border-bottom: 4px solid var(--accent-orange);
       padding-bottom: calc(0.5rem - 4px);
       font-weight: bold;
diff --git a/frontend/app/component/navbar/NavBar.test.tsx b/frontend/app/component/navbar/NavBar.test.tsx
index f4566e3cd..4ea1f6d0d 100644
--- a/frontend/app/component/navbar/NavBar.test.tsx
+++ b/frontend/app/component/navbar/NavBar.test.tsx
@@ -69,44 +69,18 @@ describe("NavBar", () => {
     expect(screen.queryByText("Gemeenteraadsverkiezingen 2026")).toBeVisible();
   });
 
-  test("top level management links for '/elections'", async () => {
+  test.each([
+    { pathname: "/elections", hash: "#administratorcoordinator" },
+    { pathname: "/users", hash: "#administratorcoordinator" },
+    { pathname: "/workstations", hash: "#administratorcoordinator" },
+    { pathname: "/logs", hash: "#administratorcoordinator" },
+  ])("top level management links for $pathname", async () => {
     await renderNavBar({ pathname: "/elections", hash: "#administratorcoordinator" });
 
-    expect(screen.queryByRole("link", { name: "Verkiezingen" })).not.toBeInTheDocument();
-    expect(screen.queryByText("Verkiezingen")).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Gebruikers" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Werkplekken" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Logs" })).toBeVisible();
-  });
-
-  test("top level management links for '/users'", async () => {
-    await renderNavBar({ pathname: "/users", hash: "#administratorcoordinator" });
-
-    expect(screen.queryByRole("link", { name: "Verkiezingen" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Gebruikers" })).not.toBeInTheDocument();
-    expect(screen.queryByText("Gebruikers")).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Werkplekken" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Logs" })).toBeVisible();
-  });
-
-  test("top level management links for '/workstations'", async () => {
-    await renderNavBar({ pathname: "/workstations", hash: "#administrator" });
-
-    expect(screen.queryByRole("link", { name: "Verkiezingen" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Gebruikers" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Werkplekken" })).not.toBeInTheDocument();
-    expect(screen.queryByText("Werkplekken")).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Logs" })).toBeVisible();
-  });
-
-  test("top level management links for '/logs'", async () => {
-    await renderNavBar({ pathname: "/logs", hash: "#administratorcoordinator" });
-
     expect(screen.queryByRole("link", { name: "Verkiezingen" })).toBeVisible();
     expect(screen.queryByRole("link", { name: "Gebruikers" })).toBeVisible();
     expect(screen.queryByRole("link", { name: "Werkplekken" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Logs" })).not.toBeInTheDocument();
-    expect(screen.queryByText("Logs")).toBeVisible();
+    expect(screen.queryByRole("link", { name: "Logs" })).toBeVisible();
   });
 
   test.each([
diff --git a/frontend/app/component/navbar/NavBarLinks.tsx b/frontend/app/component/navbar/NavBarLinks.tsx
index 0e32ad483..a8e980447 100644
--- a/frontend/app/component/navbar/NavBarLinks.tsx
+++ b/frontend/app/component/navbar/NavBarLinks.tsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router";
+import { Link, NavLink } from "react-router";
 
 import { Election, useElection } from "@kiesraad/api";
 import { t } from "@kiesraad/i18n";
@@ -66,62 +66,15 @@ function ElectionManagementLinks({ location }: NavBarLinksProps) {
   }
 }
 
-function TopLevelManagementLinks({ location }: NavBarLinksProps) {
-  const links = [];
-  if (location.pathname.startsWith("/elections")) {
-    links.push(
-      <span key="elections" className="active">
-        {t("election.title.plural")}
-      </span>,
-    );
-  } else {
-    links.push(
-      <Link key="elections-link" to={`/elections#administratorcoordinator`}>
-        {t("election.title.plural")}
-      </Link>,
-    );
-  }
-  if (location.pathname.startsWith("/users")) {
-    links.push(
-      <span key="users" className="active">
-        {t("users")}
-      </span>,
-    );
-  } else {
-    links.push(
-      <Link key="users-link" to={`/users#administratorcoordinator`}>
-        {t("users")}
-      </Link>,
-    );
-  }
-  if (location.pathname.startsWith("/workstations")) {
-    links.push(
-      <span key="workstations" className="active">
-        {t("workstations.workstations")}
-      </span>,
-    );
-  } else {
-    links.push(
-      <Link key="workstations-link" to={`/workstations#administrator`}>
-        {t("workstations.workstations")}
-      </Link>,
-    );
-  }
-  if (location.pathname.startsWith("/logs")) {
-    links.push(
-      <span key="logs" className="active">
-        {t("logs")}
-      </span>,
-    );
-  } else {
-    links.push(
-      <Link key="logs-link" to={`/logs#administratorcoordinator`}>
-        {t("logs")}
-      </Link>,
-    );
-  }
-
-  return <>{links}</>;
+function TopLevelManagementLinks() {
+  return (
+    <>
+      <NavLink to={"/elections"}>{t("election.title.plural")}</NavLink>
+      <NavLink to={"/users"}>{t("users")}</NavLink>
+      <NavLink to={"/workstations"}>{t("workstations.workstations")}</NavLink>
+      <NavLink to={"/logs"}>{t("logs")}</NavLink>
+    </>
+  );
 }
 
 export function NavBarLinks({ location }: NavBarLinksProps) {
@@ -138,7 +91,7 @@ export function NavBarLinks({ location }: NavBarLinksProps) {
     location.pathname === "/workstations" ||
     location.pathname === "/logs"
   ) {
-    return <TopLevelManagementLinks location={location} />;
+    return <TopLevelManagementLinks />;
   } else {
     return <></>;
   }