fix(RHIF-263): adopt useChrome updateDocumentTitle hook (#1916)

RedHatInsights · Jul 5, 2023 · de6c4d3 · de6c4d3
1 parent f6b339b
commit de6c4d3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/config/setupTests.js b/config/setupTests.js
@@ -9,13 +9,23 @@ global.shallow = shallow;
 global.render = render;
 global.mount = mount;
 global.React = React;
-
-jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => {
-    return {
-        __esModule: true,
-        default: () => ({ hideGlobalFilter: () => { }, on: () => {} })
-    };
-});
+jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
+    __esModule: true,
+    default: () => ({
+      updateDocumentTitle: jest.fn(),
+      appAction: jest.fn(),
+      appObjectId: jest.fn(),
+      on: jest.fn(),
+      isBeta: jest.fn(),
+      hideGlobalFilter: jest.fn()
+    }),
+    useChrome: () => ({
+      isBeta: jest.fn(),
+      chrome: jest.fn(),
+      updateDocumentTitle: jest.fn(),
+      hideGlobalFilter: jest.fn()
+    }),
+  }));
 
 window.insights = {
     chrome: {
@@ -73,3 +83,4 @@ global.window.__scalprum__ = {
 };
 
 jest.useFakeTimers('modern').setSystemTime(new Date('2020-01-01').getTime());
+
diff --git a/src/Components/SmartComponents/SystemCves/SystemCves.js b/src/Components/SmartComponents/SystemCves/SystemCves.js
@@ -43,6 +43,7 @@ import {
 } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { NotConnected } from '@redhat-cloud-services/frontend-components/NotConnected';
 import { useColumnManagement } from '../../../Helpers/Hooks';
+import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 
 export const CVETableContext = createContext({});
 
@@ -133,12 +134,12 @@ export const SystemCVEs = ({
             dispatch(changeColumnsSystemDetail(defaultColumnsWithAttributes));
         }
     }, []);
-
+    const chrome = useChrome();
     useEffect(() => {
         if (isFirstLoad) {
             if (setPageTitle) {
-                document.title = `${entity.display_name}
-                - ${intl.formatMessage(messages.systemsHeader)} - ${intl.formatMessage(messages.pageTitleSuffix)}`;
+                chrome.updateDocumentTitle(`${entity.display_name}
+                - ${intl.formatMessage(messages.systemsHeader)} - ${intl.formatMessage(messages.pageTitleSuffix)}`);
             }
 
             setFirstLoad(false);

diff --git a/src/Utilities/Routes.js b/src/Utilities/Routes.js
@@ -8,6 +8,7 @@ import { intl } from './IntlProvider';
 import messages from '../Messages';
 import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
 import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState';
+import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 
 const SystemsPage = lazy(() =>
     import(
@@ -44,6 +45,7 @@ const Reports = lazy(() =>
 
 const InsightsRoute = ({ component: Component, title, ...rest }) => {
     const [hasSystems, setHasSystems] = useState(true);
+    const chrome = useChrome();
 
     useEffect(() => {
         const fetchData = async () => {
@@ -54,10 +56,11 @@ const InsightsRoute = ({ component: Component, title, ...rest }) => {
         fetchData();
     }, []);
 
-    if (title) {
-        const subPath = rest.location.pathname && rest.location.pathname.split('/')[2];
-        document.title = `${subPath ? `${subPath} - ` : ''} ${title} - ${intl.formatMessage(messages.pageTitleSuffix)}`;
-    }
+    const subPath = rest.location.pathname && rest.location.pathname.split('/')[2];
+    useEffect(() => {
+        chrome.updateDocumentTitle(`${subPath ? `${subPath} - ` : ''} ${title} -
+         ${intl.formatMessage(messages.pageTitleSuffix)}`);
+    }, [chrome, intl, subPath]);
 
     return (
         <Route