feat(GUI): add app to gui folder structure (#2002)

* feat(GUI): add app to gui folder structure

We add a `lib/gui/app/` folder to help transition to Webpack usage.

Change-Type: patch
Changelog-Entry: Add `lib/gui/app` folder to ease into Webpack usage.

Makefile

@@ -514,7 +514,7 @@ electron-develop:
 		-s "$(PLATFORM)"
 
 sass:
-	node-sass lib/gui/scss/main.scss > lib/gui/css/main.css
+	node-sass lib/gui/app/scss/main.scss > lib/gui/css/main.css
 
 lint-js:
 	eslint lib tests scripts bin versionist.conf.js

lib/gui/app/app.js

@@ -29,20 +29,20 @@ var angular = require('angular')
 const electron = require('electron')
 const Bluebird = require('bluebird')
 const semver = require('semver')
-const EXIT_CODES = require('../shared/exit-codes')
-const messages = require('../shared/messages')
-const s3Packages = require('../shared/s3-packages')
-const release = require('../shared/release')
-const store = require('../shared/store')
-const errors = require('../shared/errors')
-const packageJSON = require('../../package.json')
-const flashState = require('../shared/models/flash-state')
+const EXIT_CODES = require('../../shared/exit-codes')
+const messages = require('../../shared/messages')
+const s3Packages = require('../../shared/s3-packages')
+const release = require('../../shared/release')
+const store = require('../../shared/store')
+const errors = require('../../shared/errors')
+const packageJSON = require('../../../package.json')
+const flashState = require('../../shared/models/flash-state')
 const settings = require('./models/settings')
 const windowProgress = require('./os/window-progress')
 const analytics = require('./modules/analytics')
 const updateNotifier = require('./components/update-notifier')
-const availableDrives = require('../shared/models/available-drives')
-const selectionState = require('../shared/models/selection-state')
+const availableDrives = require('../../shared/models/available-drives')
+const selectionState = require('../../shared/models/selection-state')
 const driveScanner = require('./modules/drive-scanner')
 const osDialog = require('./os/dialog')
 const exceptionReporter = require('./modules/exception-reporter')

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

@@ -18,11 +18,11 @@
 
 const angular = require('angular')
 const _ = require('lodash')
-const messages = require('../../../../shared/messages')
-const constraints = require('../../../../shared/drive-constraints')
+const messages = require('../../../../../shared/messages')
+const constraints = require('../../../../../shared/drive-constraints')
 const analytics = require('../../../modules/analytics')
-const availableDrives = require('../../../../shared/models/available-drives')
-const selectionState = require('../../../../shared/models/selection-state')
+const availableDrives = require('../../../../../shared/models/available-drives')
+const selectionState = require('../../../../../shared/models/selection-state')
 
 module.exports = function (
   $q,

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

@@ -16,8 +16,8 @@
 
 'use strict'
 
-const flashState = require('../../../../shared/models/flash-state')
-const selectionState = require('../../../../shared/models/selection-state')
+const flashState = require('../../../../../shared/models/flash-state')
+const selectionState = require('../../../../../shared/models/selection-state')
 const analytics = require('../../../modules/analytics')
 
 module.exports = function (WarningModalService) {

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

@@ -25,8 +25,8 @@ const react = require('react')
 const propTypes = require('prop-types')
 const react2angular = require('react2angular').react2angular
 const analytics = require('../modules/analytics')
-const packageJSON = require('../../../package.json')
-const robot = require('../../shared/robot')
+const packageJSON = require('../../../../package.json')
+const robot = require('../../../shared/robot')
 
 const MODULE_NAME = 'Etcher.Components.SafeWebview'
 const angularSafeWebview = angular.module(MODULE_NAME, [])

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

@@ -21,9 +21,9 @@ const Bluebird = require('bluebird')
 const _ = require('lodash')
 const settings = require('../models/settings')
 const analytics = require('../modules/analytics')
-const units = require('../../shared/units')
-const release = require('../../shared/release')
-const packageJSON = require('../../../package.json')
+const units = require('../../../shared/units')
+const release = require('../../../shared/release')
+const packageJSON = require('../../../../package.json')
 
 /**
  * @summary The number of days the update notifier can be put to sleep

lib/gui/app/index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <title>Etcher</title>
-    <link rel="stylesheet" type="text/css" href="../../node_modules/flexboxgrid/dist/flexboxgrid.css">
-    <link rel="stylesheet" type="text/css" href="css/main.css">
-    <link rel="stylesheet" type="text/css" href="css/desktop.css">
-    <link rel="stylesheet" type="text/css" href="css/angular.css">
+    <link rel="stylesheet" type="text/css" href="../../../node_modules/flexboxgrid/dist/flexboxgrid.css">
+    <link rel="stylesheet" type="text/css" href="../css/main.css">
+    <link rel="stylesheet" type="text/css" href="../css/desktop.css">
+    <link rel="stylesheet" type="text/css" href="../css/angular.css">
     <script src="./app.js"></script>
   </head>
   <body>
@@ -38,7 +38,7 @@
       ng-hide="state.currentName === 'success'">
       <span os-open-external="https://etcher.io?ref=etcher_footer"
         tabindex="100">
-        <svg-icon path="'../assets/etcher.svg'"
+        <svg-icon path="'../../assets/etcher.svg'"
           width="'83px'"
           height="'13px'"></svg-icon>
       </span>
@@ -51,7 +51,7 @@
 
       <span os-open-external="https://resin.io?ref=etcher"
         tabindex="102">
-        <svg-icon path="'../assets/resin.svg'"
+        <svg-icon path="'../../assets/resin.svg'"
           width="'79px'"
           height="'23px'"></svg-icon>
       </span>

lib/gui/app/models/settings.js

@@ -23,8 +23,8 @@
 const _ = require('lodash')
 const Bluebird = require('bluebird')
 const localSettings = require('./local-settings')
-const store = require('../../shared/store')
-const errors = require('../../shared/errors')
+const store = require('../../../shared/store')
+const errors = require('../../../shared/errors')
 
 /**
  * @summary Set a settings object

lib/gui/app/modules/analytics.js

@@ -18,7 +18,7 @@
 
 const _ = require('lodash')
 const resinCorvus = require('resin-corvus/browser')
-const packageJSON = require('../../../package.json')
+const packageJSON = require('../../../../package.json')
 const settings = require('../models/settings')
 
 resinCorvus.install({

lib/gui/app/modules/drive-scanner.js

@@ -21,7 +21,7 @@ const Bluebird = require('bluebird')
 const fs = Bluebird.promisifyAll(require('fs'))
 const path = require('path')
 const settings = require('../models/settings')
-const SDK = require('../../shared/sdk')
+const SDK = require('../../../shared/sdk')
 
 /**
  * @summary The Etcher "blobs" directory path

lib/gui/app/modules/image-writer.js

@@ -24,12 +24,12 @@ const ipc = require('node-ipc')
 const isRunningInAsar = require('electron-is-running-in-asar')
 const electron = require('electron')
 const settings = require('../models/settings')
-const flashState = require('../../shared/models/flash-state')
-const errors = require('../../shared/errors')
-const permissions = require('../../shared/permissions')
+const flashState = require('../../../shared/models/flash-state')
+const errors = require('../../../shared/errors')
+const permissions = require('../../../shared/permissions')
 const windowProgress = require('../os/window-progress')
 const analytics = require('../modules/analytics')
-const packageJSON = require('../../../package.json')
+const packageJSON = require('../../../../package.json')
 
 /**
  * @summary Get application entry point
@@ -49,8 +49,8 @@ const getApplicationEntryPoint = () => {
   const ENTRY_POINT_ARGV_INDEX = 1
   const relativeEntryPoint = electron.remote.process.argv[ENTRY_POINT_ARGV_INDEX]
 
-  const PROJECT_ROOT = path.join(__dirname, '..', '..', '..')
-  return path.join(PROJECT_ROOT, relativeEntryPoint)
+  const PROJECT_ROOT = path.join(__dirname, '..', '..', '..', '..')
+  return path.resolve(PROJECT_ROOT, relativeEntryPoint)
 }
 
 /**

lib/gui/app/modules/progress-status.js

@@ -17,7 +17,7 @@
 'use strict'
 
 const settings = require('../models/settings')
-const utils = require('../../shared/utils')
+const utils = require('../../../shared/utils')
 
 /**
  * @summary Make the progress status subtitle string

lib/gui/app/os/dialog.js

@@ -19,8 +19,8 @@
 const _ = require('lodash')
 const electron = require('electron')
 const Bluebird = require('bluebird')
-const errors = require('../../shared/errors')
-const supportedFormats = require('../../shared/supported-formats')
+const errors = require('../../../shared/errors')
+const supportedFormats = require('../../../shared/supported-formats')
 
 /**
  * @summary Current renderer BrowserWindow instance

lib/gui/app/os/window-progress.js

@@ -17,7 +17,7 @@
 'use strict'
 
 const electron = require('electron')
-const utils = require('../../shared/utils')
+const utils = require('../../../shared/utils')
 const progressStatus = require('../modules/progress-status')
 
 /**

lib/gui/app/pages/finish/controllers/finish.js

@@ -17,8 +17,8 @@
 'use strict'
 
 const settings = require('../../../models/settings')
-const flashState = require('../../../../shared/models/flash-state')
-const selectionState = require('../../../../shared/models/selection-state')
+const flashState = require('../../../../../shared/models/flash-state')
+const selectionState = require('../../../../../shared/models/selection-state')
 const analytics = require('../../../modules/analytics')
 
 module.exports = function ($state) {

lib/gui/app/pages/finish/templates/success.tpl.html

@@ -16,7 +16,7 @@
       <div class="fallback-banner">
         <div class="caption caption-big">Thanks for using
           <span os-open-external="https://etcher.io?ref=etcher_offline_banner">
-            <svg-icon path="'../assets/etcher.svg'"
+            <svg-icon path="'../../assets/etcher.svg'"
               width="'150px'"
               height="'auto'">
             </svg-icon>
@@ -24,12 +24,12 @@
         </div>
         <div class="caption caption-small">
           made with
-          <svg-icon path="'../assets/love.svg'"
+          <svg-icon path="'../../assets/love.svg'"
             width="'20px'"
             height="'auto'"></svg-icon>
           by
           <span os-open-external="https://resin.io?ref=etcher_success">
-            <svg-icon path="'../assets/resin.svg'"
+            <svg-icon path="'../../assets/resin.svg'"
               width="'100px'"
               height="'auto'">
             </svg-icon>

lib/gui/app/pages/main/controllers/drive-selection.js

@@ -17,7 +17,7 @@
 'use strict'
 
 const settings = require('../../../models/settings')
-const selectionState = require('../../../../shared/models/selection-state')
+const selectionState = require('../../../../../shared/models/selection-state')
 const analytics = require('../../../modules/analytics')
 const exceptionReporter = require('../../../modules/exception-reporter')
 

lib/gui/app/pages/main/controllers/flash.js

@@ -16,15 +16,15 @@
 
 'use strict'
 
-const messages = require('../../../../shared/messages')
-const flashState = require('../../../../shared/models/flash-state')
+const messages = require('../../../../../shared/messages')
+const flashState = require('../../../../../shared/models/flash-state')
 const driveScanner = require('../../../modules/drive-scanner')
 const progressStatus = require('../../../modules/progress-status')
 const notification = require('../../../os/notification')
 const exceptionReporter = require('../../../modules/exception-reporter')
 const imageWriter = require('../../../modules/image-writer')
 const path = require('path')
-const store = require('../../../../shared/store')
+const store = require('../../../../../shared/store')
 
 module.exports = function (
   $state,

lib/gui/app/pages/main/controllers/image-selection.js

@@ -19,12 +19,12 @@
 const _ = require('lodash')
 const Bluebird = require('bluebird')
 const path = require('path')
-const messages = require('../../../../shared/messages')
-const errors = require('../../../../shared/errors')
-const imageStream = require('../../../../image-stream')
-const supportedFormats = require('../../../../shared/supported-formats')
+const messages = require('../../../../../shared/messages')
+const errors = require('../../../../../shared/errors')
+const imageStream = require('../../../../../image-stream')
+const supportedFormats = require('../../../../../shared/supported-formats')
 const analytics = require('../../../modules/analytics')
-const selectionState = require('../../../../shared/models/selection-state')
+const selectionState = require('../../../../../shared/models/selection-state')
 const osDialog = require('../../../os/dialog')
 const exceptionReporter = require('../../../modules/exception-reporter')
 

lib/gui/app/pages/main/controllers/main.js

@@ -17,11 +17,11 @@
 'use strict'
 
 const settings = require('../../../models/settings')
-const flashState = require('../../../../shared/models/flash-state')
+const flashState = require('../../../../../shared/models/flash-state')
 const analytics = require('../../../modules/analytics')
 const exceptionReporter = require('../../../modules/exception-reporter')
-const availableDrives = require('../../../../shared/models/available-drives')
-const selectionState = require('../../../../shared/models/selection-state')
+const availableDrives = require('../../../../../shared/models/available-drives')
+const selectionState = require('../../../../../shared/models/selection-state')
 
 module.exports = function (
   TooltipModalService,

lib/gui/app/pages/main/templates/main.tpl.html

@@ -3,7 +3,7 @@
     <div class="box text-center relative" os-dropzone="image.selectImageByPath($file)">
 
       <div class="center-block">
-        <svg-icon path="main.selection.getImageLogo() || '../assets/image.svg'"></svg-icon>
+        <svg-icon path="main.selection.getImageLogo() || '../../assets/image.svg'"></svg-icon>
       </div>
 
       <div class="space-vertical-large">
@@ -44,7 +44,7 @@
       <div class="step-border-right" ng-disabled="main.shouldFlashStepBeDisabled()"></div>
 
       <div class="center-block">
-        <svg-icon path="'../assets/drive.svg'"
+        <svg-icon path="'../../assets/drive.svg'"
           disabled="main.shouldDriveStepBeDisabled()"></svg-icon>
       </div>
 
@@ -84,7 +84,7 @@
   <div class="col-xs" ng-controller="FlashController as flash">
     <div class="box text-center">
       <div class="center-block">
-        <svg-icon path="'../assets/flash.svg'"
+        <svg-icon path="'../../assets/flash.svg'"
           disabled="main.shouldFlashStepBeDisabled()"></svg-icon>
       </div>
 

lib/gui/app/scss/main.scss

@@ -22,7 +22,7 @@ $btn-min-width: 170px;
 $link-color: #ddd;
 $disabled-opacity: 0.2;
 
-@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 @import "./modules/theme";
 @import "./modules/bootstrap";
 @import "./modules/space";

lib/gui/app/utils/byte-size/filter.js

@@ -16,7 +16,7 @@
 
 'use strict'
 
-const units = require('../../../shared/units')
+const units = require('../../../../shared/units')
 
 module.exports = () => {
   /**

lib/gui/app/utils/manifest-bind/directives/manifest-bind.js

@@ -16,7 +16,7 @@
 
 'use strict'
 
-const errors = require('../../../../shared/errors')
+const errors = require('../../../../../shared/errors')
 
 /**
  * @summary ManifestBind directive

lib/gui/app/utils/manifest-bind/services/manifest-bind.js

@@ -17,7 +17,7 @@
 'use strict'
 
 const _ = require('lodash')
-const packageJSON = require('../../../../../package.json')
+const packageJSON = require('../../../../../../package.json')
 
 module.exports = function () {
   /**

lib/gui/etcher.js

@@ -74,5 +74,5 @@ electron.app.on('ready', () => {
     event.preventDefault()
   })
 
-  mainWindow.loadURL(`file://${path.join(__dirname, 'index.html')}`)
+  mainWindow.loadURL(`file://${path.join(__dirname, 'app', 'index.html')}`)
 })

tests/gui/components/drive-selector.spec.js

@@ -23,7 +23,7 @@ require('angular-mocks')
 
 describe('Browser: DriveSelector', function () {
   beforeEach(angular.mock.module(
-    require('../../../lib/gui/components/drive-selector/drive-selector')
+    require('../../../lib/gui/app/components/drive-selector/drive-selector')
   ))
 
   describe('DriveSelectorController', function () {

tests/gui/components/svg-icon.spec.js

@@ -25,7 +25,7 @@ require('angular-mocks')
 
 describe('Browser: SVGIcon', function () {
   beforeEach(angular.mock.module(
-    require('../../../lib/gui/components/svg-icon')
+    require('../../../lib/gui/app/components/svg-icon')
   ))
 
   describe('svgIcon', function () {
@@ -38,7 +38,7 @@ describe('Browser: SVGIcon', function () {
     }))
 
     it('should inline the svg contents in the element', function () {
-      const icon = '../../../lib/gui/assets/etcher.svg'
+      const icon = '../../../gui/assets/etcher.svg'
       let iconContents = _.split(fs.readFileSync(path.join(__dirname, '../../../lib/gui/assets/etcher.svg'), {
         encoding: 'utf8'
       }), /\r?\n/)
@@ -84,7 +84,7 @@ describe('Browser: SVGIcon', function () {
     })
 
     it('should default the size to 40x40 pixels', function () {
-      const icon = '../../../lib/gui/assets/etcher.svg'
+      const icon = '../../../gui/assets/etcher.svg'
       const element = $compile(`<svg-icon path="'${icon}'">Resin.io</svg-icon>`)($rootScope)
       $rootScope.$digest()
       m.chai.expect(element.children().css('width')).to.equal('40px')
@@ -92,7 +92,7 @@ describe('Browser: SVGIcon', function () {
     })
 
     it('should be able to set a custom width', function () {
-      const icon = '../../../lib/gui/assets/etcher.svg'
+      const icon = '../../../gui/assets/etcher.svg'
       const element = $compile(`<svg-icon path="'${icon}'" width="'20px'">Resin.io</svg-icon>`)($rootScope)
       $rootScope.$digest()
       m.chai.expect(element.children().css('width')).to.equal('20px')
@@ -100,7 +100,7 @@ describe('Browser: SVGIcon', function () {
     })
 
     it('should be able to set a custom height', function () {
-      const icon = '../../../lib/gui/assets/etcher.svg'
+      const icon = '../../../gui/assets/etcher.svg'
       const element = $compile(`<svg-icon path="'${icon}'" height="'20px'">Resin.io</svg-icon>`)($rootScope)
       $rootScope.$digest()
       m.chai.expect(element.children().css('width')).to.equal('40px')

tests/gui/components/update-notifier.spec.js

@@ -19,7 +19,7 @@
 const m = require('mochainon')
 const _ = require('lodash')
 const units = require('../../../lib/shared/units')
-const updateNotifier = require('../../../lib/gui/components/update-notifier')
+const updateNotifier = require('../../../lib/gui/app/components/update-notifier')
 
 describe('Browser: updateNotifier', function () {
   describe('.UPDATE_NOTIFIER_SLEEP_DAYS', function () {

tests/gui/models/settings.spec.js

@@ -20,8 +20,8 @@ const m = require('mochainon')
 const _ = require('lodash')
 const Bluebird = require('bluebird')
 const store = require('../../../lib/shared/store')
-const settings = require('../../../lib/gui/models/settings')
-const localSettings = require('../../../lib/gui/models/local-settings')
+const settings = require('../../../lib/gui/app/models/settings')
+const localSettings = require('../../../lib/gui/app/models/local-settings')
 
 describe('Browser: settings', function () {
   beforeEach(function () {

tests/gui/modules/drive-scanner.spec.js

@@ -19,7 +19,7 @@
 const m = require('mochainon')
 const os = require('os')
 const drivelist = require('drivelist')
-const driveScanner = require('../../../lib/gui/modules/drive-scanner')
+const driveScanner = require('../../../lib/gui/app/modules/drive-scanner')
 
 describe('Browser: driveScanner', function () {
   describe('detected devices should be an array', function () {

tests/gui/modules/image-writer.spec.js

@@ -5,7 +5,7 @@ const ipc = require('node-ipc')
 const angular = require('angular')
 const Bluebird = require('bluebird')
 const flashState = require('../../../lib/shared/models/flash-state')
-const imageWriter = require('../../../lib/gui/modules/image-writer')
+const imageWriter = require('../../../lib/gui/app/modules/image-writer')
 require('angular-mocks')
 
 describe('Browser: imageWriter', () => {

tests/gui/modules/progress-status.spec.js

@@ -1,8 +1,8 @@
 'use strict'
 
 const m = require('mochainon')
-const settings = require('../../../lib/gui/models/settings')
-const progressStatus = require('../../../lib/gui/modules/progress-status')
+const settings = require('../../../lib/gui/app/models/settings')
+const progressStatus = require('../../../lib/gui/app/modules/progress-status')
 
 describe('Browser: progressStatus', function () {
   describe('.fromFlashState()', function () {

tests/gui/os/dropzone.spec.js

@@ -22,7 +22,7 @@ require('angular-mocks')
 
 describe('Browser: OSDropzone', function () {
   beforeEach(angular.mock.module(
-    require('../../../lib/gui/os/dropzone/dropzone')
+    require('../../../lib/gui/app/os/dropzone/dropzone')
   ))
 
   describe('osDropzone', function () {

tests/gui/os/open-external.spec.js

@@ -23,7 +23,7 @@ require('angular-mocks')
 
 describe('Browser: OSOpenExternal', function () {
   beforeEach(angular.mock.module(
-    require('../../../lib/gui/os/open-external/open-external')
+    require('../../../lib/gui/app/os/open-external/open-external')
   ))
 
   describe('osOpenExternal', function () {

tests/gui/os/window-progress.spec.js

@@ -17,7 +17,7 @@
 'use strict'
 
 const m = require('mochainon')
-const windowProgress = require('../../../lib/gui/os/window-progress')
+const windowProgress = require('../../../lib/gui/app/os/window-progress')
 
 describe('Browser: WindowProgress', function () {
   describe('windowProgress', function () {

tests/gui/pages/main.spec.js

@@ -28,7 +28,7 @@ require('angular-mocks')
 
 describe('Browser: MainPage', function () {
   beforeEach(angular.mock.module(
-    require('../../../lib/gui/pages/main/main')
+    require('../../../lib/gui/app/pages/main/main')
   ))
 
   describe('MainController', function () {

tests/gui/utils/byte-size.spec.js

@@ -23,7 +23,7 @@ const units = require('../../../lib/shared/units')
 
 describe('Browser: ByteSize', function () {
   beforeEach(angular.mock.module(
-    require('../../../lib/gui/utils/byte-size/byte-size')
+    require('../../../lib/gui/app/utils/byte-size/byte-size')
   ))
 
   describe('ClosestUnitFilter', function () {

tests/gui/utils/manifest-bind.spec.js

@@ -23,7 +23,7 @@ require('angular-mocks')
 
 describe('Browser: ManifestBind', function () {
   beforeEach(angular.mock.module(
-    require('../../../lib/gui/utils/manifest-bind/manifest-bind')
+    require('../../../lib/gui/app/utils/manifest-bind/manifest-bind')
   ))
 
   let $compile