Custom useTabHook for Tab Navigation (#621)

* Updates for tab history handling

Using WCA@IBM!

Add default tab hashes to result paths

trying to update the hash after navigation via effect within ResultView
ends up making the history ugly regardless of use of navigation hooks on
tab selection.

Just set the hash on the initial target for summary

Create custom useTabHook

Move buildTree
Convert Run to useTabHook

Use #summary hash for run hrefs

* 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

* Catch error on project request from header

* useTabHook in jenkinsjobanalysis view

Author: mshriver

frontend/src/components/classify-failures.js

@@ -76,7 +76,7 @@ const resultToClassificationRow = (result, index, filterFunc) => {
       'isOpen': false,
       'result': result,
       'cells': [
-        {title: <React.Fragment><Link to={`../results/${result.id}`} relative="Path">{result.test_id}</Link> {markers}</React.Fragment>},
+        {title: <React.Fragment><Link to={`../results/${result.id}#summary`} relative="Path">{result.test_id}</Link> {markers}</React.Fragment>},
         {title: <span className={result.result}>{resultIcon} {toTitleCase(result.result)}</span>},
         {title: <React.Fragment>{exceptionBadge}</React.Fragment>},
         {title: <ClassificationDropdown testResult={result} />},
@@ -165,6 +165,7 @@ const ClassifyFailuresTable = ({ filters, run_id }) => {
                     hideSummary={hideSummary}
                     hideTestObject={hideTestObject}
                     testResult={rows[rowIndex].result}
+                    skipHash={true}
                   />
               }
             ]

frontend/src/components/fileupload.js

@@ -50,7 +50,7 @@ const FileUpload = (props) => {
             let action = null;
             if (data.metadata.run_id) {
               const RunButton = () => (
-                <AlertActionLink component='a' href={'/project/' + (data.metadata.project_id || primaryObject.id) + '/runs/' + data.metadata.run_id}>
+                <AlertActionLink component='a' href={`/project/${(data.metadata.project_id || primaryObject.id)}/runs/${data.metadata.run_id}#summary`}>
                 Go to Run
                 </AlertActionLink>
               );

frontend/src/components/ibutsu-header.js

@@ -87,8 +87,7 @@ const IbutsuHeader = () => {
   }, [darkTheme]);
 
   useEffect(() => {
-    if (selectedProject?.id !== project_id) {
-
+    if (project_id && (selectedProject?.id !== project_id)) {
       HttpClient.get([Settings.serverUrl, '/project/', project_id])
         .then(response => HttpClient.handleResponse(response))
         .then((data) => {
@@ -99,7 +98,8 @@ const IbutsuHeader = () => {
           setFilterValue();
           setInputValue(data.title);
           setIsProjectSelectOpen(false);
-        });
+        })
+        .catch((error) => console.error(error));
     }
   }, [project_id, selectedProject, setDefaultDashboard, setPrimaryObject, setPrimaryType]);
 

frontend/src/components/last-passed.js

@@ -39,7 +39,7 @@ const LastPassed = (props) => {
   return (
     <React.Fragment>
       {resultData &&
-            <Link target="_blank" rel="noopener noreferrer" to={`../results/${resultData.id}`} relative="Path">
+            <Link target="_blank" rel="noopener noreferrer" to={`../results/${resultData.id}#summary`} relative="Path">
               <Badge isRead>
                 {new Date(resultData.start_time).toLocaleString()}
               </Badge>

frontend/src/components/result.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useContext, useMemo } from 'react';
+import React, { useState, useEffect, useContext, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -18,7 +18,7 @@ import {
 import { InfoCircleIcon, CodeIcon, SearchIcon, FileAltIcon } from '@patternfly/react-icons';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
-import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Linkify from 'react-linkify';
 
 import * as http from '../services/http';
@@ -30,89 +30,40 @@ import TabTitle from './tabs';
 import TestHistoryTable  from './test-history';
 import ArtifactTab from './artifact-tab';
 import { IbutsuContext } from '../services/context';
+import { useTabHook } from './tabHook';
 
 const ResultView = ({
   comparisonResults,
-  defaultTab,
+  defaultTab='summary',
   hideArtifact=false,
   hideSummary=false,
   hideTestObject=false,
   hideTestHistory=false,
-  testResult
+  testResult,
+  skipHash=false
 }) => {
   const context = useContext(IbutsuContext);
   const { darkTheme } = context;
 
   // State
   const [artifacts, setArtifacts] = useState([]);
-  const [testHistoryTable, setTestHistoryTable] = useState(null);
 
-  // Hooks
-  const navigate = useNavigate();
-  const location = useLocation();
+  // https://v5-archive.patternfly.org/components/tabs#tabs-linked-to-nav-elements
 
-  const getDefaultTab = () => {
-    if (defaultTab) {
-      return defaultTab;
-    }
-    else if (!hideSummary) {
-      return 'summary';
-    }
-    else if (!!artifactTabs.length > 0) {
-      return artifactTabs[0].key;
-    }
-    else {
-      return null;
-    }
-  };
-
-  const getTabIndex = useCallback((defaultValue) => (!!location && location.hash !== '') ? location.hash.substring(1) : defaultValue,[location]);
-
-  const getTestHistoryTable = useCallback(() => {
+  const testHistoryTable = useMemo(() => {
     if (comparisonResults !== undefined) {
-      setTestHistoryTable(
+      return(
         <TestHistoryTable
           comparisonResults={comparisonResults}
           testResult={testResult}
         />);
     } else {
-      setTestHistoryTable(
+      return(
         <TestHistoryTable testResult={testResult}/>);
     }
 
-  }, [setTestHistoryTable, comparisonResults, testResult]);
+  }, [comparisonResults, testResult]);
 
-  const [activeTab, setActiveTab] = useState(getTabIndex(getDefaultTab()));
-
-
-  useEffect(() => {
-    if (activeTab === 'test-history') {
-      getTestHistoryTable();
-    }
-  }, [activeTab, getTestHistoryTable]);
-
-  const handlePopState = useCallback(() => {
-    // Handle browser navigation buttons click
-    const tabIndex = getTabIndex('summary');
-    setActiveTab(tabIndex);
-  }, [getTabIndex, setActiveTab]);
-
-  useEffect(()=>{
-    if (activeTab === 'test-history') {
-      getTestHistoryTable();
-    }
-    window.addEventListener('popstate', handlePopState);
-    return () => {
-      window.removeEventListener('popstate', handlePopState);
-    };
-  }, [activeTab, getTestHistoryTable, handlePopState]);
-
-  const onTabSelect = (_, tabIndex) => {
-    if (location) {
-      navigate(`${location.pathname}${location.search}#${tabIndex}`);
-    }
-    setActiveTab(tabIndex);
-  };
 
   const artifactTabs = useMemo(() => artifacts.map((art) => (
     <Tab
@@ -125,6 +76,18 @@ const ResultView = ({
   )
   ), [artifacts]);
 
+  const artifactKeys = useCallback(() => {
+    if (artifactTabs && artifactTabs?.length !== 0) {return(artifactTabs.map((tab) => tab.key));}
+    else {return([]);}
+  }, [artifactTabs]);
+
+  // Tab state and navigation hooks/effects
+  const {activeTab, onTabSelect} = useTabHook(
+    ['summary', 'testHistory', 'testObject', ...artifactKeys()],
+    defaultTab,
+    skipHash
+  );
+
   useEffect(() => {
     // Get artifacts when the test result changes
     if (testResult) {
@@ -137,9 +100,6 @@ const ResultView = ({
     }
   }, [testResult]);
 
-  if (activeTab === null) {
-    setActiveTab(getDefaultTab());
-  }
   let resultIcon = getIconForResult('pending');
   let startTime = new Date();
   let parameters = <div/>;
@@ -148,7 +108,7 @@ const ResultView = ({
     resultIcon = getIconForResult(testResult.result);
     startTime = new Date(testResult.start_time);
     parameters = Object.keys(testResult.params).map((key) => <div key={key}>{key} = {testResult.params[key]}</div>);
-    runLink = <Link to={`../runs/${testResult.run_id}`} relative="Path">{testResult.run_id}</Link>;
+    runLink = <Link to={`../runs/${testResult.run_id}#summary`} relative="Path">{testResult.run_id}</Link>;
   }
 
   const testJson = useMemo(() => JSON.stringify(testResult, null, '\t'), [testResult]);
@@ -425,15 +385,15 @@ const ResultView = ({
           </Card>
         </Tab>
         }
-        {!hideArtifact &&
-          artifactTabs}
         {!hideTestHistory &&
-        <Tab key="test-history" eventKey="test-history" title={<TabTitle icon={<SearchIcon/>} text="Test History"/>}>
+        <Tab key="testHistory" eventKey="testHistory" title={<TabTitle icon={<SearchIcon/>} text="Test History"/>}>
           {testHistoryTable}
         </Tab>
         }
+        {!hideArtifact &&
+          artifactTabs}
         {!hideTestObject && testJson &&
-        <Tab key="test-object" eventKey="test-object" title={<TabTitle icon={<CodeIcon/>} text="Test Object" />}>
+        <Tab key="testObject" eventKey="testObject" title={<TabTitle icon={<CodeIcon/>} text="Test Object"/>}>
           <Card>
             <CardBody id='object-card-body'>
               <CodeEditor
@@ -461,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

@@ -0,0 +1,31 @@
+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='summary', skipHash=false) => {
+
+  const location = useLocation();
+  const navigate = useNavigate();
+  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 (!skipHash && !validTabIndicies.includes(location.hash.slice(1))) {navigate(`${location.pathname}${location.search}#${defaultTab}`);}
+  }, [defaultTab, location, navigate, skipHash, validTabIndicies]);
+
+  const onTabSelect = (_, tabIndex) => {
+    if (!skipHash) {navigate(`${location.pathname}${location.search}#${tabIndex}`);};
+    setActiveTab(tabIndex);
+  };
+
+  return {activeTab, onTabSelect};
+};

frontend/src/result.js

@@ -37,7 +37,7 @@ const Result = () => {
           throw new Error('Failed with HTTP code ' + response.status);
         }
       } catch (error) {
-        console.log(error);
+        console.error(error);
       }
     };
     fetchTestResult();
@@ -53,13 +53,12 @@ const Result = () => {
         </TextContent>
       </PageSection>
       <PageSection>
-        {!testResult ? (
-          <Skeleton />
-        ) : (
+        {testResult ? (
           isResultValid ?
             <ResultView testResult={testResult} /> :
             <EmptyObject headingText="Result not found" returnLink="/results" returnLinkText="Return to results list"/>
-        )}
+        ) :
+          <Skeleton />}
       </PageSection>
     </React.Fragment>
   );

frontend/src/run-list.js

@@ -77,7 +77,7 @@ const runToRow = (run, filterFunc) => {
   }
   return {
     'cells': [
-      {title: <React.Fragment><Link to={`${run.id}`}>{run.id}</Link> {badges}</React.Fragment>},
+      {title: <React.Fragment><Link to={`${run.id}#summary`}>{run.id}</Link> {badges}</React.Fragment>},
       {title: round(run.duration) + 's'},
       {title: <RunSummary summary={run.summary} />},
       {title: created.toLocaleString()},
@@ -442,7 +442,7 @@ const RunList = () => {
               onApplyFilter={applyFilter}
               onRemoveFilter={removeFilter}
               onClearFilters={clearFilters}
-              onApplyReport={() => navigate('/project/' + params.project_id + '/reports?' + buildParams(filters).join('&'))}
+              onApplyReport={() => navigate(`/project/${params.project_id}/reports?${buildParams(filters).join('&')}`)}
               onSetPage={setPage}
               onSetPageSize={setPageSize}
               hideFilters={['project_id']}