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
`image-stream` returns image objects that look like this:
```js
{
stream: <readable stream>,
transform: <transform stream>,
size: {
original: <number>,
final: {
value: <number>,
estimation: <boolean>
}
},
...
}
```
While the GUI handles image objects that look like this:
```sh
{
path: <string>,
size: <number>,
...
}
```
It looks like we should share a common structure between both, so we can
use `image-stream` images in `drive-constraints`, for example.
Turns out that we actually transform `image-stream` image objects to GUI
image objects when the user selects an image using the image selector
dialog, which is another indicator that we should normalise this
situation.
As a solution, this commit does the following:
- Add `path` to `image-stream` image object
- Reuse `image-stream` image objects in the GUI, given they are a
superset of GUI image objects
See: https://github.com/resin-io/etcher/pull/1223#discussion_r108165110
Fixes: https://github.com/resin-io/etcher/issues/1232
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
In the main page we show the drive description, and on hover a tooltip
shows the drive name. The tooltip behaviour is changed to show both,
un-truncated.
Closes: https://github.com/resin-io/etcher/issues/1170
Changelog-Entry: Add the un-truncated drive description to the selected drive step tooltip.
We show the friendly drive name on the main page with the drive's device name
or mount point now inside a tooltip. Drive names longer than 11 characters are
truncated with a middle ellipsis.
Change-Type: minor
Changelog-Entry: Show friendly drive name instead of device name in the main screen.
Closes: https://github.com/resin-io/etcher/issues/1170
* 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>
The current error handling logic is a mess. We have code that tries to
fetch information about errors in different places throughout the
application, and its incredibly hard to ensure certain types of error
get decent human friendly error messages.
This commit groups, improves, and tests all error related functions in
`lib/shared/errors.js`.
Here's a summary of the changes, in more detail:
- Move the `HUMAN_FRIENDLY` object to `shared/errors.js`
- Extend `HUMAN_FRIENDLY` with error descriptions
- Add `ENOMEM` to `shared/errors.js`
- Group CLI and `OSDialogService` mechanisms for getting an error title
and an error description
- Move error serialisation routines from `robot` to `shared/errors.js`
- Create and use `createError()` and `createUserError()` utility
functions
- Add user friendly descriptions to many errors
- Don't report user errors to TrackJS
Fixes: https://github.com/resin-io/etcher/issues/1098
Change-Type: minor
Changelog-Entry: Make errors more user friendly throughout the application.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
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>
- 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>
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.
This PR creates a script at `scripts/html-lint.js` that runs a NodeJS
HTML linter package that understands AngularJS on top of all our HTML
templates.
The following error was detected and fixed:
```
1 errors at lib/gui/pages/finish/templates/success.tpl.html
[4:63] Duplicate attribute “class”.
```
This script will run as part of `npm run lint`, but you can call it
independently as `npm run htmllint`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
We revert the drive and image selection step order swap back from drive
selection first and image second, to image first and drive second.
See: https://github.com/resin-io/etcher/pull/1049
Angular 1.5 has a bug that causes angular's `$exceptionHandler`
to be called for rejected `$q` promises even if they have
a rejection handler. This bug caused duplicate error messages
in Etcher.
A consequence of upgrading to Angular 1.6 is that `$q` promises
without a rejection handler will throw `Possibly unhandled rejection`
errors. To avoid these errors, this commit moves code responsible
for opening a tooltip from the template to the controller and handles
the rejection.
Other packages upgraded:
- angular-moment to v1.0.1
- angular-ui-router to v0.4.2
- angular-mocks to v1.6.1
Change-type: patch
Changelog-Entry: Fix duplicate error messages
Fixes: https://github.com/resin-io/etcher/issues/1082
See: https://github.com/angular/angular.js/issues/7992
See: https://github.com/angular/angular.js/pull/13662
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.
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>
We currently attempt to read extra metadata from ZIP files, such as a
logo, image name, image url, etc. In order to simplify the metadata
story, we decided that this metadata will not live on the image itself,
but rather on a centralised repo, which greatly simplified our custom
archive extraction logic and allows us to make use of these nice
features even when streaming the image directly from the internet.
We'll be working on bringing back this functionality from a centralised
repo in subsequent commits.
Change-Type: major
Changelog-Entry: Remove extended archives metadata extraction logic.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Change the first step to be drive selection and the second step to be
image selection, instead of vice versa as it previously was.
Changelog-Entry: Swap the order of the drive and image selection steps.
There exists a change the user will run out of space on his drive when
flashing an image format for which we can't guarantee its uncompressed
size (e.g: gzip and bzip2).
When that happens, we show a friendly error message explaining what
happened, however we should also be emitting an analytics event.
Change-Type: patch
Changelog-Entry: Emit an analytics event on `ENOSPC`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
There are certain application messages that should be re-used between
the CLI and the GUI. In order to allow such re-usability, we extract out
the application messages used in JavaScript into
`lib/shared/messages.js` as a collection of Lodash `_.template`
templates.
Notice this file doesn't include application messages included in
Angular templates directly since it'd be hard to refactor all of them.
We plan to move to React soon, which will allow moving the remaining
messages very easily.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Currently, the wording "same" versus "new" on the completion screen
is ambiguous when they respectively mean use the same image file, or use a new
and different image file. Therefore, change the wording from "new" to
"different".
Closes: https://github.com/resin-io/etcher/issues/839
- Change dialog message to "Are you sure you want to turn this on? You
will be able to overwrite your system drives if you're not careful."
- Remove "CANCEL" button and put a cross at the top right corner.
- Change dialog button label from "YES, CONTINUE" to "ENABLE UNSAFE
MODE"
In order to adapt to changes described above:
- `WarningModalService.display()` now takes an object including
`description`, and `confirmationLabel`
Fixes: https://github.com/resin-io/etcher/issues/729
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
There are some settings, such as "unsafe mode", that prompt the user for
confirmation before actually confirming the setting. In these cases,
when the user attempts to check the checkbox, the checkbox remains
checked unless the user rejects the confirmation dialog, in which case
the checkbox value is reverted.
In order to provide a better UX, we now keep the checkbox unchecked
until the user confirms.
See: https://github.com/resin-io/etcher/issues/729
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The new ordering of the main supported extensions will be: `img`, `iso`,
`zip`.
We make use of `_.intersection` in order to ensure that the values we're
hardcoding indeed exist in the list of all supported format extensions,
otherwise they won't appear at all. This ensures we never show
extensions that are not supported.
Partly fixes: https://github.com/resin-io/etcher/issues/787
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The main purpose of this change is to simplify the interface and avoid
unnecessary text.
Fixes: https://github.com/resin-io/etcher/issues/742
Change-Type: minor
Changelog-Entry: Use info icon instead of "SHOW FULL FILE NAME" in first step.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The "dropzone" directive, which we use to implement drag and drop
support, was not being loaded in the application at all for some reason.
It was probably accidentally deleted during major refactorings.
Change-Type: patch
Changelog-Entry: Fix drag and drop not working anymore.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Currently, if the "CHANGE" label at the bottom of the image selection
step, once an image has been selected, is clicked, the selection state
is cleared.
Since https://github.com/resin-io/etcher/pull/602, we allow the drive
state to change independently of the image selection state, so the above
behaviour doesn't make sense anymore.
Fixes: https://github.com/resin-io/etcher/issues/730
Change-Type: patch
Changelog-Entry: Don't clear selection state when re-selecting an image.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
In Windows, if the user unmounts a drive, then the drive becomes
inaccessible to the OS. Compare this to UNIX based operating systems,
where an unmounted drive is still available for many I/O operations.
To prevent confusion, we say "eject" instead of "unmount" when running
on Windows, despite "unmount" being the correct way of saying it.
See: https://github.com/resin-io/etcher/issues/750
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Recently, we've added support for a `recommendedDriveSize` property in
the `manifest.json` of extended image archives, which the image can use
to warn the user that his drive, even if it is large enough to hold the
image, might not be large enough to deliver a good usage experience
later on.
When this property is found, the GUI reacts in the following ways:
- Drives that are large enough to hold the image but don't meet the
recommended drive size are tagged with a warning label in the drive
selector component.
- Attempting to select a "labeled" drive opens a warning modal asking
for user confirmation.
- Drives that don't meet the recommended drive size declared in the
image won't get auto-selected.
- If there is a drive already selected, and the user picks an image
whose recommended drive size is greater than the drive size, the
currently selected drive gets auto-deselected.
Code-wise, the following significant changes have been introduced:
- Implement `SelectionStateModel.getImageRecommendedDriveSize()`.
- Implement `SelectionStateModel.isDriveSizeRecommended()`.
- Extract `WarningModal` out of the settings page (the dangerous setting
modal).
Change-Type: minor
Changelog-Entry: Allow images to declare a recommended minimum drive size.
See: https://github.com/resin-io-modules/etcher-image-stream/pull/36
Fixes: https://github.com/resin-io/etcher/issues/698
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
As a way to simplify the design and make more use of available
components rather than creating specialised ones, we replaced the
`.alert-ribbon` component, which consisted of an orange alert appearing
at the top of the screen for when a validation failed, the drive ran out
of space, or other issues, with a modal.
This change allowed us to remove the "warning"-related colors from the
theme palette.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
This new version stops sending a `passedValidation` boolean property
upon completion and still throws an `EVALIDATION` error when validation
fails.
Such small chance allows us to get rid of lot of complexity related to
handling the `passedValidation` value in the application state.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
A function in the `MainController` was being named
`shouldFlashStateBeDisabled`, however it should have been
`shouldFlashStepBeDisabled`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
For consistency purposes on the main screen, we switch the "Connect a
drive" button to be the classic primary blue button as the other ones.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
This component is visually shown on the top of the window, however its
HTML code is placed below the "Flash" button, which is
counter-intuitive.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Despite all modals sharing the same design and layout, each of theme is
being styled separately, when most of the CSS rules can be moved and
generified to `_modal.scss` and re-used by all of them.
This PR also moves `lib/gui/scss/components/_modal.scss` to the "Modal"
Angular's module.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The `.button` component is not the responsible of knowing the
`min-width` it should occupy in the actual pages.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Move `.badge` coloring to the main page's style file, since the style we
currently hardcode on the component itself is very tied to the
particular context the badge is being instantiated in.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
This is a big PR that extracts out a sensible set of SCSS color
variables that can be used to customise Etcher's look.
To achieve such goal, the following changes were introduced:
- Create a separate `lib/gui/scss/modules/_theme.scss` to conveniently
hold all SCSS color variables.
- Decouple button styles from Bootstrap's `.btn`.
- Stop configuring Bootstrap colors as a whole using the SCSS variables
it exposes and instead declare them directly in the modules that make
use of them.
- Normalize all modal layouts into one. We had like 3 different modal
layouts, each with their own title/body colors, etc. To simplify the
color palette, we make use of a single modal layout everywhere.
- Remove `.progress-button--primary`. `.progress-button` is now
"primary" by default.
- Be precise about `tick` foreground colors.
- Rename `.label-default` to `.label-inset`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
There are many SCSS rules in `lib/gui/scss/main.scss` that only apply to
the main page. In order to keep things tidy, those styles were moved to
`lib/gui/pages/main/styles/_main.scss`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The current tooltip, "SHOW IN FULL", proved to be a bit confusing for
users. We're using "SHOW FULL FILE NAME", as kindly suggested by @dlech.
Fixes: https://github.com/resin-io/etcher/issues/634
Change-Type: patch
Changelog-Entry: Improve image full file name modal tooltip.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
This PR integrates `.bmap` support recently added to
`etcher-image-write` into Etcher itself.
It does it in the following way:
- It adds a `--bmap` option to the Etcher CLI.
- It saves a potential `bmap` file contents to the
`SelectionStateModel`.
- In the GUI, at the time of writing, if there is a `bmap` file content
in `SelectionStateModel`, it gets written to a temporary file and such
path is passed as the `--bmap` option to the CLI.
Since validation checksums don't make sense anymore, the finish screen
doesn't show the checksum box in this case.
Change-Type: minor
Changelog-Entry: Add `.bmap` support.
Fixes: https://github.com/resin-io/etcher/issues/171
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The main page controller contained a lot of undocumented and untested
logic. As a first step towards cleaning up the whole thing, this PR
introduces the following changes:
- Implement `ImageSelectionController`, `DriveSelectionController`, and
`FlashController` as children of `MainController`. Each of them is
used by the appropriate main page "steps", and contains logic specific
to them. The `MainController` hosts functionality that applies to the
page as a whole.
- Add JSDoc annotations fo every controller function/property.
- Unit test several controller functions.
- Simplify template logic.
The "GUI fifty-thousand foot view" section in ARCHITECTURE.md has been
removed since there is no longer a single place where you can see all
the interactions between components.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Currently, the logic the controls the drive scanner and populates the
drive model lives in the main application controller.
This is not optimal because:
- The drive scanner stops populating the drives model when the
application is not on the main screen.
- An event handler subscribes to the drive scanner every time the user
navigates back to the main screen.
This PR moves the drive scanner logic to a run block in the entry point
of the application.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Error handling is currently a mess. The knowledge to correctly report an
error both to the end user and to us is scattered in many places.
This PR introduces the following changes:
- Rename `AnalyticsService.logDebug()` to `AnalyticsService.logDebug()`
to clarify better the intention of the function.
- Move `$log` decorators from an `AnalyticsService` run block to
`AnalyticsService.logDebug()`.
- Implement `AnalyticsService.logException()`, whose duty is to log an
exception to TrackJS or any related service, and log it to DevTools.
- Implement `ErrorService.reportException()`, whose duty is to report an
exception to every interested party. This means logging the error to
TrackJS, displaying it DevTools and showing a nice alert to the user.
This function is based from `handleError()` from `MainController`.
- Move global `$exceptionHandler` error handler to the entry point of
the application, and make it simply call
`ErrorService.reportException()`.
- Replace every `handleError()` call in `MainController` with
`ErrorService.reportException()`.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
