Fix to show topology list view filtered items correctly

frontend/packages/dev-console/src/components/topology/filters/__tests__/useSearchFilter.spec.ts

@@ -1,16 +1,25 @@
 import { testHook } from '../../../../test/test-utils';
 import { useSearchFilter } from '../useSearchFilter';
-import { getTopologySearchQuery } from '../filter-utils';
 
 jest.mock('../filter-utils', () => ({
   getTopologySearchQuery: jest.fn(),
 }));
 
+let mockCurrentSearchQuery = '';
+
+jest.mock('@console/shared', () => {
+  const ActualShared = require.requireActual('@console/shared');
+  return {
+    ...ActualShared,
+    useQueryParams: () => new Map().set('searchQuery', mockCurrentSearchQuery),
+  };
+});
+
 const testUseSearchFilter = (
   text: string | null | undefined,
   searchQuery: string | undefined,
 ): ReturnType<typeof useSearchFilter> => {
-  (getTopologySearchQuery as jest.Mock).mockImplementation(() => searchQuery);
+  mockCurrentSearchQuery = searchQuery;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   return useSearchFilter(text);

frontend/packages/dev-console/src/components/topology/filters/useSearchFilter.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import * as fuzzy from 'fuzzysearch';
 import { toLower } from 'lodash';
-import { getTopologySearchQuery } from './filter-utils';
+import { useQueryParams } from '@console/shared/src';
 
 const fuzzyCaseInsensitive = (a: string, b: string): boolean => fuzzy(toLower(a), toLower(b));
 
 const useSearchFilter = (text: string): [boolean, string] => {
-  const searchQuery = getTopologySearchQuery();
+  const queryParams = useQueryParams();
+  const searchQuery = queryParams.get('searchQuery');
   const filtered = React.useMemo(() => fuzzyCaseInsensitive(searchQuery, text), [
     searchQuery,
     text,

frontend/packages/dev-console/src/components/topology/list-view/TopologyListView.scss

@@ -16,7 +16,7 @@
   overflow-y: auto;
   padding-left: var(--pf-global--spacer--sm);
   -webkit-overflow-scrolling: touch;
-  &.odc-m-filter-active {
+  .odc-m-filter-active & {
     .odc-topology-list-view__kind-row,
     .odc-topology-list-view__item-row,
     .odc-topology-list-view__application-row {