fix: Render UI navigation items as links instead of buttons (#4970)

peruukki · web-flow · commit 1267703d0994 · 2025-01-27T23:35:21.000-05:00
fix: Render navigation items as links instead of buttons

Using link is semantically correct and improves accessibility, allows
opening the linked pages in another tab etc.

Use react-router-dom Links instead of plain anchors to prevent full page
reloads when navigating.

Signed-off-by: Harri Lehtola &lt;peruukki@hotmail.com&gt;
diff --git a/ui/src/FeastUISansProviders.test.tsx b/ui/src/FeastUISansProviders.test.tsx
@@ -89,7 +89,7 @@ test("routes are reachable", async () => {
 
     const routeRegExp = new RegExp(routeName, "i");
 
-    await user.click(screen.getByRole("button", { name: routeRegExp }));
+    await user.click(screen.getByRole("link", { name: routeRegExp }));
 
     // Should land on a page with the heading
     screen.getByRole("heading", {
@@ -112,7 +112,7 @@ test("features are reachable", async () => {
   await screen.findByText(/Explore this Project/i);
   const routeRegExp = new RegExp("Feature Views", "i");
 
-  await user.click(screen.getByRole("button", { name: routeRegExp }));
+  await user.click(screen.getByRole("link", { name: routeRegExp }));
 
   screen.getByRole("heading", {
     name: "Feature Views",
diff --git a/ui/src/pages/Sidebar.tsx b/ui/src/pages/Sidebar.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 
 import { EuiIcon, EuiSideNav, htmlIdGenerator } from "@elastic/eui";
-import { useNavigate, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { useMatchSubpath } from "../hooks/useMatchSubpath";
 import useLoadRegistry from "../queries/useLoadRegistry";
 import RegistryPathContext from "../contexts/RegistryPathContext";
@@ -19,8 +19,6 @@ const SideNav = () => {
 
   const [isSideNavOpenOnMobile, setisSideNavOpenOnMobile] = useState(false);
 
-  const navigate = useNavigate();
-
   const toggleOpenOnMobile = () => {
     setisSideNavOpenOnMobile(!isSideNavOpenOnMobile);
   };
@@ -57,57 +55,45 @@ const SideNav = () => {
 
   const baseUrl = `${process.env.PUBLIC_URL || ""}/p/${projectName}`;
 
-  const sideNav = [
+  const sideNav: React.ComponentProps<typeof EuiSideNav>['items'] = [
     {
       name: "Home",
       id: htmlIdGenerator("basicExample")(),
-      onClick: () => {
-        navigate(`${baseUrl}/`);
-      },
+      renderItem: props => <Link {...props} to={`${baseUrl}/`} />,
       items: [
         {
           name: dataSourcesLabel,
           id: htmlIdGenerator("dataSources")(),
           icon: <EuiIcon type={DataSourceIcon} />,
-          onClick: () => {
-            navigate(`${baseUrl}/data-source`);
-          },
+          renderItem: props => <Link {...props} to={`${baseUrl}/data-source`} />,
           isSelected: useMatchSubpath(`${baseUrl}/data-source`),
         },
         {
           name: entitiesLabel,
           id: htmlIdGenerator("entities")(),
           icon: <EuiIcon type={EntityIcon} />,
-          onClick: () => {
-            navigate(`${baseUrl}/entity`);
-          },
+          renderItem: props => <Link {...props} to={`${baseUrl}/entity`} />,
           isSelected: useMatchSubpath(`${baseUrl}/entity`),
         },
         {
           name: featureViewsLabel,
           id: htmlIdGenerator("featureView")(),
           icon: <EuiIcon type={FeatureViewIcon} />,
-          onClick: () => {
-            navigate(`${baseUrl}/feature-view`);
-          },
+          renderItem: props => <Link {...props} to={`${baseUrl}/feature-view`} />,
           isSelected: useMatchSubpath(`${baseUrl}/feature-view`),
         },
         {
           name: featureServicesLabel,
           id: htmlIdGenerator("featureService")(),
           icon: <EuiIcon type={FeatureServiceIcon} />,
-          onClick: () => {
-            navigate(`${baseUrl}/feature-service`);
-          },
+          renderItem: props => <Link {...props} to={`${baseUrl}/feature-service`} />,
           isSelected: useMatchSubpath(`${baseUrl}/feature-service`),
         },
         {
           name: savedDatasetsLabel,
           id: htmlIdGenerator("savedDatasets")(),
           icon: <EuiIcon type={DatasetIcon} />,
-          onClick: () => {
-            navigate(`${baseUrl}/data-set`);
-          },
+          renderItem: props => <Link {...props} to={`${baseUrl}/data-set`} />,
           isSelected: useMatchSubpath(`${baseUrl}/data-set`),
         },
       ],
