From c26728d24ae5d1d4269159a933e1244ce0e6e5c5 Mon Sep 17 00:00:00 2001
From: Riku Rauhala <riku@rauhala.io>
Date: Mon, 2 Dec 2024 15:15:12 +0200
Subject: [PATCH] [Navigation bar] Fix issues

---
 cypress/e2e/Users.js                                      | 3 +--
 .../material/NavigationBar/NavigationButton.tsx           | 8 +++-----
 .../src/components/material/NavigationBar/index.tsx       | 7 ++++---
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/cypress/e2e/Users.js b/cypress/e2e/Users.js
index 0fbd500f0..0b5ac3b60 100644
--- a/cypress/e2e/Users.js
+++ b/cypress/e2e/Users.js
@@ -72,8 +72,7 @@ describe('Users tests', () => {
       })
 
       it("only the mocked user's programmes are visible", () => {
-        cy.get('[data-cy=nav-bar-button-studyProgramme]').click()
-        cy.get('[data-cy=nav-bar-button-class]').click()
+        cy.visit('/populations')
         cy.contains('label', 'Study programme')
           .siblings()
           .within(() => {
diff --git a/services/frontend/src/components/material/NavigationBar/NavigationButton.tsx b/services/frontend/src/components/material/NavigationBar/NavigationButton.tsx
index 7aaa67ef2..df1dad04b 100644
--- a/services/frontend/src/components/material/NavigationBar/NavigationButton.tsx
+++ b/services/frontend/src/components/material/NavigationBar/NavigationButton.tsx
@@ -14,7 +14,7 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
   const location = useLocation()
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
-  const { key, label, items } = item
+  const { label, items } = item
 
   const showItem = (subItemKey: string) => {
     if (['class', 'completedCoursesSearch', 'overview'].includes(subItemKey)) {
@@ -64,7 +64,6 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
       <>
         <Typography
           color="inherit"
-          data-cy={`nav-bar-button-${key}`}
           onClick={event => setAnchorEl(event.currentTarget)}
           sx={{ display: 'flex' }}
           variant="button"
@@ -77,10 +76,9 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
               showItem(subItem.key) && (
                 <MenuItem
                   component={Link}
-                  data-cy={`nav-bar-button-${subItem.key}`}
                   key={subItem.path}
                   onClick={() => setAnchorEl(null)}
-                  selected={location.pathname.includes(subItem.path)}
+                  selected={location.pathname?.includes(subItem.path)}
                   to={subItem.path}
                 >
                   {subItem.label}
@@ -93,7 +91,7 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
   }
 
   return (
-    <Typography color="inherit" data-cy={`nav-bar-button-${key}`} variant="button">
+    <Typography color="inherit" variant="button">
       {label}
     </Typography>
   )
diff --git a/services/frontend/src/components/material/NavigationBar/index.tsx b/services/frontend/src/components/material/NavigationBar/index.tsx
index 8454245a7..b379f29d4 100644
--- a/services/frontend/src/components/material/NavigationBar/index.tsx
+++ b/services/frontend/src/components/material/NavigationBar/index.tsx
@@ -89,15 +89,16 @@ export const NavigationBar = () => {
             }}
           >
             <OodikoneLogo />
-            {!isLoading && (
+            {!isLoading && location && (
               <Tabs textColor="inherit" value={activeTab} variant="scrollable">
                 {Object.entries(visibleNavigationItems).map(([key, item]) => (
                   <Tab
-                    component={Link}
+                    component={item.path ? Link : 'div'}
+                    data-cy={`nav-bar-button-${key}`}
                     key={key}
                     label={<NavigationButton item={item} />}
                     sx={{ '&:hover': { color: 'inherit' } }}
-                    to={item.path}
+                    to={item.path ?? ''}
                   />
                 ))}
               </Tabs>