feat: add icon next to drive on warnings (#2014)

We add an icon next to the drive size that is displayed when there is a
drive-image compatibility status message available. We display the first
one in the list and importance is then enforced by the order they are
added to the list in `drive-constraints`.

Change-Type: patch
Changelog-Entry: Add icon next to drive size when compatibility warnings exist.

lib/gui/app/pages/main/controllers/main.js

@@ -22,6 +22,7 @@ const analytics = require('../../../modules/analytics')
 const exceptionReporter = require('../../../modules/exception-reporter')
 const availableDrives = require('../../../../../shared/models/available-drives')
 const selectionState = require('../../../../../shared/models/selection-state')
+const driveConstraints = require('../../../../../shared/drive-constraints')
 
 module.exports = function (
   TooltipModalService,
@@ -33,6 +34,7 @@ module.exports = function (
   this.state = flashState
   this.settings = settings
   this.external = OSOpenExternalService
+  this.constraints = driveConstraints
 
   /**
    * @summary Determine if the drive step should be disabled

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

@@ -64,13 +64,16 @@
           <div class="step-selection-text"
             ng-class="{
               'text-disabled': main.shouldDriveStepBeDisabled()
-            }"
+            }">
-            uib-tooltip="{{ main.selection.getDrive().description }} ({{ main.selection.getDrive().displayName }})">
+            <span class="drive-step step-name"
-            <span class="step-drive step-name">
+              uib-tooltip="{{ main.selection.getDrive().description }} ({{ main.selection.getDrive().displayName }})">
               <!-- middleEllipses errors on undefined, therefore fallback to empty string -->
               {{ (main.selection.getDrive().description || "") | middleEllipses:11 }}
             </span>
             <span class="step-drive step-size">{{ main.selection.getDrive().size | closestUnit }}</span>
+            <span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
+              uib-tooltip="{{ main.constraints.getDriveImageCompatibilityStatuses(main.selection.getDrive(), main.selection.getImage())[0].message }}"
+              ng-show="main.constraints.hasDriveImageCompatibilityStatus(main.selection.getDrive(), main.selection.getImage())"></span>
           </div>
           <button class="button button-link step-footer"
             tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"

lib/shared/drive-constraints.js

@@ -426,3 +426,24 @@ exports.getDriveImageCompatibilityStatuses = (drive, image) => {
 
   return statusList
 }
+
+/**
+ * @summary Does the drive/image pair have at least one compatibility status?
+ * @function
+ * @public
+ *
+ * @description
+ * Given an image and a drive, return whether they have a connected compatibility status object.
+ *
+ * @param {Object} drive - drive
+ * @param {Object} image - image
+ * @returns {Boolean}
+ *
+ * @example
+ * if (constraints.hasDriveImageCompatibilityStatus(drive, image)) {
+ *   console.log('This drive-image pair has a compatibility status message!')
+ * }
+ */
+exports.hasDriveImageCompatibilityStatus = (drive, image) => {
+  return Boolean(exports.getDriveImageCompatibilityStatuses(drive, image).length)
+}