From ab4306f073f625f58e37e812e2377d1b9a8941c8 Mon Sep 17 00:00:00 2001
From: Jackson Thetford <111920176+jthet@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:34:35 -0600
Subject: [PATCH] Feature/see files button (#348)

* added see files button to jobs toolbar

* fixed compile error

* ran prettier and linting
---
 .../_components/JobsToolbar/JobsToolbar.tsx   | 24 +++++++++++++++----
 .../components/jobs/JobDetail/JobDetail.tsx   |  4 ----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/tapis-app/Jobs/_components/JobsToolbar/JobsToolbar.tsx b/src/tapis-app/Jobs/_components/JobsToolbar/JobsToolbar.tsx
index 00bc531d2..e9749b4a1 100644
--- a/src/tapis-app/Jobs/_components/JobsToolbar/JobsToolbar.tsx
+++ b/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]
diff --git a/src/tapis-ui/components/jobs/JobDetail/JobDetail.tsx b/src/tapis-ui/components/jobs/JobDetail/JobDetail.tsx
index 7f04d875c..cfcd40918 100644
--- a/src/tapis-ui/components/jobs/JobDetail/JobDetail.tsx
+++ b/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>
   );