From f549a36c6f7a9b1c8a06a767cee54094a74186db Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Sat, 4 Jun 2022 15:07:21 -0500
Subject: [PATCH] Queue status/timeleft improvements

Closes #1424
---
 .../src/Activity/Queue/QueueStatusCell.css    |  4 ++++
 .../src/Activity/Queue/QueueStatusCell.js     | 20 ++++++++++++-------
 frontend/src/Activity/Queue/TimeleftCell.js   |  6 +++---
 frontend/src/Components/Icon.css              |  4 ++++
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Activity/Queue/QueueStatusCell.css b/frontend/src/Activity/Queue/QueueStatusCell.css
index e1b9a23e9..538d5a15d 100644
--- a/frontend/src/Activity/Queue/QueueStatusCell.css
+++ b/frontend/src/Activity/Queue/QueueStatusCell.css
@@ -3,3 +3,7 @@
 
   width: 30px;
 }
+
+.noMessages {
+  margin-bottom: 10px;
+}
diff --git a/frontend/src/Activity/Queue/QueueStatusCell.js b/frontend/src/Activity/Queue/QueueStatusCell.js
index b7040c876..6d5caf6f9 100644
--- a/frontend/src/Activity/Queue/QueueStatusCell.js
+++ b/frontend/src/Activity/Queue/QueueStatusCell.js
@@ -13,7 +13,10 @@ function getDetailedPopoverBody(statusMessages) {
       {
         statusMessages.map(({ title, messages }) => {
           return (
-            <div key={title}>
+            <div
+              key={title}
+              className={messages.length ? undefined: styles.noMessages}
+            >
               {title}
               <ul>
                 {
@@ -52,10 +55,6 @@ function QueueStatusCell(props) {
   let iconKind = kinds.DEFAULT;
   let title = translate('Downloading');
 
-  if (hasWarning) {
-    iconKind = kinds.WARNING;
-  }
-
   if (status === 'paused') {
     iconName = icons.PAUSED;
     title = 'Paused';
@@ -72,17 +71,24 @@ function QueueStatusCell(props) {
 
     if (trackedDownloadState === 'importPending') {
       title += ' - Waiting to Import';
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'importing') {
       title += ' - Importing';
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {
       title += ' - Waiting to Process';
+      iconKind = kinds.DANGER;
     }
   }
 
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
   if (status === 'delay') {
     iconName = icons.PENDING;
     title = 'Pending';
@@ -146,8 +152,8 @@ QueueStatusCell.propTypes = {
 };
 
 QueueStatusCell.defaultProps = {
-  trackedDownloadStatus: 'ok',
-  trackedDownloadState: 'downloading'
+  trackedDownloadStatus: 'Ok',
+  trackedDownloadState: 'Downloading'
 };
 
 export default QueueStatusCell;
diff --git a/frontend/src/Activity/Queue/TimeleftCell.js b/frontend/src/Activity/Queue/TimeleftCell.js
index 56132671c..f2aa1390a 100644
--- a/frontend/src/Activity/Queue/TimeleftCell.js
+++ b/frontend/src/Activity/Queue/TimeleftCell.js
@@ -20,7 +20,7 @@ function TimeleftCell(props) {
     timeFormat
   } = props;
 
-  if (status === 'Delay') {
+  if (status === 'delay') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
@@ -34,7 +34,7 @@ function TimeleftCell(props) {
     );
   }
 
-  if (status === 'DownloadClientUnavailable') {
+  if (status === 'downloadClientUnavailable') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
@@ -48,7 +48,7 @@ function TimeleftCell(props) {
     );
   }
 
-  if (!timeleft) {
+  if (!timeleft || status === 'completed' || status === 'failed') {
     return (
       <TableRowCell className={styles.timeleft}>
         -
diff --git a/frontend/src/Components/Icon.css b/frontend/src/Components/Icon.css
index df1ff5327..db95e019b 100644
--- a/frontend/src/Components/Icon.css
+++ b/frontend/src/Components/Icon.css
@@ -25,3 +25,7 @@
 .warning {
   color: $warningColor;
 }
+
+.purple {
+  color: $purple;
+}