feat(GUI): remove unnecessary status dots (#2202)

We remove usage of the status dots except when failed devices occur, in
which case we still display the red failed dot and quantity. We also use
singular and plural depending on the quantity of failed devices.

Change-Type: patch

lib/gui/app/pages/main/styles/_main.scss

@@ -141,12 +141,6 @@ svg-icon > img[disabled] {
     margin-right: 5px;
   }
 
-  &.target-status-flashing > .target-status-dot {
-    background-color: $palette-theme-warning-background;
-  }
-  &.target-status-verifying > .target-status-dot {
-    background-color: $palette-theme-primary-background;
-  }
   &.target-status-succeeded > .target-status-dot {
     background-color: $palette-theme-success-background;
   }

lib/gui/app/pages/main/templates/main.tpl.html

@@ -111,12 +111,13 @@
           <span>ETA: {{ main.state.getFlashState().eta | secondsToDate | amDateFormat:'m[m]ss[s]' }}</span>
         </p>
 
-        <div class="target-status-wrap" ng-if="main.state.isFlashing()">
+        <div class="target-status-wrap" ng-if="main.state.getFlashState().failed">
-          <div class="target-status-line target-status-{{ type }}"
+          <div class="target-status-line target-status-failed">
-            ng-repeat="(type, quantity) in main.state.getFlashQuantities()">
+            <span class="target-status-dot"></span>
-              <span class="target-status-dot"></span>
+            <span class="target-status-quantity">{{ main.state.getFlashState().failed }}</span>
-              <span class="target-status-quantity">{{ quantity }}</span>
+            <span class="target-status-message">{{
-              <span class="target-status-message">{{ main.progressMessage[type]() }}</span>
+              main.progressMessage.failed(main.state.getFlashState().failed)
+            }}</span>
           </div>
         </div>
       </div>

lib/gui/css/main.css

@@ -6603,10 +6603,6 @@ svg-icon > img[disabled] {
     height: 8px;
     border-radius: 50%;
     margin-right: 5px; }
-  .target-status-line.target-status-flashing > .target-status-dot {
-    background-color: #ff912f; }
-  .target-status-line.target-status-verifying > .target-status-dot {
-    background-color: #5793db; }
   .target-status-line.target-status-succeeded > .target-status-dot {
     background-color: #5fb835; }
   .target-status-line.target-status-failed > .target-status-dot {

lib/shared/messages.js

@@ -32,20 +32,16 @@ module.exports = {
    */
   progress: {
 
-    flashing: () => {
+    succeeded: (quantity) => {
-      return 'Flashing device(s)'
+      // eslint-disable-next-line no-magic-numbers
+      const plural = quantity > 1 ? 's' : ''
+      return `Succeeded device${plural}`
     },
 
-    verifying: () => {
+    failed: (quantity) => {
-      return 'Validating device(s)'
+      // eslint-disable-next-line no-magic-numbers
-    },
+      const plural = quantity > 1 ? 's' : ''
-
+      return `Failed device${plural}`
-    succeeded: () => {
-      return 'Done device(s)'
-    },
-
-    failed: () => {
-      return 'Failed device(s)'
     }
   },
 

lib/shared/models/flash-state.js

@@ -172,15 +172,6 @@ exports.getFlashState = () => {
   return store.getState().get('flashState').toJS()
 }
 
-exports.getFlashQuantities = () => {
-  return _.pick(exports.getFlashState(), [
-    'flashing',
-    'verifying',
-    'succeeded',
-    'failed'
-  ])
-}
-
 /**
  * @summary Determine if the last flash was cancelled
  * @function