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

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} />},

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 } 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, useLocation, useNavigate } from 'react-router-dom';
 import Linkify from 'react-linkify';
 
 import * as http from '../services/http';
@@ -33,7 +33,7 @@ import { IbutsuContext } from '../services/context';
 
 const ResultView = ({
   comparisonResults,
-  defaultTab,
+  defaultTab='summary',
   hideArtifact=false,
   hideSummary=false,
   hideTestObject=false,
@@ -45,74 +45,28 @@ const ResultView = ({
 
   // State
   const [artifacts, setArtifacts] = useState([]);
-  const [testHistoryTable, setTestHistoryTable] = useState(null);
 
   // Hooks
-  const navigate = useNavigate();
   const location = useLocation();
+  const navigate = useNavigate();
 
-  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]);
+  // https://v5-archive.patternfly.org/components/tabs#tabs-linked-to-nav-elements
+  const [activeTab, setActiveTab] = useState(defaultTab);
 
-  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]);
-
-  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]);
+  }, [comparisonResults, testResult]);
 
-  const onTabSelect = (_, tabIndex) => {
-    if (location) {
-      navigate(`${location.pathname}${location.search}#${tabIndex}`);
-    }
-    setActiveTab(tabIndex);
-  };
 
   const artifactTabs = useMemo(() => artifacts.map((art) => (
     <Tab
@@ -125,6 +79,32 @@ 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);
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+
+    return () => {
+      window.removeEventListener('hashchange', handleHashChange);
+    };
+  }, [artifactTabs, defaultTab, location.hash]);
+
+  const onTabSelect = (_, tabIndex) => {
+    navigate(`#${tabIndex}`);
+    setActiveTab(tabIndex);
+  };
+  // end of assisted block
+
   useEffect(() => {
     // Get artifacts when the test result changes
     if (testResult) {
@@ -137,9 +117,6 @@ const ResultView = ({
     }
   }, [testResult]);
 
-  if (activeTab === null) {
-    setActiveTab(getDefaultTab());
-  }
   let resultIcon = getIconForResult('pending');
   let startTime = new Date();
   let parameters = <div/>;
@@ -425,15 +402,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

frontend/src/utilities.js

@@ -206,7 +206,7 @@ export function resultToRow (result, filterFunc) {
   }
   return {
     'cells': [
-      {title: <React.Fragment><Link to={`../results/${result.id}`} relative="Path" key={result.id}>{result.test_id}</Link> {markers}</React.Fragment>},
+      {title: <React.Fragment><Link to={`../results/${result.id}#summary`} relative="Path" key={result.id}>{result.test_id}</Link> {markers}</React.Fragment>},
       {title: runLink},
       {title: <React.Fragment><span className={result.result}>{resultIcon} {toTitleCase(result.result)}</span> {classification}</React.Fragment>},
       {title: round(result.duration) + 's'},
@@ -235,7 +235,7 @@ export function resultToComparisonRow (result, index) {
   }
 
   let cells = [];
-  cells.push({title: <React.Fragment><Link to={`../results/${result[0].id}`} relative="Path">{result[0].test_id}</Link> {markers}</React.Fragment>});
+  cells.push({title: <React.Fragment><Link to={`../results/${result[0].id}#summary`} relative="Path">{result[0].test_id}</Link> {markers}</React.Fragment>});
   result.forEach((result, index) => {
     cells.push({title: <span className={result.result}>{resultIcons[index]} {toTitleCase(result.result)}</span>});
   });