useTabHook, restore state and add skipHash

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

add useTabHook to jenkinsjob analysis

Update link composition in filterheatmap

provide hash for tabbed views
use `${}` syntax

Update useTabHook navigation with location

include search and path as-is, search is used in a few spots

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(`${location.pathname}${location.search}#${defaultTab}`);}
+  }, [defaultTab, location, navigate, skipHash, validTabIndicies]);
 
   const onTabSelect = (_, tabIndex) => {
-    navigate(`#${tabIndex}`);
+    if (!skipHash) {navigate(`${location.pathname}${location.search}#${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>
                           }

frontend/src/views/jenkinsjobanalysis.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import {
   Switch,
@@ -16,7 +16,8 @@ import FilterHeatmapWidget from '../widgets/filterheatmap';
 import { HEATMAP_MAX_BUILDS } from '../constants';
 import { IbutsuContext } from '../services/context';
 import ParamDropdown from '../components/param-dropdown';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
+import { useTabHook } from '../components/tabHook';
 
 const DEFAULT_BAR = 8;
 
@@ -25,17 +26,14 @@ const LONG_BUILDS = [...SHORT_BUILDS, 70, 150];
 
 const PF_BACK_100 = 'var(--pf-v5-global--BackgroundColor--100)';
 
-const JenkinsJobAnalysisView =(props) => {
+const JenkinsJobAnalysisView =({view, defaultTab='heatmap'}) => {
   const context = useContext(IbutsuContext);
   const {primaryObject} = context;
-  const {view} = props;
-  const location = useLocation();
-  const navigate = useNavigate();
+
   const [searchParams] = useSearchParams();
 
   const [isAreaChart, setIsAreaChart] = useState(false);
   const [isLoading, setIsLoading] = useState();
-  const [activeTab, setActiveTab] = useState('heatmap');
 
   const [barWidth, setBarWidth] = useState(DEFAULT_BAR);
   const [builds, setBuilds] = useState(20);
@@ -45,6 +43,12 @@ const JenkinsJobAnalysisView =(props) => {
   const [barchartParams, setBarchartParams] = useState({});
   const [linechartParams, setLinechartParams] = useState({});
 
+  // Tab state and navigation hooks/effects
+  const {activeTab, onTabSelect} = useTabHook(
+    ['heatmap', 'overall-health', 'build-durations'],
+    defaultTab
+  );
+
   useEffect(() => {
     // Fetch the widget parameters for heatmap, barchart and linechart
     if (view) {
@@ -112,10 +116,35 @@ const JenkinsJobAnalysisView =(props) => {
     return color;
   };
 
-  const onTabSelect = (_, tabIndex) => {
-    navigate(`${location.pathname}${location.search}#${tabIndex}`);
-    setActiveTab(tabIndex);
-  };
+  const heatmapParam = useMemo(() => {
+    if (activeTab === 'heatmap') {
+      return(
+      <div style={{backgroundColor: PF_BACK_100, float: 'right', clear: 'none', marginBottom: '-2em', padding: '0.2em 1em', width: '30em'}}>
+        <ParamDropdown
+          dropdownItems={['Yes', 'No']}
+          defaultValue={(countSkips ? 'Yes': 'No')}
+          handleSelect={(value) => setCountSkips(value === 'Yes')}
+          tooltip="Count skips as failure:"
+        />
+      </div>)
+    }
+  }, [activeTab]);
+
+  const overallSwitch = useMemo(() => {
+    if (activeTab === 'overall-health') {
+      return(
+        <div style={{backgroundColor: PF_BACK_100, float: 'right', clear: 'none', marginBottom: '-2em', padding: '0.5em 1em'}}>
+          <Switch
+            id="bar-chart-switch"
+            labelOff="Change to Area Chart"
+            label="Change to Bar Chart"
+            isChecked={isAreaChart}
+            onChange={(_, checked) => setIsAreaChart(checked)}
+          />
+        </div>
+      )
+    }
+  }, [activeTab]);
 
   return (
     <React.Fragment>
@@ -127,29 +156,10 @@ const JenkinsJobAnalysisView =(props) => {
           tooltip="Number of builds:"
         />
       </div>
-      {activeTab === 'heatmap' &&
-      <div style={{backgroundColor: PF_BACK_100, float: 'right', clear: 'none', marginBottom: '-2em', padding: '0.2em 1em', width: '30em'}}>
-        <ParamDropdown
-          dropdownItems={['Yes', 'No']}
-          defaultValue={(countSkips ? 'Yes': 'No')}
-          handleSelect={(value) => setCountSkips(value === 'Yes')}
-          tooltip="Count skips as failure:"
-        />
-      </div>
-      }
-      {activeTab === 'overall-health' &&
-      <div style={{backgroundColor: PF_BACK_100, float: 'right', clear: 'none', marginBottom: '-2em', padding: '0.5em 1em'}}>
-        <Switch
-          id="bar-chart-switch"
-          labelOff="Change to Area Chart"
-          label="Change to Bar Chart"
-          isChecked={isAreaChart}
-          onChange={(_, checked) => setIsAreaChart(checked)}
-        />
-      </div>
-      }
+      {heatmapParam}
+      {overallSwitch}
       <Tabs activeKey={activeTab} onSelect={onTabSelect} isBox>
-        <Tab eventKey='heatmap' title="Heatmap">
+        <Tab key='heatmap' eventKey='heatmap' title="Heatmap">
           {!isLoading && activeTab === 'heatmap' &&
         <FilterHeatmapWidget
           title={heatmapParams.job_name}
@@ -160,7 +170,7 @@ const JenkinsJobAnalysisView =(props) => {
         />
           }
         </Tab>
-        <Tab eventKey='overall-health' title="Overall Health">
+        <Tab key='overall-health' eventKey='overall-health' title="Overall Health">
           {!isLoading && !isAreaChart && activeTab === 'overall-health' &&
         <GenericBarWidget
           title={'Test counts for ' + barchartParams.job_name}
@@ -211,7 +221,7 @@ const JenkinsJobAnalysisView =(props) => {
         />
           }
         </Tab>
-        <Tab eventKey='build-durations' title="Build Duration">
+        <Tab key='build-durations' eventKey='build-durations' title="Build Duration">
           {!isLoading && activeTab === 'build-durations' &&
         <GenericAreaWidget
           title={'Durations for ' + linechartParams.job_name}
@@ -239,7 +249,8 @@ const JenkinsJobAnalysisView =(props) => {
 };
 
 JenkinsJobAnalysisView.propTypes = {
-  view: PropTypes.object
+  view: PropTypes.object,
+  defaultTab: PropTypes.string
 };
 
 export default JenkinsJobAnalysisView;

frontend/src/widgets/filterheatmap.js

@@ -62,7 +62,7 @@ const FilterHeatmapWidget = (props) => {
   const getJenkinsAnalysisLink = () => {
     if (includeAnalysisLink && analysisViewId !== null) {
       return (
-        <Link to={`/project/${primaryObject?.id || params?.project}/view/${analysisViewId}?job_name=${params?.job_name}`}>
+        <Link to={`/project/${primaryObject?.id || params?.project}/view/${analysisViewId}?job_name=${params?.job_name}#heatmap`}>
           <Button variant="secondary" title="See analysis" aria-label="See analysis" isInline><ChartLineIcon/></Button>
         </Link>
       );
@@ -177,10 +177,10 @@ const FilterHeatmapWidget = (props) => {
             cellTitle += item.name + ': ' + item.value + '\n';
           }
         });
-        contents = <p title={cellTitle}><Link to={'/project/' + primaryObject.id + `/runs/${value[1]}`}>{Math.floor(value[0])}</Link></p>;
+        contents = <p title={cellTitle}><Link to={`/project/${primaryObject.id}/runs/${value[1]}#summary`}>{Math.floor(value[0])}</Link></p>;
       }
       else {
-        contents = <Link to={'/project/' + primaryObject.id + `/runs/${value[1]}`}>{Math.floor(value[0])}</Link>;
+        contents = <Link to={`/project/${primaryObject.id}/runs/${value[1]}#summary`}>{Math.floor(value[0])}</Link>;
       }
     }
     return <div style={style}>{contents}</div>;
@@ -198,7 +198,7 @@ const FilterHeatmapWidget = (props) => {
       renderData.push(values);
       values.forEach((item) => {
         if (!!item && (item.length > 2) && !!item[3]) {
-          newLabels.push(<Link to={'/project/' + (params?.project) +`/results?metadata.jenkins.build_number[eq]=${item[3]}&metadata.jenkins.job_name[eq]=` + params?.job_name} key={item[3]}>{item[3]}</Link>);
+          newLabels.push(<Link to={`/project/${params?.project}/results?metadata.jenkins.build_number[eq]=${item[3]}&metadata.jenkins.job_name[eq]=${params?.job_name}`} key={item[3]}>{item[3]}</Link>);
         }
       });
       if (newLabels.length > labels.length) {