feat(GUI): env var toggle autoselecting all valid drives (#2306)

We introduce an environment variable
`ETCHER_DISABLE_EXPLICIT_DRIVE_SELECTION` that both enables
autoselection of drives and disables explicit drive selection by hiding
the buttons allowing this. All valid drives are autoselected, i.e. any
drive-image pair that does not result in an error, however warnings are
accepted.

Closes: https://github.com/resin-io/etcher/issues/2262
Change-Type: patch
Changelog-Entry: Introduce env var to toggle autoselection of all
drives.

lib/gui/app/pages/main/controllers/drive-selection.js

@@ -18,6 +18,7 @@
 
 const _ = require('lodash')
 const angular = require('angular')
+const prettyBytes = require('pretty-bytes')
 const settings = require('../../../models/settings')
 const selectionState = require('../../../../../shared/models/selection-state')
 const analytics = require('../../../modules/analytics')
@@ -44,9 +45,35 @@ module.exports = function (DriveSelectorService) {
       return _.head(drives).description || 'Untitled Device'
     }
 
+    // eslint-disable-next-line no-magic-numbers
+    if (drives.length === 0) {
+      return 'No targets found'
+    }
+
     return `${drives.length} Devices`
   }
 
+  /**
+   * @summary Get drive subtitle
+   * @function
+   * @public
+   *
+   * @returns {String} - drives subtitle
+   *
+   * @example
+   * console.log(DriveSelectionController.getDrivesSubtitle())
+   * > '32 GB'
+   */
+  this.getDrivesSubtitle = () => {
+    const drive = selectionState.getCurrentDrive()
+
+    if (drive) {
+      return prettyBytes(drive.size)
+    }
+
+    return 'Please insert at least one target device'
+  }
+
   /**
    * @summary Get drive list label
    * @function
@@ -109,4 +136,18 @@ module.exports = function (DriveSelectorService) {
    * DriveSelectionController.getMemoizedSelectedDrives()
    */
   this.getMemoizedSelectedDrives = utils.memoize(selectionState.getSelectedDrives, angular.equals)
+
+  /**
+   * @summary Should the drive selection button be shown
+   * @function
+   * @public
+   *
+   * @returns {Boolean}
+   *
+   * @example
+   * DriveSelectionController.shouldShowDrivesButton()
+   */
+  this.shouldShowDrivesButton = () => {
+    return !process.env.ETCHER_DISABLE_EXPLICIT_DRIVE_SELECTION
+  }
 }

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

@@ -33,6 +33,10 @@ svg-icon > img[disabled] {
   color: $palette-theme-dark-disabled-foreground;
 }
 
+.page-main .step-drive.text-warning {
+  color: $palette-theme-warning-background;
+}
+
 .page-main .relative {
   position: relative;
 }
@@ -123,8 +127,13 @@ svg-icon > img[disabled] {
 }
 
 .page-main .step-name {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 39px;
   width: 100%;
   margin-right: 4.5px;
+  margin-bottom: 10px;
   font-weight: bold;
   color: $palette-theme-primary-foreground;
 }

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

@@ -49,7 +49,7 @@
       </div>
 
       <div class="space-vertical-large">
-        <div ng-if="!main.selection.hasDrive()">
+        <div ng-if="!main.selection.hasDrive() && drive.shouldShowDrivesButton()">
 
           <div>
             <button class="button button-primary button-brick"
@@ -59,21 +59,24 @@
           </div>
 
         </div>
-        <div ng-if="main.selection.hasDrive()">
+        <div ng-if="main.selection.hasDrive() || !drive.shouldShowDrivesButton()">
 
           <div class="step-selection-text"
             ng-class="{
               'text-disabled': main.shouldDriveStepBeDisabled()
             }">
-            <span class="drive-step step-name"
+            <span class="step-drive step-name"
+              ng-class="{
+                'text-warning': !main.selection.getSelectedDevices().length
+              }"
               uib-tooltip="{{ drive.getDriveListLabel() }}">
               <!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
               {{ drive.getDrivesTitle() | middleEllipsis:20 }}
             </span>
             <span
-              ng-if="main.selection.getSelectedDevices().length === 1"
+              ng-if="main.selection.getSelectedDevices().length <= 1"
               class="step-drive step-size">
-              {{ main.selection.getCurrentDrive().size | closestUnit }}
+              {{ drive.getDrivesSubtitle() }}
             </span>
             <span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
               uib-tooltip="{{ main.constraints.getListDriveImageCompatibilityStatuses(main.selection.getSelectedDrives(), main.selection.getImage())[0].message }}"
@@ -81,8 +84,8 @@
           </div>
           <button class="button button-link step-footer"
             tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
-            ng-click="drive.reselectDrive()"
-            ng-hide="main.state.isFlashing()">Change</button>
+            ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
+            ng-click="drive.reselectDrive()">Change</button>
         </div>
         <div ng-if="main.selection.getSelectedDevices().length > 1"
           class="step-drive step-list">

lib/gui/css/main.css

@@ -6517,6 +6517,9 @@ svg-icon > img[disabled] {
 .page-main .text-disabled > span {
   color: #787c7f; }
 
+.page-main .step-drive.text-warning {
+  color: #ff912f; }
+
 .page-main .relative {
   position: relative; }
 
@@ -6586,8 +6589,13 @@ svg-icon > img[disabled] {
   vertical-align: text-top; }
 
 .page-main .step-name {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 39px;
   width: 100%;
   margin-right: 4.5px;
+  margin-bottom: 10px;
   font-weight: bold;
   color: #fff; }
 

lib/shared/store.js

@@ -197,41 +197,43 @@ const storeReducer = (state = DEFAULT_STATE, action) => {
         return accState
       }, newState)
 
+      const shouldAutoselectAll = Boolean(process.env.ETCHER_DISABLE_EXPLICIT_DRIVE_SELECTION)
       const AUTOSELECT_DRIVE_COUNT = 1
-      const numberOfDrives = drives.length
       const nonStaleSelectedDevices = nonStaleNewState.getIn([ 'selection', 'devices' ]).toJS()
       const hasSelectedDevices = nonStaleSelectedDevices.length >= AUTOSELECT_DRIVE_COUNT
-      if (numberOfDrives === AUTOSELECT_DRIVE_COUNT && !hasSelectedDevices) {
-        const [ drive ] = drives
+      const shouldAutoselectOne = drives.length === AUTOSELECT_DRIVE_COUNT && !hasSelectedDevices
 
+      if (shouldAutoselectOne || shouldAutoselectAll) {
         // Even if there's no image selected, we need to call several
         // drive/image related checks, and `{}` works fine with them
         const image = state.getIn([ 'selection', 'image' ], Immutable.fromJS({})).toJS()
 
-        if (_.every([
-          constraints.isDriveValid(drive, image),
-          constraints.isDriveSizeRecommended(drive, image),
+        return _.reduce(drives, (accState, drive) => {
+          if (_.every([
+            constraints.isDriveValid(drive, image),
+            constraints.isDriveSizeRecommended(drive, image),
 
-          // We don't want to auto-select large drives
-          !constraints.isDriveSizeLarge(drive),
+            // We don't want to auto-select large drives
+            !constraints.isDriveSizeLarge(drive),
 
-          // We don't want to auto-select system drives,
-          // even when "unsafe mode" is enabled
-          !constraints.isSystemDrive(drive)
+            // We don't want to auto-select system drives,
+            // even when "unsafe mode" is enabled
+            !constraints.isSystemDrive(drive)
 
-        ])) {
-          // Auto-select this drive
-          return storeReducer(nonStaleNewState, {
-            type: ACTIONS.SELECT_DRIVE,
+          ]) || (shouldAutoselectAll && constraints.isDriveValid(drive, image))) {
+            // Auto-select this drive
+            return storeReducer(accState, {
+              type: ACTIONS.SELECT_DRIVE,
+              data: drive.device
+            })
+          }
+
+          // Deselect this drive in case it still is selected
+          return storeReducer(accState, {
+            type: ACTIONS.DESELECT_DRIVE,
             data: drive.device
           })
-        }
-
-        // Deselect this drive in case it still is selected
-        return storeReducer(nonStaleNewState, {
-          type: ACTIONS.DESELECT_DRIVE,
-          data: drive.device
-        })
+        }, nonStaleNewState)
       }
 
       return nonStaleNewState