Feature/see files button (#348)

* added see files button to jobs toolbar

* fixed compile error

* ran prettier and linting

src/tapis-app/Jobs/_components/JobsToolbar/JobsToolbar.tsx

@@ -2,9 +2,10 @@ import React, { useState } from 'react';
 import { Button } from 'reactstrap';
 import { Icon } from 'tapis-ui/_common';
 import styles from './JobsToolbar.module.scss';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import ConfirmModal from 'tapis-ui/_common/ConfirmModal';
-import { useCancel } from 'tapis-hooks/jobs';
+import { useCancel, useDetails } from 'tapis-hooks/jobs';
+import { Jobs } from '@tapis/tapis-typescript';
 
 type ToolbarButtonProps = {
   text: string;
@@ -43,15 +44,32 @@ const JobsToolbar: React.FC<{ jobUuid: string }> = ({ jobUuid }) => {
   const [modal, setModal] = useState<string | undefined>(undefined);
   const { pathname } = useLocation();
   const { isLoading, isError, isSuccess, error, cancel } = useCancel();
+  const { data } = useDetails(jobUuid);
+  const job: Jobs.Job | undefined = data?.result;
 
   const toggle = () => {
     setModal(undefined);
   };
 
+  const history = useHistory();
+  const handleClickFiles = () => {
+    if (job) {
+      const path = `/files/${job.execSystemId}${job.execSystemOutputDir}`;
+      history.push(path);
+    }
+  };
+
   return (
     <div id="file-operation-toolbar">
       {pathname && (
         <div className={styles['toolbar-wrapper']}>
+          <ToolbarButton
+            text="See Files"
+            icon="copy"
+            disabled={false}
+            onClick={handleClickFiles}
+            aria-label="createSystem"
+          />
           <ToolbarButton
             text="Cancel Job"
             icon="trash"
@@ -79,5 +97,3 @@ const JobsToolbar: React.FC<{ jobUuid: string }> = ({ jobUuid }) => {
 };
 
 export default JobsToolbar;
-
-// JobUuid = pathname.split("/")[2]

src/tapis-ui/components/jobs/JobDetail/JobDetail.tsx

@@ -3,7 +3,6 @@ import { useDetails } from 'tapis-hooks/jobs';
 import { Jobs } from '@tapis/tapis-typescript';
 import { DescriptionList } from 'tapis-ui/_common';
 import { QueryWrapper } from 'tapis-ui/_wrappers';
-import { Link } from 'react-router-dom';
 
 const JobDetail: React.FC<{ jobUuid: string }> = ({ jobUuid }) => {
   const { data, isLoading, error } = useDetails(jobUuid);
@@ -15,9 +14,6 @@ const JobDetail: React.FC<{ jobUuid: string }> = ({ jobUuid }) => {
     <QueryWrapper isLoading={isLoading} error={error}>
       <h3>{job?.name}</h3>
       <h5>{job?.uuid}</h5>
-      <Link to={`/files/${job?.execSystemId}${job?.execSystemOutputDir}`}>
-        See Files
-      </Link>
       {job && <DescriptionList data={job} />}
     </QueryWrapper>
   );