fix(ws): Expose active nav item on initial Workspaces page load (kubeflow#419)

Signed-off-by: Jenny <[email protected]>

Author: jenny-s51

workspaces/frontend/src/app/AppRoutes.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, Navigate } from 'react-router-dom';
 import { AppRoutePaths } from '~/app/routes';
 import { WorkspaceForm } from '~/app/pages/Workspaces/Form/WorkspaceForm';
 import { NotFound } from './pages/notFound/NotFound';
@@ -64,7 +64,7 @@ const AppRoutes: React.FC = () => {
       <Route path={AppRoutePaths.workspaceEdit} element={<WorkspaceForm />} />
       <Route path={AppRoutePaths.workspaces} element={<Workspaces />} />
       <Route path={AppRoutePaths.workspaceKinds} element={<WorkspaceKinds />} />
-      <Route path="/" element={<Workspaces />} />
+      <Route path="/" element={<Navigate to={AppRoutePaths.workspaces} replace />} />
       <Route path="*" element={<NotFound />} />
       {
         // TODO: Remove the linter skip when we implement authentication

workspaces/frontend/src/app/NavSidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import {
   Brand,
   Nav,
@@ -12,13 +12,20 @@ import {
 import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRoutes';
 import { isMUITheme, LOGO_LIGHT } from './const';
 
-const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => (
-  <NavItem key={item.label} data-id={item.label} itemId={item.label}>
-    <NavLink to={item.path} data-testid={`nav-link-${item.path}`}>
-      {item.label}
-    </NavLink>
-  </NavItem>
-);
+const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => {
+  const location = useLocation();
+
+  // With the redirect in place, we can now use a simple path comparison.
+  const isActive = location.pathname === item.path;
+
+  return (
+    <NavItem isActive={isActive} key={item.label} data-id={item.label} itemId={item.label}>
+      <NavLink to={item.path} data-testid={`nav-link-${item.path}`}>
+        {item.label}
+      </NavLink>
+    </NavItem>
+  );
+};
 
 const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
   const { children } = item;

workspaces/frontend/src/shared/style/MUI-theme.scss

@@ -543,10 +543,10 @@
   --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
   --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
 
-  &.active {
+  &.pf-m-current {
     border-left: 3px solid var(--mui-palette-common-white);
-    --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
-    --pf-v6-c-nav__link--hover--Color: var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--m-current--BackgroundColor: #ffffff1b;
+    --pf-v6-c-nav__link--m-current--Color: var(--mui-palette-common-white);
   }
 
   &.pf-v6-c-brand {