fix: Update report completion status and generate csv button [PT-1852…

…57065]

This updates the completion status to use different text colors depending on the status.  It alss disables the generate csv button until the completion status is succeeded.

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;
   }

researcher-reports/src/components/query-item.tsx

@@ -126,6 +126,21 @@ export const QueryItem: React.FC<IProps> = (props) => {
     }
   };
 
+  const lowerQueryCompletionStatus = queryCompletionStatus.toLowerCase();
+  const running = lowerQueryCompletionStatus === "running";
+  const succeeded = lowerQueryCompletionStatus === "succeeded";
+  const failed = lowerQueryCompletionStatus === "failed";
+
+  // show the generate button until it succeeds and it is clicked
+  // the button will be disabled until it succeeds
+  const showGenerateCSVLinkButton = !succeeded || !downloadURL;
+
+  const renderCompletionStatus = () => {
+    const suffix = running ? "... (please wait)" : "";
+    const className = running ? "running" : (succeeded ? "succeeded" : (failed ? "failed" : ""));
+    return <span className={className}>${lowerQueryCompletionStatus}${suffix}</span>;
+  };
+
   return (
     <div className="query-item">
       { queryExecutionStatus
@@ -134,9 +149,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: {renderCompletionStatus()}</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