102 Commits

Author SHA1 Message Date
Juan Cruz Viotti
f8c3faec79
fix(GUI): only emit toggle drive event if drive is selectable (#1913)
Right now we emit "Toggle drive" analytics events even when clicking on
disable/unselectable drives.

The fix is to move the `analytics.logEvent` inside the code path that
applies if a drive selection is considered valid.

Change-Type: patch
Changelog-Entry: Don't send analytics events when attempting to toggle a disabled drive.
Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-12-09 16:57:12 -04:00
Benedict Aas
f22938030d minifix: hide drive selector hyphen when no size info (#1900)
We hide the separator hyphen between the name and size when there is no
size information available, in the drive selector modal.

Change-Type: patch
Changelog-Entry: Hide the drive-selector separator hyphen when no drive
size is available.
2017-12-04 19:11:07 -04:00
Benedict Aas
f2f5955264 feat(GUI): use tabindex and focus to navigate (#1745)
* feat(GUI): use tabindex and focus to navigate

We make navigating with the tab key easier by highlighting focused
elements more visibly, adding `tabindex` attributes to elements, and
making `open-external` links respond to keyboard events.

Change-Type: minor
Changelog-Entry: Improve tab-key navigation through tabindex and visual improvements.
Connects-To: https://github.com/resin-io/etcher/issues/1734

* outline with 10s timeout

* use orange "warning colour" as outline

* smaller outline on settings buttons, fix order on settings page

* allow selection in drive-selector

* fix typo, better tabindexes
2017-10-27 20:41:47 +02:00
Benedict Aas
2556807166 feat(GUI): add optional progress bars to drive-selector drives (#1800)
We show a progress bar for any drive objects with a `progress` field
that isn't falsy, e.g. `undefined` or `0`.

Changelog-Type: minor
Changelog-Entry: Add optional progress bars to drive-selector drives.
2017-10-24 14:43:43 -04:00
Juan Cruz Viotti
e54a8ae92b fix(GUI): improve usbboot USB device branding (#1780)
- Add a loading SVG icon while usbboot is running
- Make the device description more user friendly

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-10-17 10:47:14 +01:00
Juan Cruz Viotti
ec1f3665eb fix(GUI): don't display hyphen in drive selection entry if no size (#1778)
Some drives, like usbboot USB devices, don't have a size associated with
them, which results in the drive selection widget showing a hyphen with
nothing at the side, which looks a bit weird.

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-10-16 16:07:48 +01:00
Niklas Higi
6acfcfd23c fix(GUI): make sure progress button is always rounded (#1768)
At the moment the progress button which has slightly rounded corners
allows the "__bar" to overflow. This causes the corners to become
angular again which looks weird. I set the button's "overflow" to
"hidden" to fix this issue.

Changelog-Entry: Make sure the progress button is always rounded.
Change-Type: patch
2017-10-14 14:41:00 +02:00
Juan Cruz Viotti
78fdc5b07e feat(GUI): add some branding to usbboot-discovered devices (#1764)
- Add a nice icon in the drive selector dialog when a device has been
  discovered through usbboot

- Change the name of usbboot-initialized devices to "Compute Module"

Change-Type: minor
Changelog-Entry: Add eye candy to usbboot initialized devices.
Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-10-11 03:53:34 +01:00
Juan Cruz Viotti
5196ac8d32 refactor: simplify release type handling within the app (#1667)
As another step towards moving to GitHub Releases, this commit makes the
application care much less about the actual release type of the current
version, instead checking if the application is stable or not, which is
more aligned to what GitHub provides us.

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-08-09 08:43:19 -07:00
Jonas Hermsmeier
a2f1ddddb5 fix(svg-icon): Handle DOMParser parsererrors (#1663)
This checks for `parsererror`s in the DOMParser's returned document,
to prevent re-use of the previous image and avoid displaying an error
document in the SVG icon slot.

Change-Type: patch
Changelog-Entry: Avoid "broken" icon when selecting a zip image archive with invalid SVG.
2017-08-07 07:29:30 -07:00
Benedict Aas
de63d534c5 fix(GUI): make disabled svgs work in img tags (#1661)
SVGs are displayed through IMG tags, but these do not support CSS
`fill`, and as such we work around it with `opacity`.
2017-08-03 12:30:00 -04:00
Juan Cruz Viotti
d8e31665a0 chore: follow standardjs guidelines (#1664)
- Extend the `standard` ESLint configuration
- Remove ESLint rules that are defined in the `standard` configuration
- Get rid of semi-colons

See: https://github.com/resin-io/etcher/pull/1657
Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-08-03 09:01:54 -04:00
Juan Cruz Viotti
5c19b70e83 refactor: adhere mostly to StandardJS guidelines (#1657)
This commit changes the whole codebase to adhere to all StandardJS
guidelines rules except semicolons, since the removal of semicolons
affect pretty much all lines, and the final diff is very hard to follow
(and to assess other more involved changes).

In a nutshell:

- When using `function`, we now require a space before the opening
  parenthesis
- If a line with operators is broken into multiple lines, the operator
  should now go after the line break
- Unnecessary padding lines are now forbidden

There were also some minor things that the `standard` CLI caught that I
updated here.

See: https://standardjs.com
Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-08-03 06:59:02 -04:00
Benedict Aas
70ad86534d feat(GUI): make size units closest relative (#1539)
We make the size units used the closest relative unit through a new
filter `closestUnit` replacing the old `gigabyte` filter.

Changelog-Entry: Round byte sizes to the more appropriate unit.

* remove filters folder

* new shrinkwrap, add to package.json

* test
2017-08-01 17:34:13 -04:00
Benedict Aas
7714e8b50a fix(GUI): make archive-embedded svgs work again (#1642)
We make the svg-icon component accept XML in its path argument to handle
archive-embedded SVG icons.

Changelog-Entry: Make archive-embedded SVG icons work again.
Fixes: https://github.com/resin-io/etcher/issues/1636
2017-08-01 12:34:06 -04:00
Juan Cruz Viotti
a63b6bf18c fix(CLI): pass required arguments to flashComplete message (#1630)
The `flashComplete` message takes the drive object and the image
basename as arguments. This was updated on the GUI, but causes the CLI
to throw an error upon completion.

Change-Type: patch
Changelog-Entry: Fix "imageBasename is not defined" error on the CLI.
Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-08-01 12:32:50 -04:00
Juan Cruz Viotti
fc3eeff1c9 refactor(GUI): make settings model setter asynchronous (#1597)
This is part of the process of implementing support for a configuration
file. We previously decoupled the Redux store from localStorage by
moving the logic that actually persists the data to localStorage to a
local-settings.js file, however the localStorage API is synchronous, so
it follows that at the moment, all functions that interact with are also
synchronous.

Moving to storing the settings to a file means turning all these
functions to promises, which we do in this commit, in order to not mix
the addition of the configuration file feature with the huge amount of
refactoring it requires.

See: https://github.com/resin-io/etcher/issues/1356
Change-Type: patch
Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-08-01 10:27:15 -04:00
Juan Cruz Viotti
4122e0bf1d refactor: move most models to lib/shared/ (#1596)
Now that the Redux store is no longer front-end dependent, we can move
most of the models to lib/shared. Currently, lib/shared is a mess, and
contains all sorts of functionality, however moving things out of the
GUI is the first step. Once we have everything decoupled, we can
organise all the code we have there.

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-07-18 12:34:10 -03:00
Juan Cruz Viotti
a5b1a92920 chore: add eslint-jsdoc-plugin to eslint (#1585)
This plugin helps us detect some things the built-in jsdoc rules can't,
like whether there is an example or not.

As expected, the addition of this plugin helped detect some minor JSDoc
issues.

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
2017-07-12 10:19:08 -04:00
Benedict Aas
b18fa1f13f feat(GUI): add webview api version parameter (#1558)
We add the API version sent to the banner via a GET search parameter,
allowing for more intricate control over what data needs or can be sent.
2017-07-04 13:11:44 -04:00
Benedict Aas
a7d713c323 feat(GUI): rewrite svg-icon directive in react (#1464)
We change from using an Angular directive to using React through
react2angular in the SVGIcon module.
2017-06-12 08:42:52 -04:00
Benedict Aas
ef739fb222 refactor(GUI): remove angular dependency from selection-state (#1509)
We remove the dependency on Angular from SelectionStateModel and rename
it to selectionState.
2017-06-12 08:40:52 -04:00
Benedict Aas
31a2389d04 fix(GUI): reset webview after navigating away (#1422)
We reload and reset the webview to its original URL when the user
navigates away from the success screen.

Changelog-Entry: Reset webview after navigating away from the success screen.
2017-06-08 11:42:55 -04:00
Benedict Aas
14b04413b5 refactor(GUI): remove angular from DrivesModel (#1265)
We remove usage of Angular from DrivesModel.

Depends: https://github.com/resin-io/etcher/pull/1261
Depends: https://github.com/resin-io/etcher/pull/1264

* remove angular injection from tests

* move file

* add empty array test
2017-06-05 10:30:58 -04:00
Benedict Aas
dcb152aa00 fix(GUI): don't break up size number in drive selector (#1467)
We make the size number in the drive selector stay whole through
the `word-break: keep-all` CSS property, ensuring that it doesn't
partially overflow to the next line.

See: https://github.com/resin-io/etcher/issues/1437
Changelog-Entry: Don't break up size numbers in the drive selector.
2017-05-26 07:36:32 -04:00
Juan Cruz Viotti
1e169315fd refactor(GUI): turn the update notifier modal into a native dialog (#1359)
Electron v1.6.1 introduced checkbox support to the native message
dialog, giving us everything that was needed to implement the update
notifier modal using a native dialog.

This change allows us to get rid of a lot code.

See: https://github.com/electron/electron/pull/8590
Change-Type: patch
Changelog-Entry: Turn the update notifier modal into a native dialog.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-05-23 19:06:35 -04:00
Benedict Aas
2c26b4c6ac feat(GUI): dynamic finish page (#1368)
* feat(GUI): dynamic finish page

We implement an externally loaded dynamic finish page in React with
`react2angular`. If the Internet connection is unreliable or unavailable, or a
non-200 HTTP response is returned we display a fallback default finish banner.

Change-Type: minor
Changelog-Entry: Implement a dynamic finish page.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-05-12 01:07:24 -04:00
Benedict Aas
69a982bf8d refactor(GUI): remove analytics angular dependency (#1387)
We rename `AnalyticsService` to `analytics` and remove its dependency on
Angular.
2017-05-10 20:27:54 -04:00
Benedict Aas
b6aa5ada30 refactor(GUI): central error/warning messages function (#1193)
* Centralise drive error/warning messages with a function
  `.getDriveImageCompatibilityStatuses` in `lib/shared/drive-constraints.js`
  -- tests included
* Fix an error where several labels show at once
* Clarify the source drive label to 'Drive Contains Image'
* Remove label icons and make text bold to match Zeplin's design

Closes: https://github.com/resin-io/etcher/issues/1143
Closes: https://github.com/resin-io/etcher/issues/1144
2017-05-10 13:52:20 -04:00
Juan Cruz Viotti
d3b35742a6 refactor(GUI): integrate etcher-latest-version into the main repo (#1183)
`etcher-latest-version` was kept in a separate repository in order to
re-use it with the Etcher website, however the Etcher website is not
using it at all, and we're moving towards having the website in the main
repository.

Therefore, this commit brings back the logic from
`etcher-latest-version`, but introduces it as
`lib/shared/s3-packages.js`, in order to not tie ourselves to the
AngularJS framework, and as a step towards the Etcher SDK.

As a nice little bonus, this commit adds support for an
`ETCHER_FAKE_S3_LATEST_VERSION` environment variable that can be used to
trick Etcher that there is an available update, and therefore show the
update notifier modal.

Also, this commit adds support for snapshot builds update-checks, by
checking the `resin-nightly-downloads` S3 bucket if the current version
contains a git commit hash build number.

If the version is not a production release, then the update notifier
modal doesn't present the checkbox to disable update notifications for X
days.

We also add a property called `updates.semverRange` to `package.json`,
which can be used to fine control which versions are considered as
candidates for an update notification.

This commit adds a setting called `includeUnstableChannel`, which can be
used to tweak whether unstable (beta) releases are considered or not
when checking for the latest available version.

See: https://github.com/resin-io-modules/etcher-latest-version
Fixes: https://github.com/resin-io/etcher/issues/953
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-04-26 23:52:04 -04:00
Benedict Aas
b28c345ba0 refactor(GUI): remove Angular from FlashStateModel and rename (#1264)
We remove the usage of Angular from 'FlashStateModel' and its usage
throughout the project comes under the new 'flashState' moniker.


Depends: https://github.com/resin-io/etcher/pull/1261
2017-04-10 14:30:21 -04:00
Benedict Aas
19dd2834fb fix(GUI): replace Math object usage in progressButton directive (#1263)
We were using `Math.min` in a progressButton's template expression,
however such object is not exposed to the Angular expression context.
2017-04-10 09:59:13 -04:00
Benedict Aas
ff495a45a8 refactor(GUI): remove angular from SettingsModel and rename (#1261)
We remove the usage of Angular in SettingsModel in our efforts to make
Etcher as agnostic as possible as we make our move to React.
2017-04-07 10:45:43 -04:00
Benedict Aas
63901ccf77 fix(GUI): limit button progress and width to 100 (#1256)
We limit the progress button width by limiting the progress to a maximum
value of 100.

Change-Type: patch
Changelog-Entry: Prevent progress button percentage to exceed 100%.
2017-04-05 12:00:59 -04:00
Juan Cruz Viotti
e16234e3e8 refactor(GUI): get rid of drive-constraints Angular factory wrapper (#1250)
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-04-04 13:44:03 -04:00
Andrew Scheller
ee2bbef9da chore: codespell improvements (#1174)
* fix the command so it actually works - see https://github.com/lucasdemarchi/codespell/issues/101
 * check the spelling of more files
 * ignore known-binary filetypes
 * fix a couple of spelling mistakes it caught

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-03-11 18:10:54 -04:00
Ștefan Daniel Mihăilă
34c85eb150 feat(GUI): improve analytics events (#1111)
* feat(GUI): improve analytics events

This commit adds more events to our current analytics.
Will further improve in a future commit.

Change-Type: patch
See: https://github.com/resin-io/etcher/issues/1100

* refactor(gui): use single function to set normal and dangerous settings

Change-Type: patch
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-03-10 15:18:49 -04:00
Juan Cruz Viotti
6c8bc117ab chore: revise ESLint built-in configuration (#1149)
There are a lot of new rules since the last time I revised the ESLint
rules documentation.

I've updated the main `.eslintrc.yml` to include some newer additions,
plus I added another ESLint configuration file inside `tests`, so we can
add some stricted rules to the production code while relaxing them for
the test suite (due to the fact that Mocha is not very ES6 friendly and
Angular tests require a bit of dark magic to setup).

This is a summary of the most important changes:

- Disallow "magic numbers"

These should now be extracted to constants, which forces us to think of
a good name for them, and thus make the code more self-documenting (I
had to Google up the meaning of some existing magic numbers, so I guess
this will be great for readability purposes).

- Require consistent `return` statements

Some functions relied on JavaScript relaxed casting mechanism to work,
which now have explicit return values. This flag also helped me detect
some promises that were not being returned, and therefore risked not
being caught by the exception handlers in case of errors.

- Disallow redefining function arguments

Immutability makes functions easier to reason about.

- Enforce JavaScript string templates instead of string concatenation

We were heavily mixing boths across the codebase.

There are some extra rules that I tweaked, however most of codebase
changes in this commit are related to the rules mentioned above.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-03-07 23:46:44 -04:00
Juan Cruz Viotti
1a00430999 chore: fix JSDoc warnings (#1151)
- The type in `@type` should be surrounded by curly braces
- We should use `@type` in some cases where we used `@property`
- `@module` descriptions should go above such tag
- Namespaces should not declare their access type

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-03-02 12:13:28 -04:00
Benedict Aas
33a4ed8c95 feat(GUI): allow opening drive selector modal when no drives (#1146)
We change the drive selector button text to be a static 'select drive'
and allow the user to open the dialog even if there are no drives,
displaying the 'no drives' warning inside the modal.

Closes: https://github.com/resin-io/etcher/issues/884
Changelog-Entry: Allow opening the drive selector modal when there are no
drives.
2017-03-01 10:27:26 -04:00
Ștefan Daniel Mihăilă
5b9104e8aa feat(GUI): warn when atempting to burn Windows images (#1043)
Change-Type: minor
Changelog-Entry: Show warning when user tries to flash a Windows image
Closes: https://github.com/resin-io/etcher/issues/1035
2017-02-24 15:12:03 -04:00
Juan Cruz Viotti
f4c92676a9 fix(GUI): update notifier transformRequest error at startup (#1122)
Etcher checks what is the latest version by making an HTTP request to S3
in order to see if it should present the update notifier modal at
startup.

If the user is not connected to the internet, or is on an unstable
connection, the request might fail completely or timeout, leading to a
weird error message being presented to the user:

```json
{
  "data": null,
  "status": -1,
  "config": {
    "method": "GET",
    "transformRequest": [null],
    "transformResponse": [null],
    "url": "https://resin-production-downloads.s3.amazonaws.com",
    "headers": {
      "Accept": "application/json, text/plain, */*"
    }
  },
  "statusText": ""
}
```

To solve the error, we tweak `UpdateNotifierService.getLatestVersion()`
to resolve the current version if there was a problem making the request
(e.g: the response didn't come through at all), which after some
experimentation, we can check by comparing the `status` property with
`-1`.

This error happens in all operating systems, and currently is trending
on TrackJS.

Change-Type: patch
Changelog-Entry: Fix `transformRequest` error at startup when not connected to the internet, or when on an unstable connection.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-02-23 11:20:10 -04:00
Juan Cruz Viotti
cf4dc5ff37 refactor(GUI): remove component-drive-selector-body outdated class (#1072)
The rules inside this class should be moved to
`.modal-drive-selector-modal`.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-02-13 14:59:29 -04:00
Juan Cruz Viotti
6bdba5ffd4 style(GUI): move update notifier checkbox inside modal body (#1071)
This is a small step towards unifying all the modal skeletons that we
use through the application.

By moving the checkbox to the modal body we can declare the footer and
the header once in a single place.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-02-09 11:30:19 -04:00
Juan Cruz Viotti
05fdd5cc29 refactor(GUI): unify modal body styles (#1073)
- Remove unnecessary `.modal-text` wrapper
- Move drive selector specific styles to `_drive-selector.scss`

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-02-07 16:14:15 -04:00
Shou
048aac5ac2 feat(gui): update main page design
We match the main page design to its updated style.

* Remove help icon text.
* 'Change' image/drive buttons are now violet blue.
* Remove step number icons and accompanying descriptions.
* Flash progress button now turns into a striking orange, from blue.

Changelog-Entry: Update main page design to its new style.
2017-02-07 12:21:45 -04:00
Juan Cruz Viotti
8e5840ce69 chore: integrate codespell and fix existing spelling issues
This tool scans the comments of every source file and reports back
spelling errors.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-02-06 14:53:20 -04:00
Juan Cruz Viotti
95d4f2f608 fix(GUI): prevent flashing the drive where the source image is located
Currently Etcher will allow you to flash an image to the same drive that
contains the image. As a way to protect against that case we introduce
the concept of a "source drive", which means a drive that contains the
source image.

This commit adds the following logic around this new concept:

- Don't auto-select a source drive
- De-select an already selected drive if an image inside it is selected
- Disable the drive in the drive selector modal
- Add a "Source Drive" badge to the drive in the drive selector modal

Fixes: https://github.com/resin-io/etcher/issues/830
Change-Type: minor
Changelog-Entry: Prevent flashing the drive where the source image is located.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-02-06 14:53:08 -04:00
Juan Cruz Viotti
4f621f6ae3 style(GUI): capitalize every text for consitency purposes (#1056)
Fixes: https://github.com/resin-io/etcher/issues/881
Change-Type: patch
Changelog-Entry: Capitalize every text throughout the application.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-01-27 11:08:49 -04:00
Juan Cruz Viotti
9dd9065305 refactor(GUI): reuse WarningModalService in FlashErrorModal (#1051)
This is the first commit in a series of changes to normalise the use of
modals throughout the application.

`FlashStateModel` is basically a `WarningModalService` that cleans the
flash state, therefore making it re-use `WarningModalService` directly
removes unnecessary duplication.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
2017-01-25 17:06:49 -04:00