Disable global filter on Reports page

RedHatInsights · Jul 31, 2023 · eb088e5 · eb088e5
1 parent 46964aa
commit eb088e5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 47 deletions.
diff --git a/src/App.js b/src/App.js
@@ -38,7 +38,6 @@ const App = () => {
 
     useEffect(() => {
         const unregister = chrome.on('APP_NAVIGATION', event => {
-            chrome.hideGlobalFilter(false);
             if (event.domEvent) {
                 push(`/${event.navId}`);
                 appNavClick[event.navId] !== undefined ? appNavClick[event.navId](true) : appNavClick.cves(true);

diff --git a/src/Components/PresentationalComponents/StaticPages/UpgradePage.js b/src/Components/PresentationalComponents/StaticPages/UpgradePage.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import propTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import { CloudServerIcon } from '@patternfly/react-icons';
@@ -7,50 +7,34 @@ import { Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateIcon, Title } f
 
 import messages from '../../../Messages';
 import Header from '../../PresentationalComponents/Header/Header';
-import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
-const UpgradePage = ({ intl }) => {
-    const chrome = useChrome();
-
-    useEffect(() => {
-        chrome.hideGlobalFilter(true);
-
-        const unregister = chrome.on('APP_NAVIGATION', () => {
-            chrome.hideGlobalFilter(true);
-        });
-
-        return () => unregister();
-    }, []);
-
-    return (
-        <React.Fragment>
-            <Header
-                showBreadcrumb={false}
-                title={intl.formatMessage(messages.vulnerabilitiesHeader)}
-            />
-            <Main>
-                <Bullseye>
-                    <EmptyState>
-                        <EmptyStateIcon icon={CloudServerIcon} />
-                        <Title headingLevel="h5" size="lg">
-                            {intl.formatMessage(messages.emptyPageTitle)}
-                        </Title>
-                        <EmptyStateBody>
-                            {intl.formatMessage(messages.emptyPageBody)}
-                        </EmptyStateBody>
-                        <Button
-                            variant="primary"
-                            component="a"
-                            href="https://access.redhat.com/products/red-hat-insights#getstarted"
-                        >
-                            {intl.formatMessage(messages.emptyPageLearnMoreButton)}
-                        </Button>
-                    </EmptyState>
-                </Bullseye>
-            </Main>
-        </React.Fragment>
-    );
-};
+const UpgradePage = ({ intl }) =>
+    <React.Fragment>
+        <Header
+            showBreadcrumb={false}
+            title={intl.formatMessage(messages.vulnerabilitiesHeader)}
+        />
+        <Main>
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon icon={CloudServerIcon} />
+                    <Title headingLevel="h5" size="lg">
+                        {intl.formatMessage(messages.emptyPageTitle)}
+                    </Title>
+                    <EmptyStateBody>
+                        {intl.formatMessage(messages.emptyPageBody)}
+                    </EmptyStateBody>
+                    <Button
+                        variant="primary"
+                        component="a"
+                        href="https://access.redhat.com/products/red-hat-insights#getstarted"
+                    >
+                        {intl.formatMessage(messages.emptyPageLearnMoreButton)}
+                    </Button>
+                </EmptyState>
+            </Bullseye>
+        </Main>
+    </React.Fragment>;
 
 UpgradePage.propTypes = {
     intl: propTypes.any

diff --git a/src/Utilities/Routes.js b/src/Utilities/Routes.js
@@ -43,7 +43,7 @@ const Reports = lazy(() =>
     import(/* webpackChunkName: "Reports" */ '../Components/SmartComponents/Reports/ReportsPage')
 );
 
-const InsightsRoute = ({ component: Component, title, ...rest }) => {
+const InsightsRoute = ({ component: Component, title, globalFilterEnabled, ...rest }) => {
     const [hasSystems, setHasSystems] = useState(true);
     const chrome = useChrome();
 
@@ -57,11 +57,16 @@ const InsightsRoute = ({ component: Component, title, ...rest }) => {
     }, []);
 
     const subPath = rest.location.pathname && rest.location.pathname.split('/')[2];
+
     useEffect(() => {
         chrome.updateDocumentTitle(`${subPath ? `${subPath} - ` : ''} ${title} -
          ${intl.formatMessage(messages.pageTitleSuffix)}`);
     }, [chrome, intl, subPath]);
 
+    useEffect(() => {
+        chrome.hideGlobalFilter(!globalFilterEnabled);
+    }, [rest.location.pathname]);
+
     return (
         <Route
             {...rest}
@@ -84,12 +89,14 @@ const InsightsRoute = ({ component: Component, title, ...rest }) => {
 
 InsightsRoute.propTypes = {
     component: PropTypes.elementType,
-    title: PropTypes.string
+    title: PropTypes.string,
+    globalFilterEnabled: PropTypes.bool
 };
 
 export const Routes = () => {
     let location = useLocation();
     let path = location.pathname;
+
     return (
         // TODO: Discuss with UX some nice loading placeholder
         <Suspense fallback={Fragment}>
@@ -104,33 +111,38 @@ export const Routes = () => {
                     path={PATHS.cveDetailsPage.to}
                     component={CVEDetailsPage}
                     title={intl.formatMessage(messages.cvesHeader)}
+                    globalFilterEnabled
                 />
 
                 <InsightsRoute
                     exact
                     path={PATHS.systemDetailsPage.to}
                     component={SystemDetailsPage}
+                    globalFilterEnabled
                 />
 
                 <InsightsRoute
                     exact
                     path={PATHS.home.to}
                     component={LandingPage}
                     title={intl.formatMessage(messages.cvesHeader)}
+                    globalFilterEnabled
                 />
 
                 <InsightsRoute
                     exact
                     path={PATHS.cvesPage.to}
                     component={LandingPage}
                     title={intl.formatMessage(messages.cvesHeader)}
+                    globalFilterEnabled
                 />
 
                 <InsightsRoute
                     exact
                     path={PATHS.systemsPage.to}
                     component={SystemsPage}
                     title={intl.formatMessage(messages.systemsHeader)}
+                    globalFilterEnabled
                 />
 
                 <InsightsRoute