Skip to content

Commit

Permalink
fix: Update report completion status and generate csv button [PT-1852…
Browse files Browse the repository at this point in the history
…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.
  • Loading branch information
dougmartin committed Oct 13, 2023
1 parent d761da5 commit f5a083b
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 3 deletions.
10 changes: 10 additions & 0 deletions researcher-reports/src/components/query-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@
margin: 5px 10px;
}

.succeeded {
color: #007A00;
}
.running {
color: #00778F;
}
.failed {
color: #DB0000;
}

button {
margin: 5px 10px;
}
Expand Down
21 changes: 18 additions & 3 deletions researcher-reports/src/components/query-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down

0 comments on commit f5a083b

Please sign in to comment.