Hide global filter when disabled.

RedHatInsights · Apr 25, 2024 · 7a69b49 · 7a69b49
1 parent 38bb1f8
commit 7a69b49
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 16 deletions.
diff --git a/src/components/GlobalFilter/GlobalFilter.tsx b/src/components/GlobalFilter/GlobalFilter.tsx
@@ -66,9 +66,6 @@ const GlobalFilter = ({ hasAccess }: { hasAccess: boolean }) => {
     }),
     shallowEqual
   );
-  const globalFilterHidden = useSelector(({ globalFilter: { globalFilterHidden } }: ReduxState) => globalFilterHidden);
-  const activeModule = useAtomValue(activeModuleAtom);
-  const isDisabled = globalFilterHidden || !activeModule;
 
   const { filter, chips, selectedTags, setValue, filterTagsBy } = (
     useTagsFilter as unknown as (
@@ -110,16 +107,15 @@ const GlobalFilter = ({ hasAccess }: { hasAccess: boolean }) => {
   }, []);
 
   useEffect(() => {
-    if (hasAccess && !isDisabled) {
+    if (hasAccess) {
       loadTags(selectedTags, filterTagsBy);
       selectTags(selectedTags);
     }
-  }, [selectedTags, filterTagsBy, hasAccess, isDisabled]);
+  }, [selectedTags, filterTagsBy, hasAccess]);
 
   return (
     <GlobalFilterDropdown
       allowed={hasAccess}
-      isDisabled={isDisabled}
       filter={filter}
       chips={[...chips.filter(({ key }) => key === 'Workloads'), ...chips.filter(({ key }) => key !== 'Workloads')]}
       setValue={setValue}
@@ -141,10 +137,16 @@ const GlobalFilterWrapper = () => {
   // FIXME: Clean up the global filter display flag
   const isLanding = pathname === '/';
   const isAllowed = isGlobalFilterAllowed();
+  const globalFilterHidden = useSelector(({ globalFilter: { globalFilterHidden } }: ReduxState) => globalFilterHidden);
+  const activeModule = useAtomValue(activeModuleAtom);
+  const isDisabled = globalFilterHidden || !activeModule;
   const isGlobalFilterEnabled = useMemo(() => {
+    if (isDisabled) {
+      return false;
+    }
     const globalFilterAllowed = isAllowed || globalFilterRemoved;
     return !isLanding && (globalFilterAllowed || Boolean(localStorage.getItem('chrome:experimental:global-filter')));
-  }, [isLanding, isAllowed]);
+  }, [isLanding, isAllowed, isDisabled]);
 
   useEffect(() => {
     let mounted = true;

diff --git a/src/components/GlobalFilter/GlobalFilterMenu.tsx b/src/components/GlobalFilter/GlobalFilterMenu.tsx
@@ -56,7 +56,7 @@ export type SelectedTags = {
 
 export type GlobalFilterDropdownProps = {
   allowed: boolean;
-  isDisabled: boolean;
+  isDisabled?: boolean;
   filter: {
     filterBy?: string | number;
     onFilter?: (value: string) => void;
@@ -74,7 +74,7 @@ export type GlobalFilterDropdownProps = {
 
 export const GlobalFilterDropdown: React.FunctionComponent<GlobalFilterDropdownProps> = ({
   allowed,
-  isDisabled,
+  isDisabled = false,
   filter,
   chips,
   setValue,

diff --git a/src/components/RootApp/ScalprumRoot.test.js b/src/components/RootApp/ScalprumRoot.test.js
@@ -4,6 +4,7 @@ import ScalprumRoot from './ScalprumRoot';
 import { act, render, waitFor } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
+import { Provider as JotaiProvider } from 'jotai';
 
 jest.mock('../../utils/common', () => {
   const utils = jest.requireActual('../../utils/common');
@@ -47,6 +48,19 @@ window.ResizeObserver =
 import * as routerDom from 'react-router-dom';
 import { initializeVisibilityFunctions } from '../../utils/VisibilitySingleton';
 import ChromeAuthContext from '../../auth/ChromeAuthContext';
+import { useHydrateAtoms } from 'jotai/utils';
+import { activeModuleAtom } from '../../state/atoms/activeModuleAtom';
+
+const HydrateAtoms = ({ initialValues, children }) => {
+  useHydrateAtoms(initialValues);
+  return children;
+};
+
+const JotaiTestProvider = ({ initialValues, children }) => (
+  <JotaiProvider>
+    <HydrateAtoms initialValues={initialValues}>{children}</HydrateAtoms>
+  </JotaiProvider>
+);
 
 describe('ScalprumRoot', () => {
   let initialState;
@@ -220,17 +234,62 @@ describe('ScalprumRoot', () => {
     });
 
     const { container } = render(
-      <Provider store={store}>
-        <ChromeAuthContext.Provider value={chromeContextMockValue}>
-          <MemoryRouter initialEntries={['/insights']}>
-            <ScalprumRoot config={config} globalFilterHidden={false} {...initialProps} />
-          </MemoryRouter>
-        </ChromeAuthContext.Provider>
-      </Provider>
+      <JotaiTestProvider initialValues={[[activeModuleAtom, 'foo']]}>
+        <Provider store={store}>
+          <ChromeAuthContext.Provider value={chromeContextMockValue}>
+            <MemoryRouter initialEntries={['/insights']}>
+              <ScalprumRoot config={config} globalFilterHidden={false} {...initialProps} />
+            </MemoryRouter>
+          </ChromeAuthContext.Provider>
+        </Provider>
+      </JotaiTestProvider>
     );
     await waitFor(() => expect(container.querySelector('#global-filter')).toBeTruthy());
 
     useLocationSpy.mockRestore();
     fetchSpy.mockRestore();
   });
+
+  it('should not render GlobalFilter', async () => {
+    const fetchSpy = jest.spyOn(window, 'fetch').mockImplementationOnce(() => Promise.resolve({ ok: true, json: () => ({}) }));
+    const useLocationSpy = jest.spyOn(routerDom, 'useLocation');
+    useLocationSpy.mockReturnValue({ pathname: '/insights', search: undefined, hash: undefined });
+    Object.defineProperty(window, 'location', {
+      value: {
+        pathname: '/insights',
+        href: '/insights',
+        host: 'foo.bar.baz',
+      },
+    });
+    Object.defineProperty(window, 'insights', {
+      value: {
+        chrome: {
+          getEnvironment: () => '',
+        },
+      },
+    });
+    const store = mockStore({
+      ...initialState,
+      chrome: {
+        ...initialState.chrome,
+        activeLocation: 'insights',
+      },
+    });
+
+    const { container } = render(
+      <JotaiTestProvider initialValues={[[activeModuleAtom, undefined]]}>
+        <Provider store={store}>
+          <ChromeAuthContext.Provider value={chromeContextMockValue}>
+            <MemoryRouter initialEntries={['/insights']}>
+              <ScalprumRoot config={config} globalFilterHidden={false} {...initialProps} />
+            </MemoryRouter>
+          </ChromeAuthContext.Provider>
+        </Provider>
+      </JotaiTestProvider>
+    );
+    await waitFor(() => expect(container.querySelector('#global-filter')).toBeFalsy());
+
+    useLocationSpy.mockRestore();
+    fetchSpy.mockRestore();
+  });
 });