feat(GUI): perform drive auto-selection when no selected image (#602)

Currently, we intentionally prevent a drive from being auto-selected if
there was no selected image for UX purposes, however this way of
thinking has been challenged, and we didn't find a real UX problem by
doing this.

As a minor design improvement, we gray out the drive name in the main
window when an image hasn't been selected yet.

Change-Type: minor
Changelog-Entry: Perform drive auto-selection even when there is no selected image.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

build/css/main.css

@@ -6596,6 +6596,9 @@ body {
 .relative {
   position: relative; }
 
+.soft {
+  color: #787c7f; }
+
 .section-footer {
   display: flex;
   align-items: center;

lib/gui/models/store.js

@@ -90,11 +90,7 @@ const storeReducer = (state, action) => {
 
       const newState = state.set('availableDrives', Immutable.fromJS(action.data));
 
-      // Notice we only autoselect the drive if there is an image,
-      // which means that the first step was completed successfully,
-      // otherwise the drive is selected while the drive step is disabled
-      // which looks very weird.
-      if (action.data.length === 1 && state.hasIn([ 'selection', 'image' ])) {
+      if (action.data.length === 1) {
 
         const drive = _.first(action.data);
 
@@ -108,7 +104,7 @@ const storeReducer = (state, action) => {
 
       }
 
-      const selectedDevice = state.getIn([ 'selection', 'drive', 'device' ]);
+      const selectedDevice = newState.getIn([ 'selection', 'drive' ]);
 
       if (selectedDevice && !_.find(action.data, {
         device: selectedDevice

lib/gui/partials/main.html

@@ -61,7 +61,9 @@
 
         </div>
         <div ng-show="app.selection.hasDrive()">
-          <div>{{ app.selection.getDrive().name }} - {{ app.selection.getDrive().size | gigabyte | number:1 }} GB</div>
+          <div ng-class="{
+            soft: !app.selection.hasImage()
+          }">{{ app.selection.getDrive().name }} - {{ app.selection.getDrive().size | gigabyte | number:1 }} GB</div>
           <button class="btn btn-link step-footer"
             ng-click="app.reselectDrive()"
             ng-hide="app.writer.isFlashing()">Change</button>

lib/gui/scss/main.scss

@@ -71,6 +71,10 @@ body {
   position: relative;
 }
 
+.soft {
+  color: $color-disabled;
+}
+
 .section-footer {
   @extend .text-center;
 

tests/gui/models/drives.spec.js

@@ -85,7 +85,7 @@ describe('Browser: DrivesModel', function() {
             SelectionStateModel.removeImage();
           });
 
-          it('should not auto-select a single valid available drive', function() {
+          it('should auto-select a single valid available drive', function() {
             m.chai.expect(SelectionStateModel.hasDrive()).to.be.false;
 
             DrivesModel.setDrives([
@@ -99,7 +99,8 @@ describe('Browser: DrivesModel', function() {
               }
             ]);
 
-            m.chai.expect(SelectionStateModel.hasDrive()).to.be.false;
+            m.chai.expect(SelectionStateModel.hasDrive()).to.be.true;
+            m.chai.expect(SelectionStateModel.getDrive().device).to.equal('/dev/sdb');
           });
 
         });
@@ -253,9 +254,21 @@ describe('Browser: DrivesModel', function() {
           SelectionStateModel.removeDrive();
         });
 
-        it('should be deleted if its not contain in the available drives anymore', function() {
+        it('should be deleted if its not contained in the available drives anymore', function() {
           m.chai.expect(SelectionStateModel.hasDrive()).to.be.true;
+
+          // We have to provide at least two drives, otherwise,
+          // if we only provide one, the single drive will be
+          // auto-selected.
           DrivesModel.setDrives([
+            {
+              device: '/dev/sda',
+              name: 'USB Drive',
+              size: 9999999,
+              mountpoint: '/mnt/bar',
+              system: false,
+              protected: false
+            },
             {
               device: '/dev/sdb',
               name: 'SD Card',
@@ -265,6 +278,7 @@ describe('Browser: DrivesModel', function() {
               protected: false
             }
           ]);
+
           m.chai.expect(SelectionStateModel.hasDrive()).to.be.false;
         });