fix(ESSNTL-5048): Tab selection

RedHatInsights · Aug 23, 2023 · cbd5b7e · cbd5b7e
1 parent 6252825
commit cbd5b7e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js b/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js
@@ -16,7 +16,6 @@ import { ConfigurationCard } from '../ConfigurationCard';
 import { SystemStatusCard } from '../SystemStatusCard';
 import { DataCollectorsCard } from '../DataCollectorsCard/DataCollectorsCard';
 import { Provider } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate/useInsightsNavigate';
 
 import './general-information.scss';
@@ -244,7 +243,6 @@ GeneralInformation.propTypes = {
   ]),
   children: PropTypes.node,
   navigate: PropTypes.any,
-  location: PropTypes.any,
   inventoryId: PropTypes.string.isRequired,
   systemProfilePrefetched: PropTypes.bool,
   showImageDetails: PropTypes.bool,
@@ -265,15 +263,13 @@ GeneralInformation.defaultProps = {
 
 const GeneralInformationComponent = (props) => {
   const navigate = useInsightsNavigate();
-  const location = useLocation();
   const dispatch = useDispatch();
   const entity = useSelector(({ entityDetails }) => entityDetails.entity);
   const loadSystemDetail = (itemId) => dispatch(systemProfile(itemId));
   return (
     <GeneralInformation
       {...props}
       navigate={navigate}
-      location={location}
       entity={entity}
       loadSystemDetail={loadSystemDetail}
     />

diff --git a/src/routes/InventoryDetail.js b/src/routes/InventoryDetail.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 import { Link, useLocation, useParams } from 'react-router-dom';
@@ -86,7 +86,6 @@ const Inventory = () => {
   const { inventoryId } = useParams();
   const { search } = useLocation();
   const searchParams = new URLSearchParams(search);
-  const [activeApp] = useState(searchParams.get('appName') || appList[0].name);
   const store = useStore();
   const navigate = useInsightsNavigate();
   const dispatch = useDispatch();
@@ -110,6 +109,16 @@ const Inventory = () => {
       ),
     [cloudProvider]
   );
+
+  useEffect(() => {
+    if (searchParams.get('appName') === null) {
+      searchParams.set('appName', appList[0].name);
+      navigate({
+        search: searchParams.toString(),
+      });
+    }
+  }, []);
+
   const clearNotifications = () => dispatch(actions.clearNotifications());
 
   const { hasAccess: canDeleteHost } = usePermissionsWithContext([
@@ -128,7 +137,7 @@ const Inventory = () => {
 
   const additionalClasses = {
     'ins-c-inventory__detail--general-info':
-      activeApp === 'general_information',
+      searchParams.get('appName') === 'general_information',
   };
 
   if (entity) {
@@ -140,11 +149,9 @@ const Inventory = () => {
   }, [entity?.id]);
 
   const onTabSelect = useCallback(
-    (_, activeApp, appName) => {
-      searchParams.set('appName', appName);
-      const search = searchParams.toString();
+    (_, __, appName) => {
       navigate({
-        search,
+        search: `?appName=${appName}`,
       });
     },
     [searchParams]
@@ -179,7 +186,7 @@ const Inventory = () => {
           inventoryId={inventoryId}
         />
       }
-      activeApp={activeApp}
+      activeApp={searchParams.get('appName')}
       appList={apps}
       onTabSelect={onTabSelect}
     />