Create custom useTabHook

Move buildTree
Convert Run to useTabHook

Use #summary hash for run hrefs

Author: mshriver

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/result.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, 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, useLocation, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Linkify from 'react-linkify';
 
 import * as http from '../services/http';
@@ -30,6 +30,7 @@ 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,
@@ -46,12 +47,7 @@ const ResultView = ({
   // State
   const [artifacts, setArtifacts] = useState([]);
 
-  // Hooks
-  const location = useLocation();
-  const navigate = useNavigate();
-
   // https://v5-archive.patternfly.org/components/tabs#tabs-linked-to-nav-elements
-  const [activeTab, setActiveTab] = useState(defaultTab);
 
   const testHistoryTable = useMemo(() => {
     if (comparisonResults !== undefined) {
@@ -79,31 +75,16 @@ const ResultView = ({
   )
   ), [artifacts]);
 
-  // Assisted by watsonx Code Assistant
-  // Code generated by WCA@IBM in this programming language is not approved for use in IBM product development.
-  useEffect(() => {
-    const handleHashChange = () => {
-      const tabIndex = location.hash.slice(1);
-      const validTabIndex = [
-        'summary', 'testHistory', 'testObject',
-        ...artifactTabs.map((tab) => tab.key)].includes(tabIndex);
-      const newTab = validTabIndex ? tabIndex : defaultTab;
-
-      setActiveTab(newTab);
-    };
+  const artifactKeys = useCallback(() => {
+    if (artifactTabs && artifactTabs?.length !== 0) {return(artifactTabs.map((tab) => tab.key));}
+    else {return([]);}
+  }, [artifactTabs]);
 
-    window.addEventListener('hashchange', handleHashChange);
-
-    return () => {
-      window.removeEventListener('hashchange', handleHashChange);
-    };
-  }, [artifactTabs, defaultTab, location.hash]);
-
-  const onTabSelect = (_, tabIndex) => {
-    navigate(`#${tabIndex}`);
-    setActiveTab(tabIndex);
-  };
-  // end of assisted block
+  // Tab state and navigation hooks/effects
+  const {activeTab, onTabSelect} = useTabHook(
+    ['summary', 'testHistory', 'testObject', ...artifactKeys()],
+    defaultTab
+  );
 
   useEffect(() => {
     // Get artifacts when the test result changes
@@ -125,7 +106,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]);

frontend/src/components/tabHook.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } 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) => {
+
+  const location = useLocation();
+  const navigate = useNavigate();
+  const currentHash = location.hash.slice(1);
+  const activeTab = validTabIndicies.includes(currentHash) ? currentHash : defaultTab;
+
+  useEffect(() => {
+    // catch a bad tab index and use the default
+    if (!validTabIndicies.includes(location.hash.slice(1))) {navigate(`#${defaultTab}`);}
+  }, [defaultTab, location.hash, navigate, validTabIndicies]);
+
+  const onTabSelect = (_, tabIndex) => {
+    navigate(`#${tabIndex}`);
+  };
+
+  return {activeTab, onTabSelect};
+};

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']}