fix(header navlinks): link navlinks to path prefix (#25495)

fisjac · web-flow · commit 51c56dd2a0f5 · 2023-10-17T09:45:25.000-07:00
diff --git a/superset-frontend/src/features/home/Menu.test.tsx b/superset-frontend/src/features/home/Menu.test.tsx
@@ -295,7 +295,11 @@ test('should render the environment tag', async () => {
   const {
     data: { environment_tag },
   } = mockedProps;
-  render(<Menu {...mockedProps} />, { useRedux: true, useQueryParams: true });
+  render(<Menu {...mockedProps} />, {
+    useRedux: true,
+    useQueryParams: true,
+    useRouter: true,
+  });
   expect(await screen.findByText(environment_tag.text)).toBeInTheDocument();
 });
 
diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx
@@ -24,7 +24,7 @@ import { getUrlParam } from 'src/utils/urlUtils';
 import { Row, Col, Grid } from 'src/components';
 import { MainNav as DropdownMenu, MenuMode } from 'src/components/Menu';
 import { Tooltip } from 'src/components/Tooltip';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { GenericLink } from 'src/components/GenericLink/GenericLink';
 import Icons from 'src/components/Icons';
 import { useUiConfig } from 'src/components/UiConfigContext';
@@ -186,6 +186,33 @@ export function Menu({
     return () => window.removeEventListener('resize', windowResize);
   }, []);
 
+  enum paths {
+    EXPLORE = '/explore',
+    DASHBOARD = '/dashboard',
+    CHART = '/chart',
+    DATASETS = '/tablemodelview',
+  }
+
+  const defaultTabSelection: string[] = [];
+  const [activeTabs, setActiveTabs] = useState(defaultTabSelection);
+  const location = useLocation();
+  useEffect(() => {
+    const path = location.pathname;
+    switch (true) {
+      case path.startsWith(paths.DASHBOARD):
+        setActiveTabs(['Dashboards']);
+        break;
+      case path.startsWith(paths.CHART) || path.startsWith(paths.EXPLORE):
+        setActiveTabs(['Charts']);
+        break;
+      case path.startsWith(paths.DATASETS):
+        setActiveTabs(['Datasets']);
+        break;
+      default:
+        setActiveTabs(defaultTabSelection);
+    }
+  }, [location.pathname]);
+
   const standalone = getUrlParam(URL_PARAMS.standalone);
   if (standalone || uiConfig.hideNav) return <></>;
 
@@ -268,6 +295,7 @@ export function Menu({
             mode={showMenu}
             data-test="navbar-top"
             className="main-nav"
+            selectedKeys={activeTabs}
           >
             {menu.map((item, index) => {
               const props = {
