Updates for tab history handling

Using WCA@IBM!

Author: mshriver

frontend/src/components/result.js

@@ -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, useHistory } 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,
@@ -48,29 +48,11 @@ const ResultView = ({
   const [testHistoryTable, setTestHistoryTable] = useState(null);
 
   // Hooks
-  const navigate = useNavigate();
   const location = useLocation();
+  const history = useHistory();
 
   // 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 [activeTab, setActiveTab] = useState(getTabIndex(getDefaultTab()));
-
+  const [activeTab, setActiveTab] = useState(location.hash.slice(1) || defaultTab);
 
   const getTestHistoryTable = useCallback(() => {
     if (comparisonResults !== undefined) {
@@ -86,37 +68,24 @@ const ResultView = ({
 
   }, [setTestHistoryTable, comparisonResults, testResult]);
 
-
-
   useEffect(() => {
-    if (activeTab === 'test-history') {
+    if (activeTab === 'testHistory') {
       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]);
-
+  // Assisted by watsonx Code Assistant
+  // Code generated by WCA@IBM in this programming language is not approved for use in IBM product development.
   const onTabSelect = (_, tabIndex) => {
-    if (location) {
-      navigate(`${location.pathname}${location.search}#${tabIndex}`);
-    }
     setActiveTab(tabIndex);
+    history.push({
+      pathname: window.location.pathname,
+      search: window.location.search,
+      hash: `#${tabIndex}`
+    });
   };
 
+
   const artifactTabs = useMemo(() => artifacts.map((art) => (
     <Tab
       key={art.filename}
@@ -129,6 +98,26 @@ 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 validTabNames = [
+        'summary', 'testHistory', 'testObject',
+        artifactTabs.map((tab) => tab.key).filter((key) => key && key.trim() !== '')
+      ];
+      setActiveTab(validTabNames.includes(tabIndex) ? tabIndex : defaultTab);
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+
+    return () => {
+      window.removeEventListener('hashchange', handleHashChange);
+    };
+  }, [artifactTabs, defaultTab, location.hash]);
+
   useEffect(() => {
     // Get artifacts when the test result changes
     if (testResult) {
@@ -141,9 +130,6 @@ const ResultView = ({
     }
   }, [testResult]);
 
-  if (activeTab === null) {
-    setActiveTab(getDefaultTab());
-  }
   let resultIcon = getIconForResult('pending');
   let startTime = new Date();
   let parameters = <div/>;
@@ -429,15 +415,15 @@ const ResultView = ({
           </Card>
         </Tab>
         }
-        {!hideArtifact &&
-          artifactTabs}
         {!hideTestHistory &&
-        <Tab key="test-history" eventKey="test-history" title={<TabTitle icon={<SearchIcon/>} text="Test History" href='#test-history'/>}>
+        <Tab key="testHistory" eventKey="testHistory" title={<TabTitle icon={<SearchIcon/>} text="Test History" href='#testHistory'/>}>
           {testHistoryTable}
         </Tab>
         }
+        {!hideArtifact &&
+          artifactTabs}
         {!hideTestObject && testJson &&
-        <Tab key="test-object" eventKey="test-object" title={<TabTitle icon={<CodeIcon/>} text="Test Object" href='#test-object'/>}>
+        <Tab key="testObject" eventKey="testObject" title={<TabTitle icon={<CodeIcon/>} text="Test Object" href='#testObject'/>}>
           <Card>
             <CardBody id='object-card-body'>
               <CodeEditor