wip

Change-type: patch

.editorconfig

@@ -7,6 +7,7 @@ indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
+insert_final_newline = true
 
 [*.md]
 trim_trailing_whitespace = false
@@ -16,6 +17,3 @@ indent_style = tab
 
 [*.ts]
 indent_style = tab
-
-[*.tsx]
-indent_style = tab

.gitattributes

@@ -1,11 +1,7 @@
-# default
-* text
-
 # 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
@@ -30,9 +26,7 @@ Makefile text
 *.yml text
 *.patch text
 *.txt text
-*.tpl text
 CODEOWNERS text
-*.plist text
 
 # Binary files (no line-ending conversions)
 *.bz2 binary diff=hex
@@ -62,7 +56,3 @@ CODEOWNERS text
 *.ttf binary diff=hex
 xz-without-extension binary diff=hex
 wmic-output.txt binary diff=hex
-
-# gitsecret
-*.secret binary
-.gitsecret/** binary

.github/ISSUE_TEMPLATE.md

@@ -1,11 +1,6 @@
 - **Etcher version:** 
 - **Operating system and architecture:** 
 - **Image flashed:** 
-- **What do you think should have happened:** <!-- or a step by step reproduction process -->
-- **What happened:**
 - **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. -->
 
-<!-- issues with missing information will be labeled as not-enough-info and closed shortly -->
-<!-- please try to include as many influencing elements as possible are you root, does any other process block the device, etc. -->
-<!-- if you find a solution in the meantime thank you for sharing the fix and not just closing / abandoning your issue -->
+<!-- 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. -->

.github/actions/publish/action.yml

@@ -1,162 +0,0 @@
----
-name: package and publish GitHub (draft) release
-# https://github.com/product-os/flowzone/tree/master/.github/actions
-inputs:
-  json:
-    description: "JSON stringified object containing all the inputs from the calling workflow"
-    required: true
-  secrets:
-    description: "JSON stringified object containing all the secrets from the calling workflow"
-    required: true
-
-  # --- custom environment
-  XCODE_APP_LOADER_EMAIL:
-    type: string
-    default: "accounts+apple@balena.io"
-  NODE_VERSION:
-    type: string
-    default: "16.x"
-  VERBOSE:
-    type: string
-    default: "true"
-
-runs:
-  # https://docs.github.com/en/actions/creating-actions/creating-a-composite-action
-  using: "composite"
-  steps:
-    - name: Download custom source artifact
-      uses: actions/download-artifact@v3
-      with:
-        name: custom-${{ github.event.pull_request.head.sha || github.event.head_commit.id }}-${{ runner.os }}
-        path: ${{ runner.temp }}
-
-    - name: Extract custom source artifact
-      shell: pwsh
-      working-directory: .
-      run: tar -xf ${{ runner.temp }}/custom.tgz
-
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ inputs.NODE_VERSION }}
-        cache: npm
-
-    - name: Install yq
-      shell: bash --noprofile --norc -eo pipefail -x {0}
-      run: choco install yq
-      if: runner.os == 'Windows'
-
-    # https://www.electron.build/code-signing.html
-    # https://github.com/Apple-Actions/import-codesign-certs
-    - name: Import Apple code signing certificate
-      if: runner.os == 'macOS'
-      uses: apple-actions/import-codesign-certs@v1
-      with:
-        p12-file-base64: ${{ fromJSON(inputs.secrets).APPLE_SIGNING }}
-        p12-password: ${{ fromJSON(inputs.secrets).APPLE_SIGNING_PASSWORD }}
-
-    - name: Import Windows code signing certificate
-      if: runner.os == 'Windows'
-      shell: powershell
-      run: |
-        Set-Content -Path ${{ runner.temp }}/certificate.base64 -Value $env:WINDOWS_CERTIFICATE
-        certutil -decode ${{ runner.temp }}/certificate.base64 ${{ runner.temp }}/certificate.pfx
-        Remove-Item -path ${{ runner.temp }} -include certificate.base64
-
-        Import-PfxCertificate `
-          -FilePath ${{ runner.temp }}/certificate.pfx `
-          -CertStoreLocation Cert:\CurrentUser\My `
-          -Password (ConvertTo-SecureString -String $env:WINDOWS_CERTIFICATE_PASSWORD -Force -AsPlainText)
-
-        Remove-Item -path ${{ runner.temp }} -include certificate.pfx
-
-      env:
-        WINDOWS_CERTIFICATE: ${{ fromJSON(inputs.secrets).WINDOWS_SIGNING }}
-        WINDOWS_CERTIFICATE_PASSWORD: ${{ fromJSON(inputs.secrets).WINDOWS_SIGNING_PASSWORD }}
-
-    # ... or refactor (e.g.) https://github.com/samuelmeuli/action-electron-builder
-    # https://github.com/product-os/scripts/tree/master/electron
-    # https://github.com/product-os/scripts/tree/master/shared
-    # https://github.com/product-os/balena-concourse/blob/master/pipelines/github-events/template.yml
-    - name: Package release
-      id: package_release
-      shell: bash --noprofile --norc -eo pipefail -x {0}
-      run: |
-        set -ea
-
-        [[ '${{ inputs.VERBOSE }}' =~ on|On|Yes|yes|true|True ]] && set -x
-
-        runner_os="$(echo "${RUNNER_OS}" | tr '[:upper:]' '[:lower:]')"
-        runner_arch="$(echo "${RUNNER_ARCH}" | tr '[:upper:]' '[:lower:]')"
-
-        ELECTRON_BUILDER_ARCHITECTURE="${runner_arch}"
-        APPLICATION_VERSION="$(jq -r '.version' package.json)"
-        ARCHITECTURE_FLAGS="--${ELECTRON_BUILDER_ARCHITECTURE}"
-
-        if [[ $runner_os =~ linux ]]; then
-            ELECTRON_BUILDER_OS='--linux'
-            TARGETS="$(yq e .linux.target[] electron-builder.yml)"
-
-        elif [[ $runner_os =~ darwin|macos|osx ]]; then
-            CSC_KEY_PASSWORD=${{ fromJSON(inputs.secrets).APPLE_SIGNING_PASSWORD }}
-            CSC_KEYCHAIN=signing_temp
-            CSC_LINK=${{ fromJSON(inputs.secrets).APPLE_SIGNING }}
-            ELECTRON_BUILDER_OS='--mac'
-            TARGETS="$(yq e .mac.target[] electron-builder.yml)"
-
-        elif [[ $runner_os =~ windows|win ]]; then
-            ARCHITECTURE_FLAGS="--ia32 ${ARCHITECTURE_FLAGS}"
-            CSC_KEY_PASSWORD=${{ fromJSON(inputs.secrets).WINDOWS_SIGNING_PASSWORD }}
-            CSC_LINK=${{ fromJSON(inputs.secrets).WINDOWS_SIGNING }}
-            ELECTRON_BUILDER_OS='--win'
-            TARGETS="$(yq e .win.target[] electron-builder.yml)"
-
-        else
-            exit 1
-        fi
-
-        npm link electron-builder
-
-        for target in ${TARGETS}; do
-            electron-builder ${ELECTRON_BUILDER_OS} ${target} ${ARCHITECTURE_FLAGS} \
-              --c.extraMetadata.analytics.sentry.token='https://739bbcfc0ba4481481138d3fc831136d@o95242.ingest.sentry.io/4504451487301632' \
-              --c.extraMetadata.analytics.amplitude.token='balena-etcher' \
-              --c.extraMetadata.packageType="${target}"
-
-            find dist -type f -maxdepth 1
-        done
-
-        echo "version=${APPLICATION_VERSION}" >> $GITHUB_OUTPUT
-
-      env:
-        # Apple notarization (afterSignHook.js)
-        XCODE_APP_LOADER_EMAIL: ${{ inputs.XCODE_APP_LOADER_EMAIL }}
-        XCODE_APP_LOADER_PASSWORD: ${{ fromJSON(inputs.secrets).XCODE_APP_LOADER_PASSWORD }}
-        # https://github.blog/2020-08-03-github-actions-improvements-for-fork-and-pull-request-workflows/#improvements-for-public-repository-forks
-        # https://docs.github.com/en/actions/managing-workflow-runs/approving-workflow-runs-from-public-forks#about-workflow-runs-from-public-forks
-        CSC_FOR_PULL_REQUEST: true
-
-    # https://www.electron.build/auto-update.html#staged-rollouts
-    - name: Configure staged rollout(s)
-      shell: bash --noprofile --norc -eo pipefail -x {0}
-      run: |
-        set -ea
-
-        [[ '${{ inputs.VERBOSE }}' =~ on|On|Yes|yes|true|True ]] && set -x
-
-        percentage="$(cat < repo.yml | yq e .triggerNotification.stagingPercentage)"
-
-        find dist -type f -maxdepth 1 \
-          -name "latest*.yml" \
-          -exec yq -i e .version=\"${{ steps.package_release.outputs.version }}\" {} \;
-
-        find dist -type f -maxdepth 1 \
-          -name "latest*.yml" \
-          -exec yq -i e .stagingPercentage=\"$percentage\" {} \;
-
-    - name: Upload artifacts
-      uses: actions/upload-artifact@v3
-      with:
-        name: gh-release-${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
-        path: dist
-        retention-days: 1

.github/actions/test/action.yml

@@ -1,58 +0,0 @@
----
-name: test release
-# https://github.com/product-os/flowzone/tree/master/.github/actions
-inputs:
-  json:
-    description: "JSON stringified object containing all the inputs from the calling workflow"
-    required: true
-  secrets:
-    description: "JSON stringified object containing all the secrets from the calling workflow"
-    required: true
-
-  # --- custom environment
-  NODE_VERSION:
-    type: string
-    default: "16.x"
-  VERBOSE:
-    type: string
-    default: "true"
-
-runs:
-  # https://docs.github.com/en/actions/creating-actions/creating-a-composite-action
-  using: "composite"
-  steps:
-    # https://github.com/actions/setup-node#caching-global-packages-data
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ inputs.NODE_VERSION }}
-        cache: npm
-
-    - name: Test release
-      shell: bash --noprofile --norc -eo pipefail -x {0}
-      run: |
-        set -ea
-
-        [[ '${{ inputs.VERBOSE }}' =~ on|On|Yes|yes|true|True ]] && set -x
-
-        runner_os="$(echo "${RUNNER_OS}" | tr '[:upper:]' '[:lower:]')"
-
-        npm run flowzone-preinstall-${runner_os}
-        npm ci
-        npm run build
-        npm run test-${runner_os}
-
-      env:
-        # https://www.electronjs.org/docs/latest/api/environment-variables
-        ELECTRON_NO_ATTACH_CONSOLE: true
-
-    - name: Compress custom source
-      shell: pwsh
-      run: tar -acf ${{ runner.temp }}/custom.tgz .
-
-    - name: Upload custom artifact
-      uses: actions/upload-artifact@v3
-      with:
-        name: custom-${{ github.event.pull_request.head.sha || github.event.head_commit.id }}-${{ runner.os }}
-        path: ${{ runner.temp }}/custom.tgz
-        retention-days: 1

.github/workflows/flowzone.yml

@@ -1,30 +0,0 @@
-name: Flowzone
-
-on:
-  pull_request:
-    types: [opened, synchronize, closed]
-    branches: [main, master]
-  # allow external contributions to use secrets within trusted code
-  pull_request_target:
-    types: [opened, synchronize, closed]
-    branches: [main, master]
-
-jobs:
-  flowzone:
-    name: Flowzone
-    uses: product-os/flowzone/.github/workflows/flowzone.yml@master
-    # prevent duplicate workflows and only allow one `pull_request` or `pull_request_target` for
-    # internal or external contributions respectively
-    if: |
-      (github.event.pull_request.head.repo.full_name == github.repository && github.event_name == 'pull_request') ||
-      (github.event.pull_request.head.repo.full_name != github.repository && github.event_name == 'pull_request_target')
-    secrets: inherit
-    with:
-      tests_run_on: '["ubuntu-20.04","macos-latest","windows-2019"]'
-      restrict_custom_actions: false
-      github_prerelease: true
-      repo_config: true
-      repo_description: "Flash OS images to SD cards & USB drives, safely and easily."
-      repo_homepage: https://etcher.io/
-      repo_enable_wiki: true
-      cloudflare_website: "etcher"

.github/workflows/winget.yml

@@ -1,13 +0,0 @@
-name: Publish to WinGet
-on:
-  release:
-    types: [released]
-jobs:
-  publish:
-    runs-on: windows-latest # action can only be run on windows
-    steps:
-      - uses: vedantmgoyal2009/winget-releaser@v1
-        with:
-          identifier: Balena.Etcher
-          installers-regex: 'balenaEtcher-Setup.*.exe$'
-          token: ${{ secrets.WINGET_PAT }}

.gitignore

@@ -47,13 +47,3 @@ node_modules
 # OSX files
 
 .DS_Store
-
-# VSCode files
-
-.vscode
-.gitsecret/keys/random_seed
-!*.secret
-secrets/APPLE_SIGNING_PASSWORD.txt
-secrets/WINDOWS_SIGNING_PASSWORD.txt
-secrets/XCODE_APP_LOADER_PASSWORD.txt
-secrets/WINDOWS_SIGNING.pfx

.gitsecret/paths/mapping.cfg

@@ -1,5 +0,0 @@
-secrets/APPLE_SIGNING_PASSWORD.txt:5c9cfeb1ea5142b547bc842cc6e0b4a932641ae9811ee47abe2c3953f2a4de5d
-secrets/WINDOWS_SIGNING_PASSWORD.txt:852e431628494f2559793c39cf09c34e9406dd79bb15b90c9f88194020470568
-secrets/XCODE_APP_LOADER_PASSWORD.txt:005eb9a3c7035c77232973c9355468fc396b94e62783fb8e6dce16bce95b94a1
-secrets/WINDOWS_SIGNING.pfx:929f401db38733ffc41572539de7c0d938023af51ed06c205a72a71c1f815714
-secrets/APPLE_SIGNING.p12:61abf7b4ff2eec76ce889d71bcdd568b99a6a719b4947ac20f03966265b0946a

.nvmrc

@@ -1 +0,0 @@
-16

.resinci.json

@@ -0,0 +1,116 @@
+{
+  "electron": {
+    "npm_version": "6.7.0",
+    "dependencies": {
+      "linux": [
+        "libudev-dev",
+        "libusb-1.0-0-dev",
+        "libyaml-dev",
+        "libgtk-3-0",
+        "libatk-bridge2.0-0",
+        "libdbus-1-3",
+        "libc6"
+      ]
+    },
+    "builder": {
+      "appId": "io.balena.etcher",
+      "copyright": "Copyright 2016-2019 Balena Ltd",
+      "productName": "balenaEtcher",
+      "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",
+        "!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"
+      ],
+      "mac": {
+        "category": "public.app-category.developer-tools"
+      },
+      "dmg": {
+        "iconSize": 110,
+        "contents": [
+          {
+            "x": 140,
+            "y": 245
+          },
+          {
+            "x": 415,
+            "y": 245,
+            "type": "link",
+            "path": "/Applications"
+          }
+        ],
+        "window": {
+          "width": 544,
+          "height": 407
+        }
+      },
+      "linux": {
+        "category": "Utility",
+        "packageCategory": "utils",
+        "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": {
+        "priority": "optional",
+        "depends": [
+          "polkit-1-auth-agent | policykit-1-gnome | polkit-kde-1"
+        ]
+      }
+    }
+  }
+}

.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
+

CODEOWNERS

@@ -0,0 +1,2 @@
+* @thundron @zvin @jviotti
+/scripts @nazrhom

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
@@ -66,9 +74,6 @@ else
 		ifeq ($(shell uname -m),x86_64)
 			HOST_ARCH = x64
 		endif
-		ifeq ($(shell uname -m),arm64)
-			HOST_ARCH = aarch64
-		endif
 	endif
 endif
 
@@ -88,10 +93,12 @@ TARGET_ARCH ?= $(HOST_ARCH)
 # ---------------------------------------------------------------------
 # Electron
 # ---------------------------------------------------------------------
-electron-develop:
-	git submodule update --init && \
-	npm ci && \
-	npm run webpack
+electron-develop: | $(BUILD_TEMPORARY_DIRECTORY)
+	$(RESIN_SCRIPTS)/electron/install.sh \
+		-b $(shell pwd) \
+		-r $(TARGET_ARCH) \
+		-s $(PLATFORM) \
+		-m $(NPM_VERSION)
 
 electron-test:
 	$(RESIN_SCRIPTS)/electron/test.sh \
@@ -107,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
@@ -117,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)"
@@ -140,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,15 +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.com/documentation/computers/raspberry-pi.html#usb-device-boot-mode).
+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
 
@@ -21,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].
 
@@ -30,122 +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.
 
-## Packages
-
-> [![Hosted By: Cloudsmith](https://img.shields.io/badge/OSS%20hosting%20by-cloudsmith-blue?logo=cloudsmith&style=for-the-badge)](https://cloudsmith.com) \
-Package repository hosting is graciously provided by  [Cloudsmith](https://cloudsmith.com).
-Cloudsmith is the only fully hosted, cloud-native, universal package management solution, that
-enables your organization to create, store and share packages in any format, to any place, with total
-confidence.
-
 #### Debian and Ubuntu based Package Repository (GNU/Linux x86/x64)
 
-> Detailed or alternative steps in the [instructions by Cloudsmith](https://cloudsmith.io/~balena/repos/etcher/setup/#formats-deb)
+1. Add Etcher debian repository:
 
-1. Add Etcher Debian repository:
+    ```sh
+    echo "deb https://deb.etcher.io stable etcher" | sudo tee /etc/apt/sources.list.d/balena-etcher.list
+    ```
 
-   ```sh
-   curl -1sLf \
-      'https://dl.cloudsmith.io/public/balena/etcher/setup.deb.sh' \
-      | sudo -E bash
-   ```
+2. Trust Bintray.com's GPG key:
 
-2. Update and install:
+    ```sh
+    sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 379CE192D401AB61
+    ```
 
-   ```sh
-   sudo apt-get update #you can use apt instead of apt-get as well
-   sudo apt-get install balena-etcher-electron
-   ```
-   >Note: after v1.7.9 the package name changed to `balena-etcher` (no electron at the end)
+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)
-
-> Detailed or alternative steps in the [instructions by Cloudsmith](https://cloudsmith.io/~balena/repos/etcher/setup/#formats-rpm)
-
-
-##### DNF
+#### Redhat (RHEL) and Fedora based Package Repository (GNU/Linux x86/x64)
 
 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 dnf install -y balena-etcher-electron
-   ```
-   >Note: after v1.7.9 the package name changed to `balena-etcher` (no electron at the end)
-
-###### 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
-   ```
-   >Note: after v1.7.9 the package name changed to `balena-etcher` (no electron at the end)
-
-###### 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
-```
-
-#### OpenSUSE LEAP & Tumbleweed install (zypper)
-
-1. Add the repo
-
-   ```sh
-   curl -1sLf \
-   'https://dl.cloudsmith.io/public/balena/etcher/setup.rpm.sh' \
-   | sudo -E bash
-   ```
-2. Update and install
-
-   ```sh
-   sudo zypper up
-   sudo zypper install balena-etcher-electron
-   ```
-   >Note: after v1.7.9 the package name changed to `balena-etcher` (no electron at the end)
+    ```sh
+    sudo yum install -y balena-etcher-electron
+    ```
+    or
+    ```sh
+    sudo dnf install -y balena-etcher-electron
+    ```
 
 ##### Uninstall
 
 ```sh
-sudo zypper rm balena-etcher-electron
-# remove the repo
-sudo zypper rr balena-etcher
-sudo zypper rr balena-etcher-source
+sudo yum remove -y balena-etcher-electron
+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)
@@ -160,31 +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:
+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
-yay -S balena-etcher
+brew cask install balenaetcher
 ```
 
 ##### Uninstall
 
 ```sh
-yay -R balena-etcher
-```
-#### WinGet (Windows)
-
-This package is updated by [gh-action](https://github.com/vedantmgoyal2009/winget-releaser), and is kept up to date automatically.
-
-```sh
-winget install balenaEtcher #or Balena.Etcher
-```
-
-##### Uninstall
-
-```sh
-winget uninstall balenaEtcher
+brew cask uninstall balenaetcher
 ```
 
 #### Chocolatey (Windows)
@@ -204,22 +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

@@ -1,16 +1,9 @@
-Getting help with BalenaEtcher
-===============================
+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
 ------
 
@@ -22,7 +15,7 @@ a look at the existing threads before opening a new one!
 Make sure to mention the following information to help us provide better
 support:
 
-- The BalenaEtcher version you're running.
+- The Etcher version you're running.
 
 - The operating system you're running Etcher in.
 
@@ -32,12 +25,10 @@ support:
 GitHub
 ------
 
-If you encounter an issue or have a suggestion, head on over to BalenaEtcher's [issue
+If you encounter an issue or have a suggestion, head on over to Etcher's [issue
 tracker][issues] and if there isn't a ticket covering it, [create
 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

after-install.tpl

@@ -1,11 +0,0 @@
-#!/bin/bash
-
-# Link to the binary
-# Must hardcode balenaEtcher directory; no variable available
-ln -sf '/opt/balenaEtcher/${executable}' '/usr/bin/${executable}'
-
-# SUID chrome-sandbox for Electron 5+
-chmod 4755 '/opt/balenaEtcher/chrome-sandbox' || true
-
-update-mime-database /usr/share/mime || true
-update-desktop-database /usr/share/applications || true

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,25 +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 = process.env.XCODE_APP_LOADER_EMAIL || 'accounts+apple@balena.io'
-  const appleIdPassword = process.env.XCODE_APP_LOADER_PASSWORD
-
-  // https://github.com/electron/notarize/blob/main/README.md
-  await notarize({
-    appBundleId: 'io.balena.etcher',
-    appPath: `${appOutDir}/${appName}.app`,
-    appleId,
-    appleIdPassword
-  })
-}
-
-exports.default = main

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/COMMIT-GUIDELINES.md

@@ -12,29 +12,67 @@ over the commit history.
 - Be able to automatically reference relevant changes from a dependency
 upgrade.
 
+The guidelines are inspired by the [AngularJS git commit
+guidelines][angular-commit-guidelines].
 
 Commit structure
 ----------------
 
-Each commit message needs to specify the semver-type. Which can be `patch|minor|major`.
-See the [Semantic Versioning][semver] specification for a more detailed explanation of the meaning of these types.
-See balena commit guidelines for more info about the whole commit structure.
+Each commit message consists of a header, a body and a footer. The header has a
+special format that includes a type, a scope and a subject.
 
 ```
-<semver-type>: <subject>
-```
-or
-```
-<subject>
+<type>(<scope>): <subject>
 <BLANK LINE>
-<details>
+<body>
 <BLANK LINE>
-Change-Type: <semver-type>
+<footer>
 ```
 
 The subject should not contain more than 70 characters, including the type and
 scope, and the body should be wrapped at 72 characters.
 
+Type
+----
+
+Must be one of the following:
+
+- `feat`: A new feature.
+- `fix`: A bug fix.
+- `minifix`: A minimal fix that doesn't warrant an entry in the CHANGELOG.
+- `docs`: Documentation only changes.
+- `style`: Changes that do not affect the meaning of the code (white-space,
+formatting, missing semi-colons, JSDoc annotations, comments, etc).
+- `refactor`: A code change that neither fixes a bug nor adds a feature.
+- `perf`: A code change that improves performance.
+- `test`: Adding missing tests.
+- `chore`: Changes to the build process or auxiliary tools and libraries.
+- `upgrade`: A version upgrade of a project dependency.
+
+Scope
+-----
+
+The scope is required for types that make sense, such as `feat`, `fix`,
+`test`, etc. Certain commit types, such as `chore` might not have a clearly
+defined scope, in which case its better to omit it.
+
+Subject
+-------
+
+The subject should contain a short description of the change:
+
+- Use the imperative, present tense.
+- Don't capitalize the first letter.
+- No dot (.) at the end.
+
+Footer
+------
+
+The footer contains extra information about the commit, such as tags.
+
+**Breaking Changes** should start with the word BREAKING CHANGE: with a space
+or two newlines. The rest of the commit message is then used for this.
+
 Tags
 ----
 
@@ -83,4 +121,125 @@ Closes: https://github.com/balena-io/etcher/issues/XXX
 Fixes: https://github.com/balena-io/etcher/issues/XXX
 ```
 
+### `Change-Type: <type>`
+
+This tag is used to determine the change type that a commit introduces. The
+following types are supported:
+
+- `major`
+- `minor`
+- `patch`
+
+This tag can be omitted for commits that don't change the application from the
+user's point of view, such as for refactoring commits.
+
+Examples:
+
+```
+Change-Type: major
+Change-Type: minor
+Change-Type: patch
+```
+
+See the [Semantic Versioning][semver] specification for a more detailed
+explanation of the meaning of these types.
+
+### `Changelog-Entry: <message>`
+
+This tag is used to describe the changes introduced by the commit in a more
+human style that would fit the `CHANGELOG.md` better.
+
+If the commit type is either `fix` or `feat`, the commit will take part in the
+CHANGELOG. If this tag is not defined, then the commit subject will be used
+instead.
+
+You explicitly can use this tag to make a commit whose type is not `fix` nor
+`feat` appear in the `CHANGELOG.md`.
+
+Since whatever your write here will be shown *as it is* in the `CHANGELOG.md`,
+take some time to write a decent entry. Consider the following guidelines:
+
+- Use the imperative, present tense.
+- Capitalize the first letter.
+
+There is no fixed length limit for the contents of this tag, but always strive
+to make as short as possible without compromising its quality.
+
+Examples:
+
+```
+Changelog-Entry: Fix EPERM errors when flashing to a GPT drive.
+```
+
+Complete examples
+-----------------
+
+```
+fix(GUI): ignore extensions before the first non-compressed extension
+
+Currently, we extract all the extensions from an image path and report back
+that the image is invalid if *any* of the extensions is not valid , however
+this can cause trouble with images including information between dots that are
+not strictly extensions, for example:
+
+    elementaryos-0.3.2-stable-i386.20151209.iso
+
+Etcher will consider `20151209` to be an invalid extension and therefore
+will prevent such image from being selected at all.
+
+As a way to allow these corner cases but still make use of our enforced check
+controls, the validation routine now only consider extensions starting from the
+first non compressed extension.
+
+Change-Type: patch
+Changelog-Entry: Don't interpret image file name information between dots as image extensions.
+Fixes: https://github.com/balena-io/etcher/issues/492
+```
+
+***
+
+```
+upgrade: etcher-image-write to v5.0.2
+
+This version contains a fix to an `EPERM` issue happening to some Windows user,
+triggered by the `write` system call during the first ~5% of a flash given that
+the operating system still thinks the drive has a file system.
+
+Change-Type: patch
+Changelog-Entry: Upgrade `etcher-image-write` to v5.0.2.
+Link: https://github.com/balena-io-modules/etcher-image-write/blob/master/CHANGELOG.md#502---2016-06-27
+Fixes: https://github.com/balena-io/etcher/issues/531
+```
+
+***
+
+```
+feat(GUI): implement update notifier functionality
+
+Auto-update functionality is not ready for usage. As a workaround to
+prevent users staying with older versions, we now check for updates at
+startup, and if the user is not running the latest version, we present a
+modal informing the user of the availiblity of a new version, and
+provide a call to action to open the Etcher website in his web browser.
+
+Extra features:
+
+- The user can skip the update, and tell the program to delay the
+notification for 7 days.
+
+Misc changes:
+
+- Center modal with flexbox, to allow more flexibility on the modal height.
+interacting with the S3 server.
+- Implement `ManifestBindService`, which now serves as a backend for the
+`manifest-bind` directive to allow the directive's functionality to be
+re-used by other services.
+- Namespace checkbox styles that are specific to the settings page.
+
+Change-Type: minor
+Changelog-Entry: Check for updates and show a modal prompting the user to download the latest version.
+Closes: https://github.com/balena-io/etcher/issues/396
+```
+
+[angular-commit-guidelines]: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit
 [semver]: http://semver.org

docs/CONTRIBUTING.md

@@ -17,11 +17,11 @@ Developing
 
 #### Common
 
-- [NodeJS](https://nodejs.org) (at least v16.11)
-- [Python 3](https://www.python.org)
+- [NodeJS](https://nodejs.org) (at least v6.11)
+- [Python 2.7](https://www.python.org)
 - [jq](https://stedolan.github.io/jq/)
 - [curl](https://curl.haxx.se/)
-- [npm](https://www.npmjs.com/)
+- [npm](https://www.npmjs.com/) (version 6.7)
 
 ```sh
 pip install -r requirements.txt
@@ -33,16 +33,16 @@ You might need to run this with `sudo` or administrator permissions.
 
 - [NSIS v2.51](http://nsis.sourceforge.net/Main_Page) (v3.x won't work)
 - Either one of the following:
-  - [Visual C++ 2019 Build Tools](https://visualstudio.microsoft.com/vs/features/cplusplus/) containing standalone compilers, libraries and scripts
-  - The [windows-build-tools](https://github.com/felixrieseberg/windows-build-tools#windows-build-tools) should be installed along with NodeJS
-  - [Visual Studio Community 2019](https://visualstudio.microsoft.com/vs/) (free) (other editions, like Professional and Enterprise, should work too)
-    **NOTE:** Visual Studio doesn't install C++ by default. You have to rerun the
+  - [Visual C++ 2015 Build Tools](http://landinghub.visualstudio.com/visual-cpp-build-tools) containing standalone compilers, libraries and scripts
+  - Install the [windows-build-tools](https://github.com/felixrieseberg/windows-build-tools) via npm with `npm install --global windows-build-tools`
+  - [Visual Studio Community 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48146) (free) (other editions, like Professional and Enterprise, should work too)
+    **NOTE:** Visual Studio 2015 doesn't install C++ by default. You have to rerun the
     setup, select "Modify" and then check `Visual C++ -> Common Tools for Visual
-    C++` (see http://stackoverflow.com/a/31955339)
+    C++ 2015` (see http://stackoverflow.com/a/31955339)
 - [MinGW](http://www.mingw.org)
 
-You might need to `npm config set msvs_version 2019` for node-gyp to correctly detect
-the version of Visual Studio you're using (in this example VS2019).
+You might need to `npm config set msvs_version 2015` for node-gyp to correctly detect
+the version of Visual Studio you're using (in this example VS2015).
 
 The following MinGW packages are required:
 
@@ -61,7 +61,7 @@ as well.
 
 #### Linux
 
-- `libudev-dev` for libusb (for example install with `sudo apt install libudev-dev`, or on fedora `systemd-devel` contains the required package)
+- `libudev-dev` for libusb (install with `sudo apt install libudev-dev` for example)
 
 ### Cloning the project
 
@@ -70,13 +70,28 @@ git clone --recursive https://github.com/balena-io/etcher
 cd etcher
 ```
 
+### Installing npm dependencies
+
+**NOTE:** Please make use of the following command to install npm dependencies rather
+than simply running `npm install` given that we need to do extra configuration
+to make sure native dependencies are correctly compiled for Electron, otherwise
+the application might not run successfully.
+
+If you're on Windows, **run the command from the _Developer Command Prompt for
+VS2015_**, to ensure all Visual Studio command utilities are available in the
+`%PATH%`.
+
+```sh
+make electron-develop
+```
+
 ### Running the application
 
 #### GUI
 
 ```sh
 # Build the GUI
-npm run webpack #or npm run build
+make webpack
 # Start Electron
 npm start
 ```
@@ -104,6 +119,10 @@ systems as they can before sending a pull request.
 *The test suite is run automatically by CI servers when you send a pull
 request.*
 
+We also rely on various `make` targets to perform some common tasks:
+
+- `make lint`: Run the linter.
+- `make sass`: Compile SCSS files.
 
 We make use of [EditorConfig] to communicate indentation, line endings and
 other text editing default. We encourage you to install the relevant plugin in
@@ -113,7 +132,20 @@ process.
 Updating a dependency
 ---------------------
 
-- Commit *both* `package.json` and `package-lock.json`.
+Given we use [npm shrinkwrap][shrinkwrap], we have to take extra steps to make
+sure the `npm-shrinkwrap.json` file gets updated correctly when we update a
+dependency.
+
+Use the following steps to ensure everything goes flawlessly:
+
+- Run `make electron-develop` to ensure you don't have extraneous dependencies
+  you might have brought during development, or you are running older
+  dependencies because you come from another branch or reference.
+
+- Install the new version of the dependency. For example: `npm install --save
+  <package>@<version>`. This will update the `npm-shrinkwrap.json` file.
+
+- Commit *both* `package.json` and `npm-shrinkwrap.json`.
 
 Diffing Binaries
 ----------------

docs/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).

docs/MAINTAINERS.md

@@ -8,14 +8,10 @@ Releasing
 
 ### Release Types
 
-- **draft**: A continues snapshot of current master, made by the CI services
-- **pre-release** (default): A continues snapshot of current master, made by the CI services
-- **release**: Full releases
-
-Draft release is created from each PR, tagged with the branch name.
-All merged PR will generate a new tag/version as a *pre-release*.
-Mark the pre-release as final when it is necessary, then distribute the packages in alternative channels as necessary.
+- **snapshot** (default): A continues snapshot of current master, made by the CI services
+- **production**: Full releases
 
+### Flight Plan
 
 #### Preparation
 
@@ -35,10 +31,11 @@ Mark the pre-release as final when it is necessary, then distribute the packages
 - [Post release note to forums](https://forums.balena.io/c/etcher)
 - [Submit Windows binaries to Symantec for whitelisting](#submitting-binaries-to-symantec)
 - [Update the website](https://github.com/balena-io/etcher-homepage)
-- Wait 2-3 hours for analytics (Sentry, Amplitude) to trickle in and check for elevated error rates, or regressions
+- Wait 2-3 hours for analytics (Sentry, Mixpanel) to trickle in and check for elevated error rates, or regressions
 - If regressions arise; pull the release, and release a patched version, else:
-- [Upload deb & rpm packages to Cloudfront](#uploading-packages-to-cloudfront)
-- Post changelog with `#release-notes` tag on internal chat
+- [Upload deb & rpm packages to Bintray](#uploading-packages-to-bintray)
+- [Upload build artifacts to Amazon S3](#uploading-binaries-to-amazon-s3)
+- Post changelog with `#release-notes` tag on Flowdock
 - If this release packs noteworthy major changes:
   - Write a blog post about it, and / or
   - Write about it to the Etcher mailing list
@@ -51,7 +48,7 @@ Make sure to set the analytics tokens when generating production release binarie
 
 ```bash
 export ANALYTICS_SENTRY_TOKEN="xxxxxx"
-export ANALYTICS_AMPLITUDE_TOKEN="xxxxxx"
+export ANALYTICS_MIXPANEL_TOKEN="xxxxxx"
 ```
 
 #### Linux
@@ -60,16 +57,46 @@ export ANALYTICS_AMPLITUDE_TOKEN="xxxxxx"
 
 **NOTE:** Make sure to adjust the path as necessary (here the Etcher repository has been cloned to `/home/$USER/code/etcher`)
 
+```bash
+./scripts/build/docker/run-command.sh -r x64 -s . -c "make distclean"
+```
+
 ##### Generating artifacts
 
-The artifacts are generated by the CI and published as draft-release or pre-release.
-`electron-builder` is used to create the packaged application. 
+```bash
+# x64
+
+# Build Debian packages
+./scripts/build/docker/run-command.sh -r x64 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-debian"
+# Build RPM packages
+./scripts/build/docker/run-command.sh -r x64 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-redhat"
+# Build AppImages
+./scripts/build/docker/run-command.sh -r x64 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-appimage"
+
+# x86
+
+# Build Debian packages
+./scripts/build/docker/run-command.sh -r x86 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-debian"
+# Build RPM packages
+./scripts/build/docker/run-command.sh -r x86 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-redhat"
+# Build AppImages
+./scripts/build/docker/run-command.sh -r x86 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-appimage"
+```
 
 #### Mac OS
 
 **ATTENTION:** For production releases you'll need the code-signing key,
 and set `CSC_NAME` to generate signed binaries on Mac OS.
 
+```bash
+make electron-develop
+
+# Build the zip
+make RELEASE_TYPE=production electron-installer-app-zip
+# Build the dmg
+make RELEASE_TYPE=production electron-installer-dmg
+```
+
 #### Windows
 
 **ATTENTION:** For production releases you'll need the code-signing key,
@@ -78,10 +105,38 @@ and set `CSC_LINK`, and `CSC_KEY_PASSWORD` to generate signed binaries on Window
 **NOTE:**
 - Keep in mind to also generate artifacts for x86, with `TARGET_ARCH=x86`.
 
+```bash
+make electron-develop
 
-### Uploading packages to Cloudfront
+# Build the Portable version
+make RELEASE_TYPE=production electron-installer-portable
+# Build the Installer
+make RELEASE_TYPE=production electron-installer-nsis
+```
 
-Log in to cloudfront and upload the `rpm` and `deb` files. 
+### Uploading packages to Bintray
+
+```bash
+export BINTRAY_USER="username@account"
+export BINTRAY_API_KEY="youruserapikey"
+```
+
+```bash
+./scripts/publish/bintray.sh -c "etcher" -t "production" -v "1.2.1" -o "etcher" -p "debian" -y "debian" -r "x64" -f "dist/etcher-electron_1.2.1_amd64.deb"
+./scripts/publish/bintray.sh -c "etcher" -t "production" -v "1.2.1" -o "etcher" -p "debian" -y "debian" -r "x86" -f "dist/etcher-electron_1.2.1_i386.deb"
+./scripts/publish/bintray.sh -c "etcher" -t "production" -v "1.2.1" -o "etcher" -p "redhat" -y "redhat" -r "x64" -f "dist/etcher-electron-1.2.1.x86_64.rpm"
+./scripts/publish/bintray.sh -c "etcher" -t "production" -v "1.2.1" -o "etcher" -p "redhat" -y "redhat" -r "x86" -f "dist/etcher-electron-1.2.1.i686.rpm"
+```
+
+### Uploading binaries to Amazon S3
+
+```bash
+export S3_KEY="..."
+```
+
+```bash
+./scripts/publish/aws-s3.sh -b "balena-production-downloads" -v "1.2.1" -p "etcher" -f "dist/<filename>"
+```
 
 ### Dealing with a Problematic Release
 

docs/MANUAL-TESTING.md

@@ -112,4 +112,4 @@ Analytics
 - [ ] Disable analytics, open DevTools Network pane or a packet sniffer, and
   check that no request is sent
 - [ ] **Disable analytics, refresh application from DevTools (using Cmd-R or
-  F5), and check that initial events are not sent to Amplitude**
+  F5), and check that initial events are not sent to Mixpanel**

docs/PUBLISHING.md

@@ -7,9 +7,44 @@ systems.
 Release Types
 -------------
 
-Etcher supports **pre-release** and **final** release types as does Github. Each is
-published to Github releases.
-The release version is generated automatically from the commit messasges.
+Etcher supports **production** and **snapshot** release types. Each is
+published to a different S3 bucket, and production release types are code
+signed, while snapshot release types aren't and include a short git commit-hash
+as a build number. For example, `1.0.0-beta.19` is a production release type,
+while `1.0.0-beta.19+531ab82` is a snapshot release type.
+
+In terms of comparison: `1.0.0-beta.19` (production) < `1.0.0-beta.19+531ab82`
+(snapshot) < `1.0.0-rc.1` (production) < `1.0.0-rc.1+7fde24a` (snapshot) <
+`1.0.0` (production) < `1.0.0+2201e5f` (snapshot). Keep in mind that if you're
+running a production release type, you'll only be prompted to update to
+production release types, and if you're running a snapshot release type, you'll
+only be prompted to update to other snapshot release types.
+
+The build system creates (and publishes) snapshot release types by default, but
+you can build a specific release type by setting the `RELEASE_TYPE` make
+variable.  For example:
+
+```sh
+make <target> RELEASE_TYPE=snapshot
+make <target> RELEASE_TYPE=production
+```
+
+We can control the version range a specific Etcher version will consider when
+showing the update notification dialog by tweaking the `updates.semverRange`
+property of `package.json`.
+
+Update Channels
+---------------
+
+Etcher has a setting to include the unstable update channel. If this option is
+set, Etcher will consider both stable and unstable versions when showing the
+update notifier dialog. Unstable versions are the ones that contain a `beta`
+pre-release tag. For example:
+
+- Production unstable version: `1.4.0-beta.1`
+- Snapshot unstable version: `1.4.0-beta.1+7fde24a`
+- Production stable version: `1.4.0`
+- Snapshot stable version: `1.4.0+7fde24a`
 
 Signing
 -------
@@ -38,19 +73,63 @@ Packaging
 
 The resulting installers will be saved to `dist/out`.
 
-Run the following commands on all platforms with the right arguments:
+Run the following commands:
+
+### OS X
 
 ```sh
-./node_modules/electron-builder build <...>
+make electron-installer-dmg
+make electron-installer-app-zip
 ```
 
+### GNU/Linux
 
-Publishing to Cloudfront
+```sh
+make electron-installer-appimage
+make electron-installer-debian
+```
+
+### Windows
+
+```sh
+make electron-installer-zip
+make electron-installer-nsis
+```
+
+Publishing to Bintray
 ---------------------
 
-We publish GNU/Linux Debian packages to [Cloudfront][cloudfront].
+We publish GNU/Linux Debian packages to [Bintray][bintray].
 
-Log in to cloudfront and upload the `rpm` and `deb` files.
+Make sure you set the following environment variables:
+
+- `BINTRAY_USER`
+- `BINTRAY_API_KEY`
+
+Run the following command:
+
+```sh
+make publish-bintray-debian
+```
+
+Publishing to S3
+----------------
+
+- [AWS CLI][aws-cli]
+
+Make sure you have the [AWS CLI tool][aws-cli] installed and configured to
+access balena.io's production or snapshot S3 bucket.
+
+Run the following command to publish all files for the current combination of
+_platform_ and _arch_ (building them if necessary):
+
+```sh
+make publish-aws-s3
+```
+
+Also add links to each AWS S3 file in [GitHub Releases][github-releases]. See
+[`v1.0.0-beta.17`](https://github.com/balena-io/etcher/releases/tag/v1.0.0-beta.17)
+as an example.
 
 Publishing to Homebrew Cask
 ---------------------------
@@ -68,12 +147,8 @@ Post messages to the [Etcher forum][balena-forum-etcher] announcing the new vers
 of Etcher, and including the relevant section of the Changelog.
 
 [aws-cli]: https://aws.amazon.com/cli
-[cloudfront]: https://cloudfront.com
+[bintray]: https://bintray.com
 [etcher-cask-file]: https://github.com/caskroom/homebrew-cask/blob/master/Casks/balenaetcher.rb
 [homebrew-cask]: https://github.com/caskroom/homebrew-cask
 [balena-forum-etcher]: https://forums.balena.io/c/etcher
 [github-releases]: https://github.com/balena-io/etcher/releases
-
-Updating EFP / Success-Banner
------------------------------
-Etcher Featured Project is automatically run based on an algorithm which promoted projects from the balena marketplace which have been contributed by the community, the algorithm prioritises projects which give uses the best experience. Editing both EFP and the Etcher Success-Banner can only be done by someone from balena, instruction are on the [Etcher-EFP repo (private)](https://github.com/balena-io/etcher-efp)

docs/USER-DOCUMENTATION.md

@@ -3,11 +3,6 @@ Etcher User Documentation
 
 This document contains how-tos and FAQs oriented to Etcher users.
 
-Config
-------
-Etcher's configuration is saved to the `config.json` file in the apps folder.
-Not all the options are surfaced to the UI. You may edit this file to tweak settings even before launching the app.
-
 Why is my drive not bootable?
 -----------------------------
 
@@ -135,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
 ------------------------
 
@@ -164,18 +174,6 @@ pre-installed in all modern Windows versions.
 
 - Run `clean`. This command will completely clean your drive by erasing any
   existent filesystem.
-  
-- Run `create partition primary`. This command will create a new partition.
-
-- Run  `active`. This command will active the partition.
-
-- Run  `list partition`. This command will show available partition.
-
-- Run  `select partition N`, where `N` corresponds to the id of the newly available partition.
-
-- Run `format override quick`. This command will format the partition. You can choose a specific formatting by adding `FS=xx` where `xx` could be `NTFS or FAT or FAT32` after `format`. Example : `format FS=NTFS override quick`
-
-- Run `exit` to quit diskpart.
 
 ### OS X
 
@@ -183,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
@@ -223,5 +221,3 @@ macOS 10.10 (Yosemite) and newer versions][electron-supported-platforms].
 [unetbootin]: https://unetbootin.github.io
 [windows-iot-dashboard]: https://developer.microsoft.com/en-us/windows/iot/downloads
 [woeusb]: https://github.com/slacka/WoeUSB
-
-See [PUBLISHING](/docs/PUBLISHING.md) for more details about release types.

docs/_config.yml

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

electron-builder.yml

@@ -1,23 +1,19 @@
-# https://www.electron.build/configuration/configuration
 appId: io.balena.etcher
-copyright: Copyright 2016-2023 Balena Ltd
+copyright: Copyright 2016-2019 Balena Ltd
 productName: balenaEtcher
-afterPack: ./afterPack.js
-afterSign: ./afterSignHook.js
-asar: false
+npmRebuild: true
+nodeGypRebuild: true
+publish: null
 files:
+  - lib
+  - lib/gui/app/index.html
   - generated
-  - lib/shared/catalina-sudo/sudo-askpass.osascript-zh.js
-  - lib/shared/catalina-sudo/sudo-askpass.osascript-en.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}"
-  target:
-    - dmg
 dmg:
   background: assets/dmg/background.tiff
   icon: assets/icon.icns
@@ -34,10 +30,6 @@ dmg:
     height: 405
 win:
   icon: assets/icon.ico
-  target:
-    - zip
-    - nsis
-    - portable
 nsis:
   oneClick: true
   runAfterFinish: true
@@ -50,23 +42,17 @@ portable:
   artifactName: "${productName}-Portable-${version}.${ext}"
   requestExecutionLevel: user
 linux:
-  icon: assets/iconset
-  target:
-    - AppImage
-    - rpm
-    - deb
   category: Utility
   packageCategory: utils
-  executableName: balena-etcher
+  executableName: balena-etcher-electron
   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.
-appImage:
-  artifactName: ${productName}-${version}-${env.ELECTRON_BUILDER_ARCHITECTURE}.${ext}
+  icon: assets/iconset
 deb:
   priority: optional
-  compression: bzip2
   depends:
-    - gconf-service
     - gconf2
+    - gconf-service
+    - libappindicator1
     - libasound2
     - libatk1.0-0
     - libc6
@@ -76,7 +62,6 @@ deb:
     - libexpat1
     - libfontconfig1
     - libfreetype6
-    - libgbm1
     - libgcc1
     - libgconf-2-4
     - libgdk-pixbuf2.0-0
@@ -86,7 +71,7 @@ deb:
     - libnotify4
     - libnspr4
     - libnss3
-    - libpango1.0-0 | libpango-1.0-0
+    - libpango1.0-0
     - libstdc++6
     - libx11-6
     - libxcomposite1
@@ -100,11 +85,7 @@ deb:
     - libxss1
     - libxtst6
     - polkit-1-auth-agent | policykit-1-gnome | polkit-kde-1
-  afterInstall: "./after-install.tpl"
 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,367 +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 remote from '@electron/remote';
-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 { 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';
-import * as i18next from 'i18next';
-
-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.com/documentation/computers/compute-module.html#flashing-the-compute-module-emmc',
-			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;
-
-analytics.initAnalytics();
-
-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: i18next.t('yesExit'),
-			rejectionLabel: i18next.t('cancel'),
-			title: i18next.t('reallyExit'),
-			description: messages.warning.exitWhileFlashing(),
-		});
-		if (confirmed) {
-			analytics.logEvent('Close confirmed while flashing', {
-				flashInstanceUuid: flashState.getFlashUuid(),
-			});
-
-			// This circumvents the 'beforeunload' event unlike
-			// remote.app.quit() which does not.
-			remote.process.exit(EXIT_CODES.SUCCESS);
-		}
-
-		analytics.logEvent('Close rejected while flashing', {
-			applicationSessionUuid,
-			flashingWorkflowUuid,
-		});
-		popupExists = false;
-	} catch (error: any) {
-		exceptionReporter.report(error);
-	}
-});
-
-export async function main() {
-	try {
-		const { init: ledsInit } = require('./models/leds');
-		await ledsInit();
-	} catch (error: any) {
-		exceptionReporter.report(error);
-	}
-
-	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,563 +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';
-import { middleEllipsis } from '../../utils/middle-ellipsis';
-import * as i18next from 'i18next';
-
-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' | 'onSelect'> {
-	write: boolean;
-	multipleSelection: boolean;
-	showWarnings?: boolean;
-	cancel: (drives: DrivelistDrive[]) => void;
-	done: (drives: DrivelistDrive[]) => void;
-	titleLabel: string;
-	emptyListLabel: string;
-	emptyListIcon: JSX.Element;
-	selectedList?: DrivelistDrive[];
-	updateSelectedList?: () => DrivelistDrive[];
-	onSelect?: (drive: DrivelistDrive) => void;
-}
-
-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>>;
-	originalList: DrivelistDrive[];
-
-	constructor(props: DriveSelectorProps) {
-		super(props);
-
-		const defaultMissingDriversModalState: { drive?: DriverlessDrive } = {};
-		const selectedList = this.props.selectedList || [];
-		this.originalList = [...(this.props.selectedList || [])];
-
-		this.state = {
-			drives: getDrives(),
-			image: getImage(),
-			missingDriversModal: defaultMissingDriversModalState,
-			selectedList,
-			showSystemDrives: false,
-		};
-
-		this.tableColumns = [
-			{
-				field: 'description',
-				label: i18next.t('drives.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}>
-									{middleEllipsis(description, 32)}
-								</Txt>
-							</Flex>
-						);
-					}
-					return <Txt>{description}</Txt>;
-				},
-			},
-			{
-				field: 'description',
-				key: 'size',
-				label: i18next.t('drives.size'),
-				render: (_description: string, drive: Drive) => {
-					if (isDrivelistDrive(drive) && drive.size !== null) {
-						return prettyBytes(drive.size);
-					}
-				},
-			},
-			{
-				field: 'description',
-				key: 'link',
-				label: i18next.t('drives.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) ||
-			(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 } });
-		}
-	}
-
-	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 }}
-						>
-							{i18next.t('drives.find', { length: drives.length })}
-						</Txt>
-					</Flex>
-				}
-				titleDetails={<Txt fontSize={11}>{getDrives().length} found</Txt>}
-				cancel={() => cancel(this.originalList)}
-				done={() => done(selectedList)}
-				action={i18next.t('drives.select', { 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 (rows.length === 0) {
-										newSelection = [];
-									}
-									const deselecting = selectedList.filter(
-										(selected) =>
-											newSelection.filter(
-												(row) => row.device === selected.device,
-											).length === 0,
-									);
-									const selecting = newSelection.filter(
-										(row) =>
-											selectedList.filter(
-												(selected) => row.device === selected.device,
-											).length === 0,
-									);
-									deselecting.concat(selecting).forEach((row) => {
-										if (this.props.onSelect) {
-											this.props.onSelect(row);
-										}
-									});
-									this.setState({
-										selectedList: newSelection,
-									});
-									return;
-								}
-								if (this.props.onSelect) {
-									this.props.onSelect(newSelection[newSelection.length - 1]);
-								}
-								this.setState({
-									selectedList: newSelection.slice(newSelection.length - 1),
-								});
-							}}
-							onRowClick={(row: Drive) => {
-								if (
-									!isDrivelistDrive(row) ||
-									this.driveShouldBeDisabled(row, image)
-								) {
-									return;
-								}
-								if (this.props.onSelect) {
-									this.props.onSelect(row);
-								}
-								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}>
-										{i18next.t('drives.showHidden', {
-											num: numberOfHiddenSystemDrives,
-										})}
-									</Txt>
-								</Flex>
-							</Link>
-						)}
-					</>
-				)}
-				{this.props.showWarnings && hasSystemDrives ? (
-					<Alert className="system-drive-alert" style={{ width: '67%' }}>
-						{i18next.t('drives.systemDriveDanger')}
-					</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: any) {
-								logException(error);
-							} finally {
-								this.setState({ missingDriversModal: {} });
-							}
-						}}
-						action={i18next.t('yesContinue')}
-						cancelButtonProps={{
-							children: i18next.t('cancel'),
-						}}
-						children={
-							missingDriversModal.drive.linkMessage ||
-							i18next.t('drives.openInBrowser', {
-								link: missingDriversModal.drive.link,
-							})
-						}
-					/>
-				)}
-			</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,83 +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';
-import * as i18next from 'i18next';
-
-const DriveStatusWarningModal = ({
-	done,
-	cancel,
-	isSystem,
-	drivesWithWarnings,
-}: ModalProps & {
-	isSystem: boolean;
-	drivesWithWarnings: DriveWithWarnings[];
-}) => {
-	let warningSubtitle = i18next.t('drives.largeDriveWarning');
-	let warningCta = i18next.t('drives.largeDriveWarningMsg');
-
-	if (isSystem) {
-		warningSubtitle = i18next.t('drives.systemDriveWarning');
-		warningCta = i18next.t('drives.systemDriveWarningMsg');
-	}
-	return (
-		<Modal
-			footerShadow={false}
-			reverseFooterButtons={true}
-			done={done}
-			cancel={cancel}
-			cancelButtonProps={{
-				primary: false,
-				warning: true,
-				children: i18next.t('drives.changeTarget'),
-			}}
-			action={i18next.t('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">
-						{i18next.t('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,124 +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://efp.balena.io/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';
-import * as i18next from 'i18next';
-
-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: i18next.t('flash.target'),
-	},
-	{
-		field: 'device',
-		label: i18next.t('flash.location'),
-	},
-	{
-		field: 'message',
-		label: i18next.t('flash.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">
-					{allFailed
-						? i18next.t('flash.flashFailed')
-						: i18next.t('flash.flashCompleted')}
-				</Txt>
-				{skip ? <Txt color="#7e8085">{i18next.t('flash.skip')}</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)}>
-							{i18next.t('flash.moreInfo')}
-						</Link>
-					</Flex>
-				) : null}
-				{!allFailed && (
-					<Txt
-						fontSize="10px"
-						style={{
-							fontWeight: 500,
-							textAlign: 'center',
-						}}
-						tooltip={i18next.t('flash.speedTip')}
-					>
-						{i18next.t('flash.speed', { speed: effectiveSpeed })}
-					</Txt>
-				)}
-			</Flex>
-
-			{showErrorsInfo && (
-				<Modal
-					titleElement={
-						<Flex alignItems="baseline" mb={18}>
-							<Txt fontSize={24} align="left">
-								{i18next.t('failedTarget')}
-							</Txt>
-						</Flex>
-					}
-					action={i18next.t('failedRetry')}
-					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

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

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

@@ -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,136 +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';
-import * as i18next from 'i18next';
-
-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' ? i18next.t('skip') : i18next.t('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,
-				}}
-			>
-				{i18next.t('flash.flashNow')}
-			</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,212 +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 remote from '@electron/remote';
-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 = 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;
-			const { webContents, ...webviewEvent } = event;
-			analytics.logEvent('SafeWebview loaded', {
-				...webviewEvent,
-			});
-			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,156 +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 { Box, Checkbox, Flex, TextWithCopy, 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';
-import * as i18next from 'i18next';
-import { etcherProInfo } from '../../utils/etcher-pro-specific';
-
-interface Setting {
-	name: string;
-	label: string | JSX.Element;
-}
-
-async function getSettingsList(): Promise<Setting[]> {
-	const list: Setting[] = [
-		{
-			name: 'errorReporting',
-			label: i18next.t('settings.errorReporting'),
-		},
-		{
-			name: 'autoBlockmapping',
-			label: i18next.t('settings.trimExtPartitions'),
-		},
-	];
-	if (['appimage', 'nsis', 'dmg'].includes(packageType)) {
-		list.push({
-			name: 'updatesEnabled',
-			label: i18next.t('settings.autoUpdate'),
-		});
-	}
-	return list;
-}
-
-interface SettingsModalProps {
-	toggleModal: (value: boolean) => void;
-}
-
-const EPInfo = etcherProInfo();
-
-const InfoBox = (props: any) => (
-	<Box fontSize={14}>
-		<Txt>{props.label}</Txt>
-		<TextWithCopy code text={props.value} copy={props.value} />
-	</Box>
-);
-
-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}>
-					{i18next.t('settings.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>
-					);
-				})}
-				{EPInfo !== undefined && (
-					<Flex flexDirection="column">
-						<Txt fontSize={24}>{i18next.t('settings.systemInformation')}</Txt>
-						{EPInfo.get_serial() === undefined ? (
-							<InfoBox label="UUID" value={EPInfo.uuid} />
-						) : (
-							<InfoBox label="Serial" value={EPInfo.get_serial()} />
-						)}
-					</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,879 +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 ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
-import ChevronRightSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-right.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,
-	Link,
-} 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';
-import axios, { AxiosRequestConfig } from 'axios';
-import { isJson } from '../../../../shared/utils';
-import * as i18next from 'i18next';
-
-const recentUrlImagesKey = 'recentUrlImages';
-
-function normalizeRecentUrlImages(urls: any[]): URL[] {
-	if (!Array.isArray(urls)) {
-		urls = [];
-	}
-	urls = urls
-		.map((url) => {
-			try {
-				return new URL(url);
-			} catch (error: any) {
-				// 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, auth?: Authentication) => void;
-	cancel: () => void;
-}) => {
-	const [imageURL, setImageURL] = React.useState('');
-	const [recentImages, setRecentImages] = React.useState<URL[]>([]);
-	const [loading, setLoading] = React.useState(false);
-	const [showBasicAuth, setShowBasicAuth] = React.useState(false);
-	const [username, setUsername] = React.useState('');
-	const [password, setPassword] = React.useState('');
-	React.useEffect(() => {
-		const fetchRecentUrlImages = async () => {
-			const recentUrlImages: URL[] = await getRecentUrlImages();
-			setRecentImages(recentUrlImages);
-		};
-		fetchRecentUrlImages();
-	}, []);
-	return (
-		<Modal
-			cancel={cancel}
-			primaryButtonProps={{
-				disabled: loading || !imageURL,
-			}}
-			action={loading ? <Spinner /> : i18next.t('ok')}
-			done={async () => {
-				setLoading(true);
-				const urlStrings = recentImages.map((url: URL) => url.href);
-				const normalizedRecentUrls = normalizeRecentUrlImages([
-					...urlStrings,
-					imageURL,
-				]);
-				setRecentUrlImages(normalizedRecentUrls);
-				const auth = username ? { username, password } : undefined;
-				await done(imageURL, auth);
-			}}
-		>
-			<Flex flexDirection="column">
-				<Flex mb={15} style={{ width: '100%' }} flexDirection="column">
-					<Txt mb="10px" fontSize="24px">
-						{i18next.t('source.useSourceURL')}
-					</Txt>
-					<Input
-						value={imageURL}
-						placeholder={i18next.t('source.enterValidURL')}
-						type="text"
-						onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
-							setImageURL(evt.target.value)
-						}
-					/>
-					<Link
-						mt={15}
-						mb={15}
-						fontSize="14px"
-						onClick={() => {
-							if (showBasicAuth) {
-								setUsername('');
-								setPassword('');
-							}
-							setShowBasicAuth(!showBasicAuth);
-						}}
-					>
-						<Flex alignItems="center">
-							{showBasicAuth && (
-								<ChevronDownSvg height="1em" fill="currentColor" />
-							)}
-							{!showBasicAuth && (
-								<ChevronRightSvg height="1em" fill="currentColor" />
-							)}
-							<Txt ml={8}>{i18next.t('source.auth')}</Txt>
-						</Flex>
-					</Link>
-					{showBasicAuth && (
-						<React.Fragment>
-							<Input
-								mb={15}
-								value={username}
-								placeholder={i18next.t('source.username')}
-								type="text"
-								onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
-									setUsername(evt.target.value)
-								}
-							/>
-							<Input
-								value={password}
-								placeholder={i18next.t('source.password')}
-								type="password"
-								onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
-									setPassword(evt.target.value)
-								}
-							/>
-						</React.Fragment>
-					)}
-				</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;
-	auth?: Authentication;
-}
-
-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;
-	imageLoading: boolean;
-}
-
-interface Authentication {
-	username: string;
-	password: string;
-}
-
-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,
-			imageLoading: 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) {
-		this.setState({ imageLoading: true });
-		await this.selectSource(
-			imagePath,
-			isURL(this.normalizeImagePath(imagePath))
-				? sourceDestination.Http
-				: sourceDestination.File,
-		).promise;
-		this.setState({ imageLoading: false });
-	}
-
-	private async createSource(
-		selected: string,
-		SourceType: Source,
-		auth?: Authentication,
-	) {
-		try {
-			selected = await replaceWindowsNetworkDriveLetter(selected);
-		} catch (error: any) {
-			analytics.logException(error);
-		}
-
-		if (isJson(decodeURIComponent(selected))) {
-			const config: AxiosRequestConfig = JSON.parse(
-				decodeURIComponent(selected),
-			);
-			return new sourceDestination.Http({
-				url: config.url!,
-				axiosInstance: axios.create(_.omit(config, ['url'])),
-			});
-		}
-
-		if (SourceType === sourceDestination.File) {
-			return new sourceDestination.File({
-				path: selected,
-			});
-		}
-
-		return new sourceDestination.Http({ url: selected, auth });
-	}
-
-	public normalizeImagePath(imgPath: string) {
-		const decodedPath = decodeURIComponent(imgPath);
-		if (isJson(decodedPath)) {
-			return JSON.parse(decodedPath).url ?? decodedPath;
-		}
-		return decodedPath;
-	}
-
-	private reselectSource() {
-		analytics.logEvent('Reselect image', {
-			previousImage: selectionState.getImage(),
-		});
-
-		selectionState.deselectImage();
-	}
-
-	private selectSource(
-		selected: string | DrivelistDrive,
-		SourceType: Source,
-		auth?: Authentication,
-	): { 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(this.normalizeImagePath(selected))
-					) {
-						this.handleError(
-							i18next.t('source.unsupportedProtocol'),
-							selected,
-							messages.error.unsupportedProtocol(),
-						);
-						return;
-					}
-
-					if (supportedFormats.looksLikeWindowsImage(selected)) {
-						analytics.logEvent('Possibly Windows image', { image: selected });
-						this.setState({
-							warning: {
-								message: messages.warning.looksLikeWindowsImage(),
-								title: i18next.t('source.windowsImage'),
-							},
-						});
-					}
-					source = await this.createSource(selected, SourceType, auth);
-
-					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 && this.state.warning === null) {
-							analytics.logEvent('Missing partition table', { metadata });
-							this.setState({
-								warning: {
-									message: messages.warning.missingPartitionTable(),
-									title: i18next.t('source.partitionTable'),
-								},
-							});
-						}
-					} catch (error: any) {
-						this.handleError(
-							i18next.t('source.errorOpen'),
-							sourcePath,
-							messages.error.openSource(sourcePath, error.message),
-							error,
-						);
-					} finally {
-						try {
-							await source.close();
-						} catch (error: any) {
-							// Noop
-						}
-					}
-				} else {
-					if (selected.partitionTableType === null) {
-						analytics.logEvent('Missing partition table', { selected });
-						this.setState({
-							warning: {
-								message: messages.warning.driveMissingPartitionTable(),
-								title: i18next.t('source.partitionTable'),
-							},
-						});
-					}
-					metadata = {
-						path: selected.device,
-						displayName: selected.displayName,
-						description: selected.displayName,
-						size: selected.size as SourceMetadata['size'],
-						SourceType: sourceDestination.BlockDevice,
-						drive: selected,
-					};
-				}
-
-				if (metadata !== undefined) {
-					metadata.auth = auth;
-					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: any) {
-			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 });
-	}
-
-	private closeModal() {
-		this.setState({
-			showDriveSelector: false,
-		});
-	}
-
-	// TODO add a visual change when dragging a file over the selector
-	public render() {
-		const { flashing } = this.props;
-		const {
-			showImageDetails,
-			showURLSelector,
-			showDriveSelector,
-			imageLoading,
-		} = 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 || imageLoading ? (
-						<>
-							<StepNameButton
-								plain
-								onClick={() => this.showSelectedImageDetails()}
-								tooltip={imageName || imageBasename}
-							>
-								<Spinner show={imageLoading}>
-									{middleEllipsis(imageName || imageBasename, 20)}
-								</Spinner>
-							</StepNameButton>
-							{!flashing && !imageLoading && (
-								<ChangeButton
-									plain
-									mb={14}
-									onClick={() => this.reselectSource()}
-								>
-									{i18next.t('cancel')}
-								</ChangeButton>
-							)}
-							{!_.isNil(imageSize) && !imageLoading && (
-								<DetailsText>{prettyBytes(imageSize)}</DetailsText>
-							)}
-						</>
-					) : (
-						<>
-							<FlowSelector
-								disabled={this.state.imageSelectorOpen}
-								primary={this.state.defaultFlowActive}
-								key="Flash from file"
-								flow={{
-									onClick: () => this.openImageSelector(),
-									label: i18next.t('source.fromFile'),
-									icon: <FileSvg height="1em" fill="currentColor" />,
-								}}
-								onMouseEnter={() => this.setDefaultFlowActive(false)}
-								onMouseLeave={() => this.setDefaultFlowActive(true)}
-							/>
-							<FlowSelector
-								key="Flash from URL"
-								flow={{
-									onClick: () => this.openURLSelector(),
-									label: i18next.t('source.fromURL'),
-									icon: <LinkSvg height="1em" fill="currentColor" />,
-								}}
-								onMouseEnter={() => this.setDefaultFlowActive(false)}
-								onMouseLeave={() => this.setDefaultFlowActive(true)}
-							/>
-							<FlowSelector
-								key="Clone drive"
-								flow={{
-									onClick: () => this.openDriveSelector(),
-									label: i18next.t('source.clone'),
-									icon: <CopySvg height="1em" fill="currentColor" />,
-								}}
-								onMouseEnter={() => this.setDefaultFlowActive(false)}
-								onMouseLeave={() => this.setDefaultFlowActive(true)}
-							/>
-						</>
-					)}
-				</Flex>
-
-				{this.state.warning != null && (
-					<SmallModal
-						style={{
-							boxShadow: '0 3px 7px rgba(0, 0, 0, 0.3)',
-						}}
-						titleElement={
-							<span>
-								<ExclamationTriangleSvg fill="#fca321" height="1em" />{' '}
-								<span>{this.state.warning.title}</span>
-							</span>
-						}
-						action={i18next.t('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={i18next.t('source.image')}
-						done={() => {
-							this.setState({ showImageDetails: false });
-						}}
-					>
-						<Txt.p>
-							<Txt.span bold>{i18next.t('source.name')}</Txt.span>
-							<Txt.span>{imageName || imageBasename}</Txt.span>
-						</Txt.p>
-						<Txt.p>
-							<Txt.span bold>{i18next.t('source.path')}</Txt.span>
-							<Txt.span>{imagePath}</Txt.span>
-						</Txt.p>
-					</SmallModal>
-				)}
-
-				{showURLSelector && (
-					<URLSelector
-						cancel={() => {
-							cancelURLSelection();
-							this.setState({
-								showURLSelector: false,
-							});
-						}}
-						done={async (imageURL: string, auth?: Authentication) => {
-							// 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,
-									auth,
-								));
-								await promise;
-							}
-							this.setState({
-								showURLSelector: false,
-							});
-						}}
-					/>
-				)}
-
-				{showDriveSelector && (
-					<DriveSelector
-						write={false}
-						multipleSelection={false}
-						titleLabel={i18next.t('source.selectSource')}
-						emptyListLabel={i18next.t('source.plugSource')}
-						emptyListIcon={<SrcSvg width="40px" />}
-						cancel={(originalList) => {
-							if (originalList.length) {
-								const originalSource = originalList[0];
-								if (selectionImage?.drive?.device !== originalSource.device) {
-									this.selectSource(
-										originalSource,
-										sourceDestination.BlockDevice,
-									);
-								}
-							} else {
-								selectionState.deselectImage();
-							}
-							this.closeModal();
-						}}
-						done={() => this.closeModal()}
-						onSelect={(drive) => {
-							if (drive) {
-								if (
-									selectionState.getImage()?.drive?.device === drive?.device
-								) {
-									return selectionState.deselectImage();
-								}
-								this.selectSource(drive, sourceDestination.BlockDevice);
-							}
-						}}
-					/>
-				)}
-			</>
-		);
-	}
-}

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