feat(gui): Add CTA in drivelist, update drive download modal

lib/gui/app/components/drive-selector/controllers/drive-selector.js

@@ -28,7 +28,7 @@ const utils = require('../../../../../shared/utils')
 module.exports = function (
   $q,
   $uibModalInstance,
-  WarningModalService,
+  ConfirmModalService,
   OSOpenExternalService
 ) {
   /**
@@ -100,26 +100,52 @@ module.exports = function (
         })
 
         selectionState.toggleDrive(drive.device)
-      } else if (drive.link) {
-        analytics.logEvent('Open drive link modal', {
-          url: drive.link
-        })
-
-        const message = drive.message || `Etcher will open ${drive.link} in your browser`
-        return WarningModalService.display({
-          confirmationLabel: 'Yes, continue',
-          description: `${message}. Are you sure you want to continue?`
-        }).then((answer) => {
-          if (answer) {
-            OSOpenExternalService.open(drive.link)
-          }
-        })
       }
 
       return Bluebird.resolve()
     })
   }
 
+  /**
+   * @summary Prompt the user to install missing usbboot drivers
+   * @function
+   * @public
+   *
+   * @param {Object} drive - drive
+   * @returns {Promise} - resolved promise
+   *
+   * @example
+   * DriveSelectorController.installMissingDrivers({
+   *   linkTitle: 'Go to example.com',
+   *   linkMessage: 'Examples are great, right?',
+   *   linkCTA: 'Call To Action',
+   *   link: 'https://example.com'
+   * });
+   */
+  this.installMissingDrivers = (drive) => {
+    if (drive.link) {
+      analytics.logEvent('Open driver link modal', {
+        url: drive.link
+      })
+
+      return ConfirmModalService.show({
+        confirmationLabel: 'Yes, continue',
+        rejectionLabel: 'Cancel',
+        title: drive.linkTitle,
+        confirmButton: 'primary',
+        message: drive.linkMessage || `Etcher will open ${drive.link} in your browser`
+      }).then((shouldContinue) => {
+        if (shouldContinue) {
+          OSOpenExternalService.open(drive.link)
+        }
+      }).catch((error) => {
+        analytics.logException(error)
+      })
+    }
+
+    return Bluebird.resolve()
+  }
+
   /**
    * @summary Close the modal and resolve the selected drive
    * @function

lib/gui/app/components/drive-selector/drive-selector.js

@@ -24,7 +24,7 @@ const angular = require('angular')
 const MODULE_NAME = 'Etcher.Components.DriveSelector'
 const DriveSelector = angular.module(MODULE_NAME, [
   require('../modal/modal'),
-  require('../warning-modal/warning-modal'),
+  require('../confirm-modal/confirm-modal'),
   require('../../utils/byte-size/byte-size'),
   require('../../os/open-external/open-external')
 ])

lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html

@@ -6,7 +6,7 @@
 <div class="modal-body">
   <ul class="list-group">
     <li class="list-group-item" ng-repeat="drive in modal.getDrives() track by drive.device"
-      ng-disabled="!modal.constraints.isDriveValid(drive, modal.state.getImage()) && !drive.link"
+      ng-disabled="!modal.constraints.isDriveValid(drive, modal.state.getImage())"
       ng-dblclick="modal.selectDriveAndClose(drive)"
       ng-click="modal.toggleDrive(drive)">
         <img class="list-group-item-section" alt="Drive device type logo"
@@ -23,7 +23,8 @@
             <span class="word-keep"
               ng-show="drive.size"> - {{ drive.size | closestUnit }}</span>
           </h4>
-          <p class="list-group-item-text">{{ drive.displayName }}</p>
+          <p class="list-group-item-text" ng-if="!drive.link">{{ drive.displayName }}</p>
+          <p class="list-group-item-text" ng-if="drive.link">{{ drive.displayName }} - <b><a ng-click="modal.installMissingDrivers(drive)">{{ drive.linkCTA }}</a></b></p>
 
           <footer class="list-group-item-footer">
 

lib/sdk/adapters/usbboot/index.js

@@ -273,8 +273,14 @@ class USBBootAdapter extends EventEmitter {
           disabled: true,
           icon: 'warning',
           size: null,
-          link: 'https://github.com/raspberrypi/usbboot/raw/master/win32/rpiboot_setup.exe',
+          link: 'https://www.raspberrypi.org/documentation/hardware/computemodule/cm-emmc-flashing.md',
-          message: 'Etcher will now download the necessary drivers from the Raspberry Pi Foundation',
+          linkCTA: 'Install',
+          linkTitle: 'Install missing drivers',
+          linkMessage: [
+            'Would you like to download the necessary drivers from the Raspberry Pi Foundation?',
+            'This will open your browser.\n\n',
+            'Once opened, download and run the installer from the "Windows Installer" section to install the drivers.'
+          ].join(' '),
           adaptor: USBBootAdapter.id
         }
       }