From 4c40c8ff30b921c302883db9ae8f267a6d27095d Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Wed, 13 Dec 2017 13:50:32 -0400 Subject: [PATCH 1/3] feat(GUI): link to drivers when clicking a driverless usbboot device Step 2 until we support installing the drivers from within Etcher. This also introduces an "Open drive link" Mixpanel event. See: https://www.raspberrypi.org/documentation/hardware/computemodule/cm-emmc-flashing.md See: https://github.com/resin-io/etcher/pull/1892 Change-Type: patch Changelog-Entry: Download usbboot drivers installer when clicking a driverless usbboot device on Windows. Signed-off-by: Juan Cruz Viotti --- .../controllers/drive-selector.js | 21 ++++++++++++++++++- .../drive-selector/drive-selector.js | 4 +++- .../templates/drive-selector-modal.tpl.html | 2 +- lib/sdk/adapters/usbboot/index.js | 2 ++ 4 files changed, 26 insertions(+), 3 deletions(-) diff --git a/lib/gui/app/components/drive-selector/controllers/drive-selector.js b/lib/gui/app/components/drive-selector/controllers/drive-selector.js index cf5dd1e3..dd3bb49a 100644 --- a/lib/gui/app/components/drive-selector/controllers/drive-selector.js +++ b/lib/gui/app/components/drive-selector/controllers/drive-selector.js @@ -18,6 +18,7 @@ const angular = require('angular') const _ = require('lodash') +const Bluebird = require('bluebird') const constraints = require('../../../../../shared/drive-constraints') const analytics = require('../../../modules/analytics') const availableDrives = require('../../../../../shared/models/available-drives') @@ -26,7 +27,9 @@ const utils = require('../../../../../shared/utils') module.exports = function ( $q, - $uibModalInstance + $uibModalInstance, + WarningModalService, + OSOpenExternalService ) { /** * @summary The drive selector state @@ -97,7 +100,23 @@ 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() }) } diff --git a/lib/gui/app/components/drive-selector/drive-selector.js b/lib/gui/app/components/drive-selector/drive-selector.js index f41f6e30..e181d5a2 100644 --- a/lib/gui/app/components/drive-selector/drive-selector.js +++ b/lib/gui/app/components/drive-selector/drive-selector.js @@ -24,7 +24,9 @@ const angular = require('angular') const MODULE_NAME = 'Etcher.Components.DriveSelector' const DriveSelector = angular.module(MODULE_NAME, [ require('../modal/modal'), - require('../../utils/byte-size/byte-size') + require('../warning-modal/warning-modal'), + require('../../utils/byte-size/byte-size'), + require('../../os/open-external/open-external') ]) DriveSelector.controller('DriveSelectorController', require('./controllers/drive-selector')) diff --git a/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html index ed0d9971..ea1bbe02 100644 --- a/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html +++ b/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html @@ -6,7 +6,7 @@
  • Drive device type logo Date: Wed, 2 May 2018 23:21:02 +0200 Subject: [PATCH 2/3] feat(gui): Add simple confirmation modal --- .../components/confirm-modal/confirm-modal.js | 32 ++++++++++++ .../controllers/confirm-modal.js | 50 ++++++++++++++++++ .../confirm-modal/services/confirm-modal.js | 52 +++++++++++++++++++ .../confirm-modal/styles/confirm-modal.scss | 28 ++++++++++ .../templates/confirm-modal.tpl.html | 36 +++++++++++++ 5 files changed, 198 insertions(+) create mode 100644 lib/gui/app/components/confirm-modal/confirm-modal.js create mode 100644 lib/gui/app/components/confirm-modal/controllers/confirm-modal.js create mode 100644 lib/gui/app/components/confirm-modal/services/confirm-modal.js create mode 100644 lib/gui/app/components/confirm-modal/styles/confirm-modal.scss create mode 100644 lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html diff --git a/lib/gui/app/components/confirm-modal/confirm-modal.js b/lib/gui/app/components/confirm-modal/confirm-modal.js new file mode 100644 index 00000000..c5c09a89 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/confirm-modal.js @@ -0,0 +1,32 @@ +/* + * Copyright 2018 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict' + +/** + * @module Etcher.Components.ConfirmModal + */ + +const angular = require('angular') +const MODULE_NAME = 'Etcher.Components.ConfirmModal' +const ConfirmModal = angular.module(MODULE_NAME, [ + require('../modal/modal') +]) + +ConfirmModal.controller('ConfirmModalController', require('./controllers/confirm-modal')) +ConfirmModal.service('ConfirmModalService', require('./services/confirm-modal')) + +module.exports = MODULE_NAME diff --git a/lib/gui/app/components/confirm-modal/controllers/confirm-modal.js b/lib/gui/app/components/confirm-modal/controllers/confirm-modal.js new file mode 100644 index 00000000..983f7db7 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/controllers/confirm-modal.js @@ -0,0 +1,50 @@ +/* + * Copyright 2018 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict' + +module.exports = function ($uibModalInstance, options) { + /** + * @summary Modal options + * @type {Object} + * @public + */ + this.options = options + + /** + * @summary Reject the warning prompt + * @function + * @public + * + * @example + * WarningModalController.reject(); + */ + this.reject = () => { + $uibModalInstance.close(false) + } + + /** + * @summary Accept the warning prompt + * @function + * @public + * + * @example + * WarningModalController.accept(); + */ + this.accept = () => { + $uibModalInstance.close(true) + } +} diff --git a/lib/gui/app/components/confirm-modal/services/confirm-modal.js b/lib/gui/app/components/confirm-modal/services/confirm-modal.js new file mode 100644 index 00000000..497b98e1 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/services/confirm-modal.js @@ -0,0 +1,52 @@ +/* + * Copyright 2018 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict' + +const _ = require('lodash') + +module.exports = function ($sce, ModalService) { + /** + * @summary show the confirm modal + * @function + * @public + * + * @param {Object} options - options + * @param {String} options.description - danger message + * @param {String} options.confirmationLabel - confirmation button text + * @param {String} options.rejectionLabel - rejection button text + * @fulfil {Boolean} - whether the user accepted or rejected the confirm + * @returns {Promise} + * + * @example + * ConfirmModalService.show({ + * description: 'Don\'t do this!', + * confirmationLabel: 'Yes, continue!' + * }); + */ + this.show = (options = {}) => { + options.description = $sce.trustAsHtml(options.description) + return ModalService.open({ + name: 'confirm', + template: require('../templates/confirm-modal.tpl.html'), + controller: 'ConfirmModalController as modal', + size: 'confirm-modal', + resolve: { + options: _.constant(options) + } + }).result + } +} diff --git a/lib/gui/app/components/confirm-modal/styles/confirm-modal.scss b/lib/gui/app/components/confirm-modal/styles/confirm-modal.scss new file mode 100644 index 00000000..b13cafa7 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/styles/confirm-modal.scss @@ -0,0 +1,28 @@ +/* + * Copyright 2016 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.modal-confirm-modal .modal-content { + width: 350px; +} + +.modal-confirm-modal .modal-title .glyphicon { + color: $palette-theme-danger-background; +} + +.modal-confirm-modal .modal-body { + max-height: 200px; + overflow-y: auto; +} diff --git a/lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html b/lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html new file mode 100644 index 00000000..d0f5cf04 --- /dev/null +++ b/lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html @@ -0,0 +1,36 @@ +
    +

    + {{ ::modal.options.title }} +

    + +
    + +
    +

    {{ ::modal.options.message }}

    +
    + +
    +
    + + +
    +
    + From 8f762484f29e5f2e28eaa2865f232643bf1cbcf2 Mon Sep 17 00:00:00 2001 From: Jonas Hermsmeier Date: Wed, 2 May 2018 23:25:13 +0200 Subject: [PATCH 3/3] feat(gui): Add CTA in drivelist, update drive download modal --- .../controllers/drive-selector.js | 56 ++++++++++++++----- .../drive-selector/drive-selector.js | 2 +- .../templates/drive-selector-modal.tpl.html | 5 +- lib/sdk/adapters/usbboot/index.js | 10 +++- 4 files changed, 53 insertions(+), 20 deletions(-) diff --git a/lib/gui/app/components/drive-selector/controllers/drive-selector.js b/lib/gui/app/components/drive-selector/controllers/drive-selector.js index dd3bb49a..0b873049 100644 --- a/lib/gui/app/components/drive-selector/controllers/drive-selector.js +++ b/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 diff --git a/lib/gui/app/components/drive-selector/drive-selector.js b/lib/gui/app/components/drive-selector/drive-selector.js index e181d5a2..adf0ed6b 100644 --- a/lib/gui/app/components/drive-selector/drive-selector.js +++ b/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') ]) diff --git a/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html index ea1bbe02..07520725 100644 --- a/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html +++ b/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html @@ -6,7 +6,7 @@
    • Drive device type logo - {{ drive.size | closestUnit }} -

      {{ drive.displayName }}

      +

      {{ drive.displayName }}

      +

      {{ drive.displayName }} - {{ drive.linkCTA }}