feat(gui): show available version in update notifier modal (#928)

We show the Etcher version string in the update notifier modal, by giving
the version string to the template through options similar to the warning
modal.

- We memoize the version Promise and assume the update version won't change
  during runtime.

Changelog-Entry: Show available Etcher version in the update notifier.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>

lib/gui/app.js

@@ -80,7 +80,7 @@ app.run(() => {
   ].join('\n'));
 });
 
-app.run((AnalyticsService, UpdateNotifierService, SelectionStateModel) => {
+app.run((AnalyticsService, ErrorService, UpdateNotifierService, SelectionStateModel) => {
   AnalyticsService.logEvent('Application start');
 
   if (UpdateNotifierService.shouldCheckForUpdates() && !process.env.ETCHER_DISABLE_UPDATES) {
@@ -96,9 +96,9 @@ app.run((AnalyticsService, UpdateNotifierService, SelectionStateModel) => {
       if (!isLatestVersion && !SelectionStateModel.hasImage()) {
 
         AnalyticsService.logEvent('Notifying update');
-        UpdateNotifierService.notify();
+        return UpdateNotifierService.notify();
       }
-    });
+    }).catch(ErrorService.reportException);
   }
 
 });

lib/gui/components/update-notifier/controllers/update-notifier.js

@@ -16,7 +16,7 @@
 
 'use strict';
 
-module.exports = function($uibModalInstance, SettingsModel) {
+module.exports = function($uibModalInstance, SettingsModel, options) {
 
   // We update this value in this controller since its the only place
   // where we can be sure the modal was really presented to the user.
@@ -32,6 +32,13 @@ module.exports = function($uibModalInstance, SettingsModel) {
    */
   this.settings = SettingsModel;
 
+  /**
+   * @summary Modal options
+   * @type Object
+   * @public
+   */
+  this.options = options;
+
   /**
    * @summary Close the modal
    * @function

lib/gui/components/update-notifier/services/update-notifier.js

@@ -16,6 +16,7 @@
 
 'use strict';
 
+const _ = require('lodash');
 const semver = require('semver');
 const etcherLatestVersion = require('etcher-latest-version');
 
@@ -25,6 +26,9 @@ module.exports = function($http, $q, ModalService, UPDATE_NOTIFIER_SLEEP_TIME, M
    * @summary Get the latest available Etcher version
    * @function
    * @private
+   * @description
+   * We assume the received latest version number will not increase
+   * while Etcher is running and memoize it
    *
    * @fulfil {String} - latest version
    * @returns {Promise}
@@ -34,7 +38,7 @@ module.exports = function($http, $q, ModalService, UPDATE_NOTIFIER_SLEEP_TIME, M
    *   console.log(`The latest version is: ${latestVersion}`);
    * });
    */
-  this.getLatestVersion = () => {
+  this.getLatestVersion = _.memoize(() => {
     return $q((resolve, reject) => {
       return etcherLatestVersion((url, callback) => {
         return $http.get(url).then((response) => {
@@ -50,7 +54,9 @@ module.exports = function($http, $q, ModalService, UPDATE_NOTIFIER_SLEEP_TIME, M
         return resolve(latestVersion);
       });
     });
-  };
+
+  // Arbitrary identifier for the memoization function
+  }, _.constant('latest-version'));
 
   /**
    * @summary Check if the current version is the latest version
@@ -111,11 +117,18 @@ module.exports = function($http, $q, ModalService, UPDATE_NOTIFIER_SLEEP_TIME, M
    * UpdateNotifierService.notify();
    */
   this.notify = () => {
-    return ModalService.open({
-      template: './components/update-notifier/templates/update-notifier-modal.tpl.html',
-      controller: 'UpdateNotifierController as modal',
-      size: 'update-notifier'
-    }).result;
+    return this.getLatestVersion().then((version) => {
+      return ModalService.open({
+        template: './components/update-notifier/templates/update-notifier-modal.tpl.html',
+        controller: 'UpdateNotifierController as modal',
+        size: 'update-notifier',
+        resolve: {
+          options: _.constant({
+            version: version
+          })
+        }
+      }).result;
+    });
   };
 
 };

lib/gui/components/update-notifier/templates/update-notifier-modal.tpl.html

@@ -5,10 +5,7 @@
 
 <div class="modal-body">
   <div class="modal-text">
-    <p>A new version of Etcher is available for download</p>
-    <a os-open-external="https://github.com/resin-io/etcher/blob/master/CHANGELOG.md#readme">
-      See what's new
-    </a>
+    <p>Etcher {{ ::modal.options.version }} is available for download</p>
   </div>
 </div>