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 {
@@ -75,9 +75,14 @@ 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', ...artifactTabs.map((tab) => tab.key)],
+    ['summary', 'testHistory', 'testObject', ...artifactKeys()],
     defaultTab
   );
 
@@ -101,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/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']}

frontend/src/run.js

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useCallback, useContext, useMemo } from 'react';
-import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
+import React, { useState, useEffect, useContext, useMemo, useCallback } from 'react';
+import { useParams, Link } from 'react-router-dom';
 
 import {
   Badge,
@@ -55,11 +55,12 @@ 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'];
 
-const Run = (defaultTab='summary') => {
+const Run = ({defaultTab='summary'}) => {
   const { run_id } = useParams();
 
   const context = useContext(IbutsuContext);
@@ -138,10 +139,14 @@ const Run = (defaultTab='summary') => {
       </Tab>))
   ), [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', 'results-list', 'results-tree', 'classify-failures', 'run-object',
-      ...artifactTabs.map((tab) => tab.key)],
+    ['summary', 'results-list', 'results-tree', 'classify-failures', 'run-object', ...artifactKeys()],
     defaultTab
   );
 
@@ -520,6 +525,8 @@ const Run = (defaultTab='summary') => {
   );
 };
 
-Run.propTypes = {};
+Run.propTypes = {
+  defaultTab: PropTypes.string
+};
 
 export default Run;

frontend/src/utilities.js

@@ -11,6 +11,7 @@ import {
   ChevronRightIcon,
   ClockIcon,
   ExclamationCircleIcon,
+  FileIcon,
   InfoAltIcon,
   QuestionCircleIcon,
   TimesCircleIcon
@@ -285,7 +286,7 @@ export function resultToRow (result, filterFunc) {
     }
   }
   if (result.metadata && result.metadata.run) {
-    runLink = <Link to={`../runs/${result.run_id}`} relative="Path">{result.run_id}</Link>;
+    runLink = <Link to={`../runs/${result.run_id}#summary`} relative="Path">{result.run_id}</Link>;
   }
   if (result.metadata && result.metadata.classification) {
     classification = <Badge isRead>{result.metadata.classification.split('_')[0]}</Badge>;