fix: preserve domain when navigating using sidebar (#768)

packages/console/package.json

@@ -127,6 +127,7 @@
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
     "@types/react-dropzone": "^5.1.0",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized": "^9.21.4",
     "@types/serve-static": "^1.7.31",
     "@types/shallowequal": "^0.2.3"

packages/console/src/components/Navigation/NavLinkWithSearch.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { NavLink, NavLinkProps, useLocation } from 'react-router-dom';
+
+interface NavLinkWithSearchProps extends NavLinkProps {
+  preserve?: string[];
+}
+
+/**
+ * A NavLink that preserves the search params from the current location.
+ *
+ * @param preserve - An array of search param keys to preserve. If not specified, all search params will be preserved.
+ */
+export default function NavLinkWithSearch({
+  preserve,
+  ...props
+}: NavLinkWithSearchProps) {
+  const location = useLocation();
+
+  const searchParams = new URLSearchParams(location.search);
+
+  if (preserve && preserve.length) {
+    for (const key of searchParams.keys()) {
+      if (key in preserve) {
+        continue;
+      }
+
+      searchParams.delete(key);
+    }
+  }
+
+  const to = props.to + '?' + searchParams.toString();
+  return <NavLink {...props} to={to} />;
+}

packages/console/src/components/Navigation/ProjectNavigation.tsx

@@ -10,17 +10,13 @@ import { withRouteParams } from 'components/common/withRouteParams';
 import { useProject, useProjects } from 'components/hooks/useProjects';
 import { Project } from 'models/Project/types';
 import * as React from 'react';
-import {
-  matchPath,
-  NavLink,
-  NavLinkProps,
-  RouteComponentProps,
-} from 'react-router-dom';
+import { matchPath, NavLinkProps, RouteComponentProps } from 'react-router-dom';
 import { history } from 'routes/history';
 import { Routes } from 'routes/routes';
 import { MuiLaunchPlanIcon } from '@flyteorg/ui-atoms';
 import { primaryHighlightColor } from 'components/Theme/constants';
 import { ProjectSelector } from './ProjectSelector';
+import NavLinkWithSearch from './NavLinkWithSearch';
 
 interface ProjectNavigationRouteParams {
   domainId?: string;
@@ -159,7 +155,7 @@ const ProjectNavigationImpl: React.FC<ProjectNavigationRouteParams> = ({
       )}
       <div className={styles.navLinksContainer}>
         {Object.values(routes).map(({ isActive, path, icon: Icon, text }) => (
-          <NavLink
+          <NavLinkWithSearch
             activeClassName={styles.navLinkActive}
             className={classnames(commonStyles.linkUnstyled, styles.navLink)}
             isActive={isActive}
@@ -169,7 +165,7 @@ const ProjectNavigationImpl: React.FC<ProjectNavigationRouteParams> = ({
             <Icon className={styles.navLinkIcon} />
             <span className={styles.navLinkText}>{text}</span>
             <ChevronRight className={styles.navLinkChevron} />
-          </NavLink>
+          </NavLinkWithSearch>
         ))}
       </div>
     </>

yarn.lock

@@ -2094,6 +2094,7 @@ __metadata:
     "@types/react": ^16.9.34
     "@types/react-dom": ^16.9.7
     "@types/react-dropzone": ^5.1.0
+    "@types/react-router-dom": ^5.3.3
     "@types/react-virtualized": ^9.21.4
     "@types/serve-static": ^1.7.31
     "@types/shallowequal": ^0.2.3
@@ -5160,6 +5161,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/history@npm:^4.7.11":
+  version: 4.7.11
+  resolution: "@types/history@npm:4.7.11"
+  checksum: c92e2ba407dcab0581a9afdf98f533aa41b61a71133420a6d92b1ca9839f741ab1f9395b17454ba5b88cb86020b70b22d74a1950ccfbdfd9beeaa5459fdc3464
+  languageName: node
+  linkType: hard
+
 "@types/html-minifier-terser@npm:^5.0.0":
   version: 5.1.2
   resolution: "@types/html-minifier-terser@npm:5.1.2"
@@ -5487,6 +5495,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-router-dom@npm:^5.3.3":
+  version: 5.3.3
+  resolution: "@types/react-router-dom@npm:5.3.3"
+  dependencies:
+    "@types/history": ^4.7.11
+    "@types/react": "*"
+    "@types/react-router": "*"
+  checksum: 28c4ea48909803c414bf5a08502acbb8ba414669b4b43bb51297c05fe5addc4df0b8fd00e0a9d1e3535ec4073ef38aaafac2c4a2b95b787167d113bc059beff3
+  languageName: node
+  linkType: hard
+
+"@types/react-router@npm:*":
+  version: 5.1.20
+  resolution: "@types/react-router@npm:5.1.20"
+  dependencies:
+    "@types/history": ^4.7.11
+    "@types/react": "*"
+  checksum: 128764143473a5e9457ddc715436b5d49814b1c214dde48939b9bef23f0e77f52ffcdfa97eb8d3cc27e2c229869c0cdd90f637d887b62f2c9f065a87d6425419
+  languageName: node
+  linkType: hard
+
 "@types/react-test-renderer@npm:>=16.9.0":
   version: 18.0.0
   resolution: "@types/react-test-renderer@npm:18.0.0"