diff --git a/packages/console/package.json b/packages/console/package.json index 33cb4a8bb..3806c16c0 100644 --- a/packages/console/package.json +++ b/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" diff --git a/packages/console/src/components/Navigation/NavLinkWithSearch.tsx b/packages/console/src/components/Navigation/NavLinkWithSearch.tsx new file mode 100644 index 000000000..d832d0196 --- /dev/null +++ b/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 ; +} diff --git a/packages/console/src/components/Navigation/ProjectNavigation.tsx b/packages/console/src/components/Navigation/ProjectNavigation.tsx index f84f213ac..8aeecbd9f 100644 --- a/packages/console/src/components/Navigation/ProjectNavigation.tsx +++ b/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 = ({ )}
{Object.values(routes).map(({ isActive, path, icon: Icon, text }) => ( - = ({ {text} - + ))}
diff --git a/yarn.lock b/yarn.lock index 2f93f770a..e138ac749 100644 --- a/yarn.lock +++ b/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"