From f5a083bc8fd1011b0b32dbca2be834a2efc267c0 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Fri, 13 Oct 2023 11:40:35 -0400
Subject: [PATCH 1/2] fix: Update report completion status and generate csv
 button [PT-185257065]

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.
---
 .../src/components/query-item.scss            | 10 +++++++++
 .../src/components/query-item.tsx             | 21 ++++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/researcher-reports/src/components/query-item.scss b/researcher-reports/src/components/query-item.scss
index 6979f1b4..b2d3b130 100644
--- 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
index 5ccdd32e..72e99933 100644
--- a/researcher-reports/src/components/query-item.tsx
+++ b/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

From 1e2eb0868355f1f815847644a96c77eef905a993 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Mon, 16 Oct 2023 09:53:55 -0400
Subject: [PATCH 2/2] Simplified rendering of completion status

---
 researcher-reports/src/components/query-item.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/researcher-reports/src/components/query-item.tsx b/researcher-reports/src/components/query-item.tsx
index 72e99933..314ed483 100644
--- a/researcher-reports/src/components/query-item.tsx
+++ b/researcher-reports/src/components/query-item.tsx
@@ -129,18 +129,12 @@ export const QueryItem: React.FC<IProps> = (props) => {
   const lowerQueryCompletionStatus = queryCompletionStatus.toLowerCase();
   const running = lowerQueryCompletionStatus === "running";
   const succeeded = lowerQueryCompletionStatus === "succeeded";
-  const failed = lowerQueryCompletionStatus === "failed";
+  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;
 
-  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
@@ -149,7 +143,7 @@ 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: {renderCompletionStatus()}</div>
+            <div className="item-info">Completion status: <span className={lowerQueryCompletionStatus}>${lowerQueryCompletionStatus}${completionStatusSuffix}</span></div>
             { showGenerateCSVLinkButton
               ? <button onClick={handleGetSignedDownloadLink} disabled={!succeeded}>Generate CSV Download Link</button>
               : <>