feat(GUI): allow opening drive selector modal when no drives (#1146)

We change the drive selector button text to be a static 'select drive'
and allow the user to open the dialog even if there are no drives,
displaying the 'no drives' warning inside the modal.

Closes: https://github.com/resin-io/etcher/issues/884
Changelog-Entry: Allow opening the drive selector modal when there are no
drives.

lib/gui/app.js

@@ -29,7 +29,6 @@ const messages = require('../shared/messages');
 
 /* eslint-enable no-var */
 
-const _ = require('lodash');
 const Store = require('./models/store');
 
 const app = angular.module('Etcher', [
@@ -50,7 +49,6 @@ const app = angular.module('Etcher', [
   // Components
   require('./components/svg-icon/svg-icon'),
   require('./components/update-notifier/update-notifier'),
-  require('./components/drive-selector/drive-selector'),
   require('./components/warning-modal/warning-modal'),
 
   // Pages
@@ -130,7 +128,7 @@ app.run((AnalyticsService, OSWindowProgressService, FlashStateModel) => {
   });
 });
 
-app.run(($timeout, DriveScannerService, DrivesModel, ErrorService, DriveSelectorService) => {
+app.run(($timeout, DriveScannerService, DrivesModel, ErrorService) => {
   DriveScannerService.on('drives', (drives) => {
 
     // Safely trigger a digest cycle.
@@ -140,10 +138,6 @@ app.run(($timeout, DriveScannerService, DrivesModel, ErrorService, DriveSelector
     $timeout(() => {
       DrivesModel.setDrives(drives);
     });
-
-    if (_.isEmpty(drives)) {
-      DriveSelectorService.close();
-    }
   });
 
   DriveScannerService.on('error', ErrorService.reportException);

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

@@ -51,6 +51,13 @@
           ng-show="modal.constraints.isDriveValid(drive, modal.state.getImage())"
           ng-disabled="!modal.state.isCurrentDrive(drive.device)"></span>
     </li>
+    <li class="list-group-item"
+      ng-show="!modal.drives.hasAvailableDrives()">
+      <div>
+        <b>Connect a drive!</b>
+        <div>No removable drive detected.</div>
+      </div>
+    </li>
   </ul>
 </div>
 

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

@@ -48,18 +48,12 @@
       <div class="space-vertical-large">
         <div ng-hide="main.selection.hasDrive()">
 
-          <div ng-show="main.drives.hasAvailableDrives()">
+          <div>
             <button class="button button-primary button-brick"
               ng-disabled="main.shouldDriveStepBeDisabled()"
               ng-click="drive.openDriveSelector()">Select drive</button>
           </div>
 
-          <div ng-hide="main.drives.hasAvailableDrives()">
-            <button
-              class="button button-primary button-brick button-no-hover"
-              ng-disabled="main.shouldDriveStepBeDisabled()">Connect a drive</button>
-          </div>
-
         </div>
         <div ng-show="main.selection.hasDrive()">