wip

Change-type: patch

.editorconfig

@@ -17,6 +17,3 @@ indent_style = tab
 
 [*.ts]
 indent_style = tab
-
-[*.tsx]
-indent_style = tab

.gitattributes

@@ -1,8 +1,7 @@
 # Javascript files must retain LF line-endings (to keep eslint happy)
+*.ts text eol=lf
 *.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
@@ -28,7 +27,6 @@ Makefile text
 *.patch text
 *.txt text
 CODEOWNERS text
-*.plist text
 
 # Binary files (no line-ending conversions)
 *.bz2 binary diff=hex

.github/ISSUE_TEMPLATE.md

@@ -3,4 +3,4 @@
 - **Image flashed:** 
 - **Do you see any meaningful error information in the DevTools?** 
 
-<!-- You can open DevTools by pressing `Ctrl+Shift+I` (`Ctrl+Alt+I` for Etcher before v1.3.x), or `Cmd+Opt+I` if you're on macOS. -->
+<!-- You can open DevTools by pressing `Ctrl+Shift+I` (`Ctrl+Alt+I` for Etcher before v1.3.x), or `Cmd+Alt+I` if you're on Mac OS. -->

.gitignore

@@ -47,7 +47,3 @@ node_modules
 # OSX files
 
 .DS_Store
-
-# VSCode files
-
-.vscode

.resinci.json

@@ -1,6 +1,6 @@
 {
   "electron": {
-    "npm_version": "6.14.5",
+    "npm_version": "6.7.0",
     "dependencies": {
       "linux": [
         "libudev-dev",
@@ -9,29 +9,77 @@
         "libgtk-3-0",
         "libatk-bridge2.0-0",
         "libdbus-1-3",
-        "libgbm1",
         "libc6"
       ]
     },
     "builder": {
       "appId": "io.balena.etcher",
-      "copyright": "Copyright 2016-2021 Balena Ltd",
+      "copyright": "Copyright 2016-2019 Balena Ltd",
       "productName": "balenaEtcher",
-      "nodeGypRebuild": false,
-      "afterPack": "./afterPack.js",
-      "asar": false,
+      "nodeGypRebuild": true,
       "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",
         "generated",
-        "lib/shared/catalina-sudo/sudo-askpass.osascript.js"
+        "!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",
+        "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"
       ],
-      "beforeBuild": "./beforeBuild.js",
-      "afterSign": "./afterSignHook.js",
       "mac": {
-        "category": "public.app-category.developer-tools",
-        "hardenedRuntime": true,
-        "entitlements": "entitlements.mac.plist",
-        "entitlementsInherit": "entitlements.mac.plist",
-        "artifactName": "${productName}-${version}.${ext}"
+        "category": "public.app-category.developer-tools"
       },
       "dmg": {
         "iconSize": 110,
@@ -58,17 +106,10 @@
         "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"
         ]
-      },
-      "protocols": {
-        "name": "etcher",
-        "schemes": [
-          "etcher"
-        ]
       }
     }
   }

.sass-lint.yml

@@ -0,0 +1,17 @@
+# sass-lint config generated by make-sass-lint-config v0.1.2
+
+files:
+  include: lib/gui/scss/**/*.scss
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  no-css-comments: 0
+  no-important: 0
+  no-qualifying-elements: 0
+  placeholder-in-extend: 0
+  property-sort-order: 0
+  quotes:
+    - 1
+    - style: double
+

BUILD.md

@@ -1,93 +0,0 @@
-# Building etcher on Windows, Linux, and Mac
-
-> How do you build etcher? On Windows, Linux, Mac
-
-It’s the same on all systems:
-
-First clone the repository recursively:
-
-`git clone --recursive https://github.com:balena-io/etcher`
-
-```
-rm -rf node_modules
-make electron-develop
-npm start
-```
-
-To build packages for distribution, run `make electron-build` after the steps above.
-
-### Windows
-
-> What version of mingw and visual studio  are needed to build? Any other dependencies for windows? Instructions for how to install?
-
-Visual studio 2019 with:
-  * MSVC v142 x86-64 build tools
-  * Windows 10 SDK
-
-Also install Windows Driver Kit from https://docs.microsoft.com/en-us/windows-hardware/drivers/download-the-wdk
- - you might have to look under "previous versions" for the windows wdk to match your windows sdk
- - all you need from this page is the WDK, you can ignore everything else, just download it
-
-pip install -r requirements.txt
-
-Mingw64, install it from https://www.msys2.org/
-
-install choco: https://chocolatey.org/install
-install jq: choco install jq -y
-
-Add /c/msys64/usr/bin/ to path
-
-
-> It appears you’re supposed to use `npm i` and then `npm watch` and then `npm start` in order to build/run the electron app, but I’m getting the error:
-
-NODE_MODULE_VERSION 88. This version of Node.js requires
-NODE_MODULE_VERSION 80. Please try re-compiling or re-installing
-
-From the module `xxhash`
-
-This error means that a module wasn’t built for the correct runtime (node or electron) and version. In general it means that either you ran `npm i` instead of `make electron-develop` or you just updated the electron version.
-Remove the node_modules folder and run `make electron-develop`, that should fix it.
-
-If you want to use only npm, set up some env vars to target the correct runtime as in https://github.com/balena-io/EtcherProApplication/blob/v1.0.0/Dockerfile#L11-L13
-
-
-Each time you change a js file, you need to run `npm webpack` again. This is quite slow. To make it faster leave `npm run watch` running. It actually just runs `webpack --watch`
-
-https://github.com/electron/electron/blob/master/docs/tutorial/using-native-node-modules.md
-
-### Mac OS X
-
-Install XCode via the App Store
-
-> I get the error: `gyp: No Xcode or CLT version detected!`
-
-Fix with:
-
-```
-sudo xcodebuild -license accept
-```
-
-> I get the error: `xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance`
-
-Fix with:
-
-```
-sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
-```
-
-> I get the error: `[webpack-cli] Error: Could not find lzma_native binding`
-
-Try removing node_modules and running `make electron-develop` again.
-
-### Linux
-
-Should work OOTB, please create issue if not.
-
-* Note: Might have to downgrade to Node 14
-
-
-### FreeBSD
-
-Should work OOTB, please create issue if not.
-
-* Note: Might have to downgrade to Node 14

FAQ.md

@@ -1,46 +0,0 @@
-## 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.10 and newer versions](https://github.com/electron/electron/blob/master/docs/tutorial/support.md#supported-platforms).

Makefile

@@ -3,12 +3,18 @@
 # ---------------------------------------------------------------------
 
 RESIN_SCRIPTS ?= ./scripts/resin
-export NPM_VERSION ?= 6.14.8
+export NPM_VERSION ?= 6.7.0
 S3_BUCKET = artifacts.ci.balena-cloud.com
 
 # This directory will be completely deleted by the `clean` rule
 BUILD_DIRECTORY ?= dist
 
+# See http://stackoverflow.com/a/20763842/1641422
+BUILD_DIRECTORY_PARENT = $(dir $(BUILD_DIRECTORY))
+ifeq ($(wildcard $(BUILD_DIRECTORY_PARENT).),)
+$(error $(BUILD_DIRECTORY_PARENT) does not exist)
+endif
+
 BUILD_TEMPORARY_DIRECTORY = $(BUILD_DIRECTORY)/.tmp
 
 $(BUILD_DIRECTORY):
@@ -17,7 +23,9 @@ $(BUILD_DIRECTORY):
 $(BUILD_TEMPORARY_DIRECTORY): | $(BUILD_DIRECTORY)
 	mkdir $@
 
+# See https://stackoverflow.com/a/13468229/1641422
 SHELL := /bin/bash
+PATH := $(shell pwd)/node_modules/.bin:$(PATH)
 
 # ---------------------------------------------------------------------
 # Operating system and architecture detection
@@ -85,7 +93,7 @@ TARGET_ARCH ?= $(HOST_ARCH)
 # ---------------------------------------------------------------------
 # Electron
 # ---------------------------------------------------------------------
-electron-develop:
+electron-develop: | $(BUILD_TEMPORARY_DIRECTORY)
 	$(RESIN_SCRIPTS)/electron/install.sh \
 		-b $(shell pwd) \
 		-r $(TARGET_ARCH) \
@@ -106,7 +114,8 @@ electron-build: assets/dmg/background.tiff | $(BUILD_TEMPORARY_DIRECTORY)
 		-r $(TARGET_ARCH) \
 		-s $(PLATFORM) \
 		-v production \
-		-n $(BUILD_TEMPORARY_DIRECTORY)/npm
+		-n $(BUILD_TEMPORARY_DIRECTORY)/npm \
+		-w $(BUILD_TEMPORARY_DIRECTORY)
 
 # ---------------------------------------------------------------------
 # Phony targets
@@ -116,20 +125,70 @@ TARGETS = \
 	help \
 	info \
 	lint \
+	lint-js \
+	lint-sass \
+	lint-cpp \
+	lint-html \
+	lint-spell \
+	test-spectron \
+	test-gui \
 	test \
+	sanity-checks \
 	clean \
 	distclean \
+	webpack \
 	electron-develop \
 	electron-test \
 	electron-build
 
+webpack:
+	./node_modules/.bin/webpack
+
 .PHONY: $(TARGETS)
 
-lint: 
-	npm run lint
+sass:
+	npm rebuild node-sass
+	node-sass lib/gui/app/scss/main.scss > lib/gui/css/main.css
 
-test:
-	npm run test
+lint-ts:
+	resin-lint --typescript lib
+
+lint-js:
+	eslint --ignore-pattern scripts/resin/**/*.js lib tests scripts bin webpack.config.js
+
+lint-sass:
+	sass-lint lib/gui/scss
+
+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
+
+lint: lint-ts lint-js lint-sass lint-cpp lint-html 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
+
+test-gui:
+	electron-mocha $(MOCHA_OPTIONS) --renderer tests/gui
+
+test-sdk:
+	electron-mocha $(MOCHA_OPTIONS) \
+		tests/shared
+
+test: test-gui test-sdk test-spectron
 
 help:
 	@echo "Available targets: $(TARGETS)"
@@ -139,11 +198,17 @@ info:
 	@echo "Host arch           : $(HOST_ARCH)"
 	@echo "Target arch         : $(TARGET_ARCH)"
 
+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:
 	rm -rf $(BUILD_DIRECTORY)
 
 distclean: clean
 	rm -rf node_modules
+	rm -rf build
 	rm -rf dist
 	rm -rf generated
 	rm -rf $(BUILD_TEMPORARY_DIRECTORY)

README.md

@@ -5,16 +5,16 @@
 Etcher 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. It can also directly flash Raspberry Pi devices that support [USB device boot mode](https://www.raspberrypi.org/documentation/hardware/raspberrypi/bootmodes/device.md).
+was written correctly and much more. It can also flash directly Raspberry Pi devices that support the usbboot protocol
 
 [![Current Release](https://img.shields.io/github/release/balena-io/etcher.svg?style=flat-square)](https://balena.io/etcher)
 [![License](https://img.shields.io/github/license/balena-io/etcher.svg?style=flat-square)](https://github.com/balena-io/etcher/blob/master/LICENSE)
 [![Dependency status](https://img.shields.io/david/balena-io/etcher.svg?style=flat-square)](https://david-dm.org/balena-io/etcher)
 [![Balena.io Forums](https://img.shields.io/discourse/https/forums.balena.io/topics.svg?style=flat-square&label=balena.io%20forums)](https://forums.balena.io/c/etcher)
 
----
+***
 
-[**Download**][etcher] | [**Support**][support] | [**Documentation**][user-documentation] | [**Contributing**][contributing] | [**Roadmap**][milestones]
+[**Download**][etcher] | [**Support**][SUPPORT] | [**Documentation**][USER-DOCUMENTATION] | [**Contributing**][CONTRIBUTING] | [**Roadmap**][milestones]
 
 ## Supported Operating Systems
 
@@ -22,7 +22,7 @@ was written correctly, and much more. It can also directly flash Raspberry Pi de
 - macOS 10.10 (Yosemite) and later
 - Microsoft Windows 7 and later
 
-**Note**: Etcher will run on any platform officially supported by
+Note that Etcher will run on any platform officially supported by
 [Electron][electron]. Read more in their
 [documentation][electron-supported-platforms].
 
@@ -31,99 +31,66 @@ was written correctly, and much more. It can also directly flash Raspberry Pi de
 Refer to the [downloads page][etcher] for the latest pre-made
 installers for all supported operating systems.
 
-> Note: Our deb and rpm packages are now hosted on [Cloudsmith](https://cloudsmith.com)!
-
 #### Debian and Ubuntu based Package Repository (GNU/Linux x86/x64)
 
-1. Add Etcher Debian repository:
+1. Add Etcher debian repository:
 
-   ```sh
-   curl -1sLf \
-      'https://dl.cloudsmith.io/public/balena/etcher/setup.deb.sh' \
-      | sudo -E bash
-   ```
+    ```sh
+    echo "deb https://deb.etcher.io stable etcher" | sudo tee /etc/apt/sources.list.d/balena-etcher.list
+    ```
 
-2. Update and install:
+2. Trust Bintray.com's GPG key:
 
-   ```sh
-   sudo apt-get update
-   sudo apt-get install balena-etcher-electron
-   ```
+    ```sh
+    sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 379CE192D401AB61
+    ```
+
+3. Update and install:
+
+    ```sh
+    sudo apt-get update
+    sudo apt-get install balena-etcher-electron
+    ```
 
 ##### Uninstall
 
 ```sh
 sudo apt-get remove balena-etcher-electron
-rm /etc/apt/sources.list.d/balena-etcher.list
-apt-get clean
-rm -rf /var/lib/apt/lists/*
-apt-get update
+sudo rm /etc/apt/sources.list.d/balena-etcher.list
+sudo apt-get update
 ```
+#### Redhat (RHEL) and Fedora based Package Repository (GNU/Linux x86/x64)
 
-##### OpenSUSE LEAP & Tumbleweed install
+1. Add Etcher rpm repository:
 
-```sh
-curl -1sLf \
-  'https://dl.cloudsmith.io/public/balena/etcher/setup.rpm.sh' \
-  | sudo -E bash
-```
+    ```sh
+    sudo wget https://balena.io/etcher/static/etcher-rpm.repo -O /etc/yum.repos.d/etcher-rpm.repo
+    ```
+
+2. Update and install:
+
+    ```sh
+    sudo yum install -y balena-etcher-electron
+    ```
+    or
+    ```sh
+    sudo dnf install -y balena-etcher-electron
+    ```
 
 ##### Uninstall
 
-```sh
-zypper rr balena-etcher
-zypper rr balena-etcher-source
-```
-
-#### Redhat (RHEL) and Fedora-based Package Repository (GNU/Linux x86/x64)
-
-##### DNF
-
-1. Add Etcher rpm repository:
-
-   ```sh
-   curl -1sLf \
-      'https://dl.cloudsmith.io/public/balena/etcher/setup.rpm.sh' \
-      | sudo -E bash
-   ```
-
-2. Update and install:
-
-   ```sh
-   sudo dnf install -y balena-etcher-electron
-   rm /etc/yum.repos.d/balena-etcher.repo
-   rm /etc/yum.repos.d/balena-etcher-source.repo
-   ```
-
-###### Uninstall
-
-```sh
-rm /etc/yum.repos.d/balena-etcher.repo
-rm /etc/yum.repos.d/balena-etcher-source.repo
-```
-
-##### Yum
-
-1. Add Etcher rpm repository:
-
-   ```sh
-   curl -1sLf \
-      'https://dl.cloudsmith.io/public/balena/etcher/setup.rpm.sh' \
-      | sudo -E bash
-   ```
-
-2. Update and install:
-
-   ```sh
-   sudo yum install -y balena-etcher-electron
-   ```
-
-###### Uninstall
-
 ```sh
 sudo yum remove -y balena-etcher-electron
-rm /etc/yum.repos.d/balena-etcher.repo
-rm /etc/yum.repos.d/balena-etcher-source.repo
+sudo rm /etc/yum.repos.d/etcher-rpm.repo
+sudo yum clean all
+sudo yum makecache fast
+```
+or
+```sh
+sudo dnf remove -y balena-etcher-electron
+sudo rm /etc/yum.repos.d/etcher-rpm.repo
+sudo dnf clean all
+sudo dnf makecache
 ```
 
 #### Solus (GNU/Linux x64)
@@ -138,34 +105,20 @@ sudo eopkg it etcher
 sudo eopkg rm etcher
 ```
 
-#### Arch/Manjaro Linux (GNU/Linux x64)
+#### Brew Cask (macOS)
 
-Etcher is offered through the Arch User Repository and can be installed on both Manjaro and Arch systems. You can compile it from the source code in this repository using [`balena-etcher`](https://aur.archlinux.org/packages/balena-etcher/). The following example uses a common AUR helper to install the latest release:
-
-```sh
-yay -S balena-etcher
-```
-
-##### Uninstall
-
-```sh
-yay -R balena-etcher
-```
-
-#### Brew (macOS)
-
-**Note**: Etcher has to be updated manually to point to new versions,
+Note that the Etcher Cask has to be updated manually to point to new versions,
 so it might not refer to the latest version immediately after an Etcher
 release.
 
 ```sh
-brew install balenaetcher
+brew cask install balenaetcher
 ```
 
 ##### Uninstall
 
 ```sh
-brew uninstall balenaetcher
+brew cask uninstall balenaetcher
 ```
 
 #### Chocolatey (Windows)
@@ -185,20 +138,20 @@ choco uninstall etcher
 
 ## Support
 
-If you're having any problem, please [raise an issue][newissue] on GitHub, and
+If you're having any problem, please [raise an issue][newissue] on GitHub and
 the balena.io team will be happy to help.
 
 ## License
 
-Etcher is free software and may be redistributed under the terms specified in
+Etcher is free software, and may be redistributed under the terms specified in
 the [license].
 
 [etcher]: https://balena.io/etcher
 [electron]: https://electronjs.org/
 [electron-supported-platforms]: https://electronjs.org/docs/tutorial/support#supported-platforms
-[support]: https://github.com/balena-io/etcher/blob/master/SUPPORT.md
-[contributing]: https://github.com/balena-io/etcher/blob/master/docs/CONTRIBUTING.md
-[user-documentation]: https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md
+[SUPPORT]: https://github.com/balena-io/etcher/blob/master/SUPPORT.md
+[CONTRIBUTING]: https://github.com/balena-io/etcher/blob/master/docs/CONTRIBUTING.md
+[USER-DOCUMENTATION]: https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md
 [milestones]: https://github.com/balena-io/etcher/milestones
 [newissue]: https://github.com/balena-io/etcher/issues/new
 [license]: https://github.com/balena-io/etcher/blob/master/LICENSE

SUPPORT.md

@@ -4,13 +4,6 @@ Getting help with Etcher
 There are various ways to get support for Etcher if you experience an issue or
 have an idea you'd like to share with us.
 
-Documentation
-------
-
-We have answers to a variety of frequently asked questions in the [user 
-documentation][documentation] and also in the [FAQs][faq] on the Etcher website.
-
-
 Forums
 ------
 
@@ -39,5 +32,3 @@ one][new-issue].
 [discourse]: https://forums.balena.io/c/etcher
 [issues]: https://github.com/balena-io/etcher/issues
 [new-issue]: https://github.com/balena-io/etcher/issues/new
-[documentation]: https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md
-[faq]: https://etcher.io

afterPack.js

@@ -1,31 +0,0 @@
-'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

@@ -1,23 +0,0 @@
-'use strict'
-
-const { notarize } = require('electron-notarize')
-const { ELECTRON_SKIP_NOTARIZATION } = process.env
-
-async function main(context) {
-  const { electronPlatformName, appOutDir } = context
-  if (electronPlatformName !== 'darwin' || ELECTRON_SKIP_NOTARIZATION === 'true') {
-    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

beforeBuild.js

@@ -1,33 +0,0 @@
-'use strict'
-
-const cp = require('child_process');
-const rimraf = require('rimraf');
-const process = require('process');
-
-// Rebuild native modules for ia32 and run webpack again for the ia32 part of windows packages
-exports.default = function(context) {
-	if (['windows', 'mac'].includes(context.platform.name)) {
-		const run = context.platform.name === 'windows' ? 'sh' : 'node';
-		cp.execFileSync(
-			run,
-			['node_modules/.bin/electron-rebuild', '--types', 'dev', '--arch', context.arch],
-			{
-				env: {
-					...process.env,
-					npm_config_msvs_version: '2019',
-				},
-			},
-		);
-		rimraf.sync('generated');
-		cp.execFileSync(
-			run,
-			['node_modules/.bin/webpack'],
-			{
-				env: {
-					...process.env,
-					npm_config_target_arch: context.arch,
-				},
-			},
-		);
-	}
-}

binding.gyp

@@ -0,0 +1,35 @@
+{
+  "targets": [
+    {
+      "target_name": "elevator",
+      "include_dirs" : [
+        "src",
+        "<!(node -e \"require('nan')\")"
+      ],
+      'conditions': [
+
+        [ 'OS=="win"', {
+          "sources": [
+            "src/utils/v8utils.cpp",
+            "src/os/win32/elevate.cpp",
+            "src/elevator_init.cpp",
+          ],
+          "libraries": [
+            "-lShell32.lib",
+          ],
+        } ],
+
+        [ 'OS=="mac"', {
+          "xcode_settings": {
+            "OTHER_CPLUSPLUSFLAGS": [
+              "-stdlib=libc++"
+            ],
+            "OTHER_LDFLAGS": [
+              "-stdlib=libc++"
+            ]
+          }
+        } ]
+      ],
+    }
+  ],
+}

docs/ARCHITECTURE.md

@@ -12,9 +12,12 @@ technologies used in Etcher that you should become familiar with:
 
 - [Electron][electron]
 - [NodeJS][nodejs]
+- [AngularJS][angularjs]
 - [Redux][redux]
 - [ImmutableJS][immutablejs]
+- [Bootstrap][bootstrap]
 - [Sass][sass]
+- [Flexbox Grid][flexbox-grid]
 - [Mocha][mocha]
 - [JSDoc][jsdoc]
 
@@ -59,12 +62,15 @@ since fresh eyes could help unveil things that we take for granted, but should
 be documented instead!
 
 [lego-blocks]: https://github.com/sindresorhus/ama/issues/10#issuecomment-117766328
-[exit-codes]: https://github.com/balena-io/etcher/blob/master/lib/shared/exit-codes.js
+[exit-codes]: https://github.com/balena-io/etcher/blob/master/lib/gui/app/modules/exit-codes.js
 [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
 [sass]: http://sass-lang.com
+[flexbox-grid]: http://flexboxgrid.com
 [mocha]: http://mochajs.org
 [jsdoc]: http://usejsdoc.org

docs/USER-DOCUMENTATION.md

@@ -130,6 +130,21 @@ 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
 ------------------------
 
@@ -166,7 +181,7 @@ Run the following command in `Terminal.app`, replacing `N` by the corresponding
 disk number, which you can find by running `diskutil list`:
 
 ```sh
-diskutil eraseDisk FAT32 UNTITLED MBRFormat /dev/diskN
+diskutil eraseDisk free UNTITLED /dev/diskN
 ```
 
 ### GNU/Linux

docs/_config.yml

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

electron-builder.yml

@@ -1,22 +1,19 @@
 appId: io.balena.etcher
-copyright: Copyright 2016-2021 Balena Ltd
+copyright: Copyright 2016-2019 Balena Ltd
 productName: balenaEtcher
 npmRebuild: true
-nodeGypRebuild: false
+nodeGypRebuild: true
 publish: null
-beforeBuild: "./beforeBuild.js"
-afterPack: "./afterPack.js"
-asar: false
 files:
+  - lib
+  - lib/gui/app/index.html
   - generated
-  - lib/shared/catalina-sudo/sudo-askpass.osascript.js
+  - build/**/*.node
+  - assets/icon.png
+  - node_modules/**/*
 mac:
   icon: assets/icon.icns
   category: public.app-category.developer-tools
-  hardenedRuntime: true
-  entitlements: "entitlements.mac.plist"
-  entitlementsInherit: "entitlements.mac.plist"
-  artifactName: "${productName}-${version}.${ext}"
 dmg:
   background: assets/dmg/background.tiff
   icon: assets/icon.icns
@@ -55,6 +52,7 @@ deb:
   depends:
     - gconf2
     - gconf-service
+    - libappindicator1
     - libasound2
     - libatk1.0-0
     - libc6
@@ -64,7 +62,6 @@ deb:
     - libexpat1
     - libfontconfig1
     - libfreetype6
-    - libgbm1
     - libgcc1
     - libgconf-2-4
     - libgdk-pixbuf2.0-0
@@ -74,7 +71,7 @@ deb:
     - libnotify4
     - libnspr4
     - libnss3
-    - libpango1.0-0 | libpango-1.0-0
+    - libpango1.0-0
     - libstdc++6
     - libx11-6
     - libxcomposite1
@@ -90,8 +87,5 @@ deb:
     - polkit-1-auth-agent | policykit-1-gnome | polkit-kde-1
 rpm:
   depends:
-    - util-linux
-protocols:
-  name: etcher
-  schemes:
-    - etcher
+    - lsb
+    - libXScrnSaver

entitlements.mac.plist

@@ -1,18 +0,0 @@
-<?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

@@ -0,0 +1,539 @@
+/*
+ * 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('../../gui/app/modules/exit-codes')
+const messages = require('../../gui/app/modules/messages')
+const store = require('./models/store')
+const packageJSON = require('../../../package.json')
+const flashState = require('./models/flash-state')
+// eslint-disable-next-line node/no-missing-require
+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-next-line node/no-missing-require
+const screensaver = require('./modules/screensaver')
+
+/* 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')
+  }
+
+  /**
+   * @summary Whether to show the sleep button
+   * @function
+   * @public
+   *
+   * @returns {Boolean}
+   *
+   * @example
+   * HeaderController.shouldShowSleep()
+   */
+  this.shouldShowSleep = () => {
+    return settings.get('showScreensaverDelay')
+  }
+
+  /**
+   * @summary Enables the screensaver
+   * @function
+   * @public
+   *
+   * @example
+   * HeaderController.sleep()
+   */
+  this.sleep = () => {
+    screensaver.off()
+  }
+})
+
+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)
+})
+
+screensaver.init()

lib/gui/app/app.ts

@@ -1,359 +0,0 @@
-/*
- * 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 { v4 as uuidV4 } from 'uuid';
-
-import * as packageJSON from '../../../package.json';
-import { DrivelistDrive, isSourceDrive } from '../../shared/drive-constraints';
-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 { deselectImage, getImage } from './models/selection-state';
-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 * as osDialog from './os/dialog';
-import * as windowProgress from './os/window-progress';
-import MainPage from './pages/main/MainPage';
-import './css/main.css';
-
-window.addEventListener(
-	'unhandledrejection',
-	(event: PromiseRejectionEvent | any) => {
-		// Promise: event.reason
-		// Anything else: event
-		const error = event.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,
-});
-
-const debouncedLog = _.debounce(console.log, 1000, { maxWait: 1000 });
-
-function pluralize(word: string, quantity: number) {
-	return `${quantity} ${word}${quantity === 1 ? '' : 's'}`;
-}
-
-observe(() => {
-	if (!flashState.isFlashing()) {
-		return;
-	}
-	const currentFlashState = flashState.getFlashState();
-	windowProgress.set(currentFlashState);
-
-	let eta = '';
-	if (currentFlashState.eta !== undefined) {
-		eta = `eta in ${currentFlashState.eta.toFixed(0)}s`;
-	}
-	let active = '';
-	if (currentFlashState.type !== 'decompressing') {
-		active = pluralize('device', currentFlashState.active);
-	}
-	// 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.
-	debouncedLog(outdent({ newline: ' ' })`
-		${_.capitalize(currentFlashState.type)}
-		${active},
-		${currentFlashState.percentage}%
-		at
-		${(currentFlashState.speed || 0).toFixed(2)}
-		MB/s
-		(total ${(currentFlashState.speed * currentFlashState.active).toFixed(2)} MB/s)
-		${eta}
-		with
-		${pluralize('failed device', currentFlashState.failed)}
-	`);
-});
-
-/**
- * @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',
-};
-
-async function driveIsAllowed(drive: {
-	devicePath: string;
-	device: string;
-	raw: string;
-}) {
-	const driveBlacklist = (await settings.get('driveBlacklist')) || [];
-	return !(
-		driveBlacklist.includes(drive.devicePath) ||
-		driveBlacklist.includes(drive.device) ||
-		driveBlacklist.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<DrivelistDrive>) {
-	availableDrives.setDrives(_.values(drives));
-}
-
-function getDrives() {
-	return _.keyBy(availableDrives.getDrives(), 'device');
-}
-
-async function addDrive(drive: Drive) {
-	const preparedDrive = prepareDrive(drive);
-	if (!(await driveIsAllowed(preparedDrive))) {
-		return;
-	}
-	const drives = getDrives();
-	drives[preparedDrive.device] = preparedDrive;
-	setDrives(drives);
-}
-
-function removeDrive(drive: Drive) {
-	if (
-		drive instanceof sdk.sourceDestination.BlockDevice &&
-		// @ts-ignore BlockDevice.drive is private
-		isSourceDrive(drive.drive, getImage())
-	) {
-		// Deselect the image if it was on the drive that was removed.
-		// This will also deselect the image if the drive mountpoints change.
-		deselectImage();
-	}
-	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) {
-		// @ts-ignore
-		drives[drive.device] = { ...driveInMap, 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(),
-		});
-		return;
-	}
-
-	// Don't close window while flashing
-	event.returnValue = false;
-
-	// Don't open any more popups
-	popupExists = true;
-
-	analytics.logEvent('Close attempt while flashing');
-
-	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(),
-			});
-
-			// 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);
-	}
-});
-
-export async function main() {
-	await ledsInit();
-	ReactDOM.render(
-		React.createElement(MainPage),
-		document.getElementById('main'),
-		// callback to set the correct zoomFactor for webviews as well
-		async () => {
-			const fullscreen = await settings.get('fullscreen');
-			const width = fullscreen ? window.screen.width : window.outerWidth;
-			try {
-				electron.webFrame.setZoomFactor(width / settings.DEFAULT_WIDTH);
-			} catch (err) {
-				// noop
-			}
-		},
-	);
-}

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2018 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+/**
+ * @module Etcher.Components.ConfirmModal
+ */
+
+const angular = require('angular')
+const MODULE_NAME = 'Etcher.Components.ConfirmModal'
+const ConfirmModal = angular.module(MODULE_NAME, [
+  require('../modal/modal')
+])
+
+ConfirmModal.controller('ConfirmModalController', require('./controllers/confirm-modal'))
+ConfirmModal.service('ConfirmModalService', require('./services/confirm-modal'))
+
+module.exports = MODULE_NAME

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

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2018 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+module.exports = function ($uibModalInstance, options) {
+  /**
+   * @summary Modal options
+   * @type {Object}
+   * @public
+   */
+  this.options = options
+
+  /**
+   * @summary Reject the warning prompt
+   * @function
+   * @public
+   *
+   * @example
+   * WarningModalController.reject();
+   */
+  this.reject = () => {
+    $uibModalInstance.close(false)
+  }
+
+  /**
+   * @summary Accept the warning prompt
+   * @function
+   * @public
+   *
+   * @example
+   * WarningModalController.accept();
+   */
+  this.accept = () => {
+    $uibModalInstance.close(true)
+  }
+}

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

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2018 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+const _ = require('lodash')
+
+module.exports = function ($sce, ModalService) {
+  /**
+   * @summary show the confirm modal
+   * @function
+   * @public
+   *
+   * @param {Object} options - options
+   * @param {String} options.description - danger message
+   * @param {String} options.confirmationLabel - confirmation button text
+   * @param {String} options.rejectionLabel - rejection button text
+   * @fulfil {Boolean} - whether the user accepted or rejected the confirm
+   * @returns {Promise}
+   *
+   * @example
+   * ConfirmModalService.show({
+   *   description: 'Don\'t do this!',
+   *   confirmationLabel: 'Yes, continue!'
+   * });
+   */
+  this.show = (options = {}) => {
+    options.description = $sce.trustAsHtml(options.description)
+    return ModalService.open({
+      name: 'confirm',
+      template: require('../templates/confirm-modal.tpl.html'),
+      controller: 'ConfirmModalController as modal',
+      size: 'confirm-modal',
+      resolve: {
+        options: _.constant(options)
+      }
+    }).result
+  }
+}

lib/gui/app/components/confirm-modal/styles/confirm-modal.scss

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2016 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.modal-confirm-modal .modal-content {
+  width: 350px;
+}
+
+.modal-confirm-modal .modal-title .glyphicon {
+  color: $palette-theme-danger-background;
+}
+
+.modal-confirm-modal .modal-body {
+  max-height: 200px;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,36 @@
+<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/controllers/drive-selector.js

@@ -0,0 +1,266 @@
+/*
+ * 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('../../../../../gui/app/modules/drive-constraints')
+const store = require('../../../models/store')
+const analytics = require('../../../modules/analytics')
+const availableDrives = require('../../../models/available-drives')
+const selectionState = require('../../../models/selection-state')
+// eslint-disable-next-line node/no-missing-require
+const utils = require('../../../../../gui/app/modules/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

@@ -0,0 +1,35 @@
+/*
+ * 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/drive-selector.tsx

@@ -1,537 +0,0 @@
-/*
- * 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 ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
-import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
-import * as sourceDestination from 'etcher-sdk/build/source-destination/';
-import * as React from 'react';
-import { Flex, ModalProps, Txt, Badge, Link, TableColumn } from 'rendition';
-import styled from 'styled-components';
-
-import {
-	getDriveImageCompatibilityStatuses,
-	isDriveValid,
-	DriveStatus,
-	DrivelistDrive,
-	isDriveSizeLarge,
-} from '../../../../shared/drive-constraints';
-import { compatibility, warning } from '../../../../shared/messages';
-import * as prettyBytes from 'pretty-bytes';
-import { getDrives, hasAvailableDrives } from '../../models/available-drives';
-import { getImage, isDriveSelected } from '../../models/selection-state';
-import { store } from '../../models/store';
-import { logEvent, logException } from '../../modules/analytics';
-import { open as openExternal } from '../../os/open-external/services/open-external';
-import {
-	Alert,
-	GenericTableProps,
-	Modal,
-	Table,
-} from '../../styled-components';
-
-import { SourceMetadata } from '../source-selector/source-selector';
-
-interface UsbbootDrive extends sourceDestination.UsbbootDrive {
-	progress: number;
-}
-
-interface DriverlessDrive {
-	displayName: string; // added in app.ts
-	description: string;
-	link: string;
-	linkTitle: string;
-	linkMessage: string;
-	linkCTA: string;
-}
-
-type Drive = DrivelistDrive | DriverlessDrive | UsbbootDrive;
-
-function isUsbbootDrive(drive: Drive): drive is UsbbootDrive {
-	return (drive as UsbbootDrive).progress !== undefined;
-}
-
-function isDriverlessDrive(drive: Drive): drive is DriverlessDrive {
-	return (drive as DriverlessDrive).link !== undefined;
-}
-
-function isDrivelistDrive(drive: Drive): drive is DrivelistDrive {
-	return typeof (drive as DrivelistDrive).size === 'number';
-}
-
-const DrivesTable = styled((props: GenericTableProps<Drive>) => (
-	<Table<Drive> {...props} />
-))`
-	[data-display='table-head'],
-	[data-display='table-body'] {
-		> [data-display='table-row'] > [data-display='table-cell'] {
-			&:nth-child(2) {
-				width: 32%;
-			}
-
-			&:nth-child(3) {
-				width: 15%;
-			}
-
-			&:nth-child(4) {
-				width: 15%;
-			}
-
-			&:nth-child(5) {
-				width: 32%;
-			}
-		}
-	}
-`;
-
-function badgeShadeFromStatus(status: string) {
-	switch (status) {
-		case compatibility.containsImage():
-			return 16;
-		case compatibility.system():
-		case compatibility.tooSmall():
-			return 5;
-		default:
-			return 14;
-	}
-}
-
-const InitProgress = styled(
-	({
-		value,
-		...props
-	}: {
-		value: number;
-		props?: React.ProgressHTMLAttributes<Element>;
-	}) => {
-		return <progress max="100" value={value} {...props} />;
-	},
-)`
-	/* Reset the default appearance */
-	appearance: none;
-
-	::-webkit-progress-bar {
-		width: 130px;
-		height: 4px;
-		background-color: #dde1f0;
-		border-radius: 14px;
-	}
-
-	::-webkit-progress-value {
-		background-color: #1496e1;
-		border-radius: 14px;
-	}
-`;
-
-export interface DriveSelectorProps
-	extends Omit<ModalProps, 'done' | 'cancel'> {
-	write: boolean;
-	multipleSelection: boolean;
-	showWarnings?: boolean;
-	cancel: () => void;
-	done: (drives: DrivelistDrive[]) => void;
-	titleLabel: string;
-	emptyListLabel: string;
-	emptyListIcon: JSX.Element;
-	selectedList?: DrivelistDrive[];
-	updateSelectedList?: () => DrivelistDrive[];
-}
-
-interface DriveSelectorState {
-	drives: Drive[];
-	image?: SourceMetadata;
-	missingDriversModal: { drive?: DriverlessDrive };
-	selectedList: DrivelistDrive[];
-	showSystemDrives: boolean;
-}
-
-function isSystemDrive(drive: Drive) {
-	return isDrivelistDrive(drive) && drive.isSystem;
-}
-
-export class DriveSelector extends React.Component<
-	DriveSelectorProps,
-	DriveSelectorState
-> {
-	private unsubscribe: (() => void) | undefined;
-	tableColumns: Array<TableColumn<Drive>>;
-
-	constructor(props: DriveSelectorProps) {
-		super(props);
-
-		const defaultMissingDriversModalState: { drive?: DriverlessDrive } = {};
-		const selectedList = this.props.selectedList || [];
-
-		this.state = {
-			drives: getDrives(),
-			image: getImage(),
-			missingDriversModal: defaultMissingDriversModalState,
-			selectedList,
-			showSystemDrives: false,
-		};
-
-		this.tableColumns = [
-			{
-				field: 'description',
-				label: 'Name',
-				render: (description: string, drive: Drive) => {
-					if (isDrivelistDrive(drive)) {
-						const isLargeDrive = isDriveSizeLarge(drive);
-						const hasWarnings =
-							this.props.showWarnings && (isLargeDrive || drive.isSystem);
-						return (
-							<Flex alignItems="center">
-								{hasWarnings && (
-									<ExclamationTriangleSvg
-										height="1em"
-										fill={drive.isSystem ? '#fca321' : '#8f9297'}
-									/>
-								)}
-								<Txt ml={(hasWarnings && 8) || 0}>{description}</Txt>
-							</Flex>
-						);
-					}
-					return <Txt>{description}</Txt>;
-				},
-			},
-			{
-				field: 'description',
-				key: 'size',
-				label: 'Size',
-				render: (_description: string, drive: Drive) => {
-					if (isDrivelistDrive(drive) && drive.size !== null) {
-						return prettyBytes(drive.size);
-					}
-				},
-			},
-			{
-				field: 'description',
-				key: 'link',
-				label: 'Location',
-				render: (_description: string, drive: Drive) => {
-					return (
-						<Txt>
-							{drive.displayName}
-							{isDriverlessDrive(drive) && (
-								<>
-									{' '}
-									-{' '}
-									<b>
-										<a onClick={() => this.installMissingDrivers(drive)}>
-											{drive.linkCTA}
-										</a>
-									</b>
-								</>
-							)}
-						</Txt>
-					);
-				},
-			},
-			{
-				field: 'description',
-				key: 'extra',
-				// We use an empty React fragment otherwise it uses the field name as label
-				label: <></>,
-				render: (_description: string, drive: Drive) => {
-					if (isUsbbootDrive(drive)) {
-						return this.renderProgress(drive.progress);
-					} else if (isDrivelistDrive(drive)) {
-						return this.renderStatuses(drive);
-					}
-				},
-			},
-		];
-	}
-
-	private driveShouldBeDisabled(drive: Drive, image?: SourceMetadata) {
-		return (
-			isUsbbootDrive(drive) ||
-			isDriverlessDrive(drive) ||
-			!isDriveValid(drive, image) ||
-			(this.props.write && drive.isReadOnly)
-		);
-	}
-
-	private getDisplayedDrives(drives: Drive[]): Drive[] {
-		return drives.filter((drive) => {
-			return (
-				isUsbbootDrive(drive) ||
-				isDriverlessDrive(drive) ||
-				isDriveSelected(drive.device) ||
-				this.state.showSystemDrives ||
-				!drive.isSystem
-			);
-		});
-	}
-
-	private getDisabledDrives(drives: Drive[], image?: SourceMetadata): string[] {
-		return drives
-			.filter((drive) => this.driveShouldBeDisabled(drive, image))
-			.map((drive) => drive.displayName);
-	}
-
-	private renderProgress(progress: number) {
-		return (
-			<Flex flexDirection="column">
-				<Txt fontSize={12}>Initializing device</Txt>
-				<InitProgress value={progress} />
-			</Flex>
-		);
-	}
-
-	private warningFromStatus(
-		status: string,
-		drive: { device: string; size: number },
-	) {
-		switch (status) {
-			case compatibility.containsImage():
-				return warning.sourceDrive();
-			case compatibility.largeDrive():
-				return warning.largeDriveSize();
-			case compatibility.system():
-				return warning.systemDrive();
-			case compatibility.tooSmall():
-				const size =
-					this.state.image?.recommendedDriveSize || this.state.image?.size || 0;
-				return warning.tooSmall({ size }, drive);
-		}
-	}
-
-	private renderStatuses(drive: DrivelistDrive) {
-		const statuses: DriveStatus[] = getDriveImageCompatibilityStatuses(
-			drive,
-			this.state.image,
-			this.props.write,
-		).slice(0, 2);
-		return (
-			// the column render fn expects a single Element
-			<>
-				{statuses.map((status) => {
-					const badgeShade = badgeShadeFromStatus(status.message);
-					const warningMessage = this.warningFromStatus(status.message, {
-						device: drive.device,
-						size: drive.size || 0,
-					});
-					return (
-						<Badge
-							key={status.message}
-							shade={badgeShade}
-							mr="8px"
-							tooltip={this.props.showWarnings ? warningMessage : ''}
-						>
-							{status.message}
-						</Badge>
-					);
-				})}
-			</>
-		);
-	}
-
-	private installMissingDrivers(drive: DriverlessDrive) {
-		if (drive.link) {
-			logEvent('Open driver link modal', {
-				url: drive.link,
-			});
-			this.setState({ missingDriversModal: { drive } });
-		}
-	}
-
-	private deselectingAll(rows: DrivelistDrive[]) {
-		return (
-			rows.length > 0 &&
-			rows.length === this.state.selectedList.length &&
-			this.state.selectedList.every(
-				(d) => rows.findIndex((r) => d.device === r.device) > -1,
-			)
-		);
-	}
-
-	componentDidMount() {
-		this.unsubscribe = store.subscribe(() => {
-			const drives = getDrives();
-			const image = getImage();
-			this.setState({
-				drives,
-				image,
-				selectedList:
-					(this.props.updateSelectedList && this.props.updateSelectedList()) ||
-					[],
-			});
-		});
-	}
-
-	componentWillUnmount() {
-		this.unsubscribe?.();
-	}
-
-	render() {
-		const { cancel, done, ...props } = this.props;
-		const { selectedList, drives, image, missingDriversModal } = this.state;
-
-		const displayedDrives = this.getDisplayedDrives(drives);
-		const disabledDrives = this.getDisabledDrives(drives, image);
-		const numberOfSystemDrives = drives.filter(isSystemDrive).length;
-		const numberOfDisplayedSystemDrives = displayedDrives.filter(isSystemDrive)
-			.length;
-		const numberOfHiddenSystemDrives =
-			numberOfSystemDrives - numberOfDisplayedSystemDrives;
-		const hasSystemDrives = selectedList.filter(isSystemDrive).length;
-		const showWarnings = this.props.showWarnings && hasSystemDrives;
-
-		return (
-			<Modal
-				titleElement={
-					<Flex alignItems="baseline" mb={18}>
-						<Txt fontSize={24} align="left">
-							{this.props.titleLabel}
-						</Txt>
-						<Txt
-							fontSize={11}
-							ml={12}
-							color="#5b82a7"
-							style={{ fontWeight: 600 }}
-						>
-							{drives.length} found
-						</Txt>
-					</Flex>
-				}
-				titleDetails={<Txt fontSize={11}>{getDrives().length} found</Txt>}
-				cancel={cancel}
-				done={() => done(selectedList)}
-				action={`Select (${selectedList.length})`}
-				primaryButtonProps={{
-					primary: !showWarnings,
-					warning: showWarnings,
-					disabled: !hasAvailableDrives(),
-				}}
-				{...props}
-			>
-				{!hasAvailableDrives() ? (
-					<Flex
-						flexDirection="column"
-						justifyContent="center"
-						alignItems="center"
-						width="100%"
-					>
-						{this.props.emptyListIcon}
-						<b>{this.props.emptyListLabel}</b>
-					</Flex>
-				) : (
-					<>
-						<DrivesTable
-							refFn={(t) => {
-								if (t !== null) {
-									t.setRowSelection(selectedList);
-								}
-							}}
-							checkedRowsNumber={selectedList.length}
-							multipleSelection={this.props.multipleSelection}
-							columns={this.tableColumns}
-							data={displayedDrives}
-							disabledRows={disabledDrives}
-							getRowClass={(row: Drive) =>
-								isDrivelistDrive(row) && row.isSystem ? ['system'] : []
-							}
-							rowKey="displayName"
-							onCheck={(rows: Drive[]) => {
-								let newSelection = rows.filter(isDrivelistDrive);
-								if (this.props.multipleSelection) {
-									if (this.deselectingAll(newSelection)) {
-										newSelection = [];
-									}
-									this.setState({
-										selectedList: newSelection,
-									});
-									return;
-								}
-								this.setState({
-									selectedList: newSelection.slice(newSelection.length - 1),
-								});
-							}}
-							onRowClick={(row: Drive) => {
-								if (
-									!isDrivelistDrive(row) ||
-									this.driveShouldBeDisabled(row, image)
-								) {
-									return;
-								}
-								const index = selectedList.findIndex(
-									(d) => d.device === row.device,
-								);
-								const newList = this.props.multipleSelection
-									? [...selectedList]
-									: [];
-								if (index === -1) {
-									newList.push(row);
-								} else {
-									// Deselect if selected
-									newList.splice(index, 1);
-								}
-								this.setState({
-									selectedList: newList,
-								});
-							}}
-						/>
-						{numberOfHiddenSystemDrives > 0 && (
-							<Link
-								mt={15}
-								mb={15}
-								fontSize="14px"
-								onClick={() => this.setState({ showSystemDrives: true })}
-							>
-								<Flex alignItems="center">
-									<ChevronDownSvg height="1em" fill="currentColor" />
-									<Txt ml={8}>Show {numberOfHiddenSystemDrives} hidden</Txt>
-								</Flex>
-							</Link>
-						)}
-					</>
-				)}
-				{this.props.showWarnings && hasSystemDrives ? (
-					<Alert className="system-drive-alert" style={{ width: '67%' }}>
-						Selecting your system drive is dangerous and will erase your drive!
-					</Alert>
-				) : null}
-
-				{missingDriversModal.drive !== undefined && (
-					<Modal
-						width={400}
-						title={missingDriversModal.drive.linkTitle}
-						cancel={() => this.setState({ missingDriversModal: {} })}
-						done={() => {
-							try {
-								if (missingDriversModal.drive !== undefined) {
-									openExternal(missingDriversModal.drive.link);
-								}
-							} catch (error) {
-								logException(error);
-							} finally {
-								this.setState({ missingDriversModal: {} });
-							}
-						}}
-						action="Yes, continue"
-						cancelButtonProps={{
-							children: 'Cancel',
-						}}
-						children={
-							missingDriversModal.drive.linkMessage ||
-							`Etcher will open ${missingDriversModal.drive.link} in your browser`
-						}
-					/>
-				)}
-			</Modal>
-		);
-	}
-}

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

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+/**
+ * @module Etcher.Components.TargetSelector
+ */
+
+import * as angular from 'angular';
+import { react2angular } from 'react2angular';
+
+const MODULE_NAME = 'Etcher.Components.TargetSelector';
+const SelectTargetButton = angular.module(MODULE_NAME, []);
+
+SelectTargetButton.component(
+	'targetSelector',
+	react2angular(require('./target-selector.jsx')),
+);
+
+export = MODULE_NAME;

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

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

@@ -0,0 +1,110 @@
+/*
+ * 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-drive-selector-modal .modal-content {
+  width: 315px;
+  height: 320px;
+}
+
+.modal-drive-selector-modal .modal-body {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.modal-drive-selector-modal .list-group-item[disabled] {
+  cursor: not-allowed;
+}
+
+.modal-drive-selector-modal {
+
+  .list-group-item-footer:has(span) {
+    margin-top: 8px;
+  }
+
+  .list-group-item-heading,
+  .list-group-item-text {
+    word-break: break-all;
+  }
+
+  .list-group {
+    margin-bottom: 0;
+  }
+
+  .list-group-item {
+    display: flex;
+    align-items: center;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    border-color: darken($palette-theme-light-background, 7%);
+    padding: 12px 0;
+
+    .list-group-item-section-expanded {
+      flex-grow: 1;
+    }
+
+    .list-group-item-section + .list-group-item-section {
+      margin-left: 10px;
+    }
+
+    > .tick {
+      font-size: 11px;
+    }
+
+    &:first-child {
+      border-top: 0;
+    }
+
+    &[disabled] .list-group-item-heading {
+      color: $palette-theme-light-soft-foreground;
+    }
+
+    progress {
+      appearance: none;
+      width: 100%;
+      height: 2.5px;
+      border: none;
+      border-radius: 50% 50%;
+    }
+
+    progress::-webkit-progress-bar {
+      background-color: $palette-theme-default-background;
+      border: none;
+      outline: none;
+    }
+
+    progress::-webkit-progress-value {
+      border-bottom: 1px solid darken($palette-theme-primary-background, 15);
+      background-color: $palette-theme-primary-background;
+    }
+
+  }
+
+  .list-group-item-heading {
+    font-size: 13px;
+  }
+
+  .list-group-item-text {
+    line-height: 1;
+    font-size: 11px;
+    color: $palette-theme-light-soft-foreground;
+  }
+
+  .word-keep {
+    word-break: keep-all;
+  }
+}
+

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

@@ -0,0 +1,166 @@
+/*
+ * 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('./../../../../gui/app/modules/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/templates/drive-selector-modal.tpl.html

@@ -0,0 +1,62 @@
+<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/drive-selector2/drive-selector.tsx

@@ -0,0 +1,264 @@
+/*
+ * 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.
+ */
+
+import { Meter } from 'grommet';
+import { sortBy } from 'lodash';
+import * as React from 'react';
+import { Badge, Modal, Table } from 'rendition';
+
+import { getDrives } from '../../models/available-drives';
+import { COMPATIBILITY_STATUS_TYPES } from '../../modules/drive-constraints';
+import { subscribe } from '../../models/store';
+import { ThemedProvider } from '../../styled-components';
+import { bytesToClosestUnit } from '../../modules/units';
+
+interface Drive {
+	description: string;
+	device: string;
+	isSystem: boolean;
+	isReadOnly: boolean;
+	progress?: number;
+	size?: number;
+	link?: string;
+	linkCTA?: string;
+	displayName: string;
+}
+
+interface CompatibilityStatus {
+	type: number;
+	message: string;
+}
+
+interface DriveSelectorProps {
+	title: string;
+	close: () => void;
+	setSelectedDrives: (drives: Drive[]) => void;
+	isDriveSelected: (drive: Drive) => boolean;
+	isDriveValid: (drive: Drive) => boolean;
+	getDriveBadges: (drive: Drive) => CompatibilityStatus[];
+}
+
+interface DriveSelectorState {
+	drives: Drive[];
+	selected: Drive[];
+	disabledDrives: string[];
+}
+
+const modalStyle = {
+	width: '800px',
+	height: '600px',
+	paddingTop: '20px',
+	paddingLeft: '30px',
+	paddingRight: '30px',
+	paddingBottom: '11px',
+};
+
+const titleStyle = {
+	color: '#2a506f',
+};
+
+const subtitleStyle = {
+	marginLeft: '10px',
+	fontSize: '11px',
+	color: '#5b82a7',
+};
+
+const wrapperStyle = {
+	height: '250px',
+	overflowX: 'hidden' as 'hidden',
+	overflowY: 'auto' as 'auto',
+};
+
+export class DriveSelector2 extends React.Component<
+	DriveSelectorProps,
+	DriveSelectorState
+> {
+	private table: Table<Drive> | null = null;
+	private columns: {
+		field: keyof Drive;
+		label: string;
+		render?: (value: any, row: Drive) => string | number | JSX.Element | null;
+	}[];
+	private unsubscribe?: () => void;
+
+	constructor(props: DriveSelectorProps) {
+		super(props);
+		this.columns = [
+			{
+				field: 'description',
+				label: 'Name',
+			} as const,
+			{
+				field: 'size',
+				label: 'Size',
+				render: this.renderSize.bind(this),
+			} as const,
+			{
+				field: 'displayName',
+				label: 'Location',
+				render: this.renderLocation.bind(this),
+			} as const,
+			{
+				field: 'isReadOnly', // We don't use this, but a valid field that is not used in another column is required
+				label: ' ',
+				render: this.renderBadges.bind(this),
+			} as const,
+		];
+		this.state = this.getNewState();
+	}
+
+	public componentDidMount() {
+		this.update();
+		if (this.unsubscribe === undefined) {
+			this.unsubscribe = subscribe(this.update.bind(this));
+		}
+	}
+
+	public componentWillUnmount() {
+		if (this.unsubscribe !== undefined) {
+			this.unsubscribe();
+			this.unsubscribe = undefined;
+		}
+	}
+
+	private getNewState() {
+		let drives: Drive[] = getDrives();
+		for (let i = 0; i < drives.length; i++) {
+			drives[i] = { ...drives[i] };
+		}
+		drives = sortBy(drives, 'device');
+		const selected = drives.filter(d => this.props.isDriveSelected(d));
+		const disabledDrives = drives
+			.filter(d => !this.props.isDriveValid(d))
+			.map(d => d.device);
+		return { drives, disabledDrives, selected };
+	}
+
+	private update() {
+		this.setState(this.getNewState());
+		this.updateTableSelection();
+	}
+
+	private updateTableSelection() {
+		if (this.table !== null) {
+			this.table.setRowSelection(this.state.selected);
+		}
+	}
+
+	private renderSize(size: number) {
+		if (size) {
+			return bytesToClosestUnit(size);
+		} else {
+			return null;
+		}
+	}
+
+	private renderLocation(displayName: string, drive: Drive) {
+		const result: Array<string | JSX.Element> = [displayName];
+		if (drive.link && drive.linkCTA) {
+			result.push(<a href={drive.link}>{drive.linkCTA}</a>);
+		}
+		return <React.Fragment>{result}</React.Fragment>;
+	}
+
+	private renderBadges(_value: any, row: Drive) {
+		const result = [];
+		if (row.progress !== undefined) {
+			result.push(
+				<Meter
+					size="small"
+					thickness="xxsmall"
+					values={[
+						{
+							value: row.progress,
+							label: row.progress + '%',
+							color: '#2297de',
+						},
+					]}
+				/>,
+			);
+		}
+		result.push(
+			...this.props.getDriveBadges(row).map((status: CompatibilityStatus) => {
+				const props: {
+					key: string;
+					xsmall: true;
+					danger?: boolean;
+					warning?: boolean;
+				} = { xsmall: true, key: status.message };
+				if (status.type === COMPATIBILITY_STATUS_TYPES.ERROR) {
+					props.danger = true;
+				} else if (status.type === COMPATIBILITY_STATUS_TYPES.WARNING) {
+					props.warning = true;
+				}
+				return <Badge {...props}>{status.message}</Badge>;
+			}),
+		);
+		return <React.Fragment>{result}</React.Fragment>;
+	}
+
+	private renderTbodyPrefix() {
+		if (this.state.drives.length === 0) {
+			return (
+				<tr>
+					<td colSpan={this.columns.length} style={{ textAlign: 'center' }}>
+						<b>Connect a drive</b>
+						<div>No removable drive detected.</div>
+					</td>
+				</tr>
+			);
+		}
+	}
+
+	public render() {
+		return (
+			<ThemedProvider>
+				<Modal
+					titleElement={
+						<div style={titleStyle}>
+							{this.props.title}
+							<span style={subtitleStyle}>
+								{this.state.drives.length} found
+							</span>
+						</div>
+					}
+					action={`Select (${this.state.selected.length})`}
+					style={modalStyle}
+					done={this.props.close}
+				>
+					<div style={wrapperStyle}>
+						<Table<Drive>
+							ref={t => {
+								this.table = t;
+								this.updateTableSelection();
+							}}
+							rowKey="device"
+							onCheck={this.onCheck.bind(this)}
+							columns={this.columns}
+							data={this.state.drives}
+							disabledRows={this.state.disabledDrives}
+							tbodyPrefix={this.renderTbodyPrefix()}
+						/>
+					</div>
+				</Modal>
+			</ThemedProvider>
+		);
+	}
+
+	private onCheck(checkedDrives: Drive[]): void {
+		this.props.setSelectedDrives(checkedDrives);
+	}
+}

lib/gui/app/components/drive-selector2/index.ts

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import * as angular from 'angular';
+import { react2angular } from 'react2angular';
+
+import { DriveSelector2 } from './drive-selector.tsx';
+
+const MODULE_NAME = 'Etcher.Components.DriveSelector2';
+
+angular
+	.module(MODULE_NAME, [])
+	.component(
+		'driveSelector2',
+		react2angular(DriveSelector2, [
+			'close',
+			'getDriveBadges',
+			'isDriveSelected',
+			'isDriveValid',
+			'setSelectedDrives',
+			'title',
+		]),
+	);
+
+export = MODULE_NAME;

lib/gui/app/components/drive-status-warning-modal/drive-status-warning-modal.tsx

@@ -1,82 +0,0 @@
-import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Badge, Flex, Txt, ModalProps } from 'rendition';
-import { Modal, ScrollableFlex } from '../../styled-components';
-import { middleEllipsis } from '../../utils/middle-ellipsis';
-
-import * as prettyBytes from 'pretty-bytes';
-import { DriveWithWarnings } from '../../pages/main/Flash';
-
-const DriveStatusWarningModal = ({
-	done,
-	cancel,
-	isSystem,
-	drivesWithWarnings,
-}: ModalProps & {
-	isSystem: boolean;
-	drivesWithWarnings: DriveWithWarnings[];
-}) => {
-	let warningSubtitle = 'You are about to erase an unusually large drive';
-	let warningCta = 'Are you sure the selected drive is not a storage drive?';
-
-	if (isSystem) {
-		warningSubtitle = "You are about to erase your computer's drives";
-		warningCta = 'Are you sure you want to flash your system drive?';
-	}
-	return (
-		<Modal
-			footerShadow={false}
-			reverseFooterButtons={true}
-			done={done}
-			cancel={cancel}
-			cancelButtonProps={{
-				primary: false,
-				warning: true,
-				children: 'Change target',
-			}}
-			action={"Yes, I'm sure"}
-			primaryButtonProps={{
-				primary: false,
-				outline: true,
-			}}
-		>
-			<Flex
-				flexDirection="column"
-				alignItems="center"
-				justifyContent="center"
-				width="100%"
-			>
-				<Flex flexDirection="column">
-					<ExclamationTriangleSvg height="2em" fill="#fca321" />
-					<Txt fontSize="24px" color="#fca321">
-						WARNING!
-					</Txt>
-				</Flex>
-				<Txt fontSize="24px">{warningSubtitle}</Txt>
-				<ScrollableFlex
-					flexDirection="column"
-					backgroundColor="#fff5e6"
-					m="2em 0"
-					p="1em 2em"
-					width="420px"
-					maxHeight="100px"
-				>
-					{drivesWithWarnings.map((drive, i, array) => (
-						<>
-							<Flex justifyContent="space-between" alignItems="baseline">
-								<strong>{middleEllipsis(drive.description, 28)}</strong>{' '}
-								{drive.size && prettyBytes(drive.size) + ' '}
-								<Badge shade={5}>{drive.statuses[0].message}</Badge>
-							</Flex>
-							{i !== array.length - 1 ? <hr style={{ width: '100%' }} /> : null}
-						</>
-					))}
-				</ScrollableFlex>
-				<Txt style={{ fontWeight: 600 }}>{warningCta}</Txt>
-			</Flex>
-		</Modal>
-	);
-};
-
-export default DriveStatusWarningModal;

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

@@ -0,0 +1,57 @@
+/*
+ * 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/index.js

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

@@ -0,0 +1,74 @@
+/*
+ * 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')
+// eslint-disable-next-line node/no-missing-require
+const settings = require('../../../models/settings')
+// eslint-disable-next-line node/no-missing-require
+const utils = require('../../../../../gui/app/modules/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

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

@@ -0,0 +1,321 @@
+/*
+ * 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('../../../../../gui/app/modules/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

@@ -0,0 +1,358 @@
+/*
+ * 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('../../../../../gui/app/modules/messages')
+const errors = require('../../../../../gui/app/modules/errors')
+const supportedFormats = require('../../../../../gui/app/modules/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

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

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

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

@@ -0,0 +1,53 @@
+/*
+ * 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,5 +1,5 @@
 /*
- * Copyright 2016 balena.io
+ * 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.
@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-export const SUCCESS = 0;
-export const GENERAL_ERROR = 1;
-export const VALIDATION_ERROR = 2;
-export const CANCELLED = 3;
+.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

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

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

@@ -1,129 +0,0 @@
-/*
- * 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 { Flex } from 'rendition';
-import { v4 as uuidV4 } from 'uuid';
-
-import * as flashState from '../../models/flash-state';
-import * as selectionState from '../../models/selection-state';
-import * as settings from '../../models/settings';
-import { Actions, store } from '../../models/store';
-import * as analytics from '../../modules/analytics';
-import { FlashAnother } from '../flash-another/flash-another';
-import { FlashResults, FlashError } from '../flash-results/flash-results';
-import { SafeWebview } from '../safe-webview/safe-webview';
-
-function restart(goToMain: () => void) {
-	selectionState.deselectAllDrives();
-	analytics.logEvent('Restart');
-
-	// Reset the flashing workflow uuid
-	store.dispatch({
-		type: Actions.SET_FLASHING_WORKFLOW_UUID,
-		data: uuidV4(),
-	});
-
-	goToMain();
-}
-
-async function getSuccessBannerURL() {
-	return (
-		(await settings.get('successBannerURL')) ??
-		'https://www.balena.io/etcher/success-banner?borderTop=false&darkBackground=true'
-	);
-}
-
-function FinishPage({ goToMain }: { goToMain: () => void }) {
-	const [webviewShowing, setWebviewShowing] = React.useState(false);
-	const [successBannerURL, setSuccessBannerURL] = React.useState('');
-	(async () => {
-		setSuccessBannerURL(await getSuccessBannerURL());
-	})();
-	const flashResults = flashState.getFlashResults();
-	const errors: FlashError[] = (
-		store.getState().toJS().failedDeviceErrors || []
-	).map(([, error]: [string, FlashError]) => ({
-		...error,
-	}));
-	const {
-		averageSpeed,
-		blockmappedSize,
-		bytesWritten,
-		failed,
-		size,
-	} = flashState.getFlashState();
-	const {
-		skip,
-		results = {
-			bytesWritten,
-			sourceMetadata: {
-				size,
-				blockmappedSize,
-			},
-			averageFlashingSpeed: averageSpeed,
-			devices: { failed, successful: 0 },
-		},
-	} = flashResults;
-	return (
-		<Flex height="100%" justifyContent="space-between">
-			<Flex
-				width={webviewShowing ? '36.2vw' : '100vw'}
-				height="100vh"
-				alignItems="center"
-				justifyContent="center"
-				flexDirection="column"
-				style={{
-					position: 'absolute',
-					top: 0,
-					zIndex: 1,
-					boxShadow: '0 2px 15px 0 rgba(0, 0, 0, 0.2)',
-				}}
-			>
-				<FlashResults
-					image={selectionState.getImage()?.name}
-					results={results}
-					skip={skip}
-					errors={errors}
-					mb="32px"
-					goToMain={goToMain}
-				/>
-
-				<FlashAnother
-					onClick={() => {
-						restart(goToMain);
-					}}
-				/>
-			</Flex>
-			{successBannerURL.length && (
-				<SafeWebview
-					src={successBannerURL}
-					onWebviewShow={setWebviewShowing}
-					style={{
-						display: webviewShowing ? 'flex' : 'none',
-						position: 'absolute',
-						right: 0,
-						bottom: 0,
-						width: '63.8vw',
-						height: '100vh',
-					}}
-				/>
-			)}
-		</Flex>
-	);
-}
-
-export default FinishPage;

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

@@ -0,0 +1,49 @@
+/*
+ * 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/index.js

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

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

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

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

@@ -1,243 +0,0 @@
-/*
- * 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 CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
-import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/check-circle.svg';
-import TimesCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/times-circle.svg';
-import outdent from 'outdent';
-import * as React from 'react';
-import { Flex, FlexProps, Link, TableColumn, Txt } from 'rendition';
-import styled from 'styled-components';
-
-import { progress } from '../../../../shared/messages';
-import { bytesToMegabytes } from '../../../../shared/units';
-
-import FlashSvg from '../../../assets/flash.svg';
-import { getDrives } from '../../models/available-drives';
-import { resetState } from '../../models/flash-state';
-import * as selection from '../../models/selection-state';
-import { middleEllipsis } from '../../utils/middle-ellipsis';
-import { Modal, Table } from '../../styled-components';
-
-const ErrorsTable = styled((props) => <Table<FlashError> {...props} />)`
-	&&& [data-display='table-head'],
-	&&& [data-display='table-body'] {
-		> [data-display='table-row'] {
-			> [data-display='table-cell'] {
-				&:first-child {
-					width: 30%;
-				}
-
-				&:nth-child(2) {
-					width: 20%;
-				}
-
-				&:last-child {
-					width: 50%;
-				}
-			}
-		}
-	}
-`;
-const DoneIcon = (props: {
-	skipped: boolean;
-	color: string;
-	allFailed: boolean;
-}) => {
-	const svgProps = {
-		width: '28px',
-		fill: props.color,
-		style: {
-			marginTop: '-25px',
-			marginLeft: '13px',
-			zIndex: 1,
-		},
-	};
-	return props.allFailed && !props.skipped ? (
-		<TimesCircleSvg {...svgProps} />
-	) : (
-		<CheckCircleSvg {...svgProps} />
-	);
-};
-
-export interface FlashError extends Error {
-	description: string;
-	device: string;
-	code: string;
-}
-
-function formattedErrors(errors: FlashError[]) {
-	return errors
-		.map((error) => `${error.device}: ${error.message || error.code}`)
-		.join('\n');
-}
-
-const columns: Array<TableColumn<FlashError>> = [
-	{
-		field: 'description',
-		label: 'Target',
-	},
-	{
-		field: 'device',
-		label: 'Location',
-	},
-	{
-		field: 'message',
-		label: 'Error',
-		render: (message: string, { code }: FlashError) => {
-			return message ?? code;
-		},
-	},
-];
-
-function getEffectiveSpeed(results: {
-	sourceMetadata: {
-		size: number;
-		blockmappedSize?: number;
-	};
-	averageFlashingSpeed: number;
-}) {
-	const flashedSize =
-		results.sourceMetadata.blockmappedSize ?? results.sourceMetadata.size;
-	const timeSpent = flashedSize / results.averageFlashingSpeed;
-	return results.sourceMetadata.size / timeSpent;
-}
-
-export function FlashResults({
-	goToMain,
-	image = '',
-	errors,
-	results,
-	skip,
-	...props
-}: {
-	goToMain: () => void;
-	image?: string;
-	errors: FlashError[];
-	skip: boolean;
-	results: {
-		sourceMetadata: {
-			size: number;
-			blockmappedSize?: number;
-		};
-		averageFlashingSpeed: number;
-		devices: { failed: number; successful: number };
-	};
-} & FlexProps) {
-	const [showErrorsInfo, setShowErrorsInfo] = React.useState(false);
-	const allFailed = !skip && results.devices.successful === 0;
-	const someFailed = results.devices.failed !== 0 || errors.length !== 0;
-	const effectiveSpeed = bytesToMegabytes(getEffectiveSpeed(results)).toFixed(
-		1,
-	);
-	return (
-		<Flex flexDirection="column" {...props}>
-			<Flex alignItems="center" flexDirection="column">
-				<Flex
-					alignItems="center"
-					mt="50px"
-					mb="32px"
-					color="#7e8085"
-					flexDirection="column"
-				>
-					<FlashSvg width="40px" height="40px" className="disabled" />
-					<DoneIcon
-						skipped={skip}
-						allFailed={allFailed}
-						color={allFailed || someFailed ? '#c6c8c9' : '#1ac135'}
-					/>
-					<Txt>{middleEllipsis(image, 24)}</Txt>
-				</Flex>
-				<Txt fontSize={24} color="#fff" mb="17px">
-					Flash {allFailed ? 'Failed' : 'Complete'}!
-				</Txt>
-				{skip ? <Txt color="#7e8085">Validation has been skipped</Txt> : null}
-			</Flex>
-			<Flex flexDirection="column" color="#7e8085">
-				{results.devices.successful !== 0 ? (
-					<Flex alignItems="center">
-						<CircleSvg width="14px" fill="#1ac135" />
-						<Txt ml="10px" color="#fff">
-							{results.devices.successful}
-						</Txt>
-						<Txt ml="10px">
-							{progress.successful(results.devices.successful)}
-						</Txt>
-					</Flex>
-				) : null}
-				{errors.length !== 0 ? (
-					<Flex alignItems="center">
-						<CircleSvg width="14px" fill="#ff4444" />
-						<Txt ml="10px" color="#fff">
-							{errors.length}
-						</Txt>
-						<Txt ml="10px" tooltip={formattedErrors(errors)}>
-							{progress.failed(errors.length)}
-						</Txt>
-						<Link ml="10px" onClick={() => setShowErrorsInfo(true)}>
-							more info
-						</Link>
-					</Flex>
-				) : null}
-				{!allFailed && (
-					<Txt
-						fontSize="10px"
-						style={{
-							fontWeight: 500,
-							textAlign: 'center',
-						}}
-						tooltip={outdent({ newline: ' ' })`
-							The speed is calculated by dividing the image size by the flashing time.
-							Disk images with ext partitions flash faster as we are able to skip unused parts.
-						`}
-					>
-						Effective speed: {effectiveSpeed} MB/s
-					</Txt>
-				)}
-			</Flex>
-
-			{showErrorsInfo && (
-				<Modal
-					titleElement={
-						<Flex alignItems="baseline" mb={18}>
-							<Txt fontSize={24} align="left">
-								Failed targets
-							</Txt>
-						</Flex>
-					}
-					action="Retry failed targets"
-					cancel={() => setShowErrorsInfo(false)}
-					done={() => {
-						setShowErrorsInfo(false);
-						resetState();
-						getDrives()
-							.map((drive) => {
-								selection.deselectDrive(drive.device);
-								return drive.device;
-							})
-							.filter((driveDevice) =>
-								errors.some((error) => error.device === driveDevice),
-							)
-							.forEach((driveDevice) => selection.selectDrive(driveDevice));
-						goToMain();
-					}}
-				>
-					<ErrorsTable columns={columns} data={errors} />
-				</Modal>
-			)}
-		</Flex>
-	);
-}

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

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

@@ -0,0 +1,128 @@
+/*
+ * 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 { Badge, DropDownButton, Select } = require('rendition')
+const { default: styled } = require('styled-components')
+
+const middleEllipsis = require('./../../utils/middle-ellipsis')
+
+const shared = require('./../../../../gui/app/modules/units')
+const {
+  StepButton,
+  StepNameButton,
+  StepSelection,
+  Footer,
+  Underline,
+  DetailsText,
+  ChangeButton,
+  ThemedProvider
+} = require('./../../styled-components')
+
+const DropdownItem = styled.p`
+  padding-top: 10px;
+  text-align: left;
+  width: 150px;
+  cursor: pointer;
+`
+
+const DropdownItemIcon = styled.i`
+  padding-right: 10px;
+`
+
+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.deselectImage}
+          >
+            Remove
+          </ChangeButton>
+        }
+        <DetailsText>
+          {shared.bytesToClosestUnit(props.imageSize)}
+        </DetailsText>
+      </ThemedProvider>
+    )
+  }
+  return (
+    <ThemedProvider>
+      <StepSelection>
+        <DropDownButton
+          primary
+          label={
+            <div onClick={props.openImageSelector}>Select image</div>
+          }
+          style={{height: '48px'}}
+        >
+          <DropdownItem
+            onClick={props.openImageSelector}
+          >
+            <DropdownItemIcon className="far fa-file"/>
+            Select image file
+          </DropdownItem>
+          <DropdownItem
+            onClick={props.openDriveSelector}
+          >
+            <DropdownItemIcon className="far fa-copy"/>
+            Duplicate drive
+          </DropdownItem>
+        </DropDownButton>
+        <Footer>
+          { props.mainSupportedExtensions.join(', ') }, and{' '}
+          <Underline
+            tooltip={ props.extraSupportedExtensions.join(', ') }
+          >
+            many more
+          </Underline>
+        </Footer>
+      </StepSelection>
+    </ThemedProvider>
+  )
+}
+
+SelectImageButton.propTypes = {
+  openImageSelector: propTypes.func,
+  openDriveSelector: propTypes.func,
+  mainSupportedExtensions: propTypes.array,
+  extraSupportedExtensions: propTypes.array,
+  hasImage: propTypes.bool,
+  showSelectedImageDetails: propTypes.func,
+  imageName: propTypes.string,
+  imageBasename: propTypes.string,
+  deselectImage: propTypes.func,
+  flashing: propTypes.bool,
+  imageSize: propTypes.number,
+  sourceType: propTypes.string
+}
+
+module.exports = SelectImageButton

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

@@ -0,0 +1,34 @@
+/*
+ * 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,5 +1,5 @@
 /*
- * Copyright 2019 balena.io
+ * 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.
@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import * as React from 'react';
+'use strict'
 
-import { BaseButton } from '../../styled-components';
+/**
+ * @module Etcher.Components.Modal
+ */
 
-export interface FlashAnotherProps {
-	onClick: () => void;
-}
+const angular = require('angular')
+const MODULE_NAME = 'Etcher.Components.Modal'
+const Modal = angular.module(MODULE_NAME, [
+  require('angular-ui-bootstrap')
+])
 
-export const FlashAnother = (props: FlashAnotherProps) => {
-	return (
-		<BaseButton primary onClick={props.onClick}>
-			Flash another
-		</BaseButton>
-	);
-};
+Modal.service('ModalService', require('./services/modal'))
+
+module.exports = MODULE_NAME

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

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

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

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

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

@@ -1,133 +0,0 @@
-/*
- * 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 { Flex, Button, ProgressBar, Txt } from 'rendition';
-import { default as styled } from 'styled-components';
-
-import { fromFlashState } from '../../modules/progress-status';
-import { StepButton } from '../../styled-components';
-
-const FlashProgressBar = styled(ProgressBar)`
-	> div {
-		width: 100%;
-		height: 12px;
-		color: white !important;
-		text-shadow: none !important;
-		transition-duration: 0s;
-		> div {
-			transition-duration: 0s;
-		}
-	}
-
-	width: 100%;
-	height: 12px;
-	margin-bottom: 6px;
-	border-radius: 14px;
-	font-size: 16px;
-	line-height: 48px;
-
-	background: #2f3033;
-`;
-
-interface ProgressButtonProps {
-	type: 'decompressing' | 'flashing' | 'verifying';
-	active: boolean;
-	percentage: number;
-	position: number;
-	disabled: boolean;
-	cancel: (type: string) => void;
-	callback: () => void;
-	warning?: boolean;
-}
-
-const colors = {
-	decompressing: '#00aeef',
-	flashing: '#da60ff',
-	verifying: '#1ac135',
-} as const;
-
-const CancelButton = styled(({ type, onClick, ...props }) => {
-	const status = type === 'verifying' ? 'Skip' : 'Cancel';
-	return (
-		<Button plain onClick={() => onClick(status)} {...props}>
-			{status}
-		</Button>
-	);
-})`
-	font-weight: 600;
-	&&& {
-		width: auto;
-		height: auto;
-		font-size: 14px;
-	}
-`;
-
-export class ProgressButton extends React.PureComponent<ProgressButtonProps> {
-	public render() {
-		const percentage = this.props.percentage;
-		const warning = this.props.warning;
-		const { status, position } = fromFlashState({
-			type: this.props.type,
-			percentage,
-			position: this.props.position,
-		});
-		const type = this.props.type || 'default';
-		if (this.props.active) {
-			return (
-				<>
-					<Flex
-						alignItems="baseline"
-						justifyContent="space-between"
-						width="100%"
-						style={{
-							marginTop: 42,
-							marginBottom: '6px',
-							fontSize: 16,
-							fontWeight: 600,
-						}}
-					>
-						<Flex>
-							<Txt color="#fff">{status}&nbsp;</Txt>
-							<Txt color={colors[type]}>{position}</Txt>
-						</Flex>
-						{type && (
-							<CancelButton
-								type={type}
-								onClick={this.props.cancel}
-								color="#00aeef"
-							/>
-						)}
-					</Flex>
-					<FlashProgressBar background={colors[type]} value={percentage} />
-				</>
-			);
-		}
-		return (
-			<StepButton
-				primary={!warning}
-				warning={warning}
-				onClick={this.props.callback}
-				disabled={this.props.disabled}
-				style={{
-					marginTop: 30,
-				}}
-			>
-				Flash!
-			</StepButton>
-		);
-	}
-}

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

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

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

@@ -1,74 +0,0 @@
-/*
- * 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 { Flex, Txt } from 'rendition';
-
-import DriveSvg from '../../../assets/drive.svg';
-import ImageSvg from '../../../assets/image.svg';
-import { SVGIcon } from '../svg-icon/svg-icon';
-import { middleEllipsis } from '../../utils/middle-ellipsis';
-
-interface ReducedFlashingInfosProps {
-	imageLogo?: string;
-	imageName?: string;
-	imageSize: string;
-	driveTitle: string;
-	driveLabel: string;
-	style?: React.CSSProperties;
-}
-
-export class ReducedFlashingInfos extends React.Component<ReducedFlashingInfosProps> {
-	constructor(props: ReducedFlashingInfosProps) {
-		super(props);
-		this.state = {};
-	}
-
-	public render() {
-		const { imageName = '' } = this.props;
-		return (
-			<Flex
-				flexDirection="column"
-				style={this.props.style ? this.props.style : undefined}
-			>
-				<Flex mb={16}>
-					<SVGIcon
-						disabled
-						width="21px"
-						height="21px"
-						contents={this.props.imageLogo}
-						fallback={ImageSvg}
-						style={{ marginRight: '9px' }}
-					/>
-					<Txt
-						style={{ marginRight: '9px' }}
-						tooltip={{ text: imageName, placement: 'right' }}
-					>
-						{middleEllipsis(imageName, 16)}
-					</Txt>
-					<Txt color="#7e8085">{this.props.imageSize}</Txt>
-				</Flex>
-
-				<Flex>
-					<DriveSvg width="21px" height="21px" style={{ marginRight: '9px' }} />
-					<Txt tooltip={{ text: this.props.driveLabel, placement: 'right' }}>
-						{middleEllipsis(this.props.driveTitle, 16)}
-					</Txt>
-				</Flex>
-			</Flex>
-		);
-	}
-}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 balena.io
+ * 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.
@@ -14,28 +14,21 @@
  * limitations under the License.
  */
 
-import { basename } from 'path';
+'use strict'
 
-export const SUPPORTED_EXTENSIONS = [
-	'bin',
-	'bz2',
-	'dmg',
-	'dsk',
-	'etch',
-	'gz',
-	'hddimg',
-	'img',
-	'iso',
-	'raw',
-	'rpi-sdimg',
-	'sdcard',
-	'vhd',
-	'wic',
-	'xz',
-	'zip',
-];
+/**
+ * @module Etcher.Components.SafeWebview
+ */
 
-export function looksLikeWindowsImage(imagePath: string): boolean {
-	const regex = /windows|win7|win8|win10|winxp/i;
-	return regex.test(basename(imagePath));
-}
+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

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

@@ -1,208 +0,0 @@
-/*
- * 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 * 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;
-	// Webview lifecycle event
-	onWebviewShow?: (isWebviewShowing: boolean) => void;
-	style?: React.CSSProperties;
-}
-
-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.getSync('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() {
-		const {
-			style = {
-				flex: this.state.shouldShow ? undefined : '0 1',
-				width: this.state.shouldShow ? undefined : '0',
-				height: this.state.shouldShow ? undefined : '0',
-			},
-		} = this.props;
-		return (
-			<webview
-				ref={this.webviewRef}
-				partition={ELECTRON_SESSION}
-				style={style}
-			/>
-		);
-	}
-
-	// 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 });
-			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 async newWindow(event: electron.NewWindowEvent) {
-		const url = new window.URL(event.url);
-		if (
-			(url.protocol === 'http:' || url.protocol === 'https:') &&
-			event.disposition === 'foreground-tab' &&
-			// Don't open links if they're disabled by the env var
-			!(await settings.get('disableExternalLinks'))
-		) {
-			electron.shell.openExternal(url.href);
-		}
-	}
-}

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

@@ -1,131 +0,0 @@
-/*
- * 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 GithubSvg from '@fortawesome/fontawesome-free/svgs/brands/github.svg';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Flex, Checkbox, Txt } from 'rendition';
-
-import { version, packageType } from '../../../../../package.json';
-import * as settings from '../../models/settings';
-import * as analytics from '../../modules/analytics';
-import { open as openExternal } from '../../os/open-external/services/open-external';
-import { Modal } from '../../styled-components';
-
-interface Setting {
-	name: string;
-	label: string | JSX.Element;
-}
-
-async function getSettingsList(): Promise<Setting[]> {
-	const list: Setting[] = [
-		{
-			name: 'errorReporting',
-			label: 'Anonymously report errors and usage statistics to balena.io',
-		},
-	];
-	if (['appimage', 'nsis', 'dmg'].includes(packageType)) {
-		list.push({
-			name: 'updatesEnabled',
-			label: 'Auto-updates enabled',
-		});
-	}
-	return list;
-}
-
-interface SettingsModalProps {
-	toggleModal: (value: boolean) => void;
-}
-
-export function SettingsModal({ toggleModal }: SettingsModalProps) {
-	const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]);
-	React.useEffect(() => {
-		(async () => {
-			if (settingsList.length === 0) {
-				setCurrentSettingsList(await getSettingsList());
-			}
-		})();
-	});
-	const [currentSettings, setCurrentSettings] = React.useState<
-		_.Dictionary<boolean>
-	>({});
-	React.useEffect(() => {
-		(async () => {
-			if (_.isEmpty(currentSettings)) {
-				setCurrentSettings(await settings.getAll());
-			}
-		})();
-	});
-
-	const toggleSetting = async (setting: string) => {
-		const value = currentSettings[setting];
-		analytics.logEvent('Toggle setting', { setting, value });
-		await settings.set(setting, !value);
-		setCurrentSettings({
-			...currentSettings,
-			[setting]: !value,
-		});
-	};
-
-	return (
-		<Modal
-			titleElement={
-				<Txt fontSize={24} mb={24}>
-					Settings
-				</Txt>
-			}
-			done={() => toggleModal(false)}
-		>
-			<Flex flexDirection="column">
-				{settingsList.map((setting: Setting, i: number) => {
-					return (
-						<Flex key={setting.name} mb={14}>
-							<Checkbox
-								toggle
-								tabIndex={6 + i}
-								label={setting.label}
-								checked={currentSettings[setting.name]}
-								onChange={() => toggleSetting(setting.name)}
-							/>
-						</Flex>
-					);
-				})}
-				<Flex
-					mt={18}
-					alignItems="center"
-					color="#00aeef"
-					style={{
-						width: 'fit-content',
-						cursor: 'pointer',
-						fontSize: 14,
-					}}
-					onClick={() =>
-						openExternal(
-							'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
-						)
-					}
-				>
-					<GithubSvg
-						height="1em"
-						fill="currentColor"
-						style={{ marginRight: 8 }}
-					/>
-					<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>
-				</Flex>
-			</Flex>
-		</Modal>
-	);
-}

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

@@ -1,760 +0,0 @@
-/*
- * 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 CopySvg from '@fortawesome/fontawesome-free/svgs/solid/copy.svg';
-import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg';
-import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg';
-import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
-import { sourceDestination } from 'etcher-sdk';
-import { ipcRenderer, IpcRendererEvent } from 'electron';
-import * as _ from 'lodash';
-import { GPTPartition, MBRPartition } from 'partitioninfo';
-import * as path from 'path';
-import * as prettyBytes from 'pretty-bytes';
-import * as React from 'react';
-import {
-	Flex,
-	ButtonProps,
-	Modal as SmallModal,
-	Txt,
-	Card as BaseCard,
-	Input,
-	Spinner,
-} from 'rendition';
-import 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 selectionState from '../../models/selection-state';
-import { observe } 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,
-	Modal,
-	StepButton,
-	StepNameButton,
-	ScrollableFlex,
-} from '../../styled-components';
-import { colors } from '../../theme';
-import { middleEllipsis } from '../../utils/middle-ellipsis';
-import { SVGIcon } from '../svg-icon/svg-icon';
-
-import ImageSvg from '../../../assets/image.svg';
-import SrcSvg from '../../../assets/src.svg';
-import { DriveSelector } from '../drive-selector/drive-selector';
-import { DrivelistDrive } from '../../../../shared/drive-constraints';
-
-const recentUrlImagesKey = 'recentUrlImages';
-
-function normalizeRecentUrlImages(urls: any[]): URL[] {
-	if (!Array.isArray(urls)) {
-		urls = [];
-	}
-	urls = urls
-		.map((url) => {
-			try {
-				return new URL(url);
-			} catch (error) {
-				// Invalid URL, skip
-			}
-		})
-		.filter((url) => url !== undefined);
-	urls = _.uniqBy(urls, (url) => url.href);
-	return urls.slice(urls.length - 5);
-}
-
-function getRecentUrlImages(): URL[] {
-	let urls = [];
-	try {
-		urls = JSON.parse(localStorage.getItem(recentUrlImagesKey) || '[]');
-	} catch {
-		// noop
-	}
-	return normalizeRecentUrlImages(urls);
-}
-
-function setRecentUrlImages(urls: URL[]) {
-	const normalized = normalizeRecentUrlImages(urls.map((url: URL) => url.href));
-	localStorage.setItem(recentUrlImagesKey, JSON.stringify(normalized));
-}
-
-const isURL = (imagePath: string) =>
-	imagePath.startsWith('https://') || imagePath.startsWith('http://');
-
-const Card = styled(BaseCard)`
-	hr {
-		margin: 5px 0;
-	}
-`;
-
-// TODO move these styles to rendition
-const ModalText = styled.p`
-	a {
-		color: rgb(0, 174, 239);
-
-		&:hover {
-			color: rgb(0, 139, 191);
-		}
-	}
-`;
-
-function getState() {
-	const image = selectionState.getImage();
-	return {
-		hasImage: selectionState.hasImage(),
-		imageName: image?.name,
-		imageSize: image?.size,
-	};
-}
-
-function isString(value: any): value is string {
-	return typeof value === 'string';
-}
-
-const URLSelector = ({
-	done,
-	cancel,
-}: {
-	done: (imageURL: string) => void;
-	cancel: () => void;
-}) => {
-	const [imageURL, setImageURL] = React.useState('');
-	const [recentImages, setRecentImages] = React.useState<URL[]>([]);
-	const [loading, setLoading] = React.useState(false);
-	React.useEffect(() => {
-		const fetchRecentUrlImages = async () => {
-			const recentUrlImages: URL[] = await getRecentUrlImages();
-			setRecentImages(recentUrlImages);
-		};
-		fetchRecentUrlImages();
-	}, []);
-	return (
-		<Modal
-			cancel={cancel}
-			primaryButtonProps={{
-				disabled: loading || !imageURL,
-			}}
-			action={loading ? <Spinner /> : 'OK'}
-			done={async () => {
-				setLoading(true);
-				const urlStrings = recentImages.map((url: URL) => url.href);
-				const normalizedRecentUrls = normalizeRecentUrlImages([
-					...urlStrings,
-					imageURL,
-				]);
-				setRecentUrlImages(normalizedRecentUrls);
-				await done(imageURL);
-			}}
-		>
-			<Flex flexDirection="column">
-				<Flex style={{ width: '100%' }} flexDirection="column">
-					<Txt mb="10px" fontSize="24px">
-						Use Image URL
-					</Txt>
-					<Input
-						value={imageURL}
-						placeholder="Enter a valid URL"
-						type="text"
-						onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
-							setImageURL(evt.target.value)
-						}
-					/>
-				</Flex>
-				{recentImages.length > 0 && (
-					<Flex flexDirection="column" height="78.6%">
-						<Txt fontSize={18}>Recent</Txt>
-						<ScrollableFlex flexDirection="column">
-							<Card
-								p="10px 15px"
-								rows={recentImages
-									.map((recent) => (
-										<Txt
-											key={recent.href}
-											onClick={() => {
-												setImageURL(recent.href);
-											}}
-											style={{
-												overflowWrap: 'break-word',
-											}}
-										>
-											{recent.pathname.split('/').pop()} - {recent.href}
-										</Txt>
-									))
-									.reverse()}
-							/>
-						</ScrollableFlex>
-					</Flex>
-				)}
-			</Flex>
-		</Modal>
-	);
-};
-
-interface Flow {
-	icon?: JSX.Element;
-	onClick: (evt: React.MouseEvent) => void;
-	label: string;
-}
-
-const FlowSelector = styled(
-	({ flow, ...props }: { flow: Flow } & ButtonProps) => (
-		<StepButton
-			plain={!props.primary}
-			primary={props.primary}
-			onClick={(evt: React.MouseEvent<Element, MouseEvent>) =>
-				flow.onClick(evt)
-			}
-			icon={flow.icon}
-			{...props}
-		>
-			{flow.label}
-		</StepButton>
-	),
-)`
-	border-radius: 24px;
-	color: rgba(255, 255, 255, 0.7);
-
-	:enabled:focus,
-	:enabled:focus svg {
-		color: ${colors.primary.foreground} !important;
-	}
-
-	:enabled:hover {
-		background-color: ${colors.primary.background};
-		color: ${colors.primary.foreground};
-		font-weight: 600;
-
-		svg {
-			color: ${colors.primary.foreground}!important;
-		}
-	}
-`;
-
-export type Source =
-	| typeof sourceDestination.File
-	| typeof sourceDestination.BlockDevice
-	| typeof sourceDestination.Http;
-
-export interface SourceMetadata extends sourceDestination.Metadata {
-	hasMBR?: boolean;
-	partitions?: MBRPartition[] | GPTPartition[];
-	path: string;
-	displayName: string;
-	description: string;
-	SourceType: Source;
-	drive?: DrivelistDrive;
-	extension?: string;
-	archiveExtension?: string;
-}
-
-interface SourceSelectorProps {
-	flashing: boolean;
-}
-
-interface SourceSelectorState {
-	hasImage: boolean;
-	imageName?: string;
-	imageSize?: number;
-	warning: { message: string; title: string | null } | null;
-	showImageDetails: boolean;
-	showURLSelector: boolean;
-	showDriveSelector: boolean;
-	defaultFlowActive: boolean;
-	imageSelectorOpen: boolean;
-}
-
-export class SourceSelector extends React.Component<
-	SourceSelectorProps,
-	SourceSelectorState
-> {
-	private unsubscribe: (() => void) | undefined;
-
-	constructor(props: SourceSelectorProps) {
-		super(props);
-		this.state = {
-			...getState(),
-			warning: null,
-			showImageDetails: false,
-			showURLSelector: false,
-			showDriveSelector: false,
-			defaultFlowActive: true,
-			imageSelectorOpen: false,
-		};
-
-		// Bind `this` since it's used in an event's callback
-		this.onSelectImage = this.onSelectImage.bind(this);
-	}
-
-	public componentDidMount() {
-		this.unsubscribe = observe(() => {
-			this.setState(getState());
-		});
-		ipcRenderer.on('select-image', this.onSelectImage);
-		ipcRenderer.send('source-selector-ready');
-	}
-
-	public componentWillUnmount() {
-		this.unsubscribe?.();
-		ipcRenderer.removeListener('select-image', this.onSelectImage);
-	}
-
-	private async onSelectImage(_event: IpcRendererEvent, imagePath: string) {
-		await this.selectSource(
-			imagePath,
-			isURL(imagePath) ? sourceDestination.Http : sourceDestination.File,
-		).promise;
-	}
-
-	private async createSource(selected: string, SourceType: Source) {
-		try {
-			selected = await replaceWindowsNetworkDriveLetter(selected);
-		} catch (error) {
-			analytics.logException(error);
-		}
-
-		if (SourceType === sourceDestination.File) {
-			return new sourceDestination.File({
-				path: selected,
-			});
-		}
-		return new sourceDestination.Http({ url: selected });
-	}
-
-	private reselectSource() {
-		analytics.logEvent('Reselect image', {
-			previousImage: selectionState.getImage(),
-		});
-
-		selectionState.deselectImage();
-	}
-
-	private selectSource(
-		selected: string | DrivelistDrive,
-		SourceType: Source,
-	): { promise: Promise<void>; cancel: () => void } {
-		let cancelled = false;
-		return {
-			cancel: () => {
-				cancelled = true;
-			},
-			promise: (async () => {
-				const sourcePath = isString(selected) ? selected : selected.device;
-				let source;
-				let metadata: SourceMetadata | undefined;
-				if (isString(selected)) {
-					if (SourceType === sourceDestination.Http && !isURL(selected)) {
-						this.handleError(
-							'Unsupported protocol',
-							selected,
-							messages.error.unsupportedProtocol(),
-						);
-						return;
-					}
-
-					if (supportedFormats.looksLikeWindowsImage(selected)) {
-						analytics.logEvent('Possibly Windows image', { image: selected });
-						this.setState({
-							warning: {
-								message: messages.warning.looksLikeWindowsImage(),
-								title: 'Possible Windows image detected',
-							},
-						});
-					}
-					source = await this.createSource(selected, SourceType);
-
-					if (cancelled) {
-						return;
-					}
-
-					try {
-						const innerSource = await source.getInnerSource();
-						if (cancelled) {
-							return;
-						}
-						metadata = await this.getMetadata(innerSource, selected);
-						if (cancelled) {
-							return;
-						}
-						metadata.SourceType = SourceType;
-
-						if (!metadata.hasMBR) {
-							analytics.logEvent('Missing partition table', { metadata });
-							this.setState({
-								warning: {
-									message: messages.warning.missingPartitionTable(),
-									title: 'Missing partition table',
-								},
-							});
-						}
-					} catch (error) {
-						this.handleError(
-							'Error opening source',
-							sourcePath,
-							messages.error.openSource(sourcePath, error.message),
-							error,
-						);
-					} finally {
-						try {
-							await source.close();
-						} catch (error) {
-							// Noop
-						}
-					}
-				} else {
-					if (selected.partitionTableType === null) {
-						analytics.logEvent('Missing partition table', { selected });
-						this.setState({
-							warning: {
-								message: messages.warning.driveMissingPartitionTable(),
-								title: 'Missing partition table',
-							},
-						});
-					}
-					metadata = {
-						path: selected.device,
-						displayName: selected.displayName,
-						description: selected.displayName,
-						size: selected.size as SourceMetadata['size'],
-						SourceType: sourceDestination.BlockDevice,
-						drive: selected,
-					};
-				}
-
-				if (metadata !== undefined) {
-					selectionState.selectSource(metadata);
-					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: {
-							...metadata,
-							logo: Boolean(metadata.logo),
-							blockMap: Boolean(metadata.blockMap),
-						},
-					});
-				}
-			})(),
-		};
-	}
-
-	private handleError(
-		title: string,
-		sourcePath: string,
-		description: string,
-		error?: Error,
-	) {
-		const imageError = errors.createUserError({
-			title,
-			description,
-		});
-		osDialog.showError(imageError);
-		if (error) {
-			analytics.logException(error);
-			return;
-		}
-		analytics.logEvent(title, { path: sourcePath });
-	}
-
-	private async getMetadata(
-		source: sourceDestination.SourceDestination,
-		selected: string | DrivelistDrive,
-	) {
-		const metadata = (await source.getMetadata()) as SourceMetadata;
-		const partitionTable = await source.getPartitionTable();
-		if (partitionTable) {
-			metadata.hasMBR = true;
-			metadata.partitions = partitionTable.partitions;
-		} else {
-			metadata.hasMBR = false;
-		}
-		if (isString(selected)) {
-			metadata.extension = path.extname(selected).slice(1);
-			metadata.path = selected;
-		}
-		return metadata;
-	}
-
-	private async openImageSelector() {
-		analytics.logEvent('Open image selector');
-		this.setState({ imageSelectorOpen: true });
-
-		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');
-				return;
-			}
-			await this.selectSource(imagePath, sourceDestination.File).promise;
-		} catch (error) {
-			exceptionReporter.report(error);
-		} finally {
-			this.setState({ imageSelectorOpen: false });
-		}
-	}
-
-	private async onDrop(event: React.DragEvent<HTMLDivElement>) {
-		const [file] = event.dataTransfer.files;
-		if (file) {
-			await this.selectSource(file.path, sourceDestination.File).promise;
-		}
-	}
-
-	private openURLSelector() {
-		analytics.logEvent('Open image URL selector');
-
-		this.setState({
-			showURLSelector: true,
-		});
-	}
-
-	private openDriveSelector() {
-		analytics.logEvent('Open drive selector');
-
-		this.setState({
-			showDriveSelector: true,
-		});
-	}
-
-	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.getImage()?.path,
-		});
-
-		this.setState({
-			showImageDetails: true,
-		});
-	}
-
-	private setDefaultFlowActive(defaultFlowActive: boolean) {
-		this.setState({ defaultFlowActive });
-	}
-
-	// TODO add a visual change when dragging a file over the selector
-	public render() {
-		const { flashing } = this.props;
-		const { showImageDetails, showURLSelector, showDriveSelector } = this.state;
-		const selectionImage = selectionState.getImage();
-		let image: SourceMetadata | DrivelistDrive =
-			selectionImage !== undefined ? selectionImage : ({} as SourceMetadata);
-
-		image = image.drive ?? image;
-
-		let cancelURLSelection = () => {
-			// noop
-		};
-		image.name = image.description || image.name;
-		const imagePath = image.path || image.displayName || '';
-		const imageBasename = path.basename(imagePath);
-		const imageName = image.name || '';
-		const imageSize = image.size;
-		const imageLogo = image.logo || '';
-
-		return (
-			<>
-				<Flex
-					flexDirection="column"
-					alignItems="center"
-					onDrop={(evt: React.DragEvent<HTMLDivElement>) => this.onDrop(evt)}
-					onDragEnter={(evt: React.DragEvent<HTMLDivElement>) =>
-						this.onDragEnter(evt)
-					}
-					onDragOver={(evt: React.DragEvent<HTMLDivElement>) =>
-						this.onDragOver(evt)
-					}
-				>
-					<SVGIcon
-						contents={imageLogo}
-						fallback={ImageSvg}
-						style={{
-							marginBottom: 30,
-						}}
-					/>
-
-					{selectionImage !== undefined ? (
-						<>
-							<StepNameButton
-								plain
-								onClick={() => this.showSelectedImageDetails()}
-								tooltip={imageName || imageBasename}
-							>
-								{middleEllipsis(imageName || imageBasename, 20)}
-							</StepNameButton>
-							{!flashing && (
-								<ChangeButton
-									plain
-									mb={14}
-									onClick={() => this.reselectSource()}
-								>
-									Remove
-								</ChangeButton>
-							)}
-							{!_.isNil(imageSize) && (
-								<DetailsText>{prettyBytes(imageSize)}</DetailsText>
-							)}
-						</>
-					) : (
-						<>
-							<FlowSelector
-								disabled={this.state.imageSelectorOpen}
-								primary={this.state.defaultFlowActive}
-								key="Flash from file"
-								flow={{
-									onClick: () => this.openImageSelector(),
-									label: 'Flash from file',
-									icon: <FileSvg height="1em" fill="currentColor" />,
-								}}
-								onMouseEnter={() => this.setDefaultFlowActive(false)}
-								onMouseLeave={() => this.setDefaultFlowActive(true)}
-							/>
-							<FlowSelector
-								key="Flash from URL"
-								flow={{
-									onClick: () => this.openURLSelector(),
-									label: 'Flash from URL',
-									icon: <LinkSvg height="1em" fill="currentColor" />,
-								}}
-								onMouseEnter={() => this.setDefaultFlowActive(false)}
-								onMouseLeave={() => this.setDefaultFlowActive(true)}
-							/>
-							<FlowSelector
-								key="Clone drive"
-								flow={{
-									onClick: () => this.openDriveSelector(),
-									label: 'Clone drive',
-									icon: <CopySvg height="1em" fill="currentColor" />,
-								}}
-								onMouseEnter={() => this.setDefaultFlowActive(false)}
-								onMouseLeave={() => this.setDefaultFlowActive(true)}
-							/>
-						</>
-					)}
-				</Flex>
-
-				{this.state.warning != null && (
-					<SmallModal
-						titleElement={
-							<span>
-								<ExclamationTriangleSvg fill="#fca321" height="1em" />{' '}
-								<span>{this.state.warning.title}</span>
-							</span>
-						}
-						action="Continue"
-						cancel={() => {
-							this.setState({ warning: null });
-							this.reselectSource();
-						}}
-						done={() => {
-							this.setState({ warning: null });
-						}}
-						primaryButtonProps={{ warning: true, primary: false }}
-					>
-						<ModalText
-							dangerouslySetInnerHTML={{ __html: this.state.warning.message }}
-						/>
-					</SmallModal>
-				)}
-
-				{showImageDetails && (
-					<SmallModal
-						title="Image"
-						done={() => {
-							this.setState({ showImageDetails: false });
-						}}
-					>
-						<Txt.p>
-							<Txt.span bold>Name: </Txt.span>
-							<Txt.span>{imageName || imageBasename}</Txt.span>
-						</Txt.p>
-						<Txt.p>
-							<Txt.span bold>Path: </Txt.span>
-							<Txt.span>{imagePath}</Txt.span>
-						</Txt.p>
-					</SmallModal>
-				)}
-
-				{showURLSelector && (
-					<URLSelector
-						cancel={() => {
-							cancelURLSelection();
-							this.setState({
-								showURLSelector: false,
-							});
-						}}
-						done={async (imageURL: string) => {
-							// Avoid analytics and selection state changes
-							// if no file was resolved from the dialog.
-							if (!imageURL) {
-								analytics.logEvent('URL selector closed');
-							} else {
-								let promise;
-								({ promise, cancel: cancelURLSelection } = this.selectSource(
-									imageURL,
-									sourceDestination.Http,
-								));
-								await promise;
-							}
-							this.setState({
-								showURLSelector: false,
-							});
-						}}
-					/>
-				)}
-
-				{showDriveSelector && (
-					<DriveSelector
-						write={false}
-						multipleSelection={false}
-						titleLabel="Select source"
-						emptyListLabel="Plug a source drive"
-						emptyListIcon={<SrcSvg width="40px" />}
-						cancel={() => {
-							this.setState({
-								showDriveSelector: false,
-							});
-						}}
-						done={async (drives: DrivelistDrive[]) => {
-							if (drives.length) {
-								await this.selectSource(
-									drives[0],
-									sourceDestination.BlockDevice,
-								);
-							}
-							this.setState({
-								showDriveSelector: false,
-							});
-						}}
-					/>
-				)}
-			</>
-		);
-	}
-}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 balena.io
+ * 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.
@@ -14,20 +14,19 @@
  * limitations under the License.
  */
 
-import { DrivelistDrive } from '../../../shared/drive-constraints';
-import { Actions, store } from './store';
+'use strict'
 
-export function hasAvailableDrives() {
-	return getDrives().length > 0;
-}
+/* eslint-disable jsdoc/require-example */
 
-export function setDrives(drives: any[]) {
-	store.dispatch({
-		type: Actions.SET_AVAILABLE_TARGETS,
-		data: drives,
-	});
-}
+/**
+ * @module Etcher.Components.SVGIcon
+ */
 
-export function getDrives(): DrivelistDrive[] {
-	return store.getState().toJS().availableDrives;
-}
+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

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

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

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

@@ -1,74 +0,0 @@
-/*
- * 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 React from 'react';
-
-const domParser = new window.DOMParser();
-
-const DEFAULT_SIZE = '40px';
-
-/**
- * @summary Try to parse SVG contents and return it data encoded
- *
- */
-function tryParseSVGContents(contents?: string): string | undefined {
-	if (contents === undefined) {
-		return;
-	}
-	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)}`;
-	}
-}
-
-interface SVGIconProps {
-	// Optional string representing the SVG contents to be tried
-	contents?: string;
-	// Fallback SVG element to show if `contents` is invalid/undefined
-	fallback: React.FunctionComponent<React.SVGProps<HTMLOrSVGElement>>;
-	// SVG image width unit
-	width?: string;
-	// SVG image height unit
-	height?: string;
-	// Should the element visually appear grayed out and disabled?
-	disabled?: boolean;
-	style?: React.CSSProperties;
-}
-
-/**
- * @summary SVG element that takes file contents
- */
-export class SVGIcon extends React.PureComponent<SVGIconProps> {
-	public render() {
-		const svgData = tryParseSVGContents(this.props.contents);
-		const { width, height, style = {} } = this.props;
-		style.width = width || DEFAULT_SIZE;
-		style.height = height || DEFAULT_SIZE;
-		if (svgData !== undefined) {
-			return (
-				<img
-					className={this.props.disabled ? 'disabled' : ''}
-					style={style}
-					src={svgData}
-				/>
-			);
-		}
-		const { fallback: FallbackSVG } = this.props;
-		return <FallbackSVG style={style} />;
-	}
-}

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

@@ -1,157 +0,0 @@
-/*
- * 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 ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
-import * as React from 'react';
-import { Flex, FlexProps, Txt } from 'rendition';
-
-import {
-	getDriveImageCompatibilityStatuses,
-	DriveStatus,
-} from '../../../../shared/drive-constraints';
-import { compatibility, warning } from '../../../../shared/messages';
-import * as prettyBytes from 'pretty-bytes';
-import { getImage, getSelectedDrives } from '../../models/selection-state';
-import {
-	ChangeButton,
-	DetailsText,
-	StepButton,
-	StepNameButton,
-} from '../../styled-components';
-import { middleEllipsis } from '../../utils/middle-ellipsis';
-
-interface TargetSelectorProps {
-	targets: any[];
-	disabled: boolean;
-	openDriveSelector: () => void;
-	reselectDrive: () => void;
-	flashing: boolean;
-	show: boolean;
-	tooltip: string;
-}
-
-function getDriveWarning(status: DriveStatus) {
-	switch (status.message) {
-		case compatibility.containsImage():
-			return warning.sourceDrive();
-		case compatibility.largeDrive():
-			return warning.largeDriveSize();
-		case compatibility.system():
-			return warning.systemDrive();
-		default:
-			return '';
-	}
-}
-
-const DriveCompatibilityWarning = ({
-	warnings,
-	...props
-}: {
-	warnings: string[];
-} & FlexProps) => {
-	const systemDrive = warnings.find(
-		(message) => message === warning.systemDrive(),
-	);
-	return (
-		<Flex tooltip={warnings.join(', ')} {...props}>
-			<ExclamationTriangleSvg
-				fill={systemDrive ? '#fca321' : '#8f9297'}
-				height="1em"
-			/>
-		</Flex>
-	);
-};
-
-export function TargetSelectorButton(props: TargetSelectorProps) {
-	const targets = getSelectedDrives();
-
-	if (targets.length === 1) {
-		const target = targets[0];
-		const warnings = getDriveImageCompatibilityStatuses(
-			target,
-			getImage(),
-			true,
-		).map(getDriveWarning);
-		return (
-			<>
-				<StepNameButton plain tooltip={props.tooltip}>
-					{warnings.length > 0 && (
-						<DriveCompatibilityWarning warnings={warnings} mr={2} />
-					)}
-					{middleEllipsis(target.description, 20)}
-				</StepNameButton>
-				{!props.flashing && (
-					<ChangeButton plain mb={14} onClick={props.reselectDrive}>
-						Change
-					</ChangeButton>
-				)}
-				{target.size != null && (
-					<DetailsText>{prettyBytes(target.size)}</DetailsText>
-				)}
-			</>
-		);
-	}
-
-	if (targets.length > 1) {
-		const targetsTemplate = [];
-		for (const target of targets) {
-			const warnings = getDriveImageCompatibilityStatuses(
-				target,
-				getImage(),
-				true,
-			).map(getDriveWarning);
-			targetsTemplate.push(
-				<DetailsText
-					key={target.device}
-					tooltip={`${target.description} ${target.displayName} ${
-						target.size != null ? prettyBytes(target.size) : ''
-					}`}
-					px={21}
-				>
-					{warnings.length > 0 ? (
-						<DriveCompatibilityWarning warnings={warnings} mr={2} />
-					) : null}
-					<Txt mr={2}>{middleEllipsis(target.description, 14)}</Txt>
-					{target.size != null && <Txt>{prettyBytes(target.size)}</Txt>}
-				</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
-			primary
-			tabIndex={targets.length > 0 ? -1 : 2}
-			disabled={props.disabled}
-			onClick={props.openDriveSelector}
-		>
-			Select target
-		</StepButton>
-	);
-}

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

@@ -1,176 +0,0 @@
-/*
- * 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 { scanner } from 'etcher-sdk';
-import * as React from 'react';
-import { Flex, Txt } from 'rendition';
-
-import {
-	DriveSelector,
-	DriveSelectorProps,
-} from '../drive-selector/drive-selector';
-import {
-	isDriveSelected,
-	getImage,
-	getSelectedDrives,
-	deselectDrive,
-	selectDrive,
-} from '../../models/selection-state';
-import { observe } from '../../models/store';
-import * as analytics from '../../modules/analytics';
-import { TargetSelectorButton } from './target-selector-button';
-
-import TgtSvg from '../../../assets/tgt.svg';
-import DriveSvg from '../../../assets/drive.svg';
-import { warning } from '../../../../shared/messages';
-
-export const getDriveListLabel = () => {
-	return getSelectedDrives()
-		.map((drive: any) => {
-			return `${drive.description} (${drive.displayName})`;
-		})
-		.join('\n');
-};
-
-const getDriveSelectionStateSlice = () => ({
-	driveListLabel: getDriveListLabel(),
-	targets: getSelectedDrives(),
-	image: getImage(),
-});
-
-export const TargetSelectorModal = (
-	props: Omit<
-		DriveSelectorProps,
-		'titleLabel' | 'emptyListLabel' | 'multipleSelection' | 'emptyListIcon'
-	>,
-) => (
-	<DriveSelector
-		multipleSelection={true}
-		titleLabel="Select target"
-		emptyListLabel="Plug a target drive"
-		emptyListIcon={<TgtSvg width="40px" />}
-		showWarnings={true}
-		selectedList={getSelectedDrives()}
-		updateSelectedList={getSelectedDrives}
-		{...props}
-	/>
-);
-
-export const selectAllTargets = (
-	modalTargets: scanner.adapters.DrivelistDrive[],
-) => {
-	const selectedDrivesFromState = getSelectedDrives();
-	const deselected = selectedDrivesFromState.filter(
-		(drive) =>
-			!modalTargets.find((modalTarget) => modalTarget.device === drive.device),
-	);
-	// deselect drives
-	deselected.forEach((drive) => {
-		analytics.logEvent('Toggle drive', {
-			drive,
-			previouslySelected: true,
-		});
-		deselectDrive(drive.device);
-	});
-	// select drives
-	modalTargets.forEach((drive) => {
-		// Don't send events for drives that were already selected
-		if (!isDriveSelected(drive.device)) {
-			analytics.logEvent('Toggle drive', {
-				drive,
-				previouslySelected: false,
-			});
-		}
-		selectDrive(drive.device);
-	});
-};
-
-interface TargetSelectorProps {
-	disabled: boolean;
-	hasDrive: boolean;
-	flashing: boolean;
-}
-
-export const TargetSelector = ({
-	disabled,
-	hasDrive,
-	flashing,
-}: TargetSelectorProps) => {
-	// TODO: inject these from redux-connector
-	const [{ driveListLabel, targets }, setStateSlice] = React.useState(
-		getDriveSelectionStateSlice(),
-	);
-	const [showTargetSelectorModal, setShowTargetSelectorModal] = React.useState(
-		false,
-	);
-
-	React.useEffect(() => {
-		return observe(() => {
-			setStateSlice(getDriveSelectionStateSlice());
-		});
-	}, []);
-
-	const hasSystemDrives = targets.some((target) => target.isSystem);
-	return (
-		<Flex flexDirection="column" alignItems="center">
-			<DriveSvg
-				className={disabled ? 'disabled' : ''}
-				width="40px"
-				style={{
-					marginBottom: 30,
-				}}
-			/>
-
-			<TargetSelectorButton
-				disabled={disabled}
-				show={!hasDrive}
-				tooltip={driveListLabel}
-				openDriveSelector={() => {
-					setShowTargetSelectorModal(true);
-				}}
-				reselectDrive={() => {
-					analytics.logEvent('Reselect drive');
-					setShowTargetSelectorModal(true);
-				}}
-				flashing={flashing}
-				targets={targets}
-			/>
-
-			{hasSystemDrives ? (
-				<Txt
-					color="#fca321"
-					style={{
-						position: 'absolute',
-						bottom: '25px',
-					}}
-				>
-					Warning: {warning.systemDrive()}
-				</Txt>
-			) : null}
-
-			{showTargetSelectorModal && (
-				<TargetSelectorModal
-					write={true}
-					cancel={() => setShowTargetSelectorModal(false)}
-					done={(modalTargets) => {
-						selectAllTargets(modalTargets);
-						setShowTargetSelectorModal(false);
-					}}
-				/>
-			)}
-		</Flex>
-	);
-};

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

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

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

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

@@ -0,0 +1,6 @@
+<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

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

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

@@ -0,0 +1,52 @@
+/*
+ * 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/styles/_warning-modal.scss

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2016 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.modal-warning-modal .modal-content {
+  width: 350px;
+}
+
+.modal-warning-modal .modal-title .glyphicon {
+  color: $palette-theme-danger-background;
+}
+
+.modal-warning-modal .modal-body {
+  max-height: 200px;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,25 @@
+<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

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