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

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 <[email protected]>
feast-dev · Jan 28, 2025 · 1267703 · 1267703
1 parent 8ac6a85
commit 1267703
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 24 deletions.
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`),
         },
       ],