From cbd5b7e45049228bab18cfb87432af735eadafd3 Mon Sep 17 00:00:00 2001
From: AsToNlele <theastonofficial@gmail.com>
Date: Tue, 22 Aug 2023 12:43:19 +0200
Subject: [PATCH] fix(ESSNTL-5048): Tab selection

---
 .../GeneralInformation/GeneralInformation.js  |  4 ----
 src/routes/InventoryDetail.js                 | 23 ++++++++++++-------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js b/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js
index 6e566adbd..d7ce13cee 100644
--- 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,7 +263,6 @@ 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));
@@ -273,7 +270,6 @@ const GeneralInformationComponent = (props) => {
     <GeneralInformation
       {...props}
       navigate={navigate}
-      location={location}
       entity={entity}
       loadSystemDetail={loadSystemDetail}
     />
diff --git a/src/routes/InventoryDetail.js b/src/routes/InventoryDetail.js
index 985398cb0..92d3f906e 100644
--- 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}
     />