v1.5.79

Fix start script

.gitattributes

@@ -1,6 +1,8 @@
 # Javascript files must retain LF line-endings (to keep eslint happy)
 *.js text eol=lf
 *.jsx text eol=lf
+*.ts text eol=lf
+*.tsx text eol=lf
 # CSS and SCSS files must retain LF line-endings (to keep ensure-staged-sass.sh happy)
 *.css text eol=lf
 *.scss text eol=lf
@@ -26,6 +28,7 @@ Makefile text
 *.patch text
 *.txt text
 CODEOWNERS text
+*.plist text
 
 # Binary files (no line-ending conversions)
 *.bz2 binary diff=hex

.resinci.json

@@ -17,69 +17,37 @@
       "copyright": "Copyright 2016-2019 Balena Ltd",
       "productName": "balenaEtcher",
       "nodeGypRebuild": true,
+      "afterPack": "./afterPack.js",
       "files": [
-        "!node_modules/**/*.js.map",
-        "!node_modules/**/*.h",
-        "!node_modules/**/*.hpp",
-        "!node_modules/**/*.cpp",
-        "!node_modules/**/*.md",
-        "!node_modules/**/*.ts",
-        "!node_modules/**/*.coffee",
-        "!node_modules/**/*.scss",
-        "!node_modules/**/*.less",
-        "!node_modules/**/*.hbs",
-        "!node_modules/**/*.mkd",
-        "!node_modules/**/LICENSE",
-        "!node_modules/**/LICENCE",
-        "!node_modules/**/license",
-        "!node_modules/**/License",
-        "!node_modules/**/LICENSE.txt",
-        "!node_modules/**/Makefile",
-        "!node_modules/**/.editorconfig",
-        "!node_modules/**/.babelrc",
-        "!node_modules/**/.prettierrc",
-        "!node_modules/**/.prettierrc-*",
-        "!node_modules/**/.eslintrc.yml",
-        "!node_modules/**/.eslintignore",
-        "!node_modules/**/.publishrc",
-        "!lib/gui/app",
-        "lib/gui/app/index.html",
+        "build/Release/elevator.node",
         "generated",
-        "!node_modules/chart.js/dist/docs",
-        "!node_modules/ext2fs/config",
-        "!node_modules/ext2fs/deps",
-        "!node_modules/ext2fs/LICENSE",
-        "!node_modules/ext2fs/src",
-        "!node_modules/winusb-driver-generator/src",
-        "!node_modules/winusb-driver-generator/deps",
-        "!node_modules/winusb-driver-generator/ci",
-        "!node_modules/rendition/__screenshots__",
-        "!node_modules/polished/docs",
-        "!node_modules/mermaid/src",
-        "!node_modules/mermaid/dist",
-        "node_modules/mermaid/dist/mermaid.core.js",
-        "!node_modules/raven-js/src",
-        "!node_modules/raven-js/dist",
-        "node_modules/raven-js/dist/raven.js",
-        "!node_modules/raven-js/plugins",
-        "!node_modules/react-jsonschema-form/dist",
-        "!node_modules/xxhash/deps",
-        "!node_modules/xxhash/src",
-        "!node_modules/unzip-stream/testData*",
-        "!node_modules/usb",
-        "node_modules/usb/usb.js",
-        "node_modules/usb/package.json",
-        "node_modules/usb/build",
-        "node_modules/usb/src/binding",
-        "!node_modules/roboto-fontface/fonts",
+        "lib/shared/catalina-sudo/sudo-askpass.osascript.js",
+        "lib/gui/app/index.html",
+        "lib/gui/css/*.css",
+        "lib/gui/css/fonts/*.woff2",
+        "lib/gui/assets/*.svg",
+        "assets/icon.png",
+        "!node_modules/**/**",
+        "node_modules/**/*.js",
+        "node_modules/**/*.json",
+        "node_modules/**/*.node",
+        "node_modules/**/*.dll",
+        "node_modules/node-raspberrypi-usbboot/blobs/**",
+        "node_modules/flexboxgrid/dist/flexboxgrid.css",
         "node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff",
         "node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff",
         "node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff",
         "node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff",
-        "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff"
+        "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff",
+        "node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
       ],
+      "afterSign": "./afterSignHook.js",
       "mac": {
-        "category": "public.app-category.developer-tools"
+        "asar": false,
+        "category": "public.app-category.developer-tools",
+        "hardenedRuntime": true,
+        "entitlements": "entitlements.mac.plist",
+        "entitlementsInherit": "entitlements.mac.plist"
       },
       "dmg": {
         "iconSize": 110,
@@ -106,6 +74,7 @@
         "synopsis": "balenaEtcher is a powerful OS image flasher built with web technologies to ensure flashing an SDCard or USB drive is a pleasant and safe experience. It protects you from accidentally writing to your hard-drives, ensures every byte of data was written correctly and much more."
       },
       "deb": {
+        "compression": "bzip2",
         "priority": "optional",
         "depends": [
           "polkit-1-auth-agent | policykit-1-gnome | polkit-kde-1"

CHANGELOG.md

@@ -3,6 +3,162 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+# v1.5.79
+## (2020-02-20)
+
+* Remove "Download the React DevTools for a better development experience" message [Alexis Svinartchouk]
+* Fix error when launching from terminal when installed via apt. [Alois Klink]
+
+# v1.5.78
+## (2020-02-19)
+
+* Update drivelist to 8.0.10 to fix parsing lsblk --pairs [Alexis Svinartchouk]
+
+# v1.5.77
+## (2020-02-17)
+
+* Fix error message not being shown on write error [Alexis Svinartchouk]
+* The RGBLed module has been moved to a separate repository [Alexis Svinartchouk]
+
+# v1.5.76
+## (2020-02-05)
+
+* Prefix temp permissions script name [Lorenzo Alberto Maria Ambrosi]
+* Fix image drop zone, remove react-dropzone dependency [Alexis Svinartchouk]
+* Update etcher-sdk to ^2.0.17 [Alexis Svinartchouk]
+
+# v1.5.75
+## (2020-02-05)
+
+* Initialize leds object map [Omar López]
+
+# v1.5.74
+## (2020-02-04)
+
+* Etcher pro leds feature [Alexis Svinartchouk]
+* Compress deb package with bzip instead of xz [Alexis Svinartchouk]
+* Update electron to 7.1.11 [Alexis Svinartchouk]
+* Sort devices by device path on Linux [Alexis Svinartchouk]
+
+# v1.5.73
+## (2020-01-28)
+
+* Update electron to v7.1.10 [Alexis Svinartchouk]
+
+# v1.5.72
+## (2020-01-27)
+
+* Remove no longer used angular svg-icon component [Alexis Svinartchouk]
+* Remove no longer used closestUnit angular filter [Alexis Svinartchouk]
+
+# v1.5.71
+## (2020-01-14)
+
+* Update resin-corvus to 2.0.5 [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.70
+## (2019-12-13)
+
+* Make header draggable again [Lorenzo Alberto Maria Ambrosi]
+* Refactor drive selector and confirm modal to React [Lorenzo Alberto Maria Ambrosi]
+* Rework lib/gui/app/styled-components to typescript [Alexis Svinartchouk]
+* Convert FlashAnother & FlashResults to typescript [Lorenzo Alberto Maria Ambrosi]
+* Use React instead of Angular for image selection [Lucian]
+* Convert the drive selection step to React [Thodoris Greasidis]
+* chore: move flash step to React [Stevche Radevski]
+* Use React instead of Angular for image selection [Lucian]
+
+# v1.5.69
+## (2019-12-10)
+
+* Don't add --no-sandbox when ELECTRON_RUN_AS_NODE true [Alexis Svinartchouk]
+
+# v1.5.68
+## (2019-12-08)
+
+* Add version in settings modal [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.67
+## (2019-12-06)
+
+* Fix elevation on macos in development [Alexis Svinartchouk]
+
+# v1.5.66
+## (2019-12-03)
+
+* Update spectron to ^8 [Alexis Svinartchouk]
+* Update dependencies, get node-usb from npm [Alexis Svinartchouk]
+* Update nan to ^2.14 [Alexis Svinartchouk]
+* Use the same entrypoint for etcher and the child writer [Alexis Svinartchouk]
+* Require angular-mocks only when needed [Alexis Svinartchouk]
+* Remove no longer needed pkg dev dependency [Alexis Svinartchouk]
+* Update mocha, remove nock [Alexis Svinartchouk]
+* Remove no longer needed xml2js [Alexis Svinartchouk]
+* Remove node-pre-gyp patch that is no longer needed with electron 6 [Alexis Svinartchouk]
+* Update electron-mocha to ^8.1.2, remove acorn [Alexis Svinartchouk]
+* Update electron to 6.0.10 [Alexis Svinartchouk]
+
+# v1.5.65
+## (2019-12-02)
+
+* Convert settings modal to typescript [Lorenzo Alberto Maria Ambrosi]
+* Refactor settings page into modal [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.64
+## (2019-11-22)
+
+* Use bash instead of sh for running the elevated process on Linux and Mac [Alexis Svinartchouk]
+
+# v1.5.63
+## (2019-11-08)
+
+* Introduce an FAQ file [Dimitrios Lytras]
+
+# v1.5.62
+## (2019-11-06)
+
+* Update drivelist to 8.0.9 [Alexis Svinartchouk]
+
+# v1.5.61
+## (2019-11-05)
+
+* Notarize app on macOS [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.60
+## (2019-10-18)
+
+* Upgrade ext2fs to 1.0.30 [Matthew McGinn]
+
+# v1.5.59
+## (2019-10-14)
+
+* Catch console log messages from SafeWebView [Roman Mazur]
+
+# v1.5.58
+## (2019-10-10)
+
+* Remove leftover GH-pages configuration file [Dimitrios Lytras]
+
+# v1.5.57
+## (2019-09-16)
+
+* Fix entrypoint when options are passed to electron [Alexis Svinartchouk]
+
+# v1.5.56
+## (2019-08-20)
+
+* Fix windows portable download [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.55
+## (2019-08-19)
+
+* Update etcher-sdk to ^2.0.13 [Alexis Svinartchouk]
+
+# v1.5.54
+## (2019-08-07)
+
+* Fix auto-updater check for updates [Lorenzo Alberto Maria Ambrosi]
+
 # v1.5.53
 ## (2019-08-06)
 

FAQ.md

@@ -0,0 +1,46 @@
+## Why is my drive not bootable?
+
+Etcher copies images to drives byte by byte, without doing any transformation to the final device, which means images that require special treatment to be made bootable, like Windows images, will not work out of the box. In these cases, the general advice is to use software specific to those kind of images, usually available from the image publishers themselves. You can find more information [here](https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md#why-is-my-drive-not-bootable).
+
+## How can I configure persistent storage?
+
+Some programs, usually oriented at making GNU/Linux live USB drives, include an option to set persistent storage. This is currently not supported by Etcher, so if you require this functionality, we advise to fallback to [UNetbootin](https://unetbootin.github.io/).
+
+## How do I flash Ubuntu ISOs
+
+Ubuntu images (and potentially some other related GNU/Linux distributions) have a peculiar format that allows the image to boot without any further modification from both CDs and USB drives.
+A consequence of this enhancement is that some programs, like parted get confused about the drive's format and partition table, printing warnings such as:
+
+> /dev/xxx contains GPT signatures, indicating that it has a GPT table. However, it does not have a valid fake msdos partition table, as it should. Perhaps it was corrupted -- possibly by a program that doesn't understand GPT partition tables. Or perhaps you deleted the GPT table, and are now using an msdos partition table. Is this a GPT partition table? Both the primary and backup GPT tables are corrupt. Try making a fresh table, and using Parted's rescue feature to recover partitions.
+
+> Warning: The driver descriptor says the physical block size is 2048 bytes, but Linux says it is 512 bytes.
+
+All these warnings are safe to ignore, and your drive should be able to boot without any problems.
+Refer to [the following message from Ubuntu's mailing list](https://lists.ubuntu.com/archives/ubuntu-devel/2011-June/033495.html) if you want to learn more.
+
+## How do I run Etcher on Wayland?
+
+The XWayland Server provides backwards compatibility to run any X client on Wayland, including Etcher.
+This usually works out of the box on mainstream GNU/Linux distributions that properly support Wayland. If it doesn't, make sure the xwayland.so module is being loaded by declaring it in your [weston.ini](http://manpages.ubuntu.com/manpages/wily/man5/weston.ini.5.html):
+
+```
+[core]
+modules=xwayland.so
+```
+
+## What are the runtime GNU/LINUX dependencies?
+
+[This entry](https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md#runtime-gnulinux-dependencies) aims to provide an up to date list of runtime dependencies needed to run Etcher on a GNU/Linux system.
+
+## How can I recover the broken drive?
+
+Sometimes, things might go wrong, and you end up with a half-flashed drive that is unusable by your operating systems, and common graphical tools might even refuse to get it back to a normal state.
+To solve these kinds of problems, we've collected [a list of fail-proof methods](https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md#recovering-broken-drives) to completely erase your drive in major operating systems.
+
+## I receive ”No polkit authentication agent found” error in GNU/Linux
+
+Etcher requires an available [polkit authentication agent](https://wiki.archlinux.org/index.php/Polkit#Authentication_agents) in your system in order to show a secure password prompt dialog to perform elevation. Make sure you have one installed for the desktop environment of your choice.
+
+## May I run Etcher in older macOS versions?
+
+Etcher GUI is based on the [Electron](http://electron.atom.io/) framework, [which only supports macOS 10.9 and newer versions](https://github.com/electron/electron/blob/master/docs/tutorial/support.md#supported-platforms).

Makefile

@@ -114,8 +114,7 @@ electron-build: assets/dmg/background.tiff | $(BUILD_TEMPORARY_DIRECTORY)
 		-r $(TARGET_ARCH) \
 		-s $(PLATFORM) \
 		-v production \
-		-n $(BUILD_TEMPORARY_DIRECTORY)/npm \
-		-w $(BUILD_TEMPORARY_DIRECTORY)
+		-n $(BUILD_TEMPORARY_DIRECTORY)/npm
 
 # ---------------------------------------------------------------------
 # Phony targets
@@ -125,10 +124,9 @@ TARGETS = \
 	help \
 	info \
 	lint \
-	lint-js \
+	lint-ts \
 	lint-sass \
 	lint-cpp \
-	lint-html \
 	lint-spell \
 	test-spectron \
 	test-gui \
@@ -151,10 +149,7 @@ sass:
 	node-sass lib/gui/app/scss/main.scss > lib/gui/css/main.css
 
 lint-ts:
-	resin-lint --typescript lib
-
-lint-js:
-	eslint --ignore-pattern scripts/resin/**/*.js lib tests scripts bin webpack.config.js
+	resin-lint --fix --typescript typings lib tests scripts/clean-shrinkwrap.ts webpack.config.ts
 
 lint-sass:
 	sass-lint lib/gui/scss
@@ -162,31 +157,27 @@ lint-sass:
 lint-cpp:
 	cpplint --recursive src
 
-lint-html:
-	node scripts/html-lint.js
-
 lint-spell:
 	codespell \
 		--dictionary - \
 		--dictionary dictionary.txt \
 		--skip *.svg *.gz,*.bz2,*.xz,*.zip,*.img,*.dmg,*.iso,*.rpi-sdcard,*.wic,.DS_Store,*.dtb,*.dtbo,*.dat,*.elf,*.bin,*.foo,xz-without-extension \
-		lib tests docs scripts Makefile *.md LICENSE
+		lib tests docs Makefile *.md LICENSE
 
-lint: lint-ts lint-js lint-sass lint-cpp lint-html lint-spell
+lint: lint-ts lint-sass lint-cpp lint-spell
 
 MOCHA_OPTIONS=--recursive --reporter spec --require ts-node/register
 
 # See https://github.com/electron/spectron/issues/127
 ETCHER_SPECTRON_ENTRYPOINT ?= $(shell node -e 'console.log(require("electron"))')
 test-spectron:
-	ETCHER_SPECTRON_ENTRYPOINT="$(ETCHER_SPECTRON_ENTRYPOINT)" mocha $(MOCHA_OPTIONS) tests/spectron
+	ETCHER_SPECTRON_ENTRYPOINT="$(ETCHER_SPECTRON_ENTRYPOINT)" mocha $(MOCHA_OPTIONS) tests/spectron/runner.spec.ts
 
 test-gui:
-	electron-mocha $(MOCHA_OPTIONS) --renderer tests/gui
+	electron-mocha $(MOCHA_OPTIONS) --full-trace --no-sandbox --renderer tests/gui/**/*.ts
 
 test-sdk:
-	electron-mocha $(MOCHA_OPTIONS) \
-		tests/shared
+	electron-mocha $(MOCHA_OPTIONS) --full-trace --no-sandbox tests/shared/**/*.ts
 
 test: test-gui test-sdk test-spectron
 
@@ -200,7 +191,6 @@ info:
 
 sanity-checks:
 	./scripts/ci/ensure-staged-sass.sh
-	./scripts/ci/ensure-npm-dependencies-compatibility.sh
 	./scripts/ci/ensure-all-file-extensions-in-gitattributes.sh
 
 clean:

afterPack.js

@@ -0,0 +1,31 @@
+'use strict'
+
+const cp = require('child_process')
+const fs = require('fs')
+const outdent = require('outdent')
+const path = require('path')
+
+exports.default = function(context) {
+  if (context.packager.platform.name !== 'linux') {
+    return
+  }
+  const scriptPath = path.join(context.appOutDir, context.packager.executableName)
+  const binPath = scriptPath + '.bin'
+  cp.execFileSync('mv', [scriptPath, binPath])
+  fs.writeFileSync(
+    scriptPath,
+    outdent({trimTrailingNewline: false})`
+      #!/bin/bash
+
+      # Resolve symlinks. Warning, readlink -f doesn't work on MacOS/BSD
+      script_dir="$(dirname "$(readlink -f "\${BASH_SOURCE[0]}")")"
+
+      if [[ $EUID -ne 0 ]] || [[ $ELECTRON_RUN_AS_NODE ]]; then
+        "\${script_dir}"/${context.packager.executableName}.bin "$@"
+      else
+        "\${script_dir}"/${context.packager.executableName}.bin "$@" --no-sandbox
+      fi
+    `
+  )
+  cp.execFileSync('chmod', ['+x', scriptPath])
+}

afterSignHook.js

@@ -0,0 +1,22 @@
+'use strict'
+
+const { notarize } = require('electron-notarize')
+
+async function main(context) {
+  const { electronPlatformName, appOutDir } = context
+  if (electronPlatformName !== 'darwin') {
+    return
+  }
+
+  const appName = context.packager.appInfo.productFilename
+  const appleId = 'accounts+apple@balena.io'
+
+  await notarize({
+    appBundleId: 'io.balena.etcher',
+    appPath: `${appOutDir}/${appName}.app`,
+    appleId,
+    appleIdPassword: `@keychain:Application Loader: ${appleId}`
+  })
+}
+
+exports.default = main

docs/ARCHITECTURE.md

@@ -12,7 +12,6 @@ technologies used in Etcher that you should become familiar with:
 
 - [Electron][electron]
 - [NodeJS][nodejs]
-- [AngularJS][angularjs]
 - [Redux][redux]
 - [ImmutableJS][immutablejs]
 - [Bootstrap][bootstrap]
@@ -66,7 +65,6 @@ be documented instead!
 [gui-dir]: https://github.com/balena-io/etcher/tree/master/lib/gui
 [electron]: http://electron.atom.io
 [nodejs]: https://nodejs.org
-[angularjs]: https://angularjs.org
 [redux]: http://redux.js.org
 [immutablejs]: http://facebook.github.io/immutable-js/
 [bootstrap]: http://getbootstrap.com

docs/USER-DOCUMENTATION.md

@@ -130,21 +130,6 @@ run Etcher on a GNU/Linux system.
 
 - liblzma (for xz decompression)
 
-Simulate an update alert
-------------------------
-
-You can set the `ETCHER_FAKE_S3_LATEST_VERSION` environment variable to a valid
-semver version (greater than the current version) to trick the application into
-thinking that what you put there is the latest available version, therefore
-causing the update notification dialog to be presented at startup.
-
-Note that the value of the variable will be ignored if it doesn't match the
-release type of the current application version. For example, setting the
-variable to a production version (e.g. `ETCHER_FAKE_S3_LATEST_VERSION=2.0.0`)
-will be ignored if you're running a snapshot build, and vice-versa.
-
-See [`PUBLISHING.md`][publishing] for more details about release types.
-
 Recovering broken drives
 ------------------------
 

docs/_config.yml

@@ -1 +0,0 @@
-theme: jekyll-theme-minimal

electron-builder.yml

@@ -4,16 +4,36 @@ productName: balenaEtcher
 npmRebuild: true
 nodeGypRebuild: true
 publish: null
+afterPack: "./afterPack.js"
 files:
-  - lib
-  - lib/gui/app/index.html
+  - build/Release/elevator.node
   - generated
-  - build/**/*.node
+  - lib/shared/catalina-sudo/sudo-askpass.osascript.js
+  - lib/gui/app/index.html
+  - lib/gui/css/*.css
+  - lib/gui/css/fonts/*.woff2
+  - lib/gui/assets/*.svg
   - assets/icon.png
-  - node_modules/**/*
+  - "!node_modules/**/**"
+  - "node_modules/**/*.js"
+  - "node_modules/**/*.json"
+  - "node_modules/**/*.node"
+  - "node_modules/**/*.dll"
+  - node_modules/node-raspberrypi-usbboot/blobs/**
+  - node_modules/flexboxgrid/dist/flexboxgrid.css
+  - node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff
+  - node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff
+  - node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff
+  - node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff
+  - node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff
+  - node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
 mac:
+  asar: false
   icon: assets/icon.icns
   category: public.app-category.developer-tools
+  hardenedRuntime: true
+  entitlements: "entitlements.mac.plist"
+  entitlementsInherit: "entitlements.mac.plist"
 dmg:
   background: assets/dmg/background.tiff
   icon: assets/icon.icns

entitlements.mac.plist

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+    <key>com.apple.security.device.usb</key>
+    <true/>
+    <key>com.apple.security.files.user-selected.read-only</key>
+    <true/>
+    <key>com.apple.security.network.client</key>
+    <true/>
+  </dict>
+</plist>

lib/gui/app/app.js

@@ -1,508 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * @module Etcher
- */
-
-'use strict'
-
-/* eslint-disable no-var */
-
-var angular = require('angular')
-
-/* eslint-enable no-var */
-
-const electron = require('electron')
-const sdk = require('etcher-sdk')
-const _ = require('lodash')
-const uuidV4 = require('uuid/v4')
-
-const EXIT_CODES = require('../../shared/exit-codes')
-const messages = require('../../shared/messages')
-const store = require('./models/store')
-const packageJSON = require('../../../package.json')
-const flashState = require('./models/flash-state')
-const settings = require('./models/settings')
-const windowProgress = require('./os/window-progress')
-const analytics = require('./modules/analytics')
-const availableDrives = require('./models/available-drives')
-const selectionState = require('./models/selection-state')
-const driveScanner = require('./modules/drive-scanner')
-const osDialog = require('./os/dialog')
-const exceptionReporter = require('./modules/exception-reporter')
-const updateLock = require('./modules/update-lock')
-
-/* eslint-disable lodash/prefer-lodash-method,lodash/prefer-get */
-
-// Enable debug information from all modules that use `debug`
-// See https://github.com/visionmedia/debug#browser-support
-//
-// Enable drivelist debugging information
-// See https://github.com/resin-io-modules/drivelist
-process.env.DRIVELIST_DEBUG = /drivelist|^\*$/i.test(process.env.DEBUG) ? '1' : ''
-window.localStorage.debug = process.env.DEBUG
-
-window.addEventListener('unhandledrejection', (event) => {
-  // Promise: event.reason
-  // Bluebird: event.detail.reason
-  // Anything else: event
-  const error = event.reason || (event.detail && event.detail.reason) || event
-  analytics.logException(error)
-  event.preventDefault()
-})
-
-// Set application session UUID
-store.dispatch({
-  type: store.Actions.SET_APPLICATION_SESSION_UUID,
-  data: uuidV4()
-})
-
-// Set first flashing workflow UUID
-store.dispatch({
-  type: store.Actions.SET_FLASHING_WORKFLOW_UUID,
-  data: uuidV4()
-})
-
-const applicationSessionUuid = store.getState().toJS().applicationSessionUuid
-const flashingWorkflowUuid = store.getState().toJS().flashingWorkflowUuid
-
-const app = angular.module('Etcher', [
-  require('angular-ui-router'),
-  require('angular-ui-bootstrap'),
-  require('angular-if-state'),
-
-  // Components
-  require('./components/svg-icon'),
-  require('./components/warning-modal/warning-modal'),
-  require('./components/safe-webview'),
-  require('./components/file-selector'),
-
-  // Pages
-  require('./pages/main/main'),
-  require('./pages/finish/finish'),
-  require('./pages/settings/settings'),
-
-  // OS
-  require('./os/open-external/open-external'),
-  require('./os/dropzone/dropzone'),
-
-  // Utils
-  require('./utils/manifest-bind/manifest-bind')
-])
-
-app.run(() => {
-  console.log([
-    ' _____ _       _',
-    '|  ___| |     | |',
-    '| |__ | |_ ___| |__   ___ _ __',
-    '|  __|| __/ __| \'_ \\ / _ \\ \'__|',
-    '| |___| || (__| | | |  __/ |',
-    '\\____/ \\__\\___|_| |_|\\___|_|',
-    '',
-    'Interested in joining the Etcher team?',
-    'Drop us a line at join+etcher@balena.io',
-    '',
-    `Version = ${packageJSON.version}, Type = ${packageJSON.packageType}`
-  ].join('\n'))
-})
-
-app.run(() => {
-  const currentVersion = packageJSON.version
-
-  analytics.logEvent('Application start', {
-    packageType: packageJSON.packageType,
-    version: currentVersion,
-    applicationSessionUuid
-  })
-})
-
-app.run(() => {
-  store.observe(() => {
-    if (!flashState.isFlashing()) {
-      return
-    }
-
-    const currentFlashState = flashState.getFlashState()
-    const stateType = !currentFlashState.flashing && currentFlashState.verifying
-      ? `Verifying ${currentFlashState.verifying}`
-      : `Flashing ${currentFlashState.flashing}`
-
-    // NOTE: There is usually a short time period between the `isFlashing()`
-    // property being set, and the flashing actually starting, which
-    // might cause some non-sense flashing state logs including
-    // `undefined` values.
-    analytics.logDebug(
-      `${stateType} devices, ` +
-      `${currentFlashState.percentage}% at ${currentFlashState.speed} MB/s ` +
-      `(total ${currentFlashState.totalSpeed} MB/s) ` +
-      `eta in ${currentFlashState.eta}s ` +
-      `with ${currentFlashState.failed} failed devices`
-    )
-
-    windowProgress.set(currentFlashState)
-  })
-})
-
-/**
- * @summary The radix used by USB ID numbers
- * @type {Number}
- * @constant
- */
-const USB_ID_RADIX = 16
-
-/**
- * @summary The expected length of a USB ID number
- * @type {Number}
- * @constant
- */
-const USB_ID_LENGTH = 4
-
-/**
- * @summary Convert a USB id (e.g. product/vendor) to a string
- * @function
- * @private
- *
- * @param {Number} id - USB id
- * @returns {String} string id
- *
- * @example
- * console.log(usbIdToString(2652))
- * > '0x0a5c'
- */
-const usbIdToString = (id) => {
-  return `0x${_.padStart(id.toString(USB_ID_RADIX), USB_ID_LENGTH, '0')}`
-}
-
-/**
- * @summary Product ID of BCM2708
- * @type {Number}
- * @constant
- */
-const USB_PRODUCT_ID_BCM2708_BOOT = 0x2763
-
-/**
- * @summary Product ID of BCM2710
- * @type {Number}
- * @constant
- */
-const USB_PRODUCT_ID_BCM2710_BOOT = 0x2764
-
-/**
- * @summary Compute module descriptions
- * @type {Object}
- * @constant
- */
-const COMPUTE_MODULE_DESCRIPTIONS = {
-  [USB_PRODUCT_ID_BCM2708_BOOT]: 'Compute Module 1',
-  [USB_PRODUCT_ID_BCM2710_BOOT]: 'Compute Module 3'
-}
-
-app.run(($timeout) => {
-  const BLACKLISTED_DRIVES = settings.has('driveBlacklist')
-    ? settings.get('driveBlacklist').split(',')
-    : []
-
-  // eslint-disable-next-line require-jsdoc
-  const driveIsAllowed = (drive) => {
-    return !(
-      BLACKLISTED_DRIVES.includes(drive.devicePath) ||
-      BLACKLISTED_DRIVES.includes(drive.device) ||
-      BLACKLISTED_DRIVES.includes(drive.raw)
-    )
-  }
-
-  // eslint-disable-next-line require-jsdoc,consistent-return
-  const prepareDrive = (drive) => {
-    if (drive instanceof sdk.sourceDestination.BlockDevice) {
-      return drive.drive
-    } else if (drive instanceof sdk.sourceDestination.UsbbootDrive) {
-      // This is a workaround etcher expecting a device string and a size
-      drive.device = drive.usbDevice.portId
-      drive.size = null
-      drive.progress = 0
-      drive.disabled = true
-      drive.on('progress', (progress) => {
-        updateDriveProgress(drive, progress)
-      })
-      return drive
-    } else if (drive instanceof sdk.sourceDestination.DriverlessDevice) {
-      const description = COMPUTE_MODULE_DESCRIPTIONS[drive.deviceDescriptor.idProduct] || 'Compute Module'
-      return {
-        device: `${usbIdToString(drive.deviceDescriptor.idVendor)}:${usbIdToString(drive.deviceDescriptor.idProduct)}`,
-        displayName: 'Missing drivers',
-        description,
-        mountpoints: [],
-        isReadOnly: false,
-        isSystem: false,
-        disabled: true,
-        icon: 'warning',
-        size: null,
-        link: 'https://www.raspberrypi.org/documentation/hardware/computemodule/cm-emmc-flashing.md',
-        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(' ')
-      }
-    }
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const setDrives = (drives) => {
-    availableDrives.setDrives(_.values(drives))
-
-    // Safely trigger a digest cycle.
-    // In some cases, AngularJS doesn't acknowledge that the
-    // available drives list has changed, and incorrectly
-    // keeps asking the user to "Connect a drive".
-    $timeout()
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const getDrives = () => {
-    return _.keyBy(availableDrives.getDrives() || [], 'device')
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const addDrive = (drive) => {
-    const preparedDrive = prepareDrive(drive)
-    if (!driveIsAllowed(preparedDrive)) {
-      return
-    }
-    const drives = getDrives()
-    drives[preparedDrive.device] = preparedDrive
-    setDrives(drives)
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const removeDrive = (drive) => {
-    const preparedDrive = prepareDrive(drive)
-    const drives = getDrives()
-    // eslint-disable-next-line prefer-reflect
-    delete drives[preparedDrive.device]
-    setDrives(drives)
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const updateDriveProgress = (drive, progress) => {
-    const drives = getDrives()
-    const driveInMap = drives[drive.device]
-    if (driveInMap) {
-      driveInMap.progress = progress
-      setDrives(drives)
-    }
-  }
-
-  driveScanner.on('attach', addDrive)
-  driveScanner.on('detach', removeDrive)
-
-  driveScanner.on('error', (error) => {
-    // Stop the drive scanning loop in case of errors,
-    // otherwise we risk presenting the same error over
-    // and over again to the user, while also heavily
-    // spamming our error reporting service.
-    driveScanner.stop()
-
-    return exceptionReporter.report(error)
-  })
-
-  driveScanner.start()
-})
-
-app.run(($window) => {
-  let popupExists = false
-
-  $window.addEventListener('beforeunload', (event) => {
-    if (!flashState.isFlashing() || popupExists) {
-      analytics.logEvent('Close application', {
-        isFlashing: flashState.isFlashing(),
-        applicationSessionUuid
-      })
-      return
-    }
-
-    // Don't close window while flashing
-    event.returnValue = false
-
-    // Don't open any more popups
-    popupExists = true
-
-    analytics.logEvent('Close attempt while flashing', { applicationSessionUuid, flashingWorkflowUuid })
-
-    osDialog.showWarning({
-      confirmationLabel: 'Yes, quit',
-      rejectionLabel: 'Cancel',
-      title: 'Are you sure you want to close Etcher?',
-      description: messages.warning.exitWhileFlashing()
-    }).then((confirmed) => {
-      if (confirmed) {
-        analytics.logEvent('Close confirmed while flashing', {
-          flashInstanceUuid: flashState.getFlashUuid(),
-          applicationSessionUuid,
-          flashingWorkflowUuid
-        })
-
-        // This circumvents the 'beforeunload' event unlike
-        // electron.remote.app.quit() which does not.
-        electron.remote.process.exit(EXIT_CODES.SUCCESS)
-      }
-
-      analytics.logEvent('Close rejected while flashing', { applicationSessionUuid, flashingWorkflowUuid })
-      popupExists = false
-    }).catch(exceptionReporter.report)
-  })
-
-  /**
-   * @summary Helper fn for events
-   * @function
-   * @private
-   * @example
-   * window.addEventListener('click', extendLock)
-   */
-  const extendLock = () => {
-    updateLock.extend()
-  }
-
-  $window.addEventListener('click', extendLock)
-  $window.addEventListener('touchstart', extendLock)
-
-  // Initial update lock acquisition
-  extendLock()
-})
-
-app.run(($rootScope) => {
-  $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState) => {
-    // Ignore first navigation
-    if (!fromState.name) {
-      return
-    }
-
-    analytics.logEvent('Navigate', {
-      to: toState.name,
-      from: fromState.name,
-      applicationSessionUuid
-    })
-  })
-})
-
-app.config(($urlRouterProvider) => {
-  $urlRouterProvider.otherwise('/main')
-})
-
-app.config(($provide) => {
-  $provide.decorator('$exceptionHandler', ($delegate) => {
-    return (exception, cause) => {
-      exceptionReporter.report(exception)
-      $delegate(exception, cause)
-    }
-  })
-})
-
-app.config(($locationProvider) => {
-  // NOTE(Shou): this seems to invoke a minor perf decrease when set to true
-  $locationProvider.html5Mode({
-    rewriteLinks: false
-  })
-})
-
-app.controller('HeaderController', function (OSOpenExternalService) {
-  /**
-   * @summary Open help page
-   * @function
-   * @public
-   *
-   * @description
-   * This application will open either the image's support url, declared
-   * in the archive `manifest.json`, or the default Etcher help page.
-   *
-   * @example
-   * HeaderController.openHelpPage();
-   */
-  this.openHelpPage = () => {
-    const DEFAULT_SUPPORT_URL = 'https://github.com/resin-io/etcher/blob/master/SUPPORT.md'
-    const supportUrl = selectionState.getImageSupportUrl() || DEFAULT_SUPPORT_URL
-    OSOpenExternalService.open(supportUrl)
-  }
-
-  /**
-   * @summary Whether to show the help link
-   * @function
-   * @public
-   *
-   * @returns {Boolean}
-   *
-   * @example
-   * HeaderController.shouldShowHelp()
-   */
-  this.shouldShowHelp = () => {
-    return !settings.get('disableExternalLinks')
-  }
-})
-
-app.controller('StateController', function ($rootScope, $scope) {
-  const unregisterStateChange = $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState) => {
-    this.previousName = fromState.name
-    this.currentName = toState.name
-  })
-
-  $scope.$on('$destroy', unregisterStateChange)
-
-  /**
-   * @summary Get the previous state name
-   * @function
-   * @public
-   *
-   * @returns {String} previous state name
-   *
-   * @example
-   * if (StateController.previousName === 'main') {
-   *   console.log('We left the main screen!');
-   * }
-   */
-  this.previousName = null
-
-  /**
-   * @summary Get the current state name
-   * @function
-   * @public
-   *
-   * @returns {String} current state name
-   *
-   * @example
-   * if (StateController.currentName === 'main') {
-   *   console.log('We are on the main screen!');
-   * }
-   */
-  this.currentName = null
-})
-
-// Handle keyboard shortcut to open the settings
-app.run(($state) => {
-  electron.ipcRenderer.on('menu:preferences', () => {
-    $state.go('settings')
-  })
-})
-
-// Ensure user settings are loaded before
-// we bootstrap the Angular.js application
-angular.element(document).ready(() => {
-  settings.load().then(() => {
-    angular.bootstrap(document, [ 'Etcher' ])
-  }).catch(exceptionReporter.report)
-})

lib/gui/app/app.ts

@@ -0,0 +1,352 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as electron from 'electron';
+import * as sdk from 'etcher-sdk';
+import * as _ from 'lodash';
+import outdent from 'outdent';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as uuidV4 from 'uuid/v4';
+
+import * as packageJSON from '../../../package.json';
+import * as EXIT_CODES from '../../shared/exit-codes';
+import * as messages from '../../shared/messages';
+import * as availableDrives from './models/available-drives';
+import * as flashState from './models/flash-state';
+import { init as ledsInit } from './models/leds';
+import * as settings from './models/settings';
+import { Actions, observe, store } from './models/store';
+import * as analytics from './modules/analytics';
+import { scanner as driveScanner } from './modules/drive-scanner';
+import * as exceptionReporter from './modules/exception-reporter';
+import { updateLock } from './modules/update-lock';
+import * as osDialog from './os/dialog';
+import * as windowProgress from './os/window-progress';
+import MainPage from './pages/main/MainPage';
+
+window.addEventListener(
+	'unhandledrejection',
+	(event: PromiseRejectionEvent | any) => {
+		// Promise: event.reason
+		// Bluebird: event.detail.reason
+		// Anything else: event
+		const error =
+			event.reason || (event.detail && event.detail.reason) || event;
+		analytics.logException(error);
+		event.preventDefault();
+	},
+);
+
+// Set application session UUID
+store.dispatch({
+	type: Actions.SET_APPLICATION_SESSION_UUID,
+	data: uuidV4(),
+});
+
+// Set first flashing workflow UUID
+store.dispatch({
+	type: Actions.SET_FLASHING_WORKFLOW_UUID,
+	data: uuidV4(),
+});
+
+const applicationSessionUuid = store.getState().toJS().applicationSessionUuid;
+const flashingWorkflowUuid = store.getState().toJS().flashingWorkflowUuid;
+
+console.log(outdent`
+	${outdent}
+	 _____ _       _
+	|  ___| |     | |
+	| |__ | |_ ___| |__   ___ _ __
+	|  __|| __/ __| '_ \\ / _ \\ '__|
+	| |___| || (__| | | |  __/ |
+	\\____/ \\__\\___|_| |_|\\___|_|
+
+	Interested in joining the Etcher team?
+	Drop us a line at join+etcher@balena.io
+
+	Version = ${packageJSON.version}, Type = ${packageJSON.packageType}
+`);
+
+const currentVersion = packageJSON.version;
+
+analytics.logEvent('Application start', {
+	packageType: packageJSON.packageType,
+	version: currentVersion,
+	applicationSessionUuid,
+});
+
+observe(() => {
+	if (!flashState.isFlashing()) {
+		return;
+	}
+
+	const currentFlashState = flashState.getFlashState();
+	const stateType =
+		!currentFlashState.flashing && currentFlashState.verifying
+			? `Verifying ${currentFlashState.verifying}`
+			: `Flashing ${currentFlashState.flashing}`;
+
+	// NOTE: There is usually a short time period between the `isFlashing()`
+	// property being set, and the flashing actually starting, which
+	// might cause some non-sense flashing state logs including
+	// `undefined` values.
+	analytics.logDebug(
+		`${stateType} devices, ` +
+			`${currentFlashState.percentage}% at ${currentFlashState.speed} MB/s ` +
+			`(total ${currentFlashState.totalSpeed} MB/s) ` +
+			`eta in ${currentFlashState.eta}s ` +
+			`with ${currentFlashState.failed} failed devices`,
+	);
+
+	windowProgress.set(currentFlashState);
+});
+
+/**
+ * @summary The radix used by USB ID numbers
+ */
+const USB_ID_RADIX = 16;
+
+/**
+ * @summary The expected length of a USB ID number
+ */
+const USB_ID_LENGTH = 4;
+
+/**
+ * @summary Convert a USB id (e.g. product/vendor) to a string
+ *
+ * @example
+ * console.log(usbIdToString(2652))
+ * > '0x0a5c'
+ */
+function usbIdToString(id: number): string {
+	return `0x${_.padStart(id.toString(USB_ID_RADIX), USB_ID_LENGTH, '0')}`;
+}
+
+/**
+ * @summary Product ID of BCM2708
+ */
+const USB_PRODUCT_ID_BCM2708_BOOT = 0x2763;
+
+/**
+ * @summary Product ID of BCM2710
+ */
+const USB_PRODUCT_ID_BCM2710_BOOT = 0x2764;
+
+/**
+ * @summary Compute module descriptions
+ */
+const COMPUTE_MODULE_DESCRIPTIONS: _.Dictionary<string> = {
+	[USB_PRODUCT_ID_BCM2708_BOOT]: 'Compute Module 1',
+	[USB_PRODUCT_ID_BCM2710_BOOT]: 'Compute Module 3',
+};
+
+let BLACKLISTED_DRIVES: string[] = [];
+
+function driveIsAllowed(drive: {
+	devicePath: string;
+	device: string;
+	raw: string;
+}) {
+	return !(
+		BLACKLISTED_DRIVES.includes(drive.devicePath) ||
+		BLACKLISTED_DRIVES.includes(drive.device) ||
+		BLACKLISTED_DRIVES.includes(drive.raw)
+	);
+}
+
+type Drive =
+	| sdk.sourceDestination.BlockDevice
+	| sdk.sourceDestination.UsbbootDrive
+	| sdk.sourceDestination.DriverlessDevice;
+
+function prepareDrive(drive: Drive) {
+	if (drive instanceof sdk.sourceDestination.BlockDevice) {
+		// @ts-ignore (BlockDevice.drive is private)
+		return drive.drive;
+	} else if (drive instanceof sdk.sourceDestination.UsbbootDrive) {
+		// This is a workaround etcher expecting a device string and a size
+		// @ts-ignore
+		drive.device = drive.usbDevice.portId;
+		drive.size = null;
+		// @ts-ignore
+		drive.progress = 0;
+		drive.disabled = true;
+		drive.on('progress', progress => {
+			updateDriveProgress(drive, progress);
+		});
+		return drive;
+	} else if (drive instanceof sdk.sourceDestination.DriverlessDevice) {
+		const description =
+			COMPUTE_MODULE_DESCRIPTIONS[
+				drive.deviceDescriptor.idProduct.toString()
+			] || 'Compute Module';
+		return {
+			device: `${usbIdToString(
+				drive.deviceDescriptor.idVendor,
+			)}:${usbIdToString(drive.deviceDescriptor.idProduct)}`,
+			displayName: 'Missing drivers',
+			description,
+			mountpoints: [],
+			isReadOnly: false,
+			isSystem: false,
+			disabled: true,
+			icon: 'warning',
+			size: null,
+			link:
+				'https://www.raspberrypi.org/documentation/hardware/computemodule/cm-emmc-flashing.md',
+			linkCTA: 'Install',
+			linkTitle: 'Install missing drivers',
+			linkMessage: outdent`
+				Would you like to download the necessary drivers from the Raspberry Pi Foundation?
+				This will open your browser.
+
+
+				Once opened, download and run the installer from the "Windows Installer" section to install the drivers
+			`,
+		};
+	}
+}
+
+function setDrives(drives: _.Dictionary<any>) {
+	availableDrives.setDrives(_.values(drives));
+}
+
+function getDrives() {
+	return _.keyBy(availableDrives.getDrives() || [], 'device');
+}
+
+function addDrive(drive: Drive) {
+	const preparedDrive = prepareDrive(drive);
+	if (!driveIsAllowed(preparedDrive)) {
+		return;
+	}
+	const drives = getDrives();
+	drives[preparedDrive.device] = preparedDrive;
+	setDrives(drives);
+}
+
+function removeDrive(drive: Drive) {
+	const preparedDrive = prepareDrive(drive);
+	const drives = getDrives();
+	delete drives[preparedDrive.device];
+	setDrives(drives);
+}
+
+function updateDriveProgress(
+	drive: sdk.sourceDestination.UsbbootDrive,
+	progress: number,
+) {
+	const drives = getDrives();
+	// @ts-ignore
+	const driveInMap = drives[drive.device];
+	if (driveInMap) {
+		driveInMap.progress = progress;
+		setDrives(drives);
+	}
+}
+
+driveScanner.on('attach', addDrive);
+driveScanner.on('detach', removeDrive);
+
+driveScanner.on('error', error => {
+	// Stop the drive scanning loop in case of errors,
+	// otherwise we risk presenting the same error over
+	// and over again to the user, while also heavily
+	// spamming our error reporting service.
+	driveScanner.stop();
+
+	return exceptionReporter.report(error);
+});
+
+driveScanner.start();
+
+let popupExists = false;
+
+window.addEventListener('beforeunload', async event => {
+	if (!flashState.isFlashing() || popupExists) {
+		analytics.logEvent('Close application', {
+			isFlashing: flashState.isFlashing(),
+			applicationSessionUuid,
+		});
+		return;
+	}
+
+	// Don't close window while flashing
+	event.returnValue = false;
+
+	// Don't open any more popups
+	popupExists = true;
+
+	analytics.logEvent('Close attempt while flashing', {
+		applicationSessionUuid,
+		flashingWorkflowUuid,
+	});
+
+	try {
+		const confirmed = await osDialog.showWarning({
+			confirmationLabel: 'Yes, quit',
+			rejectionLabel: 'Cancel',
+			title: 'Are you sure you want to close Etcher?',
+			description: messages.warning.exitWhileFlashing(),
+		});
+		if (confirmed) {
+			analytics.logEvent('Close confirmed while flashing', {
+				flashInstanceUuid: flashState.getFlashUuid(),
+				applicationSessionUuid,
+				flashingWorkflowUuid,
+			});
+
+			// This circumvents the 'beforeunload' event unlike
+			// electron.remote.app.quit() which does not.
+			electron.remote.process.exit(EXIT_CODES.SUCCESS);
+		}
+
+		analytics.logEvent('Close rejected while flashing', {
+			applicationSessionUuid,
+			flashingWorkflowUuid,
+		});
+		popupExists = false;
+	} catch (error) {
+		exceptionReporter.report(error);
+	}
+});
+
+function extendLock() {
+	updateLock.extend();
+}
+
+window.addEventListener('click', extendLock);
+window.addEventListener('touchstart', extendLock);
+
+// Initial update lock acquisition
+extendLock();
+
+async function main(): Promise<void> {
+	try {
+		await settings.load();
+	} catch (error) {
+		exceptionReporter.report(error);
+	}
+	BLACKLISTED_DRIVES = settings.get('driveBlacklist') || [];
+	ledsInit();
+	ReactDOM.render(
+		React.createElement(MainPage),
+		document.getElementById('main'),
+	);
+}
+
+main();

lib/gui/app/components/confirm-modal/confirm-modal.js

@@ -1,32 +0,0 @@
-/*
- * 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

lib/gui/app/components/confirm-modal/controllers/confirm-modal.js

@@ -1,50 +0,0 @@
-/*
- * 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)
-  }
-}

lib/gui/app/components/confirm-modal/services/confirm-modal.js

@@ -1,52 +0,0 @@
-/*
- * 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
-  }
-}

lib/gui/app/components/confirm-modal/templates/confirm-modal.tpl.html

@@ -1,36 +0,0 @@
-<div class="modal-header">
-  <h4 class="modal-title">
-    <span>{{ ::modal.options.title }}</span>
-  </h4>
-  <button class="close"
-    tabindex="11"
-    ng-click="modal.reject()">&times;</button>
-</div>
-
-<div class="modal-body">
-  <p>{{ ::modal.options.message }}</p>
-</div>
-
-<div class="modal-footer">
-  <div class="modal-menu">
-    <button ng-if="modal.options.rejectionLabel" class="button button-block"
-      tabindex="12"
-      ng-class="{
-        'button-default': modal.options.cancelButton === 'default',
-        'button-primary': modal.options.cancelButton === 'primary',
-        'button-warning': modal.options.cancelButton === 'warning',
-        'button-danger': modal.options.cancelButton === 'danger',
-      }"
-      ng-click="modal.reject()">{{ ::modal.options.rejectionLabel }}</button>
-    <button class="button button-block"
-      tabindex="13"
-      ng-class="{
-        'button-default': modal.options.confirmButton === 'default',
-        'button-primary': modal.options.confirmButton === 'primary',
-        'button-warning': modal.options.confirmButton === 'warning',
-        'button-danger': modal.options.confirmButton === 'danger',
-      }"
-      ng-click="modal.accept()">{{ ::modal.options.confirmationLabel }}</button>
-  </div>
-</div>
-

lib/gui/app/components/drive-selector/DriveSelectorModal.tsx

@@ -0,0 +1,292 @@
+/*
+ * Copyright 2019 balena.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.
+ */
+
+import { Drive as DrivelistDrive } from 'drivelist';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Modal } from 'rendition';
+
+import {
+	COMPATIBILITY_STATUS_TYPES,
+	getDriveImageCompatibilityStatuses,
+	hasListDriveImageCompatibilityStatus,
+	isDriveValid,
+} from '../../../../shared/drive-constraints';
+import { bytesToClosestUnit } from '../../../../shared/units';
+import { getDrives, hasAvailableDrives } from '../../models/available-drives';
+import * as selectionState from '../../models/selection-state';
+import { store } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import { open as openExternal } from '../../os/open-external/services/open-external';
+
+/**
+ * @summary Determine if we can change a drive's selection state
+ */
+function shouldChangeDriveSelectionState(drive: DrivelistDrive) {
+	return isDriveValid(drive, selectionState.getImage());
+}
+
+/**
+ * @summary Toggle a drive selection
+ */
+function toggleDrive(drive: DrivelistDrive) {
+	const canChangeDriveSelectionState = shouldChangeDriveSelectionState(drive);
+
+	if (canChangeDriveSelectionState) {
+		analytics.logEvent('Toggle drive', {
+			drive,
+			previouslySelected: selectionState.isDriveSelected(drive.device),
+			applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+			flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+		});
+
+		selectionState.toggleDrive(drive.device);
+	}
+}
+
+/**
+ * @summary Get a drive's compatibility status object(s)
+ *
+ * @description
+ * Given a drive, return its compatibility status with the selected image,
+ * containing the status type (ERROR, WARNING), and accompanying
+ * status message.
+ */
+function getDriveStatuses(
+	drive: DrivelistDrive,
+): Array<{ type: number; message: string }> {
+	return getDriveImageCompatibilityStatuses(drive, selectionState.getImage());
+}
+
+function keyboardToggleDrive(
+	drive: DrivelistDrive,
+	event: React.KeyboardEvent<HTMLDivElement>,
+) {
+	const ENTER = 13;
+	const SPACE = 32;
+	if (_.includes([ENTER, SPACE], event.keyCode)) {
+		toggleDrive(drive);
+	}
+}
+
+interface DriverlessDrive {
+	link: string;
+	linkTitle: string;
+	linkMessage: string;
+}
+
+export function DriveSelectorModal({ close }: { close: () => void }) {
+	const defaultMissingDriversModalState: { drive?: DriverlessDrive } = {};
+	const [missingDriversModal, setMissingDriversModal] = React.useState(
+		defaultMissingDriversModalState,
+	);
+	const [drives, setDrives] = React.useState(getDrives());
+
+	React.useEffect(() => {
+		const unsubscribe = store.subscribe(() => {
+			setDrives(getDrives());
+		});
+		return unsubscribe;
+	});
+
+	/**
+	 * @summary Prompt the user to install missing usbboot drivers
+	 */
+	function installMissingDrivers(drive: {
+		link: string;
+		linkTitle: string;
+		linkMessage: string;
+	}) {
+		if (drive.link) {
+			analytics.logEvent('Open driver link modal', {
+				url: drive.link,
+				applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+				flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+			});
+			setMissingDriversModal({ drive });
+		}
+	}
+
+	/**
+	 * @summary Select a drive and close the modal
+	 */
+	async function selectDriveAndClose(drive: DrivelistDrive) {
+		const canChangeDriveSelectionState = await shouldChangeDriveSelectionState(
+			drive,
+		);
+
+		if (canChangeDriveSelectionState) {
+			selectionState.selectDrive(drive.device);
+
+			analytics.logEvent('Drive selected (double click)', {
+				applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+				flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+			});
+
+			close();
+		}
+	}
+
+	const hasStatus = hasListDriveImageCompatibilityStatus(
+		selectionState.getSelectedDrives(),
+		selectionState.getImage(),
+	);
+
+	return (
+		<Modal
+			className="modal-drive-selector-modal"
+			title="Select a Drive"
+			done={close}
+			action="Continue"
+			style={{
+				padding: '20px 30px 11px 30px',
+			}}
+			primaryButtonProps={{
+				primary: !hasStatus,
+				warning: hasStatus,
+			}}
+		>
+			<div>
+				<ul
+					style={{
+						height: '250px',
+						overflowX: 'hidden',
+						overflowY: 'auto',
+						padding: '0',
+					}}
+				>
+					{_.map(drives, (drive, index) => {
+						return (
+							<li
+								key={`item-${drive.displayName}`}
+								className="list-group-item"
+								// @ts-ignore (FIXME: not	a valid <li> attribute but used by css rule)
+								disabled={!isDriveValid(drive, selectionState.getImage())}
+								onDoubleClick={() => selectDriveAndClose(drive)}
+								onClick={() => toggleDrive(drive)}
+							>
+								{drive.icon && (
+									<img
+										className="list-group-item-section"
+										alt="Drive device type logo"
+										src={`../assets/${drive.icon}.svg`}
+										width="25"
+										height="30"
+									/>
+								)}
+								<div
+									className="list-group-item-section list-group-item-section-expanded"
+									tabIndex={15 + index}
+									onKeyPress={evt => keyboardToggleDrive(drive, evt)}
+								>
+									<h6 className="list-group-item-heading">
+										{drive.description}
+										{drive.size && (
+											<span className="word-keep">
+												{' '}
+												- {bytesToClosestUnit(drive.size)}
+											</span>
+										)}
+									</h6>
+									{!drive.link && (
+										<p className="list-group-item-text">{drive.displayName}</p>
+									)}
+									{drive.link && (
+										<p className="list-group-item-text">
+											{drive.displayName} -{' '}
+											<b>
+												<a onClick={() => installMissingDrivers(drive)}>
+													{drive.linkCTA}
+												</a>
+											</b>
+										</p>
+									)}
+
+									<footer className="list-group-item-footer">
+										{_.map(getDriveStatuses(drive), (status, idx) => {
+											const className = {
+												[COMPATIBILITY_STATUS_TYPES.WARNING]: 'label-warning',
+												[COMPATIBILITY_STATUS_TYPES.ERROR]: 'label-danger',
+											};
+											return (
+												<span
+													key={`${drive.displayName}-status-${idx}`}
+													className={`label ${className[status.type]}`}
+												>
+													{status.message}
+												</span>
+											);
+										})}
+									</footer>
+									{Boolean(drive.progress) && (
+										<progress
+											className="drive-init-progress"
+											value={drive.progress}
+											max="100"
+										></progress>
+									)}
+								</div>
+
+								{isDriveValid(drive, selectionState.getImage()) && (
+									<span
+										className="list-group-item-section tick tick--success"
+										// @ts-ignore (FIXME: not	a valid <span> attribute but used by css rule)
+										disabled={!selectionState.isDriveSelected(drive.device)}
+									></span>
+								)}
+							</li>
+						);
+					})}
+					{!hasAvailableDrives() && (
+						<li className="list-group-item">
+							<div>
+								<b>Connect a drive!</b>
+								<div>No removable drive detected.</div>
+							</div>
+						</li>
+					)}
+				</ul>
+			</div>
+
+			{missingDriversModal.drive !== undefined && (
+				<Modal
+					width={400}
+					title={missingDriversModal.drive.linkTitle}
+					cancel={() => setMissingDriversModal({})}
+					done={() => {
+						try {
+							if (missingDriversModal.drive !== undefined) {
+								openExternal(missingDriversModal.drive.link);
+							}
+						} catch (error) {
+							analytics.logException(error);
+						} finally {
+							setMissingDriversModal({});
+						}
+					}}
+					action={'Yes, continue'}
+					cancelButtonProps={{
+						children: 'Cancel',
+					}}
+					children={
+						missingDriversModal.drive.linkMessage ||
+						`Etcher will open ${missingDriversModal.drive.link} in your browser`
+					}
+				></Modal>
+			)}
+		</Modal>
+	);
+}

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

@@ -1,265 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const angular = require('angular')
-const _ = require('lodash')
-const Bluebird = require('bluebird')
-const constraints = require('../../../../../shared/drive-constraints')
-const store = require('../../../models/store')
-const analytics = require('../../../modules/analytics')
-const availableDrives = require('../../../models/available-drives')
-const selectionState = require('../../../models/selection-state')
-const utils = require('../../../../../shared/utils')
-
-module.exports = function (
-  $q,
-  $uibModalInstance,
-  ConfirmModalService,
-  OSOpenExternalService
-) {
-  /**
-   * @summary The drive selector state
-   * @type {Object}
-   * @public
-   */
-  this.state = selectionState
-
-  /**
-   * @summary Static methods to check a drive's properties
-   * @type {Object}
-   * @public
-   */
-  this.constraints = constraints
-
-  /**
-   * @summary The drives model
-   * @type {Object}
-   * @public
-   *
-   * @description
-   * We expose the whole service instead of the `.drives`
-   * property, which is the one we're interested in since
-   * this allows the property to be automatically updated
-   * when `availableDrives` detects a change in the drives.
-   */
-  this.drives = availableDrives
-
-  /**
-   * @summary Determine if we can change a drive's selection state
-   * @function
-   * @private
-   *
-   * @param {Object} drive - drive
-   * @returns {Promise}
-   *
-   * @example
-   * DriveSelectorController.shouldChangeDriveSelectionState(drive)
-   *    .then((shouldChangeDriveSelectionState) => {
-   *        if (shouldChangeDriveSelectionState) doSomething();
-   *    });
-   */
-  const shouldChangeDriveSelectionState = (drive) => {
-    return $q.resolve(constraints.isDriveValid(drive, selectionState.getImage()))
-  }
-
-  /**
-   * @summary Toggle a drive selection
-   * @function
-   * @public
-   *
-   * @param {Object} drive - drive
-   * @returns {Promise} - resolved promise
-   *
-   * @example
-   * DriveSelectorController.toggleDrive({
-   *   device: '/dev/disk2',
-   *   size: 999999999,
-   *   name: 'Cruzer USB drive'
-   * });
-   */
-  this.toggleDrive = (drive) => {
-    return shouldChangeDriveSelectionState(drive).then((canChangeDriveSelectionState) => {
-      if (canChangeDriveSelectionState) {
-        analytics.logEvent('Toggle drive', {
-          drive,
-          previouslySelected: selectionState.isCurrentDrive(drive.device),
-          applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-          flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-        })
-
-        selectionState.toggleDrive(drive.device)
-      }
-
-      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,
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      })
-
-      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
-   * @public
-   *
-   * @example
-   * DriveSelectorController.closeModal();
-   */
-  this.closeModal = () => {
-    const selectedDrive = selectionState.getCurrentDrive()
-
-    // Sanity check to cover the case where a drive is selected,
-    // the drive is then unplugged from the computer and the modal
-    // is resolved with a non-existent drive.
-    if (!selectedDrive || !_.includes(this.drives.getDrives(), selectedDrive)) {
-      $uibModalInstance.close()
-    } else {
-      $uibModalInstance.close(selectedDrive)
-    }
-  }
-
-  /**
-   * @summary Select a drive and close the modal
-   * @function
-   * @public
-   *
-   * @param {Object} drive - drive
-   * @returns {Promise} - resolved promise
-   *
-   * @example
-   * DriveSelectorController.selectDriveAndClose({
-   *   device: '/dev/disk2',
-   *   size: 999999999,
-   *   name: 'Cruzer USB drive'
-   * });
-   */
-  this.selectDriveAndClose = (drive) => {
-    return shouldChangeDriveSelectionState(drive).then((canChangeDriveSelectionState) => {
-      if (canChangeDriveSelectionState) {
-        selectionState.selectDrive(drive.device)
-
-        analytics.logEvent('Drive selected (double click)', {
-          applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-          flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-        })
-
-        this.closeModal()
-      }
-    })
-  }
-
-  /**
-   * @summary Memoized getDrives function
-   * @function
-   * @public
-   *
-   * @returns {Array<Object>} - memoized list of drives
-   *
-   * @example
-   * const drives = DriveSelectorController.getDrives()
-   * // Do something with drives
-   */
-  this.getDrives = utils.memoize(this.drives.getDrives, angular.equals)
-
-  /**
-   * @summary Get a drive's compatibility status object(s)
-   * @function
-   * @public
-   *
-   * @description
-   * Given a drive, return its compatibility status with the selected image,
-   * containing the status type (ERROR, WARNING), and accompanying
-   * status message.
-   *
-   * @returns {Object[]} list of objects containing statuses
-   *
-   * @example
-   * const statuses = DriveSelectorController.getDriveStatuses(drive);
-   *
-   * for ({ type, message } of statuses) {
-   *   // do something
-   * }
-   */
-  this.getDriveStatuses = utils.memoize((drive) => {
-    return this.constraints.getDriveImageCompatibilityStatuses(drive, this.state.getImage())
-  }, angular.equals)
-
-  /**
-   * @summary Keyboard event drive toggling
-   * @function
-   * @public
-   *
-   * @description
-   * Keyboard-event specific entry to the toggleDrive function.
-   *
-   * @param {Object} drive - drive
-   * @param {Object} $event - event
-   *
-   * @example
-   * <div tabindex="1" ng-keypress="this.keyboardToggleDrive(drive, $event)">
-   *   Tab-select me and press enter or space!
-   * </div>
-   */
-  this.keyboardToggleDrive = (drive, $event) => {
-    console.log($event.keyCode)
-    const ENTER = 13
-    const SPACE = 32
-    if (_.includes([ ENTER, SPACE ], $event.keyCode)) {
-      this.toggleDrive(drive)
-    }
-  }
-}

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

@@ -1,35 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.DriveSelector
- */
-
-const angular = require('angular')
-const MODULE_NAME = 'Etcher.Components.DriveSelector'
-const DriveSelector = angular.module(MODULE_NAME, [
-  require('../modal/modal'),
-  require('../confirm-modal/confirm-modal'),
-  require('../../utils/byte-size/byte-size'),
-  require('../../os/open-external/open-external')
-])
-
-DriveSelector.controller('DriveSelectorController', require('./controllers/drive-selector'))
-DriveSelector.service('DriveSelectorService', require('./services/drive-selector'))
-
-module.exports = MODULE_NAME

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

@@ -1,34 +0,0 @@
-/*
- * Copyright 2019 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.TargetSelector
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.TargetSelector'
-const SelectTargetButton = angular.module(MODULE_NAME, [])
-
-SelectTargetButton.component(
-  'targetSelector',
-  react2angular(require('./target-selector.jsx'))
-)
-
-module.exports = MODULE_NAME

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

@@ -1,66 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-module.exports = function (ModalService, $q) {
-  let modal = null
-
-  /**
-   * @summary Open the drive selector widget
-   * @function
-   * @public
-   *
-   * @fulfil {(Object|Undefined)} - selected drive
-   * @returns {Promise}
-   *
-   * @example
-   * DriveSelectorService.open().then((drive) => {
-   *   console.log(drive);
-   * });
-   */
-  this.open = () => {
-    modal = ModalService.open({
-      name: 'drive-selector',
-      template: require('../templates/drive-selector-modal.tpl.html'),
-      controller: 'DriveSelectorController as modal',
-      size: 'drive-selector-modal'
-    })
-
-    return modal.result
-  }
-
-  /**
-   * @summary Close the drive selector widget
-   * @function
-   * @public
-   *
-   * @fulfil {Undefined}
-   * @returns {Promise}
-   *
-   * @example
-   * DriveSelectorService.close();
-   */
-  this.close = () => {
-    if (modal) {
-      return modal.close()
-    }
-
-    // Resolve `undefined` if the modal
-    // was already closed for consistency
-    return $q.resolve()
-  }
-}

lib/gui/app/components/drive-selector/styles/_drive-selector.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * Copyright 2016 balena.io
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -54,10 +54,13 @@
 
     .list-group-item-section-expanded {
       flex-grow: 1;
+      margin-left: 15px;
     }
 
     .list-group-item-section + .list-group-item-section {
       margin-left: 10px;
+      display: inline-block;
+      vertical-align: middle;
     }
 
     > .tick {
@@ -72,7 +75,7 @@
       color: $palette-theme-light-soft-foreground;
     }
 
-    progress {
+    .drive-init-progress {
       appearance: none;
       width: 100%;
       height: 2.5px;
@@ -80,13 +83,13 @@
       border-radius: 50% 50%;
     }
 
-    progress::-webkit-progress-bar {
+    .drive-init-progress::-webkit-progress-bar {
       background-color: $palette-theme-default-background;
       border: none;
       outline: none;
     }
 
-    progress::-webkit-progress-value {
+    .drive-init-progress::-webkit-progress-value {
       border-bottom: 1px solid darken($palette-theme-primary-background, 15);
       background-color: $palette-theme-primary-background;
     }

lib/gui/app/components/drive-selector/target-selector.jsx

@@ -1,166 +0,0 @@
-/*
- * Copyright 2019 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.
- */
-
-/* eslint-disable no-magic-numbers */
-
-'use strict'
-
-// eslint-disable-next-line no-unused-vars
-const React = require('react')
-const propTypes = require('prop-types')
-const { default: styled } = require('styled-components')
-const {
-  ChangeButton,
-  DetailsText,
-  StepButton,
-  StepNameButton,
-  ThemedProvider
-} = require('./../../styled-components')
-const { Txt } = require('rendition')
-const middleEllipsis = require('./../../utils/middle-ellipsis')
-const { bytesToClosestUnit } = require('./../../../../shared/units')
-
-const TargetDetail = styled((props) => (
-  <Txt.span {...props}>
-  </Txt.span>
-)) `
-  float: ${({ float }) => float}
-`
-
-const TargetDisplayText = ({
-  description,
-  size,
-  ...props
-}) => {
-  return (
-    <Txt.span {...props}>
-      <TargetDetail
-        float='left'>
-        {description}
-      </TargetDetail>
-      <TargetDetail
-        float='right'
-      >
-        {size}
-      </TargetDetail>
-    </Txt.span>
-  )
-}
-
-const TargetSelector = (props) => {
-  const targets = props.selection.getSelectedDrives()
-
-  if (targets.length === 1) {
-    const target = targets[0]
-    return (
-      <ThemedProvider>
-        <StepNameButton
-          plain
-          tooltip={props.tooltip}
-        >
-          {/* eslint-disable no-magic-numbers */}
-          { middleEllipsis(target.description, 20) }
-        </StepNameButton>
-        { !props.flashing &&
-          <ChangeButton
-            plain
-            mb={14}
-            onClick={props.reselectDrive}
-          >
-            Change
-          </ChangeButton>
-        }
-        <DetailsText>
-          { props.constraints.hasListDriveImageCompatibilityStatus(targets, props.image) &&
-            <Txt.span className='glyphicon glyphicon-exclamation-sign'
-              ml={2}
-              tooltip={
-                props.constraints.getListDriveImageCompatibilityStatuses(targets, props.image)[0].message
-              }
-            />
-          }
-          { bytesToClosestUnit(target.size) }
-        </DetailsText>
-      </ThemedProvider>
-    )
-  }
-
-  if (targets.length > 1) {
-    const targetsTemplate = []
-    for (const target of targets) {
-      targetsTemplate.push((
-        <DetailsText
-          key={target.device}
-          tooltip={
-            `${target.description} ${target.displayName} ${bytesToClosestUnit(target.size)}`
-          }
-          px={21}
-        >
-          <TargetDisplayText
-            description={middleEllipsis(target.description, 14)}
-            size={bytesToClosestUnit(target.size)}
-          >
-          </TargetDisplayText>
-        </DetailsText>
-      ))
-    }
-    return (
-      <ThemedProvider>
-        <StepNameButton
-          plain
-          tooltip={props.tooltip}
-        >
-          {targets.length} Targets
-        </StepNameButton>
-        { !props.flashing &&
-          <ChangeButton
-            plain
-            onClick={props.reselectDrive}
-            mb={14}
-          >
-            Change
-          </ChangeButton>
-        }
-        {targetsTemplate}
-      </ThemedProvider>
-    )
-  }
-
-  return (
-    <ThemedProvider>
-      <StepButton
-        tabindex={(targets.length > 0) ? -1 : 2 }
-        disabled={props.disabled}
-        onClick={props.openDriveSelector}
-      >
-        Select target
-      </StepButton>
-    </ThemedProvider>
-  )
-}
-
-TargetSelector.propTypes = {
-  disabled: propTypes.bool,
-  openDriveSelector: propTypes.func,
-  selection: propTypes.object,
-  reselectDrive: propTypes.func,
-  flashing: propTypes.bool,
-  constraints: propTypes.object,
-  show: propTypes.bool,
-  tooltip: propTypes.string
-}
-
-module.exports = TargetSelector

lib/gui/app/components/drive-selector/target-selector.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright 2019 balena.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.
+ */
+
+import { Drive as DrivelistDrive } from 'drivelist';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Txt } from 'rendition';
+import { default as styled } from 'styled-components';
+
+import {
+	getDriveImageCompatibilityStatuses,
+	Image,
+} from '../../../../shared/drive-constraints';
+import { bytesToClosestUnit } from '../../../../shared/units';
+import { getSelectedDrives } from '../../models/selection-state';
+import {
+	ChangeButton,
+	DetailsText,
+	StepButton,
+	StepNameButton,
+} from '../../styled-components';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+
+const TargetDetail = styled(props => <Txt.span {...props}></Txt.span>)`
+	float: ${({ float }) => float};
+`;
+
+interface TargetSelectorProps {
+	targets: any[];
+	disabled: boolean;
+	openDriveSelector: () => any;
+	reselectDrive: () => any;
+	flashing: boolean;
+	show: boolean;
+	tooltip: string;
+	image: Image;
+}
+
+function DriveCompatibilityWarning(props: {
+	drive: DrivelistDrive;
+	image: Image;
+}) {
+	const compatibilityWarnings = getDriveImageCompatibilityStatuses(
+		props.drive,
+		props.image,
+	);
+	if (compatibilityWarnings.length === 0) {
+		return null;
+	}
+	const messages = _.map(compatibilityWarnings, 'message');
+	return (
+		<Txt.span
+			className="glyphicon glyphicon-exclamation-sign"
+			ml={2}
+			tooltip={messages.join(', ')}
+		/>
+	);
+}
+
+export function TargetSelector(props: TargetSelectorProps) {
+	const targets = getSelectedDrives();
+
+	if (targets.length === 1) {
+		const target = targets[0];
+		return (
+			<>
+				<StepNameButton plain tooltip={props.tooltip}>
+					{middleEllipsis(target.description, 20)}
+				</StepNameButton>
+				{!props.flashing && (
+					<ChangeButton plain mb={14} onClick={props.reselectDrive}>
+						Change
+					</ChangeButton>
+				)}
+				<DetailsText>
+					<DriveCompatibilityWarning drive={target} image={props.image} />
+					{bytesToClosestUnit(target.size)}
+				</DetailsText>
+			</>
+		);
+	}
+
+	if (targets.length > 1) {
+		const targetsTemplate = [];
+		for (const target of targets) {
+			targetsTemplate.push(
+				<DetailsText
+					key={target.device}
+					tooltip={`${target.description} ${
+						target.displayName
+					} ${bytesToClosestUnit(target.size)}`}
+					px={21}
+				>
+					<Txt.span>
+						<DriveCompatibilityWarning drive={target} image={props.image} />
+						<TargetDetail float="left">
+							{middleEllipsis(target.description, 14)}
+						</TargetDetail>
+						<TargetDetail float="right">
+							{bytesToClosestUnit(target.size)}
+						</TargetDetail>
+					</Txt.span>
+				</DetailsText>,
+			);
+		}
+		return (
+			<>
+				<StepNameButton plain tooltip={props.tooltip}>
+					{targets.length} Targets
+				</StepNameButton>
+				{!props.flashing && (
+					<ChangeButton plain onClick={props.reselectDrive} mb={14}>
+						Change
+					</ChangeButton>
+				)}
+				{targetsTemplate}
+			</>
+		);
+	}
+
+	return (
+		<StepButton
+			tabindex={targets.length > 0 ? -1 : 2}
+			disabled={props.disabled}
+			onClick={props.openDriveSelector}
+		>
+			Select target
+		</StepButton>
+	);
+}

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

@@ -1,62 +0,0 @@
-<div class="modal-header">
-  <h4 class="modal-title">Select a Drive</h4>
-  <button tabindex="14" class="close" ng-click="modal.closeModal()">&times;</button>
-</div>
-
-<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())"
-      ng-dblclick="modal.selectDriveAndClose(drive)"
-      ng-click="modal.toggleDrive(drive)">
-        <img class="list-group-item-section" alt="Drive device type logo"
-          ng-if="drive.icon"
-          ng-src="../assets/{{drive.icon}}.svg"
-          width="25"
-          height="30">
-        <div
-          class="list-group-item-section list-group-item-section-expanded"
-          tabindex="{{ 15 + $index }}"
-          ng-keypress="modal.keyboardToggleDrive(drive, $event)">
-
-          <h4 class="list-group-item-heading">{{ drive.description }}
-            <span class="word-keep"
-              ng-show="drive.size"> - {{ drive.size | closestUnit }}</span>
-          </h4>
-          <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">
-
-            <span class="label" ng-repeat="status in modal.getDriveStatuses(drive)"
-              ng-class="{
-                'label-warning': status.type === modal.constraints.COMPATIBILITY_STATUS_TYPES.WARNING,
-                'label-danger': status.type === modal.constraints.COMPATIBILITY_STATUS_TYPES.ERROR
-              }">{{ status.message }}</span>
-
-          </footer>
-          <progress ng-if="drive.progress" value="{{ drive.progress }}" max="100"></progress>
-        </div>
-        <span class="list-group-item-section tick tick--success"
-          ng-show="modal.constraints.isDriveValid(drive, modal.state.getImage())"
-          ng-disabled="!modal.state.isDriveSelected(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>
-
-<div class="modal-footer">
-  <button class="button button-primary"
-    tabindex="{{ 15 + modal.getDrives().length }}"
-    ng-class="{
-      'button-warning': modal.constraints.hasListDriveImageCompatibilityStatus(modal.state.getSelectedDrives(), modal.state.getImage())
-    }"
-    ng-click="modal.closeModal()"
-    ng-disabled="!modal.state.hasDrive()">Continue</button>
-</div>

lib/gui/app/components/featured-project/featured-project.jsx

@@ -1,57 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const React = require('react')
-const propTypes = require('prop-types')
-const SafeWebview = require('../safe-webview/safe-webview.jsx')
-const settings = require('../../models/settings')
-const analytics = require('../../modules/analytics')
-
-class FeaturedProject extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      endpoint: null
-    }
-  }
-
-  componentDidMount () {
-    return settings.load()
-      .then(() => {
-        const endpoint = settings.get('featuredProjectEndpoint') || 'https://assets.balena.io/etcher-featured/index.html'
-        this.setState({ endpoint })
-      })
-      .catch(analytics.logException)
-  }
-
-  render () {
-    return (this.state.endpoint) ? (
-      <SafeWebview
-        src={this.state.endpoint}
-        {...this.props}>
-      </SafeWebview>
-    ) : null
-  }
-}
-
-FeaturedProject.propTypes = {
-  onWebviewShow: propTypes.func
-}
-
-module.exports = FeaturedProject

lib/gui/app/components/featured-project/featured-project.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as React from 'react';
+
+import * as settings from '../../models/settings';
+import * as analytics from '../../modules/analytics';
+import { SafeWebview } from '../safe-webview/safe-webview';
+
+interface FeaturedProjectProps {
+	onWebviewShow: (isWebviewShowing: boolean) => void;
+}
+
+interface FeaturedProjectState {
+	endpoint: string | null;
+}
+
+export class FeaturedProject extends React.Component<
+	FeaturedProjectProps,
+	FeaturedProjectState
+> {
+	constructor(props: FeaturedProjectProps) {
+		super(props);
+		this.state = { endpoint: null };
+	}
+
+	public componentDidMount() {
+		try {
+			const endpoint =
+				settings.get('featuredProjectEndpoint') ||
+				'https://assets.balena.io/etcher-featured/index.html';
+			this.setState({ endpoint });
+		} catch (error) {
+			analytics.logException(error);
+		}
+	}
+
+	public render() {
+		return this.state.endpoint ? (
+			<SafeWebview src={this.state.endpoint} {...this.props}></SafeWebview>
+		) : null;
+	}
+}

lib/gui/app/components/featured-project/index.js

@@ -1,34 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.FeaturedProject
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.FeaturedProject'
-const FeaturedProject = angular.module(MODULE_NAME, [])
-
-FeaturedProject.component(
-  'featuredProject',
-  react2angular(require('./featured-project.jsx'))
-)
-
-module.exports = MODULE_NAME

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

@@ -1,72 +0,0 @@
-/*
- * 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')
-const os = require('os')
-const settings = require('../../../models/settings')
-const utils = require('../../../../../shared/utils')
-const angular = require('angular')
-
-/* eslint-disable lodash/prefer-lodash-method */
-
-module.exports = function (
-  $uibModalInstance
-) {
-  /**
-   * @summary Close the modal
-   * @function
-   * @public
-   *
-   * @example
-   * FileSelectorController.close();
-   */
-  this.close = () => {
-    $uibModalInstance.close()
-  }
-
-  /**
-   * @summary Folder to constrain the file picker to
-   * @function
-   * @public
-   *
-   * @returns {String} - folder to constrain by
-   *
-   * @example
-   * FileSelectorController.getFolderConstraint()
-   */
-  this.getFolderConstraint = utils.memoize(() => {
-    return settings.has('fileBrowserConstraintPath')
-      ? settings.get('fileBrowserConstraintPath')
-      : ''
-  }, angular.equals)
-
-  /**
-   * @summary Get initial path
-   * @function
-   * @public
-   *
-   * @returns {String} - path
-   *
-   * @example
-   * <file-selector path="FileSelectorController.getPath()"></file-selector>
-   */
-  this.getPath = () => {
-    const constraintFolderPath = this.getFolderConstraint()
-    return _.isEmpty(constraintFolderPath) ? os.homedir() : constraintFolderPath
-  }
-}

lib/gui/app/components/file-selector/file-selector/colors.js

@@ -1,45 +0,0 @@
-/*
- * 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'
-
-/**
- * @summary Color scheme
- * @constant
- * @private
- */
-const colors = {
-  primary: {
-    color: '#3a3c41',
-    background: '#ffffff',
-    subColor: '#ababab',
-    faded: '#c3c4c6'
-  },
-  secondary: {
-    color: '#1c1d1e',
-    background: '#ebeff4',
-    title: '#b3b6b9'
-  },
-  highlight: {
-    color: 'white',
-    background: '#2297de'
-  },
-  soft: {
-    color: '#4d5056'
-  }
-}
-
-module.exports = colors

lib/gui/app/components/file-selector/file-selector/file-list.jsx

@@ -1,321 +0,0 @@
-/*
- * 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 React = require('react')
-const propTypes = require('prop-types')
-const styled = require('styled-components').default
-const rendition = require('rendition')
-const colors = require('./colors')
-
-const prettyBytes = require('pretty-bytes')
-const files = require('../../../models/files')
-const middleEllipsis = require('../../../utils/middle-ellipsis')
-const supportedFormats = require('../../../../../shared/supported-formats')
-
-const debug = require('debug')('etcher:gui:file-selector')
-
-/**
- * @summary Character limit of a filename before a middle-ellipsis is added
- * @constant
- * @private
- */
-const FILENAME_CHAR_LIMIT = 20
-
-/**
- * @summary Pattern to match all supported formats for highlighting
- * @constant
- * @private
- */
-const SUPPORTED_FORMATS_PATTERN = new RegExp(`^\\.(${supportedFormats.getAllExtensions().join('|')})$`, 'i')
-
-/**
- * @summary Flex styled component
- * @function
- * @type {ReactElement}
- */
-const Flex = styled.div`
-  display: flex;
-  flex: ${ props => props.flex };
-  flex-direction: ${ props => props.direction };
-  justify-content: ${ props => props.justifyContent };
-  align-items: ${ props => props.alignItems };
-  flex-wrap: ${ props => props.wrap };
-  flex-grow: ${ props => props.grow };
-`
-
-/**
- * @summary Anchor flex styled component
- * @function
- * @type {ReactElement}
- */
-const ClickableFlex = styled.a`
-  display: flex;
-  flex: ${ props => props.flex };
-  flex-direction: ${ props => props.direction };
-  justify-content: ${ props => props.justifyContent };
-  align-items: ${ props => props.alignItems };
-  flex-wrap: ${ props => props.wrap };
-  flex-grow: ${ props => props.grow };
-`
-
-/**
- * @summary FileList scroll wrapper element
- * @class
- * @type {ReactElement}
- */
-class UnstyledFileListWrap extends React.PureComponent {
-  constructor (props) {
-    super(props)
-    this.scrollElem = null
-  }
-
-  render () {
-    return (
-      <Flex className={ this.props.className }
-        ref={ ::this.setScrollElem }
-        wrap="wrap">
-        { this.props.children }
-      </Flex>
-    )
-  }
-
-  setScrollElem (element) {
-    this.scrollElem = element
-  }
-
-  componentDidUpdate (prevProps) {
-    if (this.scrollElem) {
-      this.scrollElem.scrollTop = 0
-    }
-  }
-
-}
-
-/**
- * @summary FileList scroll wrapper element
- * @class
- * @type {StyledComponent}
- */
-const FileListWrap = styled(UnstyledFileListWrap)`
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 0 20px;
-`
-
-/**
- * @summary File element
- * @class
- * @type {ReactElement}
- */
-class UnstyledFile extends React.PureComponent {
-
-  static getFileIconClass (file) {
-    return file.isDirectory
-      ? 'fas fa-folder'
-      : 'fas fa-file-alt'
-  }
-
-  onHighlight (event) {
-    event.preventDefault()
-    this.props.onHighlight(this.props.file)
-  }
-
-  onSelect (event) {
-    event.preventDefault()
-    this.props.onSelect(this.props.file)
-  }
-
-  render () {
-    const file = this.props.file
-    return (
-      <ClickableFlex
-        data-path={ file.path }
-        href={ `file://${file.path}` }
-        direction="column"
-        alignItems="stretch"
-        className={ this.props.className }
-        onClick={ ::this.onHighlight }
-        onDoubleClick={ ::this.onSelect }>
-        <span className={ UnstyledFile.getFileIconClass(file) } />
-        <span>{ middleEllipsis(file.basename, FILENAME_CHAR_LIMIT) }</span>
-        <div>{ file.isDirectory ? '' : prettyBytes(file.size || 0) }</div>
-      </ClickableFlex>
-    )
-  }
-}
-
-/**
- * @summary File element
- * @class
- * @type {StyledComponent}
- */
-const File = styled(UnstyledFile)`
-  width: 100px;
-  min-height: 100px;
-  max-height: 128px;
-  margin: 5px 10px;
-  padding: 5px;
-  background-color: none;
-  transition: 0.05s background-color ease-out;
-  color: ${ colors.primary.color };
-  cursor: pointer;
-  border-radius: 5px;
-  word-break: break-word;
-
-  > span:first-of-type {
-    align-self: center;
-    line-height: 1;
-    margin-bottom: 6px;
-    font-size: 48px;
-    color: ${ props => props.disabled ? colors.primary.faded : colors.soft.color };
-  }
-
-  > span:last-of-type {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    font-size: 14px;
-  }
-
-  > div:last-child {
-    background-color: none;
-    color: ${ colors.primary.subColor };
-    text-align: center;
-    font-size: 12px;
-  }
-
-  :hover, :visited {
-    color: ${ colors.primary.color };
-  }
-
-  :focus,
-  :active {
-    color: ${ colors.highlight.color };
-    background-color: ${ colors.highlight.background };
-  }
-
-  :focus > span:first-of-type,
-  :active > span:first-of-type {
-    color: ${ colors.highlight.color };
-  }
-
-  :focus > div:last-child,
-  :active > div:last-child {
-    color: ${ colors.highlight.color };
-  }
-`
-
-/**
- * @summary FileList element
- * @class
- * @type {ReactElement}
- */
-class FileList extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      path: props.path,
-      highlighted: null,
-      files: [],
-    }
-
-    debug('FileList', props)
-  }
-
-  readdir (dirname) {
-    debug('FileList:readdir', dirname)
-
-    if (this.props.constraintPath && dirname === '/') {
-      if (this.props.constraint) {
-        const mountpoints = this.props.constraint.mountpoints.map(( mount ) => {
-          const entry = new files.FileEntry(mount.path, {
-            size: 0,
-            isFile: () => false,
-            isDirectory: () => true
-          })
-          entry.name = mount.label
-          return entry
-        })
-        debug('FileList:readdir', mountpoints)
-        window.requestAnimationFrame(() => {
-          this.setState({ files: mountpoints })
-        })
-      }
-      return
-    }
-
-    files.readdirAsync(dirname).then((files) => {
-      window.requestAnimationFrame(() => {
-        this.setState({ files: files })
-      })
-    })
-  }
-
-  componentDidMount () {
-    process.nextTick(() => {
-      this.readdir(this.state.path)
-    })
-  }
-
-  onHighlight (file) {
-    debug('FileList:onHighlight', file)
-    this.props.onHighlight(file)
-  }
-
-  onSelect (file) {
-    debug('FileList:onSelect', file.path, file.isDirectory)
-    this.props.onSelect(file)
-  }
-
-  shouldComponentUpdate (nextProps, nextState) {
-    const shouldUpdate = (this.state.files !== nextState.files)
-    debug('FileList:shouldComponentUpdate', shouldUpdate)
-    if (this.props.path !== nextProps.path || this.props.constraint !== nextProps.constraint) {
-      process.nextTick(() => {
-        this.readdir(nextProps.path)
-      })
-    }
-    return shouldUpdate
-  }
-
-  static isSelectable (file) {
-    return file.isDirectory || !file.ext ||
-      SUPPORTED_FORMATS_PATTERN.test(file.ext)
-  }
-
-  render () {
-    return (
-      <FileListWrap wrap="wrap">
-        {
-          this.state.files.map((file) => {
-            return (
-              <File key={ file.path }
-                file={ file }
-                disabled={ !FileList.isSelectable(file) }
-                onSelect={ ::this.onSelect }
-                onHighlight={ ::this.onHighlight }/>
-            )
-          })
-        }
-      </FileListWrap>
-    )
-  }
-}
-
-module.exports = FileList

lib/gui/app/components/file-selector/file-selector/file-selector.jsx

@@ -1,358 +0,0 @@
-/*
- * 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 path = require('path')
-const sdk = require('etcher-sdk')
-
-const Bluebird = require('bluebird')
-const React = require('react')
-const propTypes = require('prop-types')
-const styled = require('styled-components').default
-const rendition = require('rendition')
-const colors = require('./colors')
-
-const Breadcrumbs = require('./path-breadcrumbs')
-const FileList = require('./file-list')
-const RecentFiles = require('./recent-files')
-const files = require('../../../models/files')
-
-const selectionState = require('../../../models/selection-state')
-const store = require('../../../models/store')
-const osDialog = require('../../../os/dialog')
-const exceptionReporter = require('../../../modules/exception-reporter')
-const messages = require('../../../../../shared/messages')
-const errors = require('../../../../../shared/errors')
-const supportedFormats = require('../../../../../shared/supported-formats')
-const analytics = require('../../../modules/analytics')
-
-const debug = require('debug')('etcher:gui:file-selector')
-
-/**
- * @summary Flex styled component
- * @function
- * @type {ReactElement}
- */
-const Flex = styled.div`
-  display: flex;
-  flex: ${ props => props.flex };
-  flex-direction: ${ props => props.direction };
-  justify-content: ${ props => props.justifyContent };
-  align-items: ${ props => props.alignItems };
-  flex-wrap: ${ props => props.wrap };
-  flex-grow: ${ props => props.grow };
-  overflow: ${ props => props.overflow };
-`
-
-const Header = styled(Flex) `
-  padding: 10px 15px 0;
-  border-bottom: 1px solid ${ colors.primary.faded };
-
-  > * {
-    margin: 5px;
-  }
-`
-
-const Main = styled(Flex) ``
-
-const Footer = styled(Flex) `
-  padding: 10px;
-  flex: 0 0 auto;
-  border-top: 1px solid ${ colors.primary.faded };
-
-  > * {
-    margin: 0 10px;
-  }
-
-  > button {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-`
-
-class UnstyledFilePath extends React.PureComponent {
-  render () {
-    return (
-      <div className={ this.props.className }>
-        <span>{
-          this.props.file && !this.props.file.isDirectory
-            ? this.props.file.basename
-            : ''
-        }</span>
-      </div>
-    )
-  }
-}
-
-const FilePath = styled(UnstyledFilePath)`
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  overflow: hidden;
-
-  > span {
-    font-size: 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`
-
-class FileSelector extends React.PureComponent {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      path: props.path,
-      highlighted: null,
-      constraint: null,
-      files: [],
-    }
-
-  }
-
-  componentDidMount() {
-    if (this.props.constraintpath) {
-      const device = files.getConstraintDevice(this.props.constraintpath)
-      debug('FileSelector:getConstraintDevice', device)
-      if (device !== undefined) {
-        this.setState({ constraint: device.drive  })
-      }
-    }
-  }
-
-  confirmSelection () {
-    if (this.state.highlighted) {
-      this.selectFile(this.state.highlighted)
-    }
-  }
-
-  close () {
-    this.props.close()
-  }
-
-  componentDidUpdate () {
-    debug('FileSelector:componentDidUpdate')
-  }
-
-  containPath (newPath) {
-    if (this.state.constraint) {
-      const isContained = this.state.constraint.mountpoints.some((mount) => {
-        return !path.relative(mount.path, newPath).startsWith('..')
-      })
-      if (!isContained) {
-        return '/'
-      }
-    }
-    return newPath
-  }
-
-  navigate (newPath) {
-    debug('FileSelector:navigate', newPath)
-    this.setState({ path: this.containPath(newPath) })
-  }
-
-  navigateUp () {
-    let newPath = this.containPath(path.join(this.state.path, '..'))
-    debug('FileSelector:navigateUp', this.state.path, '->', newPath)
-    this.setState({ path: newPath })
-  }
-
-  selectImage (image) {
-    debug('FileSelector:selectImage', image)
-
-    if (!supportedFormats.isSupportedImage(image.path)) {
-      const invalidImageError = errors.createUserError({
-        title: 'Invalid image',
-        description: messages.error.invalidImage(image.path)
-      })
-
-      osDialog.showError(invalidImageError)
-      analytics.logEvent('Invalid image', {
-        image,
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      })
-      return Bluebird.resolve()
-    }
-
-    return Bluebird.try(() => {
-      let message = null
-
-      if (supportedFormats.looksLikeWindowsImage(image.path)) {
-        analytics.logEvent('Possibly Windows image', {
-          image,
-          applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-          flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-        })
-        message = messages.warning.looksLikeWindowsImage()
-      } else if (!image.hasMBR) {
-        analytics.logEvent('Missing partition table', {
-          image,
-          applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-          flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-        })
-        message = messages.warning.missingPartitionTable()
-      }
-
-      if (message) {
-        // TODO: `Continue` should be on a red background (dangerous action) instead of `Change`.
-        // We want `X` to act as `Continue`, that's why `Continue` is the `rejectionLabel`
-        return osDialog.showWarning({
-          confirmationLabel: 'Change',
-          rejectionLabel: 'Continue',
-          title: 'Warning',
-          description: message
-        })
-      }
-
-      return false
-    }).then((shouldChange) => {
-      if (shouldChange) {
-        return
-      }
-
-      selectionState.selectImage(image)
-
-      this.close()
-
-      // An easy way so we can quickly identify if we're making use of
-      // certain features without printing pages of text to DevTools.
-      image.logo = Boolean(image.logo)
-      image.blockMap = Boolean(image.blockMap)
-
-      analytics.logEvent('Select image', {
-        image,
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      })
-    }).catch(exceptionReporter.report)
-  }
-
-  selectFile (file) {
-    debug('FileSelector:selectFile', file)
-
-    if (file.isDirectory) {
-      this.navigate(file.path)
-      return
-    }
-
-    if (!supportedFormats.isSupportedImage(file.path)) {
-      const invalidImageError = errors.createUserError({
-        title: 'Invalid image',
-        description: messages.error.invalidImage(file.path)
-      })
-
-      osDialog.showError(invalidImageError)
-      analytics.logEvent('Invalid image', { path: file.path })
-      return
-    }
-
-    debug('FileSelector:getImageMetadata', file)
-
-    const source = new sdk.sourceDestination.File(file.path, sdk.sourceDestination.File.OpenFlags.Read)
-    source.getInnerSource()
-    .then((innerSource) => {
-      return innerSource.getMetadata()
-      .then((imageMetadata) => {
-        debug('FileSelector:getImageMetadata', imageMetadata)
-        imageMetadata.path = file.path
-        imageMetadata.extension = path.extname(file.path).slice(1)
-        return innerSource.getPartitionTable()
-        .then((partitionTable) => {
-          if (partitionTable !== undefined) {
-            imageMetadata.hasMBR = true
-            imageMetadata.partitions = partitionTable.partitions
-          }
-          return this.selectImage(imageMetadata)
-        })
-      })
-    })
-    .catch((error) => {
-      debug('FileSelector:getImageMetadata', error)
-      const imageError = errors.createUserError({
-        title: 'Error opening image',
-        description: messages.error.openImage(path.basename(file.path), error.message)
-      })
-
-      osDialog.showError(imageError)
-      analytics.logException(error)
-    })
-  }
-
-  onHighlight (file) {
-    this.setState({ highlighted: file })
-  }
-
-  render () {
-    const styles = {
-      display: 'flex',
-      height: 'calc(100vh - 20px)',
-    }
-    return (
-      <rendition.Provider style={ styles }>
-        {/*<RecentFiles flex="0 0 auto"
-          selectFile={ ::this.selectFile }
-          navigate={ ::this.navigate } />*/}
-        <Flex direction="column" grow="1" overflow="auto">
-          <Header flex="0 0 auto" alignItems="baseline">
-            <rendition.Button
-              bg={ colors.secondary.background }
-              color={ colors.primary.color }
-              onClick={ ::this.navigateUp }>
-              <span className="fas fa-angle-left" />
-              &nbsp;Back
-            </rendition.Button>
-            <span className="fas fa-hdd" />
-            <Breadcrumbs
-              path={ this.state.path }
-              navigate={ ::this.navigate }
-              constraintPath={ this.props.constraintpath }
-              constraint={ this.state.constraint }
-            />
-          </Header>
-          <Main flex="1">
-            <Flex direction="column" grow="1">
-              <FileList path={ this.state.path }
-                constraintPath={ this.props.constraintpath }
-                constraint={ this.state.constraint }
-                onHighlight={ ::this.onHighlight }
-                onSelect={ ::this.selectFile }></FileList>
-            </Flex>
-          </Main>
-          <Footer justifyContent="flex-end">
-            <FilePath file={ this.state.highlighted }></FilePath>
-            <rendition.Button onClick={ ::this.close }>Cancel</rendition.Button>
-            <rendition.Button
-              primary
-              onClick={ ::this.confirmSelection }>
-              Select file
-            </rendition.Button>
-          </Footer>
-        </Flex>
-      </rendition.Provider>
-    )
-  }
-}
-
-FileSelector.propTypes = {
-  path: propTypes.string,
-  close: propTypes.func,
-  constraintpath: propTypes.string,
-}
-
-module.exports = FileSelector

lib/gui/app/components/file-selector/file-selector/path-breadcrumbs.jsx

@@ -1,119 +0,0 @@
-/*
- * 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 path = require('path')
-
-const React = require('react')
-const propTypes = require('prop-types')
-const styled = require('styled-components').default
-const rendition = require('rendition')
-
-const middleEllipsis = require('../../../utils/middle-ellipsis')
-
-/**
- * @summary How many directories to show with the breadcrumbs
- * @type {Number}
- * @constant
- * @private
- */
-const MAX_DIR_CRUMBS = 3
-
-/**
- * @summary Character limit of a filename before a middle-ellipsis is added
- * @constant
- * @private
- */
-const FILENAME_CHAR_LIMIT_SHORT = 15
-
-function splitComponents(dirname, root) {
-  const components = []
-  let basename = null
-  root = root || path.parse(dirname).root
-  while( dirname !== root ) {
-    basename = path.basename(dirname)
-    components.unshift({
-      path: dirname,
-      basename: basename,
-      name: basename
-    })
-    dirname = path.join( dirname, '..' )
-  }
-  if (components.length < MAX_DIR_CRUMBS) {
-    components.unshift({
-      path: root,
-      basename: root,
-      name: 'Root'
-    })
-  }
-  return components
-}
-
-class Crumb extends React.PureComponent {
-  constructor (props) {
-    super(props)
-  }
-
-  render () {
-    return (
-      <rendition.Button
-        onClick={ ::this.navigate }
-        plain={ true }>
-        <rendition.Txt bold={ this.props.bold }>
-          { middleEllipsis(this.props.dir.name, FILENAME_CHAR_LIMIT_SHORT) }
-        </rendition.Txt>
-      </rendition.Button>
-    )
-  }
-
-  navigate () {
-    this.props.navigate(this.props.dir.path)
-  }
-}
-
-class UnstyledBreadcrumbs extends React.PureComponent {
-  render () {
-    const components = splitComponents(this.props.path).slice(-MAX_DIR_CRUMBS)
-    return (
-      <div className={ this.props.className }>
-      {
-        components.map((dir, index) => {
-          return (
-            <Crumb
-              key={ dir.path }
-              bold={ index === components.length - 1 }
-              dir={ dir }
-              navigate={ ::this.props.navigate }
-            />
-          )
-        })
-      }
-      </div>
-    )
-  }
-}
-
-const Breadcrumbs = styled(UnstyledBreadcrumbs)`
-  font-size: 18px;
-
-  & > button:not(:last-child)::after {
-    content: '/';
-    margin: 9px;
-  }
-`
-
-module.exports = Breadcrumbs

lib/gui/app/components/file-selector/file-selector/recent-files.jsx

@@ -1,125 +0,0 @@
-/*
- * 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 React = require('react')
-const propTypes = require('prop-types')
-const styled = require('styled-components').default
-const rendition = require('rendition')
-const colors = require('./colors')
-
-const middleEllipsis = require('../../../utils/middle-ellipsis')
-
-/**
- * @summary Flex styled component
- * @function
- * @type {ReactElement}
- */
-const Flex = styled.div`
-  display: flex;
-  flex: ${ props => props.flex };
-  flex-direction: ${ props => props.direction };
-  justify-content: ${ props => props.justifyContent };
-  align-items: ${ props => props.alignItems };
-  flex-wrap: ${ props => props.wrap };
-  flex-grow: ${ props => props.grow };
-`
-
-class RecentFileLink extends React.PureComponent {
-  constructor (props) {
-    super(props)
-  }
-
-  render () {
-    const file = this.props.file
-    return (
-      <rendition.Button
-        onClick={ ::this.select }
-        plain={ true }>
-        { middleEllipsis(file.name, FILENAME_CHAR_LIMIT_SHORT) }
-      </rendition.Button>
-    )
-  }
-
-  select () {
-    this.props.onSelect(this.props.file)
-  }
-}
-
-class UnstyledRecentFiles extends React.PureComponent {
-  constructor(props) {
-    super(props)
-    this.state = {
-      recent: [],
-      favorites: []
-    }
-  }
-
-  render () {
-    return (
-      <Flex className={ this.props.className }>
-        <h5>Recent</h5>
-        {
-          this.state.recent.map((file) => {
-            <RecentFileLink key={ file.path }
-              file={ file }
-              onSelect={ this.props.selectFile }/>
-          })
-        }
-        <h5>Favorite</h5>
-        {
-          this.state.favorites.map((file) => {
-            <RecentFileLink key={ file.path }
-              file={ file }
-              onSelect={ this.props.navigate }/>
-          })
-        }
-      </Flex>
-    )
-  }
-}
-
-const RecentFiles = styled(UnstyledRecentFiles)`
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 130px;
-  background-color: ${ colors.secondary.background };
-  padding: 20px;
-  color: ${ colors.secondary.color };
-
-  > h5 {
-    color: ${ colors.secondary.title };
-    font-size: 11px;
-    font-weight: 500;
-    text-transform: uppercase;
-    margin-bottom: 15px;
-  }
-
-  > h5:last-of-type {
-    margin-top: 20px;
-  }
-
-  > button {
-    margin-bottom: 10px;
-    text-align: start;
-    font-size: 16px;
-  }
-`
-
-module.exports = RecentFiles

lib/gui/app/components/file-selector/index.js

@@ -1,37 +0,0 @@
-/*
- * 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'
-
-/* eslint-disable jsdoc/require-example */
-
-/**
- * @module Etcher.Components.SVGIcon
- */
-
-const angular = require('angular')
-const react2angular = require('react2angular').react2angular
-
-const MODULE_NAME = 'Etcher.Components.FileSelector'
-const angularFileSelector = angular.module(MODULE_NAME, [
-  require('../modal/modal')
-])
-
-angularFileSelector.component('fileSelector', react2angular(require('./file-selector/file-selector.jsx')))
-angularFileSelector.controller('FileSelectorController', require('./controllers/file-selector'))
-angularFileSelector.service('FileSelectorService', require('./services/file-selector'))
-
-module.exports = MODULE_NAME

lib/gui/app/components/file-selector/services/file-selector.js

@@ -1,53 +0,0 @@
-/*
- * 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 (ModalService, $q) {
-  let modal = null
-
-  /**
-   * @summary Open the file selector widget
-   * @function
-   * @public
-   *
-   * @example
-   * DriveSelectorService.open()
-   */
-  this.open = () => {
-    modal = ModalService.open({
-      name: 'file-selector',
-      template: require('../templates/file-selector-modal.tpl.html'),
-      controller: 'FileSelectorController as selector',
-      size: 'file-selector-modal'
-    })
-  }
-
-  /**
-   * @summary Close the file selector widget
-   * @function
-   * @public
-   *
-   * @example
-   * DriveSelectorService.close()
-   */
-  this.close = () => {
-    if (modal) {
-      modal.close()
-    }
-    modal = null
-  }
-}

lib/gui/app/components/file-selector/styles/_file-selector.scss

@@ -1,23 +0,0 @@
-/*
- * 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.
- */
-
-.modal-file-selector-modal {
-  width: calc(100vw - 10px);
-
-  > .modal-content {
-    height: calc(100vh - 20px);
-  }
-}

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

@@ -1,4 +0,0 @@
-<file-selector
-  constraintpath="selector.getFolderConstraint()"
-  path="selector.getPath()"
-  close="selector.close"></file-selector>

lib/gui/app/components/finish/finish.tsx

@@ -0,0 +1,135 @@
+/*
+ * Copyright 2019 balena.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.
+ */
+
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as uuidV4 from 'uuid/v4';
+
+import * as messages from '../../../../shared/messages';
+import * as flashState from '../../models/flash-state';
+import * as selectionState from '../../models/selection-state';
+import { store } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import { updateLock } from '../../modules/update-lock';
+import { open as openExternal } from '../../os/open-external/services/open-external';
+import { FlashAnother } from '../flash-another/flash-another';
+import { FlashResults } from '../flash-results/flash-results';
+import { SVGIcon } from '../svg-icon/svg-icon';
+
+const restart = (options: any, goToMain: () => void) => {
+	const {
+		applicationSessionUuid,
+		flashingWorkflowUuid,
+	} = store.getState().toJS();
+	if (!options.preserveImage) {
+		selectionState.deselectImage();
+	}
+	selectionState.deselectAllDrives();
+	analytics.logEvent('Restart', {
+		...options,
+		applicationSessionUuid,
+		flashingWorkflowUuid,
+	});
+
+	// Re-enable lock release on inactivity
+	updateLock.resume();
+
+	// Reset the flashing workflow uuid
+	store.dispatch({
+		type: 'SET_FLASHING_WORKFLOW_UUID',
+		data: uuidV4(),
+	});
+
+	goToMain();
+};
+
+const formattedErrors = () => {
+	const errors = _.map(
+		_.get(flashState.getFlashResults(), ['results', 'errors']),
+		error => {
+			return `${error.device}: ${error.message || error.code}`;
+		},
+	);
+	return errors.join('\n');
+};
+
+function FinishPage({ goToMain }: { goToMain: () => void }) {
+	// @ts-ignore
+	const results = flashState.getFlashResults().results || {};
+	const progressMessage = messages.progress;
+	return (
+		<div className="page-finish row around-xs">
+			<div className="col-xs">
+				<div className="box center">
+					<FlashResults
+						results={results}
+						message={progressMessage}
+						errors={formattedErrors}
+					></FlashResults>
+
+					<FlashAnother
+						onClick={(options: any) => restart(options, goToMain)}
+					></FlashAnother>
+				</div>
+
+				<div className="box center">
+					<div className="fallback-banner">
+						<div className="caption caption-big">
+							Thanks for using
+							<span
+								style={{ cursor: 'pointer' }}
+								onClick={() =>
+									openExternal(
+										'https://balena.io/etcher?ref=etcher_offline_banner',
+									)
+								}
+							>
+								<SVGIcon
+									paths={['../../assets/etcher.svg']}
+									width="165px"
+									height="auto"
+								></SVGIcon>
+							</span>
+						</div>
+						<div className="caption caption-small fallback-footer">
+							made with
+							<SVGIcon
+								paths={['../../assets/love.svg']}
+								width="auto"
+								height="20px"
+							></SVGIcon>
+							by
+							<span
+								style={{ cursor: 'pointer' }}
+								onClick={() =>
+									openExternal('https://balena.io?ref=etcher_success')
+								}
+							>
+								<SVGIcon
+									paths={['../../assets/balena.svg']}
+									width="auto"
+									height="20px"
+								></SVGIcon>
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default FinishPage;

lib/gui/app/components/flash-another/flash-another.jsx

@@ -1,49 +0,0 @@
-/*
- * 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'
-
-// eslint-disable-next-line no-unused-vars
-const React = require('react')
-const PropTypes = require('prop-types')
-const styled = require('styled-components').default
-const { position, right } = require('styled-system')
-const { BaseButton, ThemedProvider } = require('../../styled-components')
-
-const Div = styled.div `
-  ${position}
-  ${right}
-`
-
-const FlashAnother = (props) => {
-  return (
-    <ThemedProvider>
-      <Div position='absolute' right='152px'>
-        <BaseButton
-          primary
-          onClick={props.onClick.bind(null, { preserveImage: true })}>
-          Flash Another
-        </BaseButton>
-      </Div>
-    </ThemedProvider>
-  )
-}
-
-FlashAnother.propTypes = {
-  onClick: PropTypes.func
-}
-
-module.exports = FlashAnother

lib/gui/app/components/flash-another/flash-another.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2019 balena.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.
+ */
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { position, right } from 'styled-system';
+import { BaseButton, ThemedProvider } from '../../styled-components';
+
+const Div = styled.div<any>`
+	${position}
+	${right}
+`;
+
+export interface FlashAnotherProps {
+	onClick: (options: { preserveImage: boolean }) => void;
+}
+
+export const FlashAnother = (props: FlashAnotherProps) => {
+	return (
+		<ThemedProvider>
+			<Div position="absolute" right="152px">
+				<BaseButton
+					primary
+					onClick={props.onClick.bind(null, { preserveImage: true })}
+				>
+					Flash Another
+				</BaseButton>
+			</Div>
+		</ThemedProvider>
+	);
+};

lib/gui/app/components/flash-another/index.js

@@ -1,34 +0,0 @@
-/*
- * 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.FlashAnother
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.FlashAnother'
-const FlashAnother = angular.module(MODULE_NAME, [])
-
-FlashAnother.component(
-  'flashAnother',
-  react2angular(require('./flash-another.jsx'))
-)
-
-module.exports = MODULE_NAME

lib/gui/app/components/flash-error-modal/flash-error-modal.js

@@ -1,31 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.FlashErrorModal
- */
-
-const angular = require('angular')
-const MODULE_NAME = 'Etcher.Components.FlashErrorModal'
-const FlashErrorModal = angular.module(MODULE_NAME, [
-  require('../warning-modal/warning-modal')
-])
-
-FlashErrorModal.service('FlashErrorModalService', require('./services/flash-error-modal'))
-
-module.exports = MODULE_NAME

lib/gui/app/components/flash-error-modal/services/flash-error-modal.js

@@ -1,53 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const flashState = require('../../../models/flash-state')
-const selectionState = require('../../../models/selection-state')
-const store = require('../../../models/store')
-const analytics = require('../../../modules/analytics')
-
-module.exports = function (WarningModalService) {
-  /**
-   * @summary Open the flash error modal
-   * @function
-   * @public
-   *
-   * @param {String} message - flash error message
-   * @returns {Promise}
-   *
-   * @example
-   * FlashErrorModalService.show('The drive is not large enough!');
-   */
-  this.show = (message) => {
-    return WarningModalService.display({
-      confirmationLabel: 'Retry',
-      description: message
-    }).then((confirmed) => {
-      flashState.resetState()
-
-      if (confirmed) {
-        analytics.logEvent('Restart after failure', {
-          applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-          flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-        })
-      } else {
-        selectionState.clear()
-      }
-    })
-  }
-}

lib/gui/app/components/flash-results/flash-results.jsx

@@ -1,66 +0,0 @@
-/*
- * 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 React = require('react')
-const PropTypes = require('prop-types')
-const _ = require('lodash')
-const styled = require('styled-components').default
-const { position, left, top, space } = require('styled-system')
-const { Underline } = require('./../../styled-components')
-
-const Div = styled.div `
-  ${position}
-  ${top}
-  ${left}
-  ${space}
-`
-
-/* eslint-disable no-inline-comments */
-
-const FlashResults = (props) => {
-  return (
-    <Div position='absolute' left='153px' top='66px'>
-      <div className="inline-flex title">
-        <span className="tick tick--success space-right-medium"></span>
-        <h3>Flash Complete!</h3>
-      </div>
-      <Div className="results" mt='11px' mr='0' mb='0' ml='40px'>
-        <Underline
-          tooltip={props.errors()}>
-          {_.map(props.results.devices, (quantity, type) => {
-            return (quantity) ? (
-              <div key={type} className={`target-status-line target-status-${type}`}>
-                <span className="target-status-dot"></span>
-                <span className="target-status-quantity">{ quantity }</span>
-                <span className="target-status-message">{ props.message[type](quantity) }</span>
-              </div>
-            ) : null
-          })}
-        </Underline>
-      </Div>
-    </Div>
-  )
-}
-
-FlashResults.propTypes = {
-  results: PropTypes.object,
-  message: PropTypes.object,
-  errors: PropTypes.func
-}
-
-module.exports = FlashResults

lib/gui/app/components/flash-results/flash-results.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2019 balena.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.
+ */
+
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+import { left, position, space, top } from 'styled-system';
+import { Underline } from '../../styled-components';
+
+const Div: any = styled.div<any>`
+  ${position}
+  ${top}
+  ${left}
+  ${space}
+`;
+
+export const FlashResults: any = ({
+	errors,
+	results,
+	message,
+}: {
+	errors: () => string;
+	results: any;
+	message: any;
+}) => {
+	return (
+		<Div position="absolute" left="153px" top="66px">
+			<div className="inline-flex title">
+				<span className="tick tick--success space-right-medium"></span>
+				<h3>Flash Complete!</h3>
+			</div>
+			<Div className="results" mt="11px" mr="0" mb="0" ml="40px">
+				<Underline tooltip={errors()}>
+					{_.map(results.devices, (quantity, type) => {
+						return quantity ? (
+							<div
+								key={type}
+								className={`target-status-line target-status-${type}`}
+							>
+								<span className="target-status-dot"></span>
+								<span className="target-status-quantity">{quantity}</span>
+								<span className="target-status-message">
+									{message[type](quantity)}
+								</span>
+							</div>
+						) : null;
+					})}
+				</Underline>
+			</Div>
+		</Div>
+	);
+};

lib/gui/app/components/flash-results/index.js

@@ -1,34 +0,0 @@
-/*
- * 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.FlashResults
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.FlashResults'
-const FlashResults = angular.module(MODULE_NAME, [])
-
-FlashResults.component(
-  'flashResults',
-  react2angular(require('./flash-results.jsx'))
-)
-
-module.exports = MODULE_NAME

lib/gui/app/components/image-selector/image-selector.jsx

@@ -1,98 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/* eslint-disable no-unused-vars */
-const React = require('react')
-const propTypes = require('prop-types')
-
-const middleEllipsis = require('./../../utils/middle-ellipsis')
-
-const shared = require('./../../../../shared/units')
-const {
-  StepButton,
-  StepNameButton,
-  StepSelection,
-  Footer,
-  Underline,
-  DetailsText,
-  ChangeButton,
-  ThemedProvider
-} = require('./../../styled-components')
-
-const SelectImageButton = (props) => {
-  if (props.hasImage) {
-    return (
-      <ThemedProvider>
-        <StepNameButton
-          plain
-          onClick={props.showSelectedImageDetails}
-          tooltip={props.imageBasename}
-        >
-          {/* eslint-disable no-magic-numbers */}
-          { middleEllipsis(props.imageName || props.imageBasename, 20) }
-        </StepNameButton>
-        { !props.flashing &&
-          <ChangeButton
-            plain
-            mb={14}
-            onClick={props.reselectImage}
-          >
-            Change
-          </ChangeButton>
-        }
-        <DetailsText>
-          {shared.bytesToClosestUnit(props.imageSize)}
-        </DetailsText>
-      </ThemedProvider>
-    )
-  }
-  return (
-    <ThemedProvider>
-      <StepSelection>
-        <StepButton
-          onClick={props.openImageSelector}
-        >
-          Select image
-        </StepButton>
-        <Footer>
-          { props.mainSupportedExtensions.join(', ') }, and{' '}
-          <Underline
-            tooltip={ props.extraSupportedExtensions.join(', ') }
-          >
-            many more
-          </Underline>
-        </Footer>
-      </StepSelection>
-    </ThemedProvider>
-  )
-}
-
-SelectImageButton.propTypes = {
-  openImageSelector: propTypes.func,
-  mainSupportedExtensions: propTypes.array,
-  extraSupportedExtensions: propTypes.array,
-  hasImage: propTypes.bool,
-  showSelectedImageDetails: propTypes.func,
-  imageName: propTypes.string,
-  imageBasename: propTypes.string,
-  reselectImage: propTypes.func,
-  flashing: propTypes.bool,
-  imageSize: propTypes.number
-}
-
-module.exports = SelectImageButton

lib/gui/app/components/image-selector/image-selector.tsx

@@ -0,0 +1,420 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as sdk from 'etcher-sdk';
+import * as _ from 'lodash';
+import { GPTPartition, MBRPartition } from 'partitioninfo';
+import * as path from 'path';
+import * as React from 'react';
+import { Modal } from 'rendition';
+import { default as styled } from 'styled-components';
+
+import * as errors from '../../../../shared/errors';
+import * as messages from '../../../../shared/messages';
+import * as supportedFormats from '../../../../shared/supported-formats';
+import * as shared from '../../../../shared/units';
+import * as selectionState from '../../models/selection-state';
+import { observe, store } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import * as exceptionReporter from '../../modules/exception-reporter';
+import * as osDialog from '../../os/dialog';
+import { replaceWindowsNetworkDriveLetter } from '../../os/windows-network-drives';
+import {
+	ChangeButton,
+	DetailsText,
+	Footer,
+	StepButton,
+	StepNameButton,
+	StepSelection,
+	Underline,
+} from '../../styled-components';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+import { SVGIcon } from '../svg-icon/svg-icon';
+
+// TODO move these styles to rendition
+const ModalText = styled.p`
+	a {
+		color: rgb(0, 174, 239);
+
+		&:hover {
+			color: rgb(0, 139, 191);
+		}
+	}
+`;
+
+const mainSupportedExtensions = _.intersection(
+	['img', 'iso', 'zip'],
+	supportedFormats.getAllExtensions(),
+);
+
+const extraSupportedExtensions = _.difference(
+	supportedFormats.getAllExtensions(),
+	mainSupportedExtensions,
+).sort();
+
+function getState() {
+	return {
+		hasImage: selectionState.hasImage(),
+		imageName: selectionState.getImageName(),
+		imageSize: selectionState.getImageSize(),
+	};
+}
+
+interface ImageSelectorProps {
+	flashing: boolean;
+}
+
+interface ImageSelectorState {
+	hasImage: boolean;
+	imageName: string;
+	imageSize: number;
+	warning: { message: string; title: string | null } | null;
+	showImageDetails: boolean;
+}
+
+export class ImageSelector extends React.Component<
+	ImageSelectorProps,
+	ImageSelectorState
+> {
+	private unsubscribe: () => void;
+
+	constructor(props: ImageSelectorProps) {
+		super(props);
+		this.state = {
+			...getState(),
+			warning: null,
+			showImageDetails: false,
+		};
+
+		this.openImageSelector = this.openImageSelector.bind(this);
+		this.reselectImage = this.reselectImage.bind(this);
+		this.onDrop = this.onDrop.bind(this);
+		this.showSelectedImageDetails = this.showSelectedImageDetails.bind(this);
+	}
+
+	public componentDidMount() {
+		this.unsubscribe = observe(() => {
+			this.setState(getState());
+		});
+	}
+
+	public componentWillUnmount() {
+		this.unsubscribe();
+	}
+
+	private reselectImage() {
+		analytics.logEvent('Reselect image', {
+			previousImage: selectionState.getImage(),
+			applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+			flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+		});
+
+		this.openImageSelector();
+	}
+
+	private selectImage(
+		image: sdk.sourceDestination.Metadata & {
+			path: string;
+			extension: string;
+			hasMBR: boolean;
+		},
+	) {
+		if (!supportedFormats.isSupportedImage(image.path)) {
+			const invalidImageError = errors.createUserError({
+				title: 'Invalid image',
+				description: messages.error.invalidImage(image.path),
+			});
+
+			osDialog.showError(invalidImageError);
+			analytics.logEvent(
+				'Invalid image',
+				_.merge(
+					{
+						applicationSessionUuid: store.getState().toJS()
+							.applicationSessionUuid,
+						flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+					},
+					image,
+				),
+			);
+			return;
+		}
+
+		try {
+			let message = null;
+			let title = null;
+
+			if (supportedFormats.looksLikeWindowsImage(image.path)) {
+				analytics.logEvent('Possibly Windows image', {
+					image,
+					applicationSessionUuid: store.getState().toJS()
+						.applicationSessionUuid,
+					flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+				});
+				message = messages.warning.looksLikeWindowsImage();
+				title = 'Possible Windows image detected';
+			} else if (!image.hasMBR) {
+				analytics.logEvent('Missing partition table', {
+					image,
+					applicationSessionUuid: store.getState().toJS()
+						.applicationSessionUuid,
+					flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+				});
+				title = 'Missing partition table';
+				message = messages.warning.missingPartitionTable();
+			}
+
+			if (message) {
+				this.setState({
+					warning: {
+						message,
+						title,
+					},
+				});
+			}
+
+			selectionState.selectImage(image);
+			analytics.logEvent('Select image', {
+				// An easy way so we can quickly identify if we're making use of
+				// certain features without printing pages of text to DevTools.
+				image: {
+					...image,
+					logo: Boolean(image.logo),
+					blockMap: Boolean(image.blockMap),
+				},
+				applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+				flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+			});
+		} catch (error) {
+			exceptionReporter.report(error);
+		}
+	}
+
+	private async selectImageByPath(imagePath: string) {
+		try {
+			imagePath = await replaceWindowsNetworkDriveLetter(imagePath);
+		} catch (error) {
+			analytics.logException(error);
+		}
+		if (!supportedFormats.isSupportedImage(imagePath)) {
+			const invalidImageError = errors.createUserError({
+				title: 'Invalid image',
+				description: messages.error.invalidImage(imagePath),
+			});
+
+			osDialog.showError(invalidImageError);
+			analytics.logEvent('Invalid image', { path: imagePath });
+			return;
+		}
+
+		const source = new sdk.sourceDestination.File(
+			imagePath,
+			sdk.sourceDestination.File.OpenFlags.Read,
+		);
+		try {
+			const innerSource = await source.getInnerSource();
+			const metadata = (await innerSource.getMetadata()) as sdk.sourceDestination.Metadata & {
+				hasMBR: boolean;
+				partitions: MBRPartition[] | GPTPartition[];
+				path: string;
+				extension: string;
+			};
+			const partitionTable = await innerSource.getPartitionTable();
+			if (partitionTable) {
+				metadata.hasMBR = true;
+				metadata.partitions = partitionTable.partitions;
+			} else {
+				metadata.hasMBR = false;
+			}
+			metadata.path = imagePath;
+			metadata.extension = path.extname(imagePath).slice(1);
+			this.selectImage(metadata);
+		} catch (error) {
+			const imageError = errors.createUserError({
+				title: 'Error opening image',
+				description: messages.error.openImage(
+					path.basename(imagePath),
+					error.message,
+				),
+			});
+			osDialog.showError(imageError);
+			analytics.logException(error);
+		} finally {
+			try {
+				await source.close();
+			} catch (error) {
+				// Noop
+			}
+		}
+	}
+
+	private async openImageSelector() {
+		analytics.logEvent('Open image selector', {
+			applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+			flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+		});
+
+		try {
+			const imagePath = await osDialog.selectImage();
+			// Avoid analytics and selection state changes
+			// if no file was resolved from the dialog.
+			if (!imagePath) {
+				analytics.logEvent('Image selector closed', {
+					applicationSessionUuid: store.getState().toJS()
+						.applicationSessionUuid,
+					flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+				});
+				return;
+			}
+			this.selectImageByPath(imagePath);
+		} catch (error) {
+			exceptionReporter.report(error);
+		}
+	}
+
+	private onDrop(event: React.DragEvent<HTMLDivElement>) {
+		const [file] = event.dataTransfer.files;
+		if (file) {
+			this.selectImageByPath(file.path);
+		}
+	}
+
+	private onDragOver(event: React.DragEvent<HTMLDivElement>) {
+		// Needed to get onDrop events on div elements
+		event.preventDefault();
+	}
+
+	private onDragEnter(event: React.DragEvent<HTMLDivElement>) {
+		// Needed to get onDrop events on div elements
+		event.preventDefault();
+	}
+
+	private showSelectedImageDetails() {
+		analytics.logEvent('Show selected image tooltip', {
+			imagePath: selectionState.getImagePath(),
+			flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+			applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+		});
+
+		this.setState({
+			showImageDetails: true,
+		});
+	}
+
+	// TODO add a visual change when dragging a file over the selector
+	public render() {
+		const { flashing } = this.props;
+		const { showImageDetails } = this.state;
+
+		const hasImage = selectionState.hasImage();
+
+		const imageBasename = hasImage
+			? path.basename(selectionState.getImagePath())
+			: '';
+		const imageName = selectionState.getImageName();
+		const imageSize = selectionState.getImageSize();
+
+		return (
+			<>
+				<div
+					className="box text-center relative"
+					onDrop={this.onDrop}
+					onDragEnter={this.onDragEnter}
+					onDragOver={this.onDragOver}
+				>
+					<div className="center-block">
+						<SVGIcon
+							contents={[selectionState.getImageLogo()]}
+							paths={['../../assets/image.svg']}
+						/>
+					</div>
+
+					<div className="space-vertical-large">
+						{hasImage ? (
+							<>
+								<StepNameButton
+									plain
+									onClick={this.showSelectedImageDetails}
+									tooltip={imageBasename}
+								>
+									{middleEllipsis(imageName || imageBasename, 20)}
+								</StepNameButton>
+								{!flashing && (
+									<ChangeButton plain mb={14} onClick={this.reselectImage}>
+										Change
+									</ChangeButton>
+								)}
+								<DetailsText>
+									{shared.bytesToClosestUnit(imageSize)}
+								</DetailsText>
+							</>
+						) : (
+							<StepSelection>
+								<StepButton onClick={this.openImageSelector}>
+									Select image
+								</StepButton>
+								<Footer>
+									{mainSupportedExtensions.join(', ')}, and{' '}
+									<Underline tooltip={extraSupportedExtensions.join(', ')}>
+										many more
+									</Underline>
+								</Footer>
+							</StepSelection>
+						)}
+					</div>
+				</div>
+
+				{this.state.warning != null && (
+					<Modal
+						titleElement={
+							<span>
+								<span
+									style={{ color: '#d9534f' }}
+									className="glyphicon glyphicon-exclamation-sign"
+								></span>{' '}
+								<span>{this.state.warning.title}</span>
+							</span>
+						}
+						action="Continue"
+						cancel={() => {
+							this.setState({ warning: null });
+							this.reselectImage();
+						}}
+						done={() => {
+							this.setState({ warning: null });
+						}}
+						primaryButtonProps={{ warning: true, primary: false }}
+					>
+						<ModalText
+							dangerouslySetInnerHTML={{ __html: this.state.warning.message }}
+						/>
+					</Modal>
+				)}
+
+				{showImageDetails && (
+					<Modal
+						title="Image File Name"
+						done={() => {
+							this.setState({ showImageDetails: false });
+						}}
+					>
+						{selectionState.getImagePath()}
+					</Modal>
+				)}
+			</>
+		);
+	}
+}

lib/gui/app/components/image-selector/index.js

@@ -1,34 +0,0 @@
-/*
- * 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.ImageSelector
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.ImageSelector'
-const SelectImageButton = angular.module(MODULE_NAME, [])
-
-SelectImageButton.component(
-  'imageSelector',
-  react2angular(require('./image-selector.jsx'))
-)
-
-module.exports = MODULE_NAME

lib/gui/app/components/modal/modal.js

@@ -1,31 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.Modal
- */
-
-const angular = require('angular')
-const MODULE_NAME = 'Etcher.Components.Modal'
-const Modal = angular.module(MODULE_NAME, [
-  require('angular-ui-bootstrap')
-])
-
-Modal.service('ModalService', require('./services/modal'))
-
-module.exports = MODULE_NAME

lib/gui/app/components/modal/services/modal.js

@@ -1,100 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const store = require('../../../models/store')
-const analytics = require('../../../modules/analytics')
-
-module.exports = function ($uibModal, $q) {
-  /**
-   * @summary Open a modal
-   * @function
-   * @public
-   *
-   * @param {Object} options - options
-   * @param {String} options.template - template contents
-   * @param {String} options.controller - controller
-   * @param {String} [options.size='sm'] - modal size
-   * @param {Object} options.resolve - modal resolves
-   * @returns {Object} modal
-   *
-   * @example
-   * ModalService.open({
-   *   name: 'my modal',
-   *   template: require('./path/to/modal.tpl.html'),
-   *   controller: 'DriveSelectorController as modal',
-   * });
-   */
-  this.open = (options = {}) => {
-    _.defaults(options, {
-      size: 'sm'
-    })
-
-    analytics.logEvent('Open modal', {
-      name: options.name,
-      applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-    })
-
-    const modal = $uibModal.open({
-      animation: true,
-      template: options.template,
-      controller: options.controller,
-      size: options.size,
-      resolve: options.resolve,
-      backdrop: 'static'
-    })
-
-    return {
-      close: modal.close,
-      result: $q((resolve, reject) => {
-        modal.result.then((value) => {
-          analytics.logEvent('Modal accepted', {
-            name: options.name,
-            value,
-            applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-            flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-          })
-
-          resolve(value)
-        }).catch((error) => {
-          // Bootstrap doesn't 'resolve' these but cancels the dialog
-          if (error === 'escape key press') {
-            analytics.logEvent('Modal rejected', {
-              name: options.name,
-              method: error,
-              applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-              flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-            })
-
-            return resolve()
-          }
-
-          analytics.logEvent('Modal rejected', {
-            name: options.name,
-            value: error,
-            applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-            flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-          })
-
-          return reject(error)
-        })
-      })
-    }
-  }
-}

lib/gui/app/components/modal/styles/_modal.scss

@@ -1,106 +0,0 @@
-/*
- * 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-content {
-  background-color: $palette-theme-light-background;
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  height: auto;
-  overflow: hidden;
-}
-
-.modal-header {
-  display: flex;
-  align-items: baseline;
-  font-size: 12px;
-  color: $palette-theme-light-soft-foreground;
-  padding: 11px 20px;
-  flex-grow: 0;
-}
-
-.modal-title {
-  font-size: inherit;
-  flex-grow: 1;
-}
-
-.modal-body {
-  flex-grow: 1;
-  color: $palette-theme-light-foreground;
-  padding: 20px;
-  max-height: 250px;
-  overflow: auto;
-
-  a {
-    color: $palette-theme-primary-background;
-  }
-
-  > p {
-    white-space: pre-line;
-  }
-
-  > p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.modal-menu {
-  display: flex;
-
-  > * {
-    flex-basis: auto;
-  }
-}
-
-// UI Bootstrap adds the `.modal-open` class to the <body>
-// element and sets its right padding to the width of the
-// window, causing the window content to overflow and get
-// pushed to the bottom.
-// The `!important` flag is needed since UI Bootstrap inlines
-// the styles programmatically to the element.
-.modal-open {
-  padding-right: 0 !important;
-}
-
-// Disable modal opacity
-.modal-backdrop.in {
-  opacity: 0;
-}
-
-.modal-footer {
-  flex-grow: 0;
-  border: 0;
-  text-align: center;
-}
-
-.modal {
-
-  // Center the modal using Flexbox so we can
-  // freely use any height.
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-
-  .button[disabled] {
-    background-color: $palette-theme-light-disabled-background;
-    color: $palette-theme-light-disabled-foreground;
-  }
-}
-
-.modal-dialog {
-  margin: 0;
-  position: initial;
-}

lib/gui/app/components/progress-button/index.js

@@ -1,34 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.ProgressButton
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.ProgressButton'
-const ProgressButton = angular.module(MODULE_NAME, [])
-
-ProgressButton.component(
-  'progressButton',
-  react2angular(require('./progress-button.jsx'))
-)
-
-module.exports = MODULE_NAME

lib/gui/app/components/progress-button/progress-button.jsx

@@ -1,161 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const React = require('react')
-const propTypes = require('prop-types')
-const Color = require('color')
-
-const {
-  default: styled,
-  css,
-  keyframes
-} = require('styled-components')
-
-const { ProgressBar, Provider } = require('rendition')
-
-const { colors } = require('./../../theme')
-const { StepButton, StepSelection } = require('./../../styled-components')
-
-const darkenForegroundStripes = 0.18
-const desaturateForegroundStripes = 0.2
-const progressButtonStripesForegroundColor = Color(colors.primary.background)
-  .darken(darkenForegroundStripes)
-  .desaturate(desaturateForegroundStripes)
-  .string()
-
-const desaturateBackgroundStripes = 0.05
-const progressButtonStripesBackgroundColor = Color(colors.primary.background)
-  .desaturate(desaturateBackgroundStripes)
-  .string()
-
-const ProgressButtonStripes = keyframes `
-  0% {
-    background-position: 0 0;
-  }
-
-  100% {
-    background-position: 20px 20px;
-  }
-`
-
-const ProgressButtonStripesRule = css `
-  ${ProgressButtonStripes} 1s linear infinite;
-`
-
-const FlashProgressBar = styled(ProgressBar) `
-  > div {
-    width: 200px;
-    height: 48px;
-    color: white !important;
-    text-shadow: none !important;
-  }
-
-  width: 200px;
-  height: 48px;
-  font-size: 16px;
-  line-height: 48px;
-
-  background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()};
-`
-
-const FlashProgressBarValidating = styled(FlashProgressBar) `
-
-  // Notice that we add 0.01 to certain gradient stop positions.
-  // That workarounds a Chrome rendering issue where diagonal
-  // lines look spiky.
-  // See https://github.com/resin-io/etcher/issues/472
-
-  background-image: -webkit-gradient(linear, 0 0, 100% 100%,
-    color-stop(0.25, ${progressButtonStripesForegroundColor}),
-    color-stop(0.26, ${progressButtonStripesBackgroundColor}),
-    color-stop(0.50, ${progressButtonStripesBackgroundColor}),
-    color-stop(0.51, ${progressButtonStripesForegroundColor}),
-    color-stop(0.75, ${progressButtonStripesForegroundColor}),
-    color-stop(0.76 , ${progressButtonStripesBackgroundColor}),
-    to(${progressButtonStripesBackgroundColor}));
-
-  background-color: white;
-
-  animation: ${ProgressButtonStripesRule};
-  overflow: hidden;
-
-  background-size: 20px 20px;
-`
-
-/**
- * Progress Button component
- */
-class ProgressButton extends React.Component {
-  render () {
-    if (this.props.active) {
-      if (this.props.striped) {
-        return (
-          <Provider>
-            <StepSelection>
-              <FlashProgressBarValidating
-                primary
-                emphasized
-                value= { this.props.percentage }
-              >
-                { this.props.label }
-              </FlashProgressBarValidating>
-            </StepSelection>
-          </Provider>
-        )
-      }
-
-      return (
-        <Provider>
-          <StepSelection>
-            <FlashProgressBar
-              warning
-              emphasized
-              value= { this.props.percentage }
-            >
-              { this.props.label }
-            </FlashProgressBar>
-          </StepSelection>
-        </Provider>
-      )
-    }
-
-    return (
-      <Provider>
-        <StepSelection>
-          <StepButton
-            onClick= { this.props.callback }
-            disabled= { this.props.disabled }
-          >
-            {this.props.label}
-          </StepButton>
-        </StepSelection>
-      </Provider>
-    )
-  }
-}
-
-ProgressButton.propTypes = {
-  striped: propTypes.bool,
-  active: propTypes.bool,
-  percentage: propTypes.number,
-  label: propTypes.string,
-  disabled: propTypes.bool,
-  callback: propTypes.func
-}
-
-module.exports = ProgressButton

lib/gui/app/components/progress-button/progress-button.tsx

@@ -0,0 +1,145 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as Color from 'color';
+import * as React from 'react';
+import { ProgressBar } from 'rendition';
+import { css, default as styled, keyframes } from 'styled-components';
+
+import { StepButton, StepSelection } from '../../styled-components';
+import { colors } from '../../theme';
+
+const darkenForegroundStripes = 0.18;
+const desaturateForegroundStripes = 0.2;
+const progressButtonStripesForegroundColor = Color(colors.primary.background)
+	.darken(darkenForegroundStripes)
+	.desaturate(desaturateForegroundStripes)
+	.string();
+
+const desaturateBackgroundStripes = 0.05;
+const progressButtonStripesBackgroundColor = Color(colors.primary.background)
+	.desaturate(desaturateBackgroundStripes)
+	.string();
+
+const ProgressButtonStripes = keyframes`
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 20px 20px;
+  }
+`;
+
+const ProgressButtonStripesRule = css`
+	${ProgressButtonStripes} 1s linear infinite;
+`;
+
+const FlashProgressBar = styled(ProgressBar)`
+	> div {
+		width: 200px;
+		height: 48px;
+		color: white !important;
+		text-shadow: none !important;
+	}
+
+	width: 200px;
+	height: 48px;
+	font-size: 16px;
+	line-height: 48px;
+
+	background: ${Color(colors.warning.background)
+		.darken(darkenForegroundStripes)
+		.string()};
+`;
+
+const FlashProgressBarValidating = styled(FlashProgressBar)`
+	// Notice that we add 0.01 to certain gradient stop positions.
+	// That workarounds a Chrome rendering issue where diagonal
+	// lines look spiky.
+	// See https://github.com/balena-io/etcher/issues/472
+
+	background-image: -webkit-gradient(
+		linear,
+		0 0,
+		100% 100%,
+		color-stop(0.25, ${progressButtonStripesForegroundColor}),
+		color-stop(0.26, ${progressButtonStripesBackgroundColor}),
+		color-stop(0.5, ${progressButtonStripesBackgroundColor}),
+		color-stop(0.51, ${progressButtonStripesForegroundColor}),
+		color-stop(0.75, ${progressButtonStripesForegroundColor}),
+		color-stop(0.76, ${progressButtonStripesBackgroundColor}),
+		to(${progressButtonStripesBackgroundColor})
+	);
+
+	background-color: white;
+
+	animation: ${ProgressButtonStripesRule};
+	overflow: hidden;
+
+	background-size: 20px 20px;
+`;
+
+interface ProgressButtonProps {
+	striped: boolean;
+	active: boolean;
+	percentage: number;
+	label: string;
+	disabled: boolean;
+	callback: () => any;
+}
+
+/**
+ * Progress Button component
+ */
+export class ProgressButton extends React.Component<ProgressButtonProps> {
+	public render() {
+		if (this.props.active) {
+			if (this.props.striped) {
+				return (
+					<StepSelection>
+						<FlashProgressBarValidating
+							primary
+							emphasized
+							value={this.props.percentage}
+						>
+							{this.props.label}
+						</FlashProgressBarValidating>
+					</StepSelection>
+				);
+			}
+
+			return (
+				<StepSelection>
+					<FlashProgressBar warning emphasized value={this.props.percentage}>
+						{this.props.label}
+					</FlashProgressBar>
+				</StepSelection>
+			);
+		}
+
+		return (
+			<StepSelection>
+				<StepButton
+					onClick={this.props.callback}
+					disabled={this.props.disabled}
+				>
+					{this.props.label}
+				</StepButton>
+			</StepSelection>
+		);
+	}
+}

lib/gui/app/components/reduced-flashing-infos/index.js

@@ -1,34 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.ReducedFlashingInfos
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.ReducedFlashingInfos'
-const ReducedFlashingInfos = angular.module(MODULE_NAME, [])
-
-ReducedFlashingInfos.component(
-  'reducedFlashingInfos',
-  react2angular(require('./reduced-flashing-infos.jsx'))
-)
-
-module.exports = MODULE_NAME

lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx

@@ -1,81 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const React = require('react')
-const propTypes = require('prop-types')
-const styled = require('styled-components').default
-const { color } = require('styled-system')
-const SvgIcon = require('../svg-icon/svg-icon.jsx')
-
-const Div = styled.div `
-  position: absolute;
-  top: 45px;
-  left: 545px;
-
-  > span.step-name {
-    justify-content: flex-start;
-
-    > span {
-      margin-left: 10px;
-    }
-
-    > span:nth-child(2) {
-      font-weight: 500;
-    }
-
-    > span:nth-child(3) {
-      font-weight: 400;
-      font-style: italic;
-    }
-  }
-
-  .svg-icon[disabled] {
-    opacity: 0.4;
-  }
-`
-
-const Span = styled.span `
-  ${color}
-`
-
-const ReducedFlashingInfos = (props) => {
-  return (props.shouldShow) ? (
-    <Div>
-      <Span className="step-name">
-        <SvgIcon disabled contents={[ props.imageLogo ]} paths={[ '../../assets/image.svg' ]} width='20px'></SvgIcon>
-        <Span>{ props.imageName }</Span>
-        <Span color='#7e8085'>{ props.imageSize }</Span>
-      </Span>
-
-      <Span className="step-name">
-        <SvgIcon disabled paths={[ '../../assets/drive.svg' ]} width='20px'></SvgIcon>
-        <Span>{ props.driveTitle }</Span>
-      </Span>
-    </Div>
-  ) : null
-}
-
-ReducedFlashingInfos.propTypes = {
-  imageLogo: propTypes.string,
-  imageName: propTypes.string,
-  imageSize: propTypes.string,
-  driveTitle: propTypes.string,
-  shouldShow: propTypes.bool
-}
-
-module.exports = ReducedFlashingInfos

lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as React from 'react';
+import { default as styled } from 'styled-components';
+import { color } from 'styled-system';
+
+import { SVGIcon } from '../svg-icon/svg-icon';
+
+const Div = styled.div`
+	position: absolute;
+	top: 45px;
+	left: 545px;
+
+	> span.step-name {
+		justify-content: flex-start;
+
+		> span {
+			margin-left: 10px;
+		}
+
+		> span:nth-child(2) {
+			font-weight: 500;
+		}
+
+		> span:nth-child(3) {
+			font-weight: 400;
+			font-style: italic;
+		}
+	}
+
+	.svg-icon[disabled] {
+		opacity: 0.4;
+	}
+`;
+
+const Span = styled.span`
+	${color}
+`;
+
+interface ReducedFlashingInfosProps {
+	imageLogo: string;
+	imageName: string;
+	imageSize: string;
+	driveTitle: string;
+	shouldShow: boolean;
+}
+
+export class ReducedFlashingInfos extends React.Component<
+	ReducedFlashingInfosProps
+> {
+	constructor(props: ReducedFlashingInfosProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return this.props.shouldShow ? (
+			<Div>
+				<Span className="step-name">
+					<SVGIcon
+						disabled
+						contents={[this.props.imageLogo]}
+						paths={['../../assets/image.svg']}
+						width="20px"
+					></SVGIcon>
+					<Span>{this.props.imageName}</Span>
+					<Span color="#7e8085">{this.props.imageSize}</Span>
+				</Span>
+
+				<Span className="step-name">
+					<SVGIcon
+						disabled
+						paths={['../../assets/drive.svg']}
+						width="20px"
+					></SVGIcon>
+					<Span>{this.props.driveTitle}</Span>
+				</Span>
+			</Div>
+		) : null;
+	}
+}

lib/gui/app/components/safe-webview/index.js

@@ -1,34 +0,0 @@
-/*
- * 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.SafeWebview
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.SafeWebview'
-const SafeWebview = angular.module(MODULE_NAME, [])
-
-SafeWebview.component(
-  'safeWebview',
-  react2angular(require('./safe-webview.jsx'))
-)
-
-module.exports = MODULE_NAME

lib/gui/app/components/safe-webview/safe-webview.jsx

@@ -1,258 +0,0 @@
-/*
- * Copyright 2017 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'
-
-/* eslint-disable jsdoc/require-example */
-
-const _ = require('lodash')
-const electron = require('electron')
-const react = require('react')
-const propTypes = require('prop-types')
-const analytics = require('../../modules/analytics')
-const store = require('../../models/store')
-const settings = require('../../models/settings')
-const packageJSON = require('../../../../../package.json')
-
-/**
- * @summary Electron session identifier
- * @constant
- * @private
- * @type {String}
- */
-const ELECTRON_SESSION = 'persist:success-banner'
-
-/**
- * @summary Etcher version search-parameter key
- * @constant
- * @private
- * @type {String}
- */
-const ETCHER_VERSION_PARAM = 'etcher-version'
-
-/**
- * @summary API version search-parameter key
- * @constant
- * @private
- * @type {String}
- */
-const API_VERSION_PARAM = 'api-version'
-
-/**
- * @summary Opt-out analytics search-parameter key
- * @constant
- * @private
- * @type {String}
- */
-const OPT_OUT_ANALYTICS_PARAM = 'optOutAnalytics'
-
-/**
- * @summary Webview API version
- * @constant
- * @private
- * @type {String}
- *
- * @description
- * Changing this number represents a departure from an older API and as such
- * should only be changed when truly necessary as it introduces breaking changes.
- * This version number is exposed to the banner such that it can determine what
- * features are safe to utilize.
- *
- * See `git blame -L n` where n is the line below for the history of version changes.
- */
-const API_VERSION = 2
-
-/**
- * @summary Webviews that hide/show depending on the HTTP status returned
- * @type {Object}
- * @public
- *
- * @example
- * <safe-webview src="https://etcher.io/"></safe-webview>
- */
-class SafeWebview extends react.PureComponent {
-  /**
-   * @param {Object} props - React element properties
-   */
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      shouldShow: true
-    }
-
-    const url = new window.URL(props.src)
-
-    // We set the version GET parameters here.
-    url.searchParams.set(ETCHER_VERSION_PARAM, packageJSON.version)
-    url.searchParams.set(API_VERSION_PARAM, API_VERSION)
-    url.searchParams.set(OPT_OUT_ANALYTICS_PARAM, !settings.get('errorReporting'))
-
-    this.entryHref = url.href
-
-    // Events steal 'this'
-    this.didFailLoad = _.bind(this.didFailLoad, this)
-    this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this)
-
-    this.eventTuples = [
-      [ 'did-fail-load', this.didFailLoad ],
-      [ 'new-window', this.constructor.newWindow ]
-    ]
-
-    // Make a persistent electron session for the webview
-    this.session = electron.remote.session.fromPartition(ELECTRON_SESSION, {
-
-      // Disable the cache for the session such that new content shows up when refreshing
-      cache: false
-    })
-  }
-
-  /**
-   * @returns {react.Element}
-   */
-  render () {
-    return react.createElement('webview', {
-      ref: 'webview',
-      partition: ELECTRON_SESSION,
-      style: {
-        flex: this.state.shouldShow ? null : '0 1',
-        width: this.state.shouldShow ? null : '0',
-        height: this.state.shouldShow ? null : '0'
-      }
-    }, [])
-  }
-
-  /**
-   * @summary Add the Webview events
-   */
-  componentDidMount () {
-    // Events React is unaware of have to be handled manually
-    _.map(this.eventTuples, (tuple) => {
-      this.refs.webview.addEventListener(...tuple)
-    })
-
-    this.session.webRequest.onCompleted(this.didGetResponseDetails)
-
-    // It's important that this comes after the partition setting, otherwise it will
-    // use another session and we can't change it without destroying the element again
-    this.refs.webview.src = this.entryHref
-  }
-
-  /**
-   * @summary Remove the Webview events
-   */
-  componentWillUnmount () {
-    // Events that React is unaware of have to be handled manually
-    _.map(this.eventTuples, (tuple) => {
-      this.refs.webview.removeEventListener(...tuple)
-    })
-    this.session.webRequest.onCompleted(null)
-  }
-
-  /**
-   * @summary Refresh the webview if we are navigating away from the success page
-   * @param {Object} nextProps - upcoming properties
-   */
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.refreshNow && !this.props.refreshNow) {
-      // Reload the page if it hasn't changed, otherwise reset the source URL,
-      // because reload interferes with 'src' setting, resetting the 'src' attribute
-      // to what it was was just prior.
-      if (this.refs.webview.src === this.entryHref) {
-        this.refs.webview.reload()
-      } else {
-        this.refs.webview.src = this.entryHref
-      }
-
-      this.setState({
-        shouldShow: true
-      })
-    }
-  }
-
-  /**
-   * @summary Set the element state to hidden
-   */
-  didFailLoad () {
-    this.setState({
-      shouldShow: false
-    })
-  }
-
-  /**
-   * @summary Set the element state depending on the HTTP response code
-   * @param {Event} event - Event object
-   */
-  didGetResponseDetails (event) {
-    // This seems to pick up all requests related to the webview,
-    // only care about this event if it's a request for the main frame
-    if (event.resourceType === 'mainFrame') {
-      const HTTP_OK = 200
-
-      analytics.logEvent('SafeWebview loaded', {
-        event,
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      })
-
-      this.setState({
-        shouldShow: event.statusCode === HTTP_OK
-      })
-      if (this.props.onWebviewShow) {
-        this.props.onWebviewShow(event.statusCode === HTTP_OK)
-      }
-    }
-  }
-
-  /**
-   * @summary Open link in browser if it's opened as a 'foreground-tab'
-   * @param {Event} event - event object
-   */
-  static newWindow (event) {
-    const url = new window.URL(event.url)
-
-    if (_.every([
-      url.protocol === 'http:' || url.protocol === 'https:',
-      event.disposition === 'foreground-tab',
-
-      // Don't open links if they're disabled by the env var
-      !settings.get('disableExternalLinks')
-    ])) {
-      electron.shell.openExternal(url.href)
-    }
-  }
-}
-
-SafeWebview.propTypes = {
-
-  /**
-   * @summary The website source URL
-   */
-  src: propTypes.string.isRequired,
-
-  /**
-   * @summary Refresh the webview
-   */
-  refreshNow: propTypes.bool,
-
-  /**
-   * @summary Webview lifecycle event
-   */
-  onWebviewShow: propTypes.func
-
-}
-
-module.exports = SafeWebview

lib/gui/app/components/safe-webview/safe-webview.tsx

@@ -0,0 +1,213 @@
+/*
+ * Copyright 2017 balena.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.
+ */
+
+import * as electron from 'electron';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import * as packageJSON from '../../../../../package.json';
+import * as settings from '../../models/settings';
+import { store } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+
+/**
+ * @summary Electron session identifier
+ */
+const ELECTRON_SESSION = 'persist:success-banner';
+
+/**
+ * @summary Etcher version search-parameter key
+ */
+const ETCHER_VERSION_PARAM = 'etcher-version';
+
+/**
+ * @summary API version search-parameter key
+ */
+const API_VERSION_PARAM = 'api-version';
+
+/**
+ * @summary Opt-out analytics search-parameter key
+ */
+const OPT_OUT_ANALYTICS_PARAM = 'optOutAnalytics';
+
+/**
+ * @summary Webview API version
+ *
+ * @description
+ * Changing this number represents a departure from an older API and as such
+ * should only be changed when truly necessary as it introduces breaking changes.
+ * This version number is exposed to the banner such that it can determine what
+ * features are safe to utilize.
+ *
+ * See `git blame -L n` where n is the line below for the history of version changes.
+ */
+const API_VERSION = '2';
+
+interface SafeWebviewProps {
+	// The website source URL
+	src: string;
+	// @summary Refresh the webview
+	refreshNow?: boolean;
+	// Webview lifecycle event
+	onWebviewShow?: (isWebviewShowing: boolean) => void;
+}
+
+interface SafeWebviewState {
+	shouldShow: boolean;
+}
+
+/**
+ * @summary Webviews that hide/show depending on the HTTP status returned
+ */
+export class SafeWebview extends React.PureComponent<
+	SafeWebviewProps,
+	SafeWebviewState
+> {
+	private entryHref: string;
+	private session: electron.Session;
+	private webviewRef: React.RefObject<electron.WebviewTag>;
+
+	constructor(props: SafeWebviewProps) {
+		super(props);
+		this.webviewRef = React.createRef();
+		this.state = {
+			shouldShow: true,
+		};
+		const url = new window.URL(this.props.src);
+		// We set the version GET parameters here.
+		url.searchParams.set(ETCHER_VERSION_PARAM, packageJSON.version);
+		url.searchParams.set(API_VERSION_PARAM, API_VERSION);
+		url.searchParams.set(
+			OPT_OUT_ANALYTICS_PARAM,
+			(!settings.get('errorReporting')).toString(),
+		);
+		this.entryHref = url.href;
+		// Events steal 'this'
+		this.didFailLoad = _.bind(this.didFailLoad, this);
+		this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this);
+		// Make a persistent electron session for the webview
+		this.session = electron.remote.session.fromPartition(ELECTRON_SESSION, {
+			// Disable the cache for the session such that new content shows up when refreshing
+			cache: false,
+		});
+	}
+
+	private static logWebViewMessage(event: electron.ConsoleMessageEvent) {
+		console.log('Message from SafeWebview:', event.message);
+	}
+
+	public render() {
+		return (
+			<webview
+				ref={this.webviewRef}
+				partition={ELECTRON_SESSION}
+				style={{
+					flex: this.state.shouldShow ? undefined : '0 1',
+					width: this.state.shouldShow ? undefined : '0',
+					height: this.state.shouldShow ? undefined : '0',
+				}}
+			/>
+		);
+	}
+
+	// Add the Webview events
+	public componentDidMount() {
+		// Events React is unaware of have to be handled manually
+		if (this.webviewRef.current !== null) {
+			this.webviewRef.current.addEventListener(
+				'did-fail-load',
+				this.didFailLoad,
+			);
+			this.webviewRef.current.addEventListener(
+				'new-window',
+				SafeWebview.newWindow,
+			);
+			this.webviewRef.current.addEventListener(
+				'console-message',
+				SafeWebview.logWebViewMessage,
+			);
+			this.session.webRequest.onCompleted(this.didGetResponseDetails);
+			// It's important that this comes after the partition setting, otherwise it will
+			// use another session and we can't change it without destroying the element again
+			this.webviewRef.current.src = this.entryHref;
+		}
+	}
+
+	// Remove the Webview events
+	public componentWillUnmount() {
+		// Events that React is unaware of have to be handled manually
+		if (this.webviewRef.current !== null) {
+			this.webviewRef.current.removeEventListener(
+				'did-fail-load',
+				this.didFailLoad,
+			);
+			this.webviewRef.current.removeEventListener(
+				'new-window',
+				SafeWebview.newWindow,
+			);
+			this.webviewRef.current.removeEventListener(
+				'console-message',
+				SafeWebview.logWebViewMessage,
+			);
+		}
+		this.session.webRequest.onCompleted(null);
+	}
+
+	// Set the element state to hidden
+	public didFailLoad() {
+		this.setState({
+			shouldShow: false,
+		});
+		if (this.props.onWebviewShow) {
+			this.props.onWebviewShow(false);
+		}
+	}
+
+	// Set the element state depending on the HTTP response code
+	public didGetResponseDetails(event: electron.OnCompletedListenerDetails) {
+		// This seems to pick up all requests related to the webview,
+		// only care about this event if it's a request for the main frame
+		if (event.resourceType === 'mainFrame') {
+			const HTTP_OK = 200;
+			analytics.logEvent('SafeWebview loaded', {
+				event,
+				applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+				flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
+			});
+			this.setState({
+				shouldShow: event.statusCode === HTTP_OK,
+			});
+			if (this.props.onWebviewShow) {
+				this.props.onWebviewShow(event.statusCode === HTTP_OK);
+			}
+		}
+	}
+
+	// Open link in browser if it's opened as a 'foreground-tab'
+	public static newWindow(event: electron.NewWindowEvent) {
+		const url = new window.URL(event.url);
+		if (
+			_.every([
+				url.protocol === 'http:' || url.protocol === 'https:',
+				event.disposition === 'foreground-tab',
+				// Don't open links if they're disabled by the env var
+				!settings.get('disableExternalLinks'),
+			])
+		) {
+			electron.shell.openExternal(url.href);
+		}
+	}
+}

lib/gui/app/components/settings/settings.tsx

@@ -0,0 +1,223 @@
+/*
+ * Copyright 2019 balena.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.
+ */
+
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as _ from 'lodash';
+import * as os from 'os';
+import * as React from 'react';
+import { Badge, Checkbox, Modal } from 'rendition';
+import styled from 'styled-components';
+
+import { version } from '../../../../../package.json';
+import * as settings from '../../models/settings';
+import { store } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import { open as openExternal } from '../../os/open-external/services/open-external';
+
+const { useState } = React;
+const platform = os.platform();
+
+interface WarningModalProps {
+	message: string;
+	confirmLabel: string;
+	cancel: () => void;
+	done: () => void;
+}
+
+const WarningModal = ({
+	message,
+	confirmLabel,
+	cancel,
+	done,
+}: WarningModalProps) => {
+	return (
+		<Modal
+			title={confirmLabel}
+			action={confirmLabel}
+			cancel={cancel}
+			done={done}
+			style={{
+				width: 420,
+				height: 300,
+			}}
+			primaryButtonProps={{ warning: true }}
+		>
+			{message}
+		</Modal>
+	);
+};
+
+interface Setting {
+	name: string;
+	label: string | JSX.Element;
+	options?: any;
+	hide?: boolean;
+}
+
+const settingsList: Setting[] = [
+	{
+		name: 'errorReporting',
+		label: 'Anonymously report errors and usage statistics to balena.io',
+	},
+	{
+		name: 'unmountOnSuccess',
+		/**
+		 * On Windows, "Unmounting" basically means "ejecting".
+		 * On top of that, Windows users are usually not even
+		 * familiar with the meaning of "unmount", which comes
+		 * from the UNIX world.
+		 */
+		label: `${platform === 'win32' ? 'Eject' : 'Auto-unmount'} on success`,
+	},
+	{
+		name: 'validateWriteOnSuccess',
+		label: 'Validate write on success',
+	},
+	{
+		name: 'trim',
+		label: 'Trim ext{2,3,4} partitions before writing (raw images only)',
+	},
+	{
+		name: 'updatesEnabled',
+		label: 'Auto-updates enabled',
+	},
+	{
+		name: 'unsafeMode',
+		label: (
+			<span>
+				Unsafe mode{' '}
+				<Badge danger fontSize={12}>
+					Dangerous
+				</Badge>
+			</span>
+		),
+		options: {
+			description: `Are you sure you want to turn this on?
+			You will be able to overwrite your system drives if you're not careful.`,
+			confirmLabel: 'Enable unsafe mode',
+		},
+		hide: settings.get('disableUnsafeMode'),
+	},
+];
+
+interface SettingsModalProps {
+	toggleModal: (value: boolean) => void;
+}
+
+export const SettingsModal: any = styled(
+	({ toggleModal }: SettingsModalProps) => {
+		const [currentSettings, setCurrentSettings]: [
+			_.Dictionary<any>,
+			React.Dispatch<React.SetStateAction<_.Dictionary<any>>>,
+		] = useState(settings.getAll());
+		const [warning, setWarning]: [
+			any,
+			React.Dispatch<React.SetStateAction<any>>,
+		] = useState({});
+
+		const toggleSetting = async (setting: string, options?: any) => {
+			const value = currentSettings[setting];
+			const dangerous = !_.isUndefined(options);
+
+			analytics.logEvent('Toggle setting', {
+				setting,
+				value,
+				dangerous,
+				// @ts-ignore
+				applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+			});
+
+			if (value || !dangerous) {
+				await settings.set(setting, !value);
+				setCurrentSettings({
+					...currentSettings,
+					[setting]: !value,
+				});
+				setWarning({});
+				return;
+			}
+
+			// Show warning since it's a dangerous setting
+			setWarning({
+				setting,
+				settingValue: value,
+				...options,
+			});
+		};
+
+		return (
+			<Modal
+				id="settings-modal"
+				title="Settings"
+				done={() => toggleModal(false)}
+				style={{
+					width: 780,
+					height: 420,
+				}}
+			>
+				<div>
+					{_.map(settingsList, (setting: Setting, i: number) => {
+						return setting.hide ? null : (
+							<div key={setting.name}>
+								<Checkbox
+									toggle
+									tabIndex={6 + i}
+									label={setting.label}
+									checked={currentSettings[setting.name]}
+									onChange={() => toggleSetting(setting.name, setting.options)}
+								/>
+							</div>
+						);
+					})}
+					<div>
+						<span
+							onClick={() =>
+								openExternal(
+									'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
+								)
+							}
+						>
+							<FontAwesomeIcon icon={faGithub} /> {version}
+						</span>
+					</div>
+				</div>
+
+				{_.isEmpty(warning) ? null : (
+					<WarningModal
+						message={warning.description}
+						confirmLabel={warning.confirmLabel}
+						done={() => {
+							settings.set(warning.setting, !warning.settingValue);
+							setCurrentSettings({
+								...currentSettings,
+								[warning.setting]: true,
+							});
+							setWarning({});
+						}}
+						cancel={() => {
+							setWarning({});
+						}}
+					/>
+				)}
+			</Modal>
+		);
+	},
+)`
+	> div:nth-child(3) {
+		justify-content: center;
+	}
+`;

lib/gui/app/components/svg-icon/index.js

@@ -1,32 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/* eslint-disable jsdoc/require-example */
-
-/**
- * @module Etcher.Components.SVGIcon
- */
-
-const angular = require('angular')
-const react2angular = require('react2angular').react2angular
-
-const MODULE_NAME = 'Etcher.Components.SVGIcon'
-const angularSVGIcon = angular.module(MODULE_NAME, [])
-
-angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon.jsx')))
-module.exports = MODULE_NAME

lib/gui/app/components/svg-icon/styles/_svg-icon.scss

@@ -1,9 +0,0 @@
-
-svg-icon {
-  display: inline-block;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}

lib/gui/app/components/svg-icon/svg-icon.jsx

@@ -1,176 +0,0 @@
-/*
- * 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.SVGIcon
- */
-
-const _ = require('lodash')
-const react = require('react')
-const propTypes = require('prop-types')
-const path = require('path')
-const fs = require('fs')
-const analytics = require('../../modules/analytics')
-const domParser = new window.DOMParser()
-
-const DEFAULT_SIZE = '40px'
-
-/**
- * @summary Try to parse SVG contents and return it data encoded
- *
- * @param {String} contents - SVG XML contents
- * @returns {String|null}
- *
- * @example
- * const encodedSVG = tryParseSVGContents('<svg><path></path></svg>')
- *
- * img.src = encodedSVG
- */
-const tryParseSVGContents = (contents) => {
-  const doc = domParser.parseFromString(contents, 'image/svg+xml')
-  const parserError = doc.querySelector('parsererror')
-  const svg = doc.querySelector('svg')
-
-  if (!parserError && svg) {
-    return `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
-  }
-
-  return null
-}
-
-/* eslint-disable jsdoc/require-example */
-
-/**
- * @summary SVG element that takes both filepaths and file contents
- * @type {Object}
- * @public
- */
-class SVGIcon extends react.Component {
-  /**
-   * @summary Render the SVG
-   * @returns {react.Element}
-   */
-  render () {
-    // __dirname behaves strangely inside a Webpack bundle,
-    // so we need to provide different base directories
-    // depending on whether __dirname is absolute or not,
-    // which helps detecting a Webpack bundle.
-    // We use global.__dirname inside a Webpack bundle since
-    // that's the only way to get the "real" __dirname.
-    const baseDirectory = path.isAbsolute(__dirname)
-      ? path.join(__dirname, '..')
-      // eslint-disable-next-line no-underscore-dangle
-      : global.__dirname
-
-    let svgData = ''
-
-    _.find(this.props.contents, (content) => {
-      const attempt = tryParseSVGContents(content)
-
-      if (attempt) {
-        svgData = attempt
-        return true
-      }
-
-      return false
-    })
-
-    if (!svgData) {
-      _.find(this.props.paths, (relativePath) => {
-        // This means the path to the icon should be
-        // relative to *this directory*.
-        // TODO: There might be a way to compute the path
-        // relatively to the `index.html`.
-        const imagePath = path.join(baseDirectory, 'assets', relativePath)
-
-        const contents = _.attempt(() => {
-          return fs.readFileSync(imagePath, {
-            encoding: 'utf8'
-          })
-        })
-
-        if (_.isError(contents)) {
-          analytics.logException(contents)
-          return false
-        }
-
-        const parsed = _.attempt(tryParseSVGContents, contents)
-
-        if (parsed) {
-          svgData = parsed
-          return true
-        }
-
-        return false
-      })
-    }
-
-    const width = this.props.width || DEFAULT_SIZE
-    const height = this.props.height || DEFAULT_SIZE
-
-    return react.createElement('img', {
-      className: 'svg-icon',
-      style: {
-        width,
-        height
-      },
-      src: svgData,
-      disabled: this.props.disabled
-    })
-  }
-
-  /**
-   * @summary Cause a re-render due to changed element properties
-   * @param {Object} nextProps - the new properties
-   */
-  componentWillReceiveProps (nextProps) {
-    // This will update the element if the properties change
-    this.setState(nextProps)
-  }
-}
-
-SVGIcon.propTypes = {
-
-  /**
-   * @summary Paths to SVG files to be tried in succession if any fails
-   */
-  paths: propTypes.array,
-
-  /**
-   * @summary List of embedded SVG contents to be tried in succession if any fails
-   */
-  contents: propTypes.array,
-
-  /**
-   * @summary SVG image width unit
-   */
-  width: propTypes.string,
-
-  /**
-   * @summary SVG image height unit
-   */
-  height: propTypes.string,
-
-  /**
-   * @summary Should the element visually appear grayed out and disabled?
-   */
-  disabled: propTypes.bool
-
-}
-
-module.exports = SVGIcon

lib/gui/app/components/svg-icon/svg-icon.tsx

@@ -0,0 +1,142 @@
+/*
+ * Copyright 2018 balena.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.
+ */
+
+import * as fs from 'fs';
+import * as _ from 'lodash';
+import * as path from 'path';
+import * as React from 'react';
+
+import * as analytics from '../../modules/analytics';
+
+const domParser = new window.DOMParser();
+
+const DEFAULT_SIZE = '40px';
+
+/**
+ * @summary Try to parse SVG contents and return it data encoded
+ *
+ * @param {String} contents - SVG XML contents
+ * @returns {String|null}
+ *
+ * @example
+ * const encodedSVG = tryParseSVGContents('<svg><path></path></svg>')
+ *
+ * img.src = encodedSVG
+ */
+function tryParseSVGContents(contents: string) {
+	const doc = domParser.parseFromString(contents, 'image/svg+xml');
+	const parserError = doc.querySelector('parsererror');
+	const svg = doc.querySelector('svg');
+
+	if (!parserError && svg) {
+		return `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`;
+	}
+
+	return null;
+}
+
+interface SVGIconProps {
+	// Paths to SVG files to be tried in succession if any fails
+	paths: string[];
+	// List of embedded SVG contents to be tried in succession if any fails
+	contents?: string[];
+	// SVG image width unit
+	width?: string;
+	// SVG image height unit
+	height?: string;
+	// Should the element visually appear grayed out and disabled?
+	disabled?: boolean;
+}
+
+/**
+ * @summary SVG element that takes both filepaths and file contents
+ */
+export class SVGIcon extends React.Component<SVGIconProps> {
+	public render() {
+		// __dirname behaves strangely inside a Webpack bundle,
+		// so we need to provide different base directories
+		// depending on whether __dirname is absolute or not,
+		// which helps detecting a Webpack bundle.
+		// We use global.__dirname inside a Webpack bundle since
+		// that's the only way to get the "real" __dirname.
+		let baseDirectory: string;
+		if (path.isAbsolute(__dirname)) {
+			baseDirectory = path.join(__dirname, '..');
+		} else {
+			// @ts-ignore
+			baseDirectory = global.__dirname;
+		}
+
+		let svgData = '';
+
+		_.find(this.props.contents, content => {
+			const attempt = tryParseSVGContents(content);
+
+			if (attempt) {
+				svgData = attempt;
+				return true;
+			}
+
+			return false;
+		});
+
+		if (!svgData) {
+			_.find(this.props.paths, relativePath => {
+				// This means the path to the icon should be
+				// relative to *this directory*.
+				// TODO: There might be a way to compute the path
+				// relatively to the `index.html`.
+				const imagePath = path.join(baseDirectory, 'assets', relativePath);
+
+				const contents = _.attempt(() => {
+					return fs.readFileSync(imagePath, {
+						encoding: 'utf8',
+					});
+				});
+
+				if (_.isError(contents)) {
+					analytics.logException(contents);
+					return false;
+				}
+
+				const parsed = tryParseSVGContents(contents);
+
+				if (parsed) {
+					svgData = parsed;
+					return true;
+				}
+
+				return false;
+			});
+		}
+
+		const width = this.props.width || DEFAULT_SIZE;
+		const height = this.props.height || DEFAULT_SIZE;
+
+		return (
+			<img
+				className="svg-icon"
+				style={{
+					width,
+					height,
+				}}
+				src={svgData}
+				// @ts-ignore
+				disabled={this.props.disabled}
+			></img>
+		);
+	}
+}

lib/gui/app/components/tooltip-modal/controllers/tooltip-modal.js

@@ -1,38 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-module.exports = function ($uibModalInstance, tooltipData) {
-  /**
-   * @summary Tooltip data
-   * @type {Object}
-   * @public
-   */
-  this.data = tooltipData
-
-  /**
-   * @summary Close the modal
-   * @function
-   * @public
-   *
-   * @example
-   * TooltipModalController.closeModal();
-   */
-  this.closeModal = () => {
-    $uibModalInstance.dismiss()
-  }
-}

lib/gui/app/components/tooltip-modal/services/tooltip-modal.js

@@ -1,49 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const _ = require('lodash')
-
-module.exports = function (ModalService) {
-  /**
-   * @summary Open the tooltip modal
-   * @function
-   * @public
-   *
-   * @param {Object} options - tooltip options
-   * @param {String} options.title - tooltip title
-   * @param {String} options.message - tooltip message
-   * @returns {Promise}
-   *
-   * @example
-   * TooltipModalService.show({
-   *   title: 'Important tooltip',
-   *   message: 'Tooltip contents'
-   * });
-   */
-  this.show = (options) => {
-    return ModalService.open({
-      name: 'tooltip',
-      template: require('../templates/tooltip-modal.tpl.html'),
-      controller: 'TooltipModalController as modal',
-      size: 'tooltip-modal',
-      resolve: {
-        tooltipData: _.constant(options)
-      }
-    }).result
-  }
-}

lib/gui/app/components/tooltip-modal/styles/_tooltip-modal.scss

@@ -1,23 +0,0 @@
-/*
- * 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-tooltip-modal .modal-body {
-  text-align: center;
-  margin: 15px;
-  color: $palette-theme-light-foreground;
-  background-color: darken($palette-theme-light-background, 5%);
-  word-wrap: break-word;
-}

lib/gui/app/components/tooltip-modal/templates/tooltip-modal.tpl.html

@@ -1,6 +0,0 @@
-<div class="modal-header">
-  <h4 class="modal-title">{{ ::modal.data.title }}</h4>
-  <button class="close" ng-click="modal.closeModal()">&times;</button>
-</div>
-
-<div class="modal-body">{{ ::modal.data.message }}</div>

lib/gui/app/components/tooltip-modal/tooltip-modal.js

@@ -1,32 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.TooltipModal
- */
-
-const angular = require('angular')
-const MODULE_NAME = 'Etcher.Components.TooltipModal'
-const TooltipModal = angular.module(MODULE_NAME, [
-  require('../modal/modal')
-])
-
-TooltipModal.controller('TooltipModalController', require('./controllers/tooltip-modal'))
-TooltipModal.service('TooltipModalService', require('./services/tooltip-modal'))
-
-module.exports = MODULE_NAME

lib/gui/app/components/warning-modal/controllers/warning-modal.js

@@ -1,50 +0,0 @@
-/*
- * 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.
- */
-
-'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)
-  }
-}

lib/gui/app/components/warning-modal/services/warning-modal.js

@@ -1,52 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const _ = require('lodash')
-
-module.exports = function ($sce, ModalService) {
-  /**
-   * @summary Display the warning 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 warning
-   * @returns {Promise}
-   *
-   * @example
-   * WarningModalService.display({
-   *   description: 'Don\'t do this!',
-   *   confirmationLabel: 'Yes, continue!'
-   * });
-   */
-  this.display = (options = {}) => {
-    options.description = $sce.trustAsHtml(options.description)
-    return ModalService.open({
-      name: 'warning',
-      template: require('../templates/warning-modal.tpl.html'),
-      controller: 'WarningModalController as modal',
-      size: 'warning-modal',
-      resolve: {
-        options: _.constant(options)
-      }
-    }).result
-  }
-}

lib/gui/app/components/warning-modal/templates/warning-modal.tpl.html

@@ -1,25 +0,0 @@
-<div class="modal-header">
-  <h4 class="modal-title">
-    <span class="glyphicon glyphicon-exclamation-sign"></span>
-    <span>Attention</span>
-  </h4>
-  <button class="close"
-    tabindex="11"
-    ng-click="modal.reject()">&times;</button>
-</div>
-
-<div class="modal-body">
-  <p ng-bind-html="modal.options.description"></p>
-</div>
-
-<div class="modal-footer">
-  <div class="modal-menu">
-    <button class="button button-danger button-block"
-      tabindex="13"
-      ng-click="modal.accept()">{{ ::modal.options.confirmationLabel }}</button>
-    <button ng-if="modal.options.rejectionLabel" class="button button-block"
-      tabindex="12"
-      ng-click="modal.reject()">{{ ::modal.options.rejectionLabel }}</button>
-  </div>
-</div>
-

lib/gui/app/components/warning-modal/warning-modal.js

@@ -1,32 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.WarningModal
- */
-
-const angular = require('angular')
-const MODULE_NAME = 'Etcher.Components.WarningModal'
-const WarningModal = angular.module(MODULE_NAME, [
-  require('../modal/modal')
-])
-
-WarningModal.controller('WarningModalController', require('./controllers/warning-modal'))
-WarningModal.service('WarningModalService', require('./services/warning-modal'))
-
-module.exports = MODULE_NAME

lib/gui/app/index.html

@@ -6,71 +6,9 @@
     <link rel="stylesheet" type="text/css" href="../../../node_modules/flexboxgrid/dist/flexboxgrid.css">
     <link rel="stylesheet" type="text/css" href="../css/main.css">
     <link rel="stylesheet" type="text/css" href="../css/desktop.css">
-    <link rel="stylesheet" type="text/css" href="../css/angular.css">
-    <script src="../../../generated/gui.js"></script>
   </head>
   <body>
-    <header class="section-header" ng-controller="HeaderController as header">
-      <button class="button button-link"
-        ng-if="header.shouldShowHelp()"
-        ng-click="header.openHelpPage()"
-        tabindex="4">
-        <span class="glyphicon glyphicon-question-sign"></span>
-      </button>
-
-      <button class="button button-link"
-        ui-sref="settings"
-        hide-if-state="settings"
-        tabindex="5">
-        <span class="glyphicon glyphicon-cog"></span>
-      </button>
-
-      <button class="button button-link"
-        tabindex="5"
-        ui-sref="main"
-        show-if-state="settings">
-        <span class="glyphicon glyphicon-chevron-left"></span> Back
-      </button>
-    </header>
-
-    <main class="wrapper" ui-view></main>
-
-    <footer class="section-footer-main" ng-controller="StateController as state"
-      ng-hide="state.currentName === 'success'">
-      <span os-open-external="https://www.balena.io/etcher?ref=etcher_footer"
-        tabindex="100">
-        <svg-icon paths="[ '../../assets/etcher.svg' ]"
-          width="'123px'"
-          height="'22px'"></svg-icon>
-      </span>
-
-      <span class="caption">
-        is <span class="caption"
-          tabindex="101"
-          os-open-external="https://github.com/balena-io/etcher">an open source project</span> by
-      </span>
-
-      <span os-open-external="https://www.balena.io?ref=etcher"
-        tabindex="102">
-        <svg-icon paths="[ '../../assets/balena.svg' ]"
-          width="'79px'"
-          height="'23px'"></svg-icon>
-      </span>
-
-      <span class="caption footer-right"
-        tabindex="103"
-        manifest-bind="version"
-        os-open-external="https://github.com/balena-io/etcher/blob/master/CHANGELOG.md"></span>
-    </footer>
-
-    <div class="section-loader"
-      ng-controller="StateController as state"
-      ng-class="{
-        isFinish: state.currentName === 'success'
-      }">
-      <safe-webview
-        src="'https://www.balena.io/etcher/success-banner/'"
-        refresh-now="state.previousName === 'success'"></safe-webview>
-    </div>
+    <main id="main"></main>
+    <script src="../../../generated/gui.js"></script>
   </body>
 </html>

lib/gui/app/models/available-drives.js

@@ -1,70 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const store = require('./store')
-
-/**
- * @summary Check if there are available drives
- * @function
- * @public
- *
- * @returns {Boolean} whether there are available drives
- *
- * @example
- * if (availableDrives.hasAvailableDrives()) {
- *   console.log('There are available drives!');
- * }
- */
-exports.hasAvailableDrives = () => {
-  return !_.isEmpty(exports.getDrives())
-}
-
-/**
- * @summary Set a list of drives
- * @function
- * @private
- *
- * @param {Object[]} drives - drives
- *
- * @throws Will throw if no drives
- * @throws Will throw if drives is not an array of objects
- *
- * @example
- * availableDrives.setDrives([ ... ]);
- */
-exports.setDrives = (drives) => {
-  store.dispatch({
-    type: store.Actions.SET_AVAILABLE_DRIVES,
-    data: drives
-  })
-}
-
-/**
- * @summary Get detected drives
- * @function
- * @private
- *
- * @returns {Object[]} drives
- *
- * @example
- * const drives = availableDrives.getDrives();
- */
-exports.getDrives = () => {
-  return store.getState().toJS().availableDrives
-}

lib/gui/app/models/available-drives.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * Copyright 2016 balena.io
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,15 +14,21 @@
  * limitations under the License.
  */
 
-.modal-confirm-modal .modal-content {
-  width: 350px;
+import * as _ from 'lodash';
+
+import { Actions, store } from './store';
+
+export function hasAvailableDrives() {
+	return !_.isEmpty(getDrives());
 }
 
-.modal-confirm-modal .modal-title .glyphicon {
-  color: $palette-theme-danger-background;
+export function setDrives(drives: any[]) {
+	store.dispatch({
+		type: Actions.SET_AVAILABLE_DRIVES,
+		data: drives,
+	});
 }
 
-.modal-confirm-modal .modal-body {
-  max-height: 200px;
-  overflow-y: auto;
+export function getDrives(): any[] {
+	return store.getState().toJS().availableDrives;
 }

lib/gui/app/models/files.js

@@ -1,156 +0,0 @@
-/*
- * 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 Bluebird = require('bluebird')
-const fs = Bluebird.promisifyAll(require('fs'))
-const path = require('path')
-
-const driveScanner = require('../modules/drive-scanner')
-
-/* eslint-disable lodash/prefer-lodash-method */
-/* eslint-disable no-undefined */
-
-const CONCURRENCY = 10
-
-const collator = new Intl.Collator(undefined, {
-  sensitivity: 'case'
-})
-
-/**
- * @summary Sort files by their names / stats
- * @param {FileEntry} fileA - first file
- * @param {FileEntry} fileB - second file
- * @returns {Number}
- *
- * @example
- * files.readdirAsync(dirname).then((files) => {
- *   return files.sort(sortFiles)
- * })
- */
-const sortFiles = (fileA, fileB) => {
-  return (fileB.isDirectory - fileA.isDirectory) ||
-    collator.compare(fileA.basename, fileB.basename)
-}
-
-/**
- * @summary FileEntry struct
- * @class
- * @type {FileEntry}
- */
-class FileEntry {
-  /**
-   * @summary FileEntry
-   * @param {String} filename - filename
-   * @param {fs.Stats} stats - stats
-   *
-   * @example
-   * new FileEntry(filename, stats)
-   */
-  constructor (filename, stats) {
-    const components = path.parse(filename)
-
-    this.path = filename
-    this.dirname = components.dir
-    this.basename = components.base
-    this.name = components.name
-    this.ext = components.ext
-    this.isHidden = components.name.startsWith('.')
-    this.isFile = stats.isFile()
-    this.isDirectory = stats.isDirectory()
-    this.size = stats.size
-  }
-}
-
-/**
- * @summary Read a directory & stat all contents
- * @param {String} dirpath - Directory path
- * @returns {Array<FileEntry>}
- *
- * @example
- * files.readdirAsync('/').then((files) => {
- *   // ...
- * })
- */
-exports.readdirAsync = (dirpath) => {
-  console.time('readdirAsync')
-  const dirname = path.resolve(dirpath)
-  return fs.readdirAsync(dirname).then((ls) => {
-    return ls.filter((filename) => {
-      return !filename.startsWith('.')
-    }).map((filename) => {
-      return path.join(dirname, filename)
-    })
-  }).map((filename, index, length) => {
-    return fs.statAsync(filename).then((stats) => {
-      return new FileEntry(filename, stats)
-    })
-  }, { concurrency: CONCURRENCY }).then((files) => {
-    console.timeEnd('readdirAsync')
-    return files.sort(sortFiles)
-  })
-}
-
-/**
- * @summary Split a path on it's separator(s)
- * @function
- * @public
- *
- * @param {String} fullpath - full path to split
- * @param {Array<String>} [subpaths] - this param shouldn't normally be used
- * @returns {Array<String>}
- *
- * @example
- * console.log(splitPath(path.join(os.homedir(), 'Downloads'))
- * // Linux
- * > [ '/', 'home', 'user', 'Downloads' ]
- * // Windows
- * > [ 'C:', 'Users', 'user', 'Downloads' ]
- */
-exports.splitPath = (fullpath, subpaths = []) => {
-  const {
-    base,
-    dir,
-    root
-  } = path.parse(fullpath)
-  const isAbsolute = path.isAbsolute(fullpath)
-
-  // Takes care of 'relative/path'
-  if (!isAbsolute && dir === '') {
-    return [ base ].concat(subpaths)
-
-  // Takes care of '/'
-  } else if (isAbsolute && base === '') {
-    return [ root ].concat(subpaths)
-  }
-
-  return exports.splitPath(dir, [ base ].concat(subpaths))
-}
-
-/**
- * @summary Get constraint path device
- * @param {String} pathname - device path
- * @returns {Drive} drive - drive object
- * @example
- * const device = files.getConstraintDevice('/dev/disk2')
- */
-exports.getConstraintDevice = (pathname) => {
-  // This supposes the drive scanner is ready
-  return driveScanner.getBy('device', pathname) || driveScanner.getBy('devicePath', pathname)
-}
-
-exports.FileEntry = FileEntry

lib/gui/app/models/flash-state.js

@@ -1,244 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const store = require('./store')
-const units = require('../../../shared/units')
-
-/**
- * @summary Reset flash state
- * @function
- * @public
- *
- * @example
- * flashState.resetState();
- */
-exports.resetState = () => {
-  store.dispatch({
-    type: store.Actions.RESET_FLASH_STATE
-  })
-}
-
-/**
- * @summary Check if currently flashing
- * @function
- * @private
- *
- * @returns {Boolean} whether is flashing or not
- *
- * @example
- * if (flashState.isFlashing()) {
- *   console.log('We\'re currently flashing');
- * }
- */
-exports.isFlashing = () => {
-  return store.getState().toJS().isFlashing
-}
-
-/**
- * @summary Set the flashing flag
- * @function
- * @private
- *
- * @description
- * This function is extracted for testing purposes.
- *
- * The flag is used to signify that we're going to
- * start a flash process.
- *
- * @example
- * flashState.setFlashingFlag();
- */
-exports.setFlashingFlag = () => {
-  store.dispatch({
-    type: store.Actions.SET_FLASHING_FLAG
-  })
-}
-
-/**
- * @summary Unset the flashing flag
- * @function
- * @private
- *
- * @description
- * This function is extracted for testing purposes.
- *
- * The flag is used to signify that the write process ended.
- *
- * @param {Object} results - flash results
- *
- * @example
- * flashState.unsetFlashingFlag({
- *   cancelled: false,
- *   sourceChecksum: 'a1b45d'
- * });
- */
-exports.unsetFlashingFlag = (results) => {
-  store.dispatch({
-    type: store.Actions.UNSET_FLASHING_FLAG,
-    data: results
-  })
-}
-
-/**
- * @summary Set the flashing state
- * @function
- * @private
- *
- * @description
- * This function is extracted for testing purposes.
- *
- * @param {Object} state - flashing state
- *
- * @example
- * flashState.setProgressState({
- *   type: 'write',
- *   percentage: 50,
- *   eta: 15,
- *   speed: 100000000000
- * });
- */
-exports.setProgressState = (state) => {
-  // Preserve only one decimal place
-  const PRECISION = 1
-  const data = _.assign({}, state, {
-    percentage: _.isFinite(state.percentage)
-      ? Math.floor(state.percentage)
-      // eslint-disable-next-line no-undefined
-      : undefined,
-
-    speed: _.attempt(() => {
-      if (_.isFinite(state.speed)) {
-        return _.round(units.bytesToMegabytes(state.speed), PRECISION)
-      }
-
-      return null
-    }),
-
-    totalSpeed: _.attempt(() => {
-      if (_.isFinite(state.totalSpeed)) {
-        return _.round(units.bytesToMegabytes(state.totalSpeed), PRECISION)
-      }
-
-      return null
-    })
-  })
-
-  store.dispatch({
-    type: store.Actions.SET_FLASH_STATE,
-    data
-  })
-}
-
-/**
- * @summary Get the flash results
- * @function
- * @private
- *
- * @returns {Object} flash results
- *
- * @example
- * const results = flashState.getFlashResults();
- */
-exports.getFlashResults = () => {
-  return store.getState().toJS().flashResults
-}
-
-/**
- * @summary Get the current flash state
- * @function
- * @public
- *
- * @returns {Object} flash state
- *
- * @example
- * const flashState = flashState.getFlashState();
- */
-exports.getFlashState = () => {
-  return store.getState().get('flashState').toJS()
-}
-
-/**
- * @summary Determine if the last flash was cancelled
- * @function
- * @public
- *
- * @description
- * This function returns false if there was no last flash.
- *
- * @returns {Boolean} whether the last flash was cancelled
- *
- * @example
- * if (flashState.wasLastFlashCancelled()) {
- *   console.log('The last flash was cancelled');
- * }
- */
-exports.wasLastFlashCancelled = () => {
-  return _.get(exports.getFlashResults(), [ 'cancelled' ], false)
-}
-
-/**
- * @summary Get last flash source checksum
- * @function
- * @public
- *
- * @description
- * This function returns undefined if there was no last flash.
- *
- * @returns {(String|Undefined)} the last flash source checksum
- *
- * @example
- * const checksum = flashState.getLastFlashSourceChecksum();
- */
-exports.getLastFlashSourceChecksum = () => {
-  return exports.getFlashResults().sourceChecksum
-}
-
-/**
- * @summary Get last flash error code
- * @function
- * @public
- *
- * @description
- * This function returns undefined if there was no last flash.
- *
- * @returns {(String|Undefined)} the last flash error code
- *
- * @example
- * const errorCode = flashState.getLastFlashErrorCode();
- */
-exports.getLastFlashErrorCode = () => {
-  return exports.getFlashResults().errorCode
-}
-
-/**
- * @summary Get current (or last) flash uuid
- * @function
- * @public
- *
- * @description
- * This function returns undefined if no flash has been started yet.
- *
- * @returns {String} the last flash uuid
- *
- * @example
- * const uuid = flashState.getFlashUuid();
- */
-exports.getFlashUuid = () => {
-  return store.getState().toJS().flashUuid
-}

lib/gui/app/models/flash-state.ts

@@ -0,0 +1,131 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as sdk from 'etcher-sdk';
+import * as _ from 'lodash';
+
+import { bytesToMegabytes } from '../../../shared/units';
+import { Actions, store } from './store';
+
+/**
+ * @summary Reset flash state
+ */
+export function resetState() {
+	store.dispatch({
+		type: Actions.RESET_FLASH_STATE,
+	});
+}
+
+/**
+ * @summary Check if currently flashing
+ */
+export function isFlashing(): boolean {
+	return store.getState().toJS().isFlashing;
+}
+
+/**
+ * @summary Set the flashing flag
+ *
+ * @description
+ * The flag is used to signify that we're going to
+ * start a flash process.
+ */
+export function setFlashingFlag() {
+	store.dispatch({
+		type: Actions.SET_FLASHING_FLAG,
+	});
+}
+
+/**
+ * @summary Unset the flashing flag
+ *
+ * @description
+ * The flag is used to signify that the write process ended.
+ */
+export function unsetFlashingFlag(results: {
+	cancelled?: boolean;
+	sourceChecksum?: string;
+	errorCode?: string | number;
+}) {
+	store.dispatch({
+		type: Actions.UNSET_FLASHING_FLAG,
+		data: results,
+	});
+}
+
+/**
+ * @summary Set the flashing state
+ */
+export function setProgressState(
+	state: sdk.multiWrite.MultiDestinationProgress,
+) {
+	// Preserve only one decimal place
+	const PRECISION = 1;
+	const data = _.assign({}, state, {
+		percentage:
+			state.percentage !== undefined && _.isFinite(state.percentage)
+				? Math.floor(state.percentage)
+				: undefined,
+
+		speed: _.attempt(() => {
+			if (_.isFinite(state.speed)) {
+				return _.round(bytesToMegabytes(state.speed), PRECISION);
+			}
+
+			return null;
+		}),
+
+		totalSpeed: _.attempt(() => {
+			if (_.isFinite(state.totalSpeed)) {
+				return _.round(bytesToMegabytes(state.totalSpeed), PRECISION);
+			}
+
+			return null;
+		}),
+	});
+
+	store.dispatch({
+		type: Actions.SET_FLASH_STATE,
+		data,
+	});
+}
+
+export function getFlashResults() {
+	return store.getState().toJS().flashResults;
+}
+
+export function getFlashState() {
+	return store
+		.getState()
+		.get('flashState')
+		.toJS();
+}
+
+export function wasLastFlashCancelled() {
+	return _.get(getFlashResults(), ['cancelled'], false);
+}
+
+export function getLastFlashSourceChecksum(): string {
+	return getFlashResults().sourceChecksum;
+}
+
+export function getLastFlashErrorCode() {
+	return getFlashResults().errorCode;
+}
+
+export function getFlashUuid() {
+	return store.getState().toJS().flashUuid;
+}

lib/gui/app/models/leds.ts

@@ -0,0 +1,99 @@
+/*
+ * Copyright 2020 balena.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.
+ */
+
+import {
+	AnimationFunction,
+	blinkWhite,
+	breatheGreen,
+	Color,
+	RGBLed,
+} from 'sys-class-rgb-led';
+
+import * as settings from './settings';
+import { observe } from './store';
+
+const leds: Map<string, RGBLed> = new Map();
+
+function setLeds(
+	drivesPaths: Set<string>,
+	colorOrAnimation: Color | AnimationFunction,
+) {
+	for (const path of drivesPaths) {
+		const led = leds.get(path);
+		if (led) {
+			if (Array.isArray(colorOrAnimation)) {
+				led.setStaticColor(colorOrAnimation);
+			} else {
+				led.setAnimation(colorOrAnimation);
+			}
+		}
+	}
+}
+
+export function updateLeds(
+	availableDrives: string[],
+	selectedDrives: string[],
+) {
+	const off = new Set(leds.keys());
+	const available = new Set(availableDrives);
+	const selected = new Set(selectedDrives);
+	for (const s of selected) {
+		available.delete(s);
+	}
+	for (const a of available) {
+		off.delete(a);
+	}
+	setLeds(off, [0, 0, 0]);
+	setLeds(available, breatheGreen);
+	setLeds(selected, blinkWhite);
+}
+
+interface DeviceFromState {
+	devicePath?: string;
+	device: string;
+}
+
+export function init() {
+	// ledsMapping is something like:
+	// {
+	// 	'platform-xhci-hcd.0.auto-usb-0:1.1.1:1.0-scsi-0:0:0:0': [
+	// 		'led1_r',
+	// 		'led1_g',
+	// 		'led1_b',
+	// 	],
+	// 	...
+	// }
+	const ledsMapping: _.Dictionary<[string, string, string]> =
+		settings.get('ledsMapping') || {};
+	for (const [drivePath, ledsNames] of Object.entries(ledsMapping)) {
+		leds.set('/dev/disk/by-path/' + drivePath, new RGBLed(ledsNames));
+	}
+	observe(state => {
+		const availableDrives = state
+			.get('availableDrives')
+			.toJS()
+			.filter((d: DeviceFromState) => d.devicePath);
+		const availableDrivesPaths = availableDrives.map(
+			(d: DeviceFromState) => d.devicePath,
+		);
+		// like /dev/sda
+		const selectedDrivesDevices = state.getIn(['selection', 'devices']).toJS();
+		const selectedDrivesPaths = availableDrives
+			.filter((d: DeviceFromState) => selectedDrivesDevices.includes(d.device))
+			.map((d: DeviceFromState) => d.devicePath);
+		updateLeds(availableDrivesPaths, selectedDrivesPaths);
+	});
+}

lib/gui/app/models/local-settings.js

@@ -1,184 +0,0 @@
-/*
- * Copyright 2017 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 Bluebird = require('bluebird')
-const fs = require('fs')
-const path = require('path')
-
-/**
- * @summary Number of spaces to indent JSON output with
- * @type {Number}
- * @constant
- */
-const JSON_INDENT = 2
-
-/**
- * @summary Userdata directory path
- * @description
- * Defaults to the following:
- * - `%APPDATA%/etcher` on Windows
- * - `$XDG_CONFIG_HOME/etcher` or `~/.config/etcher` on Linux
- * - `~/Library/Application Support/etcher` on macOS
- * See https://electronjs.org/docs/api/app#appgetpathname
- * @constant
- * @type {String}
- */
-const USER_DATA_DIR = (() => {
-  // NOTE: The ternary is due to this module being loaded both,
-  // Electron's main process and renderer process
-  const electron = require('electron')
-  return electron.app
-    ? electron.app.getPath('userData')
-    : electron.remote.app.getPath('userData')
-})()
-
-/**
- * @summary Configuration file path
- * @type {String}
- * @constant
- */
-const CONFIG_PATH = path.join(USER_DATA_DIR, 'config.json')
-
-/**
- * @summary Read a local config.json file
- * @function
- * @private
- *
- * @param {String} filename - file path
- * @fulfil {Object} - settings
- * @returns {Promise}
- *
- * @example
- * readConfigFile('config.json').then((settings) => {
- *   console.log(settings)
- * })
- */
-const readConfigFile = (filename) => {
-  return new Bluebird((resolve, reject) => {
-    fs.readFile(filename, { encoding: 'utf8' }, (error, contents) => {
-      let data = {}
-      if (error) {
-        if (error.code === 'ENOENT') {
-          resolve(data)
-        } else {
-          reject(error)
-        }
-      } else {
-        try {
-          data = JSON.parse(contents)
-        } catch (parseError) {
-          console.error(parseError)
-        }
-        resolve(data)
-      }
-    })
-  })
-}
-
-/**
- * @summary Write to the local configuration file
- * @function
- * @private
- *
- * @param {String} filename - file path
- * @param {Object} data - data
- * @fulfil {Object} data - data
- * @returns {Promise}
- *
- * @example
- * writeConfigFile('config.json', { something: 'good' })
- *   .then(() => {
- *     console.log('data written')
- *   })
- */
-const writeConfigFile = (filename, data) => {
-  return new Bluebird((resolve, reject) => {
-    const contents = JSON.stringify(data, null, JSON_INDENT)
-    fs.writeFile(filename, contents, (error) => {
-      if (error) {
-        reject(error)
-      } else {
-        resolve(data)
-      }
-    })
-  })
-}
-
-/**
- * @summary Read all local settings
- * @function
- * @public
- *
- * @fulfil {Object} - local settings
- * @returns {Promise}
- *
- * @example
- * localSettings.readAll().then((settings) => {
- *   console.log(settings);
- * });
- */
-exports.readAll = () => {
-  return readConfigFile(CONFIG_PATH)
-}
-
-/**
- * @summary Write local settings
- * @function
- * @public
- *
- * @param {Object} settings - settings
- * @fulfil {Object} settings - settings
- * @returns {Promise}
- *
- * @example
- * localSettings.writeAll({
- *   foo: 'bar'
- * }).then(() => {
- *   console.log('Done!');
- * });
- */
-exports.writeAll = (settings) => {
-  return writeConfigFile(CONFIG_PATH, settings)
-}
-
-/**
- * @summary Clear the local settings
- * @function
- * @private
- *
- * @description
- * Exported for testing purposes
- *
- * @returns {Promise}
- *
- * @example
- * localSettings.clear().then(() => {
- *   console.log('Done!');
- * });
- */
-exports.clear = () => {
-  return new Bluebird((resolve, reject) => {
-    fs.unlink(CONFIG_PATH, (error) => {
-      if (error) {
-        reject(error)
-      } else {
-        resolve()
-      }
-    })
-  })
-}

lib/gui/app/models/local-settings.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2017 balena.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.
+ */
+
+import * as electron from 'electron';
+import { promises as fs } from 'fs';
+import * as path from 'path';
+
+const JSON_INDENT = 2;
+
+/**
+ * @summary Userdata directory path
+ * @description
+ * Defaults to the following:
+ * - `%APPDATA%/etcher` on Windows
+ * - `$XDG_CONFIG_HOME/etcher` or `~/.config/etcher` on Linux
+ * - `~/Library/Application Support/etcher` on macOS
+ * See https://electronjs.org/docs/api/app#appgetpathname
+ *
+ * NOTE: The ternary is due to this module being loaded both,
+ * Electron's main process and renderer process
+ */
+const USER_DATA_DIR = electron.app
+	? electron.app.getPath('userData')
+	: electron.remote.app.getPath('userData');
+
+const CONFIG_PATH = path.join(USER_DATA_DIR, 'config.json');
+
+async function readConfigFile(filename: string): Promise<any> {
+	let contents = '{}';
+	try {
+		contents = await fs.readFile(filename, { encoding: 'utf8' });
+	} catch (error) {
+		if (error.code !== 'ENOENT') {
+			throw error;
+		}
+	}
+	try {
+		return JSON.parse(contents);
+	} catch (parseError) {
+		console.error(parseError);
+		return {};
+	}
+}
+
+async function writeConfigFile(filename: string, data: any): Promise<any> {
+	await fs.writeFile(filename, JSON.stringify(data, null, JSON_INDENT));
+	return data;
+}
+
+export async function readAll(): Promise<any> {
+	return await readConfigFile(CONFIG_PATH);
+}
+
+export async function writeAll(settings: any): Promise<any> {
+	return await writeConfigFile(CONFIG_PATH, settings);
+}
+
+export async function clear(): Promise<void> {
+	await fs.unlink(CONFIG_PATH);
+}

lib/gui/app/models/selection-state.js

@@ -1,438 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const store = require('./store')
-const availableDrives = require('./available-drives')
-
-/**
- * @summary Select a drive by its device path
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device
- *
- * @example
- * selectionState.selectDrive('/dev/disk2');
- */
-exports.selectDrive = (driveDevice) => {
-  store.dispatch({
-    type: store.Actions.SELECT_DRIVE,
-    data: driveDevice
-  })
-}
-
-/**
- * @summary Toggle drive selection
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device
- *
- * @example
- * selectionState.toggleDrive('/dev/disk2');
- */
-exports.toggleDrive = (driveDevice) => {
-  if (exports.isDriveSelected(driveDevice)) {
-    exports.deselectDrive(driveDevice)
-  } else {
-    exports.selectDrive(driveDevice)
-  }
-}
-
-/**
- * @summary Deselect all other drives and keep the current drive's status
- * @function
- * @public
- * @deprecated
- *
- * @description
- * This is a temporary function during the transition to multi-writes,
- * remove this and its uses when multi-selection should become user-facing.
- *
- * @param {String} driveDevice - drive device identifier
- *
- * @example
- * console.log(selectionState.getSelectedDevices())
- * > [ '/dev/disk1', '/dev/disk2', '/dev/disk3' ]
- * selectionState.deselectOtherDrives('/dev/disk2')
- * console.log(selectionState.getSelectedDevices())
- * > [ '/dev/disk2' ]
- */
-exports.deselectOtherDrives = (driveDevice) => {
-  if (exports.isDriveSelected(driveDevice)) {
-    const otherDevices = _.reject(exports.getSelectedDevices(), _.partial(_.isEqual, driveDevice))
-    _.each(otherDevices, exports.deselectDrive)
-  } else {
-    exports.deselectAllDrives()
-  }
-}
-
-/**
- * @summary Select an image
- * @function
- * @public
- *
- * @param {Object} image - image
- *
- * @example
- * selectionState.selectImage({
- *   path: 'foo.img',
- *   size: 1000000000,
- *   compressedSize: 1000000000,
- *   isSizeEstimated: false,
- * });
- */
-exports.selectImage = (image) => {
-  store.dispatch({
-    type: store.Actions.SELECT_IMAGE,
-    data: image
-  })
-}
-
-/**
- * @summary Get all selected drives' devices
- * @function
- * @public
- *
- * @returns {String[]} selected drives' devices
- *
- * @example
- * for (driveDevice of selectionState.getSelectedDevices()) {
- *   console.log(driveDevice)
- * }
- * > '/dev/disk1'
- * > '/dev/disk2'
- */
-exports.getSelectedDevices = () => {
-  return store.getState().getIn([ 'selection', 'devices' ]).toJS()
-}
-
-/**
- * @summary Get all selected drive objects
- * @function
- * @public
- *
- * @returns {Object[]} selected drive objects
- *
- * @example
- * for (drive of selectionState.getSelectedDrives()) {
- *   console.log(drive)
- * }
- * > '{ device: '/dev/disk1', size: 123456789, ... }'
- * > '{ device: '/dev/disk2', size: 987654321, ... }'
- */
-exports.getSelectedDrives = () => {
-  const drives = availableDrives.getDrives()
-  return _.map(exports.getSelectedDevices(), (device) => {
-    return _.find(drives, { device })
-  })
-}
-
-/**
- * @summary Get the head of the list of selected drives
- * @function
- * @public
- *
- * @returns {Object} drive
- *
- * @example
- * const drive = selectionState.getCurrentDrive();
- * console.log(drive)
- * > { device: '/dev/disk1', name: 'Flash drive', ... }
- */
-exports.getCurrentDrive = () => {
-  const device = _.head(exports.getSelectedDevices())
-  return _.find(availableDrives.getDrives(), { device })
-}
-
-/**
- * @summary Get the selected image
- * @function
- * @public
- *
- * @returns {Object} image
- *
- * @example
- * const image = selectionState.getImage();
- */
-exports.getImage = () => {
-  return _.get(store.getState().toJS(), [ 'selection', 'image' ])
-}
-
-/**
- * @summary Get image path
- * @function
- * @public
- *
- * @returns {String} image path
- *
- * @example
- * const imagePath = selectionState.getImagePath();
- */
-exports.getImagePath = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'path'
-  ])
-}
-
-/**
- * @summary Get image size
- * @function
- * @public
- *
- * @returns {Number} image size
- *
- * @example
- * const imageSize = selectionState.getImageSize();
- */
-exports.getImageSize = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'size'
-  ])
-}
-
-/**
- * @summary Get image url
- * @function
- * @public
- *
- * @returns {String} image url
- *
- * @example
- * const imageUrl = selectionState.getImageUrl();
- */
-exports.getImageUrl = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'url'
-  ])
-}
-
-/**
- * @summary Get image name
- * @function
- * @public
- *
- * @returns {String} image name
- *
- * @example
- * const imageName = selectionState.getImageName();
- */
-exports.getImageName = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'name'
-  ])
-}
-
-/**
- * @summary Get image logo
- * @function
- * @public
- *
- * @returns {String} image logo
- *
- * @example
- * const imageLogo = selectionState.getImageLogo();
- */
-exports.getImageLogo = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'logo'
-  ])
-}
-
-/**
- * @summary Get image support url
- * @function
- * @public
- *
- * @returns {String} image support url
- *
- * @example
- * const imageSupportUrl = selectionState.getImageSupportUrl();
- */
-exports.getImageSupportUrl = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'supportUrl'
-  ])
-}
-
-/**
- * @summary Get image recommended drive size
- * @function
- * @public
- *
- * @returns {String} image recommended drive size
- *
- * @example
- * const imageRecommendedDriveSize = selectionState.getImageRecommendedDriveSize();
- */
-exports.getImageRecommendedDriveSize = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'recommendedDriveSize'
-  ])
-}
-
-/**
- * @summary Check if there is a selected drive
- * @function
- * @public
- *
- * @returns {Boolean} whether there is a selected drive
- *
- * @example
- * if (selectionState.hasDrive()) {
- *   console.log('There is a drive!');
- * }
- */
-exports.hasDrive = () => {
-  return Boolean(exports.getSelectedDevices().length)
-}
-
-/**
- * @summary Check if there is a selected image
- * @function
- * @public
- *
- * @returns {Boolean} whether there is a selected image
- *
- * @example
- * if (selectionState.hasImage()) {
- *   console.log('There is an image!');
- * }
- */
-exports.hasImage = () => {
-  return Boolean(exports.getImage())
-}
-
-/**
- * @summary Remove drive from selection
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device identifier
- *
- * @example
- * selectionState.deselectDrive('/dev/sdc');
- *
- * @example
- * selectionState.deselectDrive('\\\\.\\PHYSICALDRIVE3');
- */
-exports.deselectDrive = (driveDevice) => {
-  store.dispatch({
-    type: store.Actions.DESELECT_DRIVE,
-    data: driveDevice
-  })
-}
-
-/**
- * @summary Deselect image
- * @function
- * @public
- *
- * @example
- * selectionState.deselectImage();
- */
-exports.deselectImage = () => {
-  store.dispatch({
-    type: store.Actions.DESELECT_IMAGE
-  })
-}
-
-/**
- * @summary Deselect all drives
- * @function
- * @public
- *
- * @example
- * selectionState.deselectAllDrives()
- */
-exports.deselectAllDrives = () => {
-  _.each(exports.getSelectedDevices(), exports.deselectDrive)
-}
-
-/**
- * @summary Clear selections
- * @function
- * @public
- *
- * @example
- * selectionState.clear();
- */
-exports.clear = () => {
-  exports.deselectImage()
-  exports.deselectAllDrives()
-}
-
-/**
- * @summary Check if a drive is the current drive
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device
- * @returns {Boolean} whether the drive is the current drive
- *
- * @example
- * if (selectionState.isCurrentDrive('/dev/sdb')) {
- *   console.log('This is the current drive!');
- * }
- */
-exports.isCurrentDrive = (driveDevice) => {
-  if (!driveDevice) {
-    return false
-  }
-
-  return driveDevice === _.get(exports.getCurrentDrive(), [ 'device' ])
-}
-
-/**
- * @summary Check whether a given device is selected.
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device identifier
- * @returns {Boolean}
- *
- * @example
- * const isSelected = selectionState.isDriveSelected('/dev/sdb')
- *
- * if (isSelected) {
- *   selectionState.deselectDrive(driveDevice)
- * }
- */
-exports.isDriveSelected = (driveDevice) => {
-  if (!driveDevice) {
-    return false
-  }
-
-  const selectedDriveDevices = exports.getSelectedDevices()
-  return _.includes(selectedDriveDevices, driveDevice)
-}

lib/gui/app/models/selection-state.ts

@@ -0,0 +1,161 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as _ from 'lodash';
+
+import * as availableDrives from './available-drives';
+import { Actions, store } from './store';
+
+/**
+ * @summary Select a drive by its device path
+ */
+export function selectDrive(driveDevice: string) {
+	store.dispatch({
+		type: Actions.SELECT_DRIVE,
+		data: driveDevice,
+	});
+}
+
+/**
+ * @summary Toggle drive selection
+ */
+export function toggleDrive(driveDevice: string) {
+	if (isDriveSelected(driveDevice)) {
+		deselectDrive(driveDevice);
+	} else {
+		selectDrive(driveDevice);
+	}
+}
+
+export function selectImage(image: any) {
+	store.dispatch({
+		type: Actions.SELECT_IMAGE,
+		data: image,
+	});
+}
+
+/**
+ * @summary Get all selected drives' devices
+ */
+export function getSelectedDevices(): string[] {
+	return store
+		.getState()
+		.getIn(['selection', 'devices'])
+		.toJS();
+}
+
+/**
+ * @summary Get all selected drive objects
+ */
+export function getSelectedDrives(): any[] {
+	const drives = availableDrives.getDrives();
+	return _.map(getSelectedDevices(), device => {
+		return _.find(drives, { device });
+	});
+}
+
+/**
+ * @summary Get the selected image
+ */
+export function getImage() {
+	return _.get(store.getState().toJS(), ['selection', 'image']);
+}
+
+export function getImagePath(): string {
+	return _.get(store.getState().toJS(), ['selection', 'image', 'path']);
+}
+
+export function getImageSize(): number {
+	return _.get(store.getState().toJS(), ['selection', 'image', 'size']);
+}
+
+export function getImageUrl(): string {
+	return _.get(store.getState().toJS(), ['selection', 'image', 'url']);
+}
+
+export function getImageName(): string {
+	return _.get(store.getState().toJS(), ['selection', 'image', 'name']);
+}
+
+export function getImageLogo(): string {
+	return _.get(store.getState().toJS(), ['selection', 'image', 'logo']);
+}
+
+export function getImageSupportUrl(): string {
+	return _.get(store.getState().toJS(), ['selection', 'image', 'supportUrl']);
+}
+
+export function getImageRecommendedDriveSize(): number {
+	return _.get(store.getState().toJS(), [
+		'selection',
+		'image',
+		'recommendedDriveSize',
+	]);
+}
+
+/**
+ * @summary Check if there is a selected drive
+ */
+export function hasDrive(): boolean {
+	return Boolean(getSelectedDevices().length);
+}
+
+/**
+ * @summary Check if there is a selected image
+ */
+export function hasImage(): boolean {
+	return Boolean(getImage());
+}
+
+/**
+ * @summary Remove drive from selection
+ */
+export function deselectDrive(driveDevice: string) {
+	store.dispatch({
+		type: Actions.DESELECT_DRIVE,
+		data: driveDevice,
+	});
+}
+
+export function deselectImage() {
+	store.dispatch({
+		type: Actions.DESELECT_IMAGE,
+	});
+}
+
+export function deselectAllDrives() {
+	_.each(getSelectedDevices(), deselectDrive);
+}
+
+/**
+ * @summary Clear selections
+ */
+export function clear() {
+	deselectImage();
+	deselectAllDrives();
+}
+
+/**
+ * @summary Check whether a given device is selected.
+ */
+export function isDriveSelected(driveDevice: string) {
+	if (!driveDevice) {
+		return false;
+	}
+
+	const selectedDriveDevices = getSelectedDevices();
+	return _.includes(selectedDriveDevices, driveDevice);
+}

lib/gui/app/models/settings.js

@@ -1,232 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Models.Settings
- */
-
-const _ = require('lodash')
-const Bluebird = require('bluebird')
-const localSettings = require('./local-settings')
-const errors = require('../../../shared/errors')
-const packageJSON = require('../../../../package.json')
-const debug = require('debug')('etcher:models:settings')
-
-/**
- * @summary Default settings
- * @constant
- * @type {Object}
- */
-const DEFAULT_SETTINGS = {
-  unsafeMode: false,
-  errorReporting: true,
-  unmountOnSuccess: true,
-  validateWriteOnSuccess: true,
-  trim: false,
-  updatesEnabled: packageJSON.updates.enabled && !_.includes([ 'rpm', 'deb' ], packageJSON.packageType),
-  lastSleptUpdateNotifier: null,
-  lastSleptUpdateNotifierVersion: null,
-  desktopNotifications: true
-}
-
-/**
- * @summary Settings state
- * @type {Object}
- * @private
- */
-let settings = _.cloneDeep(DEFAULT_SETTINGS)
-
-/**
- * @summary Reset settings to their default values
- * @function
- * @public
- *
- * @returns {Promise}
- *
- * @example
- * settings.reset().then(() => {
- *   console.log('Done!');
- * });
- */
-exports.reset = () => {
-  debug('reset')
-
-  // TODO: Remove default settings from config file (?)
-  settings = _.cloneDeep(DEFAULT_SETTINGS)
-  return localSettings.writeAll(settings)
-}
-
-/**
- * @summary Extend the current settings
- * @function
- * @public
- *
- * @param {Object} value - value
- * @returns {Promise}
- *
- * @example
- * settings.assign({
- *   foo: 'bar'
- * }).then(() => {
- *   console.log('Done!');
- * });
- */
-exports.assign = (value) => {
-  debug('assign', value)
-  if (_.isNil(value)) {
-    return Bluebird.reject(errors.createError({
-      title: 'Missing settings'
-    }))
-  }
-
-  if (!_.isPlainObject(value)) {
-    return Bluebird.reject(errors.createError({
-      title: 'Settings must be an object'
-    }))
-  }
-
-  const newSettings = _.assign({}, settings, value)
-
-  return localSettings.writeAll(newSettings)
-    .then((updatedSettings) => {
-      // NOTE: Only update in memory settings when successfully written
-      settings = updatedSettings
-    })
-}
-
-/**
- * @summary Extend the application state with the local settings
- * @function
- * @public
- *
- * @returns {Promise}
- *
- * @example
- * settings.load().then(() => {
- *   console.log('Done!');
- * });
- */
-exports.load = () => {
-  debug('load')
-  return localSettings.readAll().then((loadedSettings) => {
-    return _.assign(settings, loadedSettings)
-  })
-}
-
-/**
- * @summary Set a setting value
- * @function
- * @public
- *
- * @param {String} key - setting key
- * @param {*} value - setting value
- * @returns {Promise}
- *
- * @example
- * settings.set('unmountOnSuccess', true).then(() => {
- *   console.log('Done!');
- * });
- */
-exports.set = (key, value) => {
-  debug('set', key, value)
-  if (_.isNil(key)) {
-    return Bluebird.reject(errors.createError({
-      title: 'Missing setting key'
-    }))
-  }
-
-  if (!_.isString(key)) {
-    return Bluebird.reject(errors.createError({
-      title: `Invalid setting key: ${key}`
-    }))
-  }
-
-  const previousValue = settings[key]
-
-  settings[key] = value
-
-  return localSettings.writeAll(settings)
-    .catch((error) => {
-      // Revert to previous value if persisting settings failed
-      settings[key] = previousValue
-      throw error
-    })
-}
-
-/**
- * @summary Get a setting value
- * @function
- * @public
- *
- * @param {String} key - setting key
- * @returns {*} setting value
- *
- * @example
- * const value = settings.get('unmountOnSuccess');
- */
-exports.get = (key) => {
-  return _.cloneDeep(_.get(settings, [ key ]))
-}
-
-/**
- * @summary Check if setting value exists
- * @function
- * @public
- *
- * @param {String} key - setting key
- * @returns {Boolean} exists
- *
- * @example
- * const hasValue = settings.has('unmountOnSuccess');
- */
-exports.has = (key) => {
-  /* eslint-disable no-eq-null */
-  return settings[key] != null
-}
-
-/**
- * @summary Get all setting values
- * @function
- * @public
- *
- * @returns {Object} all setting values
- *
- * @example
- * const allSettings = settings.getAll();
- * console.log(allSettings.unmountOnSuccess);
- */
-exports.getAll = () => {
-  debug('getAll')
-  return _.cloneDeep(settings)
-}
-
-/**
- * @summary Get the default setting values
- * @function
- * @public
- *
- * @returns {Object} all setting values
- *
- * @example
- * const defaults = settings.getDefaults();
- * console.log(defaults.unmountOnSuccess);
- */
-exports.getDefaults = () => {
-  debug('getDefaults')
-  return _.cloneDeep(DEFAULT_SETTINGS)
-}

lib/gui/app/models/settings.ts

@@ -0,0 +1,110 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as _debug from 'debug';
+import * as _ from 'lodash';
+
+import * as packageJSON from '../../../../package.json';
+import * as errors from '../../../shared/errors';
+import * as localSettings from './local-settings';
+
+const debug = _debug('etcher:models:settings');
+
+// exported for tests
+export const DEFAULT_SETTINGS: _.Dictionary<any> = {
+	unsafeMode: false,
+	errorReporting: true,
+	unmountOnSuccess: true,
+	validateWriteOnSuccess: true,
+	trim: false,
+	updatesEnabled:
+		packageJSON.updates.enabled &&
+		!_.includes(['rpm', 'deb'], packageJSON.packageType),
+	lastSleptUpdateNotifier: null,
+	lastSleptUpdateNotifierVersion: null,
+	desktopNotifications: true,
+};
+
+let settings = _.cloneDeep(DEFAULT_SETTINGS);
+
+/**
+ * @summary Reset settings to their default values
+ */
+export async function reset(): Promise<void> {
+	debug('reset');
+	// TODO: Remove default settings from config file (?)
+	settings = _.cloneDeep(DEFAULT_SETTINGS);
+	return await localSettings.writeAll(settings);
+}
+
+/**
+ * @summary Extend the application state with the local settings
+ */
+export async function load(): Promise<void> {
+	debug('load');
+	const loadedSettings = await localSettings.readAll();
+	_.assign(settings, loadedSettings);
+}
+
+/**
+ * @summary Set a setting value
+ */
+export async function set(key: string, value: any): Promise<void> {
+	debug('set', key, value);
+	if (_.isNil(key)) {
+		throw errors.createError({
+			title: 'Missing setting key',
+		});
+	}
+
+	if (!_.isString(key)) {
+		throw errors.createError({
+			title: `Invalid setting key: ${key}`,
+		});
+	}
+
+	const previousValue = settings[key];
+	settings[key] = value;
+	try {
+		await localSettings.writeAll(settings);
+	} catch (error) {
+		// Revert to previous value if persisting settings failed
+		settings[key] = previousValue;
+		throw error;
+	}
+}
+
+/**
+ * @summary Get a setting value
+ */
+export function get(key: string): any {
+	return _.cloneDeep(_.get(settings, [key]));
+}
+
+/**
+ * @summary Check if setting value exists
+ */
+export function has(key: string): boolean {
+	return settings[key] != null;
+}
+
+/**
+ * @summary Get all setting values
+ */
+export function getAll() {
+	debug('getAll');
+	return _.cloneDeep(settings);
+}

lib/gui/app/models/storage.js

@@ -1,164 +0,0 @@
-/*
- * 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 INDENTATION_SPACES = 2
-
-/**
- * @summary Localstorage class and helper functions
- * @class
- * @public
- */
-class Storage {
-  /**
-   * @function
-   * @public
-   *
-   * @param {String} superkey - superkey
-   *
-   * @example
-   * const potatoStorage = new Storage('potato')
-   */
-  constructor (superkey) {
-    this.superkey = superkey
-  }
-
-  /**
-   * @summary Get the whole object under the superkey
-   * @function
-   * @public
-   *
-   * @returns {Object}
-   *
-   * @example
-   * for (const key in potatoStorage.getAll()) {
-   *   console.log(key)
-   * }
-   */
-  getAll () {
-    try {
-      // JSON.parse(null) === null, so we fallback to {}
-      return JSON.parse(window.localStorage.getItem(this.superkey)) || {}
-    } catch (err) {
-      this.setAll({})
-      throw err
-    }
-  }
-
-  /**
-   * @summary Set the whole object under the superkey
-   * @function
-   * @public
-   *
-   * @param {Any} value - any valid JSON value
-   *
-   * @example
-   * potatoStorage.setAll({
-   *   location: 'somewhere',
-   *   freshness: 100,
-   *   edible: true
-   * })
-   */
-  setAll (value) {
-    window.localStorage.setItem(this.superkey, JSON.stringify(value, null, INDENTATION_SPACES))
-  }
-
-  /**
-   * @summary Clear the whole object under the superkey
-   * @function
-   * @public
-   *
-   * @example
-   * potatoStorage.clearAll()
-   */
-  clearAll () {
-    window.localStorage.removeItem(this.superkey)
-  }
-
-  /**
-   * @summary Get a stored value
-   * @function
-   * @public
-   *
-   * @param {String} key - object field key
-   * @param {Any} defaultValue - any valid JSON value
-   * @returns {Any} - the JSON parsed value
-   *
-   * @example
-   * potatoStorage.get('location', 'my farm')
-   */
-  get (key, defaultValue) {
-    const value = this.getAll()[key]
-
-    // eslint-disable-next-line no-undefined
-    if (value === undefined) {
-      return defaultValue
-    }
-
-    return value
-  }
-
-  /**
-   * @summary Modify a stored value
-   * @function
-   * @public
-   *
-   * @param {String} key - object field key
-   * @param {Function} func - function to apply to the value
-   * @param {Any} defaultValue - fallback value
-   * @returns {Any} - the value returned by the function applied above
-   *
-   * @example
-   * potatoStorage.modify('freshness', (freshness) => {
-   *   return freshness + 1
-   * })
-   */
-  modify (key, func, defaultValue) {
-    const obj = this.getAll()
-
-    let result = null
-    // eslint-disable-next-line no-undefined
-    if (obj[key] === undefined) {
-      result = func(defaultValue)
-    } else {
-      result = func(obj[key])
-    }
-
-    // eslint-disable-next-line lodash/prefer-lodash-method
-    this.setAll(Object.assign(obj, { [key]: result }))
-    return result
-  }
-
-  /**
-   * @summary Set a stored value
-   * @function
-   * @public
-   *
-   * @param {String} key - object field key
-   * @param {Any} value - value to set
-   *
-   * @example
-   * potatoStorage.set('edible', true)
-   */
-  set (key, value) {
-    this.modify(key, () => {
-      return value
-    })
-  }
-}
-
-module.exports = Storage

lib/gui/app/models/store.js

@@ -1,554 +0,0 @@
-/*
- * 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.
- */
-
-'use strict'
-
-const Immutable = require('immutable')
-const _ = require('lodash')
-const redux = require('redux')
-const uuidV4 = require('uuid/v4')
-const constraints = require('../../../shared/drive-constraints')
-const supportedFormats = require('../../../shared/supported-formats')
-const errors = require('../../../shared/errors')
-const fileExtensions = require('../../../shared/file-extensions')
-const utils = require('../../../shared/utils')
-const settings = require('./settings')
-
-/**
- * @summary Verify and throw if any state fields are nil
- * @function
- * @public
- *
- * @param {Object} object - state object
- * @param {Array<Array<String>> | Array<String>} fields - array of object field paths
- * @param {String} name - name of the state we're dealing with
- * @throws
- *
- * @example
- * const fields = [ 'type', 'percentage' ]
- * verifyNoNilFields(action.data, fields, 'flash')
- */
-const verifyNoNilFields = (object, fields, name) => {
-  const nilFields = _.filter(fields, (field) => {
-    return _.isNil(_.get(object, field))
-  })
-  if (nilFields.length) {
-    throw new Error(`Missing ${name} fields: ${nilFields.join(', ')}`)
-  }
-}
-
-/**
- * @summary FLASH_STATE fields that can't be nil
- * @constant
- * @private
- */
-const flashStateNoNilFields = [
-  'speed',
-  'totalSpeed'
-]
-
-/**
- * @summary SELECT_IMAGE fields that can't be nil
- * @constant
- * @private
- */
-const selectImageNoNilFields = [
-  'path',
-  'extension'
-]
-
-/**
- * @summary Application default state
- * @type {Object}
- * @constant
- * @private
- */
-const DEFAULT_STATE = Immutable.fromJS({
-  applicationSessionUuid: '',
-  flashingWorkflowUuid: '',
-  availableDrives: [],
-  selection: {
-    devices: new Immutable.OrderedSet()
-  },
-  isFlashing: false,
-  flashResults: {},
-  flashState: {
-    flashing: 0,
-    verifying: 0,
-    successful: 0,
-    failed: 0,
-    percentage: 0,
-    speed: null,
-    totalSpeed: null
-  }
-})
-
-/**
- * @summary Application supported action messages
- * @type {Object}
- * @constant
- */
-const ACTIONS = _.fromPairs(_.map([
-  'SET_AVAILABLE_DRIVES',
-  'SET_FLASH_STATE',
-  'RESET_FLASH_STATE',
-  'SET_FLASHING_FLAG',
-  'UNSET_FLASHING_FLAG',
-  'SELECT_DRIVE',
-  'SELECT_IMAGE',
-  'DESELECT_DRIVE',
-  'DESELECT_IMAGE',
-  'SET_APPLICATION_SESSION_UUID',
-  'SET_FLASHING_WORKFLOW_UUID',
-  'SET_WEBVIEW_SHOWING_STATUS'
-], (message) => {
-  return [ message, message ]
-}))
-
-/**
- * @summary Get available drives from the state
- * @function
- * @public
- *
- * @param {Object} state - state object
- * @returns {Object} new state
- *
- * @example
- * const drives = getAvailableDrives(state)
- * _.find(drives, { device: '/dev/sda' })
- */
-const getAvailableDrives = (state) => {
-  // eslint-disable-next-line lodash/prefer-lodash-method
-  return state.get('availableDrives').toJS()
-}
-
-/**
- * @summary The redux store reducer
- * @function
- * @private
- *
- * @param {Object} state - application state
- * @param {Object} action - dispatched action
- * @returns {Object} new application state
- *
- * @example
- * const newState = storeReducer(DEFAULT_STATE, {
- *   type: ACTIONS.DESELECT_DRIVE
- * });
- */
-const storeReducer = (state = DEFAULT_STATE, action) => {
-  switch (action.type) {
-    case ACTIONS.SET_AVAILABLE_DRIVES: {
-      // Type: action.data : Array<DriveObject>
-
-      if (!action.data) {
-        throw errors.createError({
-          title: 'Missing drives'
-        })
-      }
-
-      const drives = action.data
-
-      if (!_.isArray(drives) || !_.every(drives, _.isObject)) {
-        throw errors.createError({
-          title: `Invalid drives: ${drives}`
-        })
-      }
-
-      const newState = state.set('availableDrives', Immutable.fromJS(drives))
-      const selectedDevices = newState.getIn([ 'selection', 'devices' ]).toJS()
-
-      // Remove selected drives that are stale, i.e. missing from availableDrives
-      const nonStaleNewState = _.reduce(selectedDevices, (accState, device) => {
-        // Check whether the drive still exists in availableDrives
-        if (device && !_.find(drives, {
-          device
-        })) {
-          // Deselect this drive gone from availableDrives
-          return storeReducer(accState, {
-            type: ACTIONS.DESELECT_DRIVE,
-            data: device
-          })
-        }
-
-        return accState
-      }, newState)
-
-      const shouldAutoselectAll = Boolean(settings.get('disableExplicitDriveSelection'))
-      const AUTOSELECT_DRIVE_COUNT = 1
-      const nonStaleSelectedDevices = nonStaleNewState.getIn([ 'selection', 'devices' ]).toJS()
-      const hasSelectedDevices = nonStaleSelectedDevices.length >= AUTOSELECT_DRIVE_COUNT
-      const shouldAutoselectOne = drives.length === AUTOSELECT_DRIVE_COUNT && !hasSelectedDevices
-
-      if (shouldAutoselectOne || shouldAutoselectAll) {
-        // Even if there's no image selected, we need to call several
-        // drive/image related checks, and `{}` works fine with them
-        const image = state.getIn([ 'selection', 'image' ], Immutable.fromJS({})).toJS()
-
-        return _.reduce(drives, (accState, drive) => {
-          if (_.every([
-            constraints.isDriveValid(drive, image),
-            constraints.isDriveSizeRecommended(drive, image),
-
-            // We don't want to auto-select large drives
-            !constraints.isDriveSizeLarge(drive),
-
-            // We don't want to auto-select system drives,
-            // even when "unsafe mode" is enabled
-            !constraints.isSystemDrive(drive)
-
-          ]) || (shouldAutoselectAll && constraints.isDriveValid(drive, image))) {
-            // Auto-select this drive
-            return storeReducer(accState, {
-              type: ACTIONS.SELECT_DRIVE,
-              data: drive.device
-            })
-          }
-
-          // Deselect this drive in case it still is selected
-          return storeReducer(accState, {
-            type: ACTIONS.DESELECT_DRIVE,
-            data: drive.device
-          })
-        }, nonStaleNewState)
-      }
-
-      return nonStaleNewState
-    }
-
-    case ACTIONS.SET_FLASH_STATE: {
-      // Type: action.data : FlashStateObject
-
-      if (!state.get('isFlashing')) {
-        throw errors.createError({
-          title: 'Can\'t set the flashing state when not flashing'
-        })
-      }
-
-      verifyNoNilFields(action.data, flashStateNoNilFields, 'flash')
-
-      if (!_.every(_.pick(action.data, [
-        'flashing',
-        'verifying',
-        'successful',
-        'failed'
-      ]), _.isFinite)) {
-        throw errors.createError({
-          title: 'State quantity field(s) not finite number'
-        })
-      }
-
-      if (!_.isUndefined(action.data.percentage) && !utils.isValidPercentage(action.data.percentage)) {
-        throw errors.createError({
-          title: `Invalid state percentage: ${action.data.percentage}`
-        })
-      }
-
-      if (!_.isUndefined(action.data.eta) && !_.isNumber(action.data.eta)) {
-        throw errors.createError({
-          title: `Invalid state eta: ${action.data.eta}`
-        })
-      }
-
-      return state.set('flashState', Immutable.fromJS(action.data))
-    }
-
-    case ACTIONS.RESET_FLASH_STATE: {
-      return state
-        .set('isFlashing', false)
-        .set('flashState', DEFAULT_STATE.get('flashState'))
-        .set('flashResults', DEFAULT_STATE.get('flashResults'))
-        .delete('flashUuid')
-    }
-
-    case ACTIONS.SET_FLASHING_FLAG: {
-      return state
-        .set('isFlashing', true)
-        .set('flashUuid', uuidV4())
-        .set('flashResults', DEFAULT_STATE.get('flashResults'))
-    }
-
-    case ACTIONS.UNSET_FLASHING_FLAG: {
-      // Type: action.data : FlashResultsObject
-
-      if (!action.data) {
-        throw errors.createError({
-          title: 'Missing results'
-        })
-      }
-
-      _.defaults(action.data, {
-        cancelled: false
-      })
-
-      if (!_.isBoolean(action.data.cancelled)) {
-        throw errors.createError({
-          title: `Invalid results cancelled: ${action.data.cancelled}`
-        })
-      }
-
-      if (action.data.cancelled && action.data.sourceChecksum) {
-        throw errors.createError({
-          title: 'The sourceChecksum value can\'t exist if the flashing was cancelled'
-        })
-      }
-
-      if (action.data.sourceChecksum && !_.isString(action.data.sourceChecksum)) {
-        throw errors.createError({
-          title: `Invalid results sourceChecksum: ${action.data.sourceChecksum}`
-        })
-      }
-
-      if (action.data.errorCode && !_.isString(action.data.errorCode) && !_.isNumber(action.data.errorCode)) {
-        throw errors.createError({
-          title: `Invalid results errorCode: ${action.data.errorCode}`
-        })
-      }
-
-      return state
-        .set('isFlashing', false)
-        .set('flashResults', Immutable.fromJS(action.data))
-        .set('flashState', DEFAULT_STATE.get('flashState'))
-    }
-
-    case ACTIONS.SELECT_DRIVE: {
-      // Type: action.data : String
-
-      const device = action.data
-
-      if (!device) {
-        throw errors.createError({
-          title: 'Missing drive'
-        })
-      }
-
-      if (!_.isString(device)) {
-        throw errors.createError({
-          title: `Invalid drive: ${device}`
-        })
-      }
-
-      const selectedDrive = _.find(getAvailableDrives(state), { device })
-
-      if (!selectedDrive) {
-        throw errors.createError({
-          title: `The drive is not available: ${device}`
-        })
-      }
-
-      if (selectedDrive.isReadOnly) {
-        throw errors.createError({
-          title: 'The drive is write-protected'
-        })
-      }
-
-      const image = state.getIn([ 'selection', 'image' ])
-      if (image && !constraints.isDriveLargeEnough(selectedDrive, image.toJS())) {
-        throw errors.createError({
-          title: 'The drive is not large enough'
-        })
-      }
-
-      const selectedDevices = state.getIn([ 'selection', 'devices' ])
-
-      return state.setIn([ 'selection', 'devices' ], selectedDevices.add(device))
-    }
-
-    // TODO(jhermsmeier): Consolidate these assertions
-    // with image-stream / supported-formats, and have *one*
-    // place where all the image extension / format handling
-    // takes place, to avoid having to check 2+ locations with different logic
-    case ACTIONS.SELECT_IMAGE: {
-      // Type: action.data : ImageObject
-
-      verifyNoNilFields(action.data, selectImageNoNilFields, 'image')
-
-      if (!_.isString(action.data.path)) {
-        throw errors.createError({
-          title: `Invalid image path: ${action.data.path}`
-        })
-      }
-
-      if (!_.isString(action.data.extension)) {
-        throw errors.createError({
-          title: `Invalid image extension: ${action.data.extension}`
-        })
-      }
-
-      const extension = _.toLower(action.data.extension)
-
-      if (!_.includes(supportedFormats.getAllExtensions(), extension)) {
-        throw errors.createError({
-          title: `Invalid image extension: ${action.data.extension}`
-        })
-      }
-
-      let lastImageExtension = fileExtensions.getLastFileExtension(action.data.path)
-      lastImageExtension = _.isString(lastImageExtension) ? _.toLower(lastImageExtension) : lastImageExtension
-
-      if (lastImageExtension !== extension) {
-        if (!_.isString(action.data.archiveExtension)) {
-          throw errors.createError({
-            title: 'Missing image archive extension'
-          })
-        }
-
-        const archiveExtension = _.toLower(action.data.archiveExtension)
-
-        if (!_.includes(supportedFormats.getAllExtensions(), archiveExtension)) {
-          throw errors.createError({
-            title: `Invalid image archive extension: ${action.data.archiveExtension}`
-          })
-        }
-
-        if (lastImageExtension !== archiveExtension) {
-          throw errors.createError({
-            title: `Image archive extension mismatch: ${action.data.archiveExtension} and ${lastImageExtension}`
-          })
-        }
-      }
-
-      const MINIMUM_IMAGE_SIZE = 0
-
-      // eslint-disable-next-line no-undefined
-      if (action.data.size !== undefined) {
-        if ((action.data.size < MINIMUM_IMAGE_SIZE) || !_.isInteger(action.data.size)) {
-          throw errors.createError({
-            title: `Invalid image size: ${action.data.size}`
-          })
-        }
-      }
-
-      if (!_.isUndefined(action.data.compressedSize)) {
-        if ((action.data.compressedSize < MINIMUM_IMAGE_SIZE) || !_.isInteger(action.data.compressedSize)) {
-          throw errors.createError({
-            title: `Invalid image compressed size: ${action.data.compressedSize}`
-          })
-        }
-      }
-
-      if (action.data.url && !_.isString(action.data.url)) {
-        throw errors.createError({
-          title: `Invalid image url: ${action.data.url}`
-        })
-      }
-
-      if (action.data.name && !_.isString(action.data.name)) {
-        throw errors.createError({
-          title: `Invalid image name: ${action.data.name}`
-        })
-      }
-
-      if (action.data.logo && !_.isString(action.data.logo)) {
-        throw errors.createError({
-          title: `Invalid image logo: ${action.data.logo}`
-        })
-      }
-
-      const selectedDevices = state.getIn([ 'selection', 'devices' ])
-
-      // Remove image-incompatible drives from selection with `constraints.isDriveValid`
-      return _.reduce(selectedDevices.toJS(), (accState, device) => {
-        const drive = _.find(getAvailableDrives(state), { device })
-        if (!constraints.isDriveValid(drive, action.data) || !constraints.isDriveSizeRecommended(drive, action.data)) {
-          return storeReducer(accState, {
-            type: ACTIONS.DESELECT_DRIVE,
-            data: device
-          })
-        }
-
-        return accState
-      }, state).setIn([ 'selection', 'image' ], Immutable.fromJS(action.data))
-    }
-
-    case ACTIONS.DESELECT_DRIVE: {
-      // Type: action.data : String
-
-      if (!action.data) {
-        throw errors.createError({
-          title: 'Missing drive'
-        })
-      }
-
-      if (!_.isString(action.data)) {
-        throw errors.createError({
-          title: `Invalid drive: ${action.data}`
-        })
-      }
-
-      const selectedDevices = state.getIn([ 'selection', 'devices' ])
-
-      // Remove drive from set in state
-      return state.setIn([ 'selection', 'devices' ], selectedDevices.delete(action.data))
-    }
-
-    case ACTIONS.DESELECT_IMAGE: {
-      return state.deleteIn([ 'selection', 'image' ])
-    }
-
-    case ACTIONS.SET_APPLICATION_SESSION_UUID: {
-      return state.set('applicationSessionUuid', action.data)
-    }
-
-    case ACTIONS.SET_FLASHING_WORKFLOW_UUID: {
-      return state.set('flashingWorkflowUuid', action.data)
-    }
-
-    case ACTIONS.SET_WEBVIEW_SHOWING_STATUS: {
-      return state.set('isWebviewShowing', action.data)
-    }
-
-    default: {
-      return state
-    }
-  }
-}
-
-module.exports = _.merge(redux.createStore(storeReducer, DEFAULT_STATE), {
-  Actions: ACTIONS,
-  Defaults: DEFAULT_STATE
-})
-
-/**
- * @summary Observe the store for changes
- * @param {Function} onChange - change handler
- * @returns {Function} unsubscribe
- * @example
- * store.observe((newState) => {
- *   // ...
- * })
- */
-module.exports.observe = (onChange) => {
-  let currentState = null
-
-  /**
-   * @summary Internal change detection handler
-   * @private
-   * @example
-   * store.subscribe(changeHandler)
-   */
-  const changeHandler = () => {
-    const nextState = module.exports.getState()
-    if (!_.isEqual(nextState, currentState)) {
-      currentState = nextState
-      onChange(currentState)
-    }
-  }
-
-  changeHandler()
-
-  return module.exports.subscribe(changeHandler)
-}

lib/gui/app/models/store.ts

@@ -0,0 +1,572 @@
+/*
+ * Copyright 2016 balena.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.
+ */
+
+import * as Immutable from 'immutable';
+import * as _ from 'lodash';
+import * as redux from 'redux';
+import * as uuidV4 from 'uuid/v4';
+
+import * as constraints from '../../../shared/drive-constraints';
+import * as errors from '../../../shared/errors';
+import * as fileExtensions from '../../../shared/file-extensions';
+import * as supportedFormats from '../../../shared/supported-formats';
+import * as utils from '../../../shared/utils';
+import * as settings from './settings';
+
+/**
+ * @summary Verify and throw if any state fields are nil
+ */
+function verifyNoNilFields(
+	object: _.Dictionary<any>,
+	fields: string[],
+	name: string,
+) {
+	const nilFields = _.filter(fields, field => {
+		return _.isNil(_.get(object, field));
+	});
+	if (nilFields.length) {
+		throw new Error(`Missing ${name} fields: ${nilFields.join(', ')}`);
+	}
+}
+
+/**
+ * @summary FLASH_STATE fields that can't be nil
+ */
+const flashStateNoNilFields = ['speed', 'totalSpeed'];
+
+/**
+ * @summary SELECT_IMAGE fields that can't be nil
+ */
+const selectImageNoNilFields = ['path', 'extension'];
+
+/**
+ * @summary Application default state
+ */
+const DEFAULT_STATE = Immutable.fromJS({
+	applicationSessionUuid: '',
+	flashingWorkflowUuid: '',
+	availableDrives: [],
+	selection: {
+		devices: Immutable.OrderedSet(),
+	},
+	isFlashing: false,
+	flashResults: {},
+	flashState: {
+		flashing: 0,
+		verifying: 0,
+		successful: 0,
+		failed: 0,
+		percentage: 0,
+		speed: null,
+		totalSpeed: null,
+	},
+});
+
+/**
+ * @summary Application supported action messages
+ */
+export enum Actions {
+	SET_AVAILABLE_DRIVES,
+	SET_FLASH_STATE,
+	RESET_FLASH_STATE,
+	SET_FLASHING_FLAG,
+	UNSET_FLASHING_FLAG,
+	SELECT_DRIVE,
+	SELECT_IMAGE,
+	DESELECT_DRIVE,
+	DESELECT_IMAGE,
+	SET_APPLICATION_SESSION_UUID,
+	SET_FLASHING_WORKFLOW_UUID,
+}
+
+interface Action {
+	type: Actions;
+	data: any;
+}
+
+/**
+ * @summary Get available drives from the state
+ *
+ * @param {Object} state - state object
+ * @returns {Object} new state
+ */
+function getAvailableDrives(state: typeof DEFAULT_STATE) {
+	return state.get('availableDrives').toJS();
+}
+
+/**
+ * @summary The redux store reducer
+ */
+function storeReducer(
+	state = DEFAULT_STATE,
+	action: Action,
+): typeof DEFAULT_STATE {
+	switch (action.type) {
+		case Actions.SET_AVAILABLE_DRIVES: {
+			// Type: action.data : Array<DriveObject>
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing drives',
+				});
+			}
+
+			let drives = action.data;
+
+			if (!_.isArray(drives) || !_.every(drives, _.isObject)) {
+				throw errors.createError({
+					title: `Invalid drives: ${drives}`,
+				});
+			}
+
+			drives = _.sortBy(drives, [
+				// Devices with no devicePath first (usbboot)
+				d => !!d.devicePath,
+				// Then sort by devicePath (only available on Linux with udev) or device
+				d => d.devicePath || d.device,
+			]);
+
+			const newState = state.set('availableDrives', Immutable.fromJS(drives));
+			const selectedDevices = newState.getIn(['selection', 'devices']).toJS();
+
+			// Remove selected drives that are stale, i.e. missing from availableDrives
+			const nonStaleNewState = _.reduce(
+				selectedDevices,
+				(accState, device) => {
+					// Check whether the drive still exists in availableDrives
+					if (
+						device &&
+						!_.find(drives, {
+							device,
+						})
+					) {
+						// Deselect this drive gone from availableDrives
+						return storeReducer(accState, {
+							type: Actions.DESELECT_DRIVE,
+							data: device,
+						});
+					}
+
+					return accState;
+				},
+				newState,
+			);
+
+			const shouldAutoselectAll = Boolean(
+				settings.get('disableExplicitDriveSelection'),
+			);
+			const AUTOSELECT_DRIVE_COUNT = 1;
+			const nonStaleSelectedDevices = nonStaleNewState
+				.getIn(['selection', 'devices'])
+				.toJS();
+			const hasSelectedDevices =
+				nonStaleSelectedDevices.length >= AUTOSELECT_DRIVE_COUNT;
+			const shouldAutoselectOne =
+				drives.length === AUTOSELECT_DRIVE_COUNT && !hasSelectedDevices;
+
+			if (shouldAutoselectOne || shouldAutoselectAll) {
+				// Even if there's no image selected, we need to call several
+				// drive/image related checks, and `{}` works fine with them
+				const image = state
+					.getIn(['selection', 'image'], Immutable.fromJS({}))
+					.toJS();
+
+				return _.reduce(
+					drives,
+					(accState, drive) => {
+						if (
+							_.every([
+								constraints.isDriveValid(drive, image),
+								constraints.isDriveSizeRecommended(drive, image),
+
+								// We don't want to auto-select large drives
+								!constraints.isDriveSizeLarge(drive),
+
+								// We don't want to auto-select system drives,
+								// even when "unsafe mode" is enabled
+								!constraints.isSystemDrive(drive),
+							]) ||
+							(shouldAutoselectAll && constraints.isDriveValid(drive, image))
+						) {
+							// Auto-select this drive
+							return storeReducer(accState, {
+								type: Actions.SELECT_DRIVE,
+								data: drive.device,
+							});
+						}
+
+						// Deselect this drive in case it still is selected
+						return storeReducer(accState, {
+							type: Actions.DESELECT_DRIVE,
+							data: drive.device,
+						});
+					},
+					nonStaleNewState,
+				);
+			}
+
+			return nonStaleNewState;
+		}
+
+		case Actions.SET_FLASH_STATE: {
+			// Type: action.data : FlashStateObject
+
+			if (!state.get('isFlashing')) {
+				throw errors.createError({
+					title: "Can't set the flashing state when not flashing",
+				});
+			}
+
+			verifyNoNilFields(action.data, flashStateNoNilFields, 'flash');
+
+			if (
+				!_.every(
+					_.pick(action.data, [
+						'flashing',
+						'verifying',
+						'successful',
+						'failed',
+					]),
+					_.isFinite,
+				)
+			) {
+				throw errors.createError({
+					title: 'State quantity field(s) not finite number',
+				});
+			}
+
+			if (
+				!_.isUndefined(action.data.percentage) &&
+				!utils.isValidPercentage(action.data.percentage)
+			) {
+				throw errors.createError({
+					title: `Invalid state percentage: ${action.data.percentage}`,
+				});
+			}
+
+			if (!_.isUndefined(action.data.eta) && !_.isNumber(action.data.eta)) {
+				throw errors.createError({
+					title: `Invalid state eta: ${action.data.eta}`,
+				});
+			}
+
+			return state.set('flashState', Immutable.fromJS(action.data));
+		}
+
+		case Actions.RESET_FLASH_STATE: {
+			return state
+				.set('isFlashing', false)
+				.set('flashState', DEFAULT_STATE.get('flashState'))
+				.set('flashResults', DEFAULT_STATE.get('flashResults'))
+				.delete('flashUuid');
+		}
+
+		case Actions.SET_FLASHING_FLAG: {
+			return state
+				.set('isFlashing', true)
+				.set('flashUuid', uuidV4())
+				.set('flashResults', DEFAULT_STATE.get('flashResults'));
+		}
+
+		case Actions.UNSET_FLASHING_FLAG: {
+			// Type: action.data : FlashResultsObject
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing results',
+				});
+			}
+
+			_.defaults(action.data, {
+				cancelled: false,
+			});
+
+			if (!_.isBoolean(action.data.cancelled)) {
+				throw errors.createError({
+					title: `Invalid results cancelled: ${action.data.cancelled}`,
+				});
+			}
+
+			if (action.data.cancelled && action.data.sourceChecksum) {
+				throw errors.createError({
+					title:
+						"The sourceChecksum value can't exist if the flashing was cancelled",
+				});
+			}
+
+			if (
+				action.data.sourceChecksum &&
+				!_.isString(action.data.sourceChecksum)
+			) {
+				throw errors.createError({
+					title: `Invalid results sourceChecksum: ${action.data.sourceChecksum}`,
+				});
+			}
+
+			if (
+				action.data.errorCode &&
+				!_.isString(action.data.errorCode) &&
+				!_.isNumber(action.data.errorCode)
+			) {
+				throw errors.createError({
+					title: `Invalid results errorCode: ${action.data.errorCode}`,
+				});
+			}
+
+			return state
+				.set('isFlashing', false)
+				.set('flashResults', Immutable.fromJS(action.data))
+				.set('flashState', DEFAULT_STATE.get('flashState'));
+		}
+
+		case Actions.SELECT_DRIVE: {
+			// Type: action.data : String
+
+			const device = action.data;
+
+			if (!device) {
+				throw errors.createError({
+					title: 'Missing drive',
+				});
+			}
+
+			if (!_.isString(device)) {
+				throw errors.createError({
+					title: `Invalid drive: ${device}`,
+				});
+			}
+
+			const selectedDrive = _.find(getAvailableDrives(state), { device });
+
+			if (!selectedDrive) {
+				throw errors.createError({
+					title: `The drive is not available: ${device}`,
+				});
+			}
+
+			if (selectedDrive.isReadOnly) {
+				throw errors.createError({
+					title: 'The drive is write-protected',
+				});
+			}
+
+			const image = state.getIn(['selection', 'image']);
+			if (
+				image &&
+				!constraints.isDriveLargeEnough(selectedDrive, image.toJS())
+			) {
+				throw errors.createError({
+					title: 'The drive is not large enough',
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			return state.setIn(['selection', 'devices'], selectedDevices.add(device));
+		}
+
+		// TODO(jhermsmeier): Consolidate these assertions
+		// with image-stream / supported-formats, and have *one*
+		// place where all the image extension / format handling
+		// takes place, to avoid having to check 2+ locations with different logic
+		case Actions.SELECT_IMAGE: {
+			// Type: action.data : ImageObject
+
+			verifyNoNilFields(action.data, selectImageNoNilFields, 'image');
+
+			if (!_.isString(action.data.path)) {
+				throw errors.createError({
+					title: `Invalid image path: ${action.data.path}`,
+				});
+			}
+
+			if (!_.isString(action.data.extension)) {
+				throw errors.createError({
+					title: `Invalid image extension: ${action.data.extension}`,
+				});
+			}
+
+			const extension = _.toLower(action.data.extension);
+
+			if (!_.includes(supportedFormats.getAllExtensions(), extension)) {
+				throw errors.createError({
+					title: `Invalid image extension: ${action.data.extension}`,
+				});
+			}
+
+			let lastImageExtension = fileExtensions.getLastFileExtension(
+				action.data.path,
+			);
+			lastImageExtension = _.isString(lastImageExtension)
+				? _.toLower(lastImageExtension)
+				: lastImageExtension;
+
+			if (lastImageExtension !== extension) {
+				if (!_.isString(action.data.archiveExtension)) {
+					throw errors.createError({
+						title: 'Missing image archive extension',
+					});
+				}
+
+				const archiveExtension = _.toLower(action.data.archiveExtension);
+
+				if (
+					!_.includes(supportedFormats.getAllExtensions(), archiveExtension)
+				) {
+					throw errors.createError({
+						title: `Invalid image archive extension: ${action.data.archiveExtension}`,
+					});
+				}
+
+				if (lastImageExtension !== archiveExtension) {
+					throw errors.createError({
+						title: `Image archive extension mismatch: ${action.data.archiveExtension} and ${lastImageExtension}`,
+					});
+				}
+			}
+
+			const MINIMUM_IMAGE_SIZE = 0;
+
+			if (action.data.size !== undefined) {
+				if (
+					action.data.size < MINIMUM_IMAGE_SIZE ||
+					!_.isInteger(action.data.size)
+				) {
+					throw errors.createError({
+						title: `Invalid image size: ${action.data.size}`,
+					});
+				}
+			}
+
+			if (!_.isUndefined(action.data.compressedSize)) {
+				if (
+					action.data.compressedSize < MINIMUM_IMAGE_SIZE ||
+					!_.isInteger(action.data.compressedSize)
+				) {
+					throw errors.createError({
+						title: `Invalid image compressed size: ${action.data.compressedSize}`,
+					});
+				}
+			}
+
+			if (action.data.url && !_.isString(action.data.url)) {
+				throw errors.createError({
+					title: `Invalid image url: ${action.data.url}`,
+				});
+			}
+
+			if (action.data.name && !_.isString(action.data.name)) {
+				throw errors.createError({
+					title: `Invalid image name: ${action.data.name}`,
+				});
+			}
+
+			if (action.data.logo && !_.isString(action.data.logo)) {
+				throw errors.createError({
+					title: `Invalid image logo: ${action.data.logo}`,
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			// Remove image-incompatible drives from selection with `constraints.isDriveValid`
+			return _.reduce(
+				selectedDevices.toJS(),
+				(accState, device) => {
+					const drive = _.find(getAvailableDrives(state), { device });
+					if (
+						!constraints.isDriveValid(drive, action.data) ||
+						!constraints.isDriveSizeRecommended(drive, action.data)
+					) {
+						return storeReducer(accState, {
+							type: Actions.DESELECT_DRIVE,
+							data: device,
+						});
+					}
+
+					return accState;
+				},
+				state,
+			).setIn(['selection', 'image'], Immutable.fromJS(action.data));
+		}
+
+		case Actions.DESELECT_DRIVE: {
+			// Type: action.data : String
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing drive',
+				});
+			}
+
+			if (!_.isString(action.data)) {
+				throw errors.createError({
+					title: `Invalid drive: ${action.data}`,
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			// Remove drive from set in state
+			return state.setIn(
+				['selection', 'devices'],
+				selectedDevices.delete(action.data),
+			);
+		}
+
+		case Actions.DESELECT_IMAGE: {
+			return state.deleteIn(['selection', 'image']);
+		}
+
+		case Actions.SET_APPLICATION_SESSION_UUID: {
+			return state.set('applicationSessionUuid', action.data);
+		}
+
+		case Actions.SET_FLASHING_WORKFLOW_UUID: {
+			return state.set('flashingWorkflowUuid', action.data);
+		}
+
+		default: {
+			return state;
+		}
+	}
+}
+
+export const store = redux.createStore(storeReducer, DEFAULT_STATE);
+
+/**
+ * @summary Observe the store for changes
+ * @param {Function} onChange - change handler
+ * @returns {Function} unsubscribe
+ */
+export function observe(onChange: (state: typeof DEFAULT_STATE) => void) {
+	let currentState: typeof DEFAULT_STATE | null = null;
+
+	/**
+	 * @summary Internal change detection handler
+	 */
+	const changeHandler = () => {
+		const nextState = store.getState();
+		if (!_.isEqual(nextState, currentState)) {
+			currentState = nextState;
+			onChange(currentState);
+		}
+	};
+
+	changeHandler();
+
+	return store.subscribe(changeHandler);
+}