Merge pull request #198 from concord-consortium/185257065-update-gene…

…rate-csv-button fix: Update report completion status and generate csv button [PT-185257065]
concord-consortium · Oct 16, 2023 · 39091c7 · 39091c7
2 parents f58923f + 1e2eb08
commit 39091c7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/researcher-reports/src/components/query-item.scss b/researcher-reports/src/components/query-item.scss
@@ -24,6 +24,16 @@
     margin: 5px 10px;
   }
 
+  .succeeded {
+    color: #007A00;
+  }
+  .running {
+    color: #00778F;
+  }
+  .failed {
+    color: #DB0000;
+  }
+
   button {
     margin: 5px 10px;
   }

diff --git a/researcher-reports/src/components/query-item.tsx b/researcher-reports/src/components/query-item.tsx
@@ -126,6 +126,15 @@ export const QueryItem: React.FC<IProps> = (props) => {
     }
   };
 
+  const lowerQueryCompletionStatus = queryCompletionStatus.toLowerCase();
+  const running = lowerQueryCompletionStatus === "running";
+  const succeeded = lowerQueryCompletionStatus === "succeeded";
+  const completionStatusSuffix = running ? "... (please wait)" : "";
+
+  // show the generate button until it succeeds and it is clicked
+  // the button will be disabled until it succeeds
+  const showGenerateCSVLinkButton = !succeeded || !downloadURL;
+
   return (
     <div className="query-item">
       { queryExecutionStatus
@@ -134,9 +143,9 @@ export const QueryItem: React.FC<IProps> = (props) => {
             {resourceName && <div className="item-info">{`Name: ${resourceName}`}</div>}
             {resourceType && <div className="item-info">{`Type: ${resourceType}`}</div>}
             <div className="item-info">{`Creation date: ${submissionDateTime}`}</div>
-            <div className="item-info">{`Completion status: ${queryCompletionStatus.toLowerCase()}`}</div>
-            { !downloadURL
-              ? <button onClick={handleGetSignedDownloadLink}>Generate CSV Download Link</button>
+            <div className="item-info">Completion status: <span className={lowerQueryCompletionStatus}>${lowerQueryCompletionStatus}${completionStatusSuffix}</span></div>
+            { showGenerateCSVLinkButton
+              ? <button onClick={handleGetSignedDownloadLink} disabled={!succeeded}>Generate CSV Download Link</button>
               : <>
                   <div className="item-info">Download CSV (link valid for 10 minutes):</div>
                   { downloadURLStatus