Reset topology search filter on namespace change

frontend/packages/dev-console/src/components/topology/TopologyPage.tsx

@@ -3,7 +3,21 @@ import { Helmet } from 'react-helmet';
 import { matchPath, match as RMatch, Link, Redirect } from 'react-router-dom';
 import { Tooltip, Popover, Button } from '@patternfly/react-core';
 import { ListIcon, TopologyIcon, QuestionCircleIcon } from '@patternfly/react-icons';
-import { StatusBox, Firehose, HintBlock, AsyncComponent } from '@console/internal/components/utils';
+import {
+  StatusBox,
+  Firehose,
+  HintBlock,
+  AsyncComponent,
+  removeQueryArgument,
+} from '@console/internal/components/utils';
+
+// FIXME upgrading redux types is causing many errors at this time
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '@console/internal/redux';
+import { getTopologyFilters } from './filters/filter-utils';
+
 import EmptyState from '../EmptyState';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import ProjectsExistWrapper from '../ProjectsExistWrapper';
@@ -14,6 +28,8 @@ import TopologyShortcuts from './TopologyShortcuts';
 import { LAST_TOPOLOGY_VIEW_LOCAL_STORAGE_KEY } from './components/const';
 
 import './TopologyPage.scss';
+import { TOPOLOGY_SEARCH_FILTER_KEY } from './redux/const';
+import { setTopologyFilters } from './redux/action';
 
 export interface TopologyPageProps {
   match: RMatch<{
@@ -70,6 +86,16 @@ export const TopologyPage: React.FC<TopologyPageProps> = ({ match }) => {
     exact: true,
   });
 
+  const dispatch = useDispatch();
+  const displayFilters = useSelector((state: RootState) => getTopologyFilters(state).display);
+
+  const handleNamespaceChange = (ns: string) => {
+    if (ns !== namespace) {
+      removeQueryArgument(TOPOLOGY_SEARCH_FILTER_KEY);
+      dispatch(setTopologyFilters({ display: displayFilters, searchQuery: '' }));
+    }
+  };
+
   React.useEffect(() => setTopologyActiveView(showListView && !showGraphView ? 'list' : 'graph'), [
     showListView,
     showGraphView,
@@ -93,6 +119,7 @@ export const TopologyPage: React.FC<TopologyPageProps> = ({ match }) => {
       <NamespacedPage
         variant={showListView ? NamespacedPageVariants.light : NamespacedPageVariants.default}
         hideApplications={showListView}
+        onNamespaceChange={handleNamespaceChange}
         toolbar={
           <>
             {!showListView && namespace && (

frontend/packages/dev-console/src/components/topology/__tests__/TopologyPage.spec.tsx

@@ -16,6 +16,15 @@ type RenderTopologyProps = React.ComponentProps<typeof renderTopology>;
 let topologyProps: TopologyPageProps;
 let renderTopologyProps: RenderTopologyProps;
 
+jest.mock('react-redux', () => {
+  const ActualReactRedux = require.requireActual('react-redux');
+  return {
+    ...ActualReactRedux,
+    useSelector: jest.fn(),
+    useDispatch: jest.fn(),
+  };
+});
+
 describe('Topology page tests', () => {
   beforeEach(() => {
     topologyProps = {