useTabHook, restore state and add skipHash

When nested, the activeTab should not sync with the location hash.

Author: mshriver

frontend/src/components/classify-failures.js

@@ -165,6 +165,7 @@ const ClassifyFailuresTable = ({ filters, run_id }) => {
                     hideSummary={hideSummary}
                     hideTestObject={hideTestObject}
                     testResult={rows[rowIndex].result}
+                    skipHash={true}
                   />
               }
             ]

frontend/src/components/result.js

@@ -39,7 +39,8 @@ const ResultView = ({
   hideSummary=false,
   hideTestObject=false,
   hideTestHistory=false,
-  testResult
+  testResult,
+  skipHash=false
 }) => {
   const context = useContext(IbutsuContext);
   const { darkTheme } = context;
@@ -83,7 +84,8 @@ const ResultView = ({
   // Tab state and navigation hooks/effects
   const {activeTab, onTabSelect} = useTabHook(
     ['summary', 'testHistory', 'testObject', ...artifactKeys()],
-    defaultTab
+    defaultTab,
+    skipHash
   );
 
   useEffect(() => {
@@ -419,6 +421,7 @@ ResultView.propTypes = {
   hideTestObject: PropTypes.bool,
   hideTestHistory: PropTypes.bool,
   testResult: PropTypes.object,
+  skipHash: PropTypes.bool,
 };
 
 export default ResultView;

frontend/src/components/tabHook.js

@@ -1,23 +1,30 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 // Assisted by watsonx Code Assistant
 // Code generated by WCA@IBM in this programming language is not approved for use in IBM product development.
 
-export const useTabHook = (validTabIndicies=[], defaultTab) => {
+export const useTabHook = (validTabIndicies=[], defaultTab='summary', skipHash=false) => {
 
   const location = useLocation();
   const navigate = useNavigate();
-  const currentHash = location.hash.slice(1);
-  const activeTab = validTabIndicies.includes(currentHash) ? currentHash : defaultTab;
+  const [activeTab, setActiveTab] = useState(defaultTab);
+
+  useEffect(() => {
+    if (!skipHash) {
+      const currentHash = location.hash.slice(1);
+      setActiveTab(validTabIndicies.includes(currentHash) ? currentHash : defaultTab);
+    }
+  }, [defaultTab, location.hash, skipHash, validTabIndicies]);
 
   useEffect(() => {
     // catch a bad tab index and use the default
-    if (!validTabIndicies.includes(location.hash.slice(1))) {navigate(`#${defaultTab}`);}
-  }, [defaultTab, location.hash, navigate, validTabIndicies]);
+    if (!skipHash && !validTabIndicies.includes(location.hash.slice(1))) {navigate(`#${defaultTab}`);}
+  }, [defaultTab, location.hash, navigate, skipHash, validTabIndicies]);
 
   const onTabSelect = (_, tabIndex) => {
-    navigate(`#${tabIndex}`);
+    if (!skipHash) {navigate(`#${tabIndex}`);};
+    setActiveTab(tabIndex);
   };
 
   return {activeTab, onTabSelect};

frontend/src/run.js

@@ -55,6 +55,7 @@ import ClassifyFailuresTable from './components/classify-failures';
 import ArtifactTab from './components/artifact-tab';
 import { IbutsuContext } from './services/context';
 import { useTabHook } from './components/tabHook';
+import PropTypes from 'prop-types';
 
 
 const COLUMNS = ['Test', 'Run', 'Result', 'Duration', 'Started'];
@@ -238,7 +239,7 @@ const Run = ({defaultTab='summary'}) => {
         }
         {isRunValid &&
           <Tabs activeKey={activeTab} onSelect={onTabSelect} isBox>
-            <Tab eventKey="summary" title={<TabTitle icon={<InfoCircleIcon />} text="Summary" />}>
+            <Tab key= "summary" eventKey="summary" title={<TabTitle icon={<InfoCircleIcon />} text="Summary" />}>
               <Card>
                 <CardBody style={{ padding: 0 }} id="run-detail">
                   <Grid>
@@ -432,7 +433,7 @@ const Run = ({defaultTab='summary'}) => {
                 </CardBody>
               </Card>
             </Tab>
-            <Tab eventKey="results-list" title={<TabTitle icon={<CatalogIcon />} text="Results List" />}>
+            <Tab key="results-list" eventKey="results-list" title={<TabTitle icon={<CatalogIcon />} text="Results List" />}>
               <Card className="pf-u-mt-lg">
                 <CardHeader>
                   <Flex style={{ width: '100%' }}>
@@ -489,7 +490,7 @@ const Run = ({defaultTab='summary'}) => {
                                 }
                               </CardHeader>
                               <CardBody style={{ backgroundColor: 'var(--pf-v5-c-card--BackgroundColor)', paddingTop: '1.2em' }}>
-                                <ResultView testResult={testResult} defaultTab='summary' />
+                                <ResultView testResult={testResult} skipHash={true} />
                               </CardBody>
                             </Card>
                           }