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
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%.
* 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>
* 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>
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.
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>
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>
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.
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>
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>
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>
Some button texts are all uppercase, while the remaining of them are
capitalised. This commit capitalises all button texts for consistency
purposes.
Fixes: https://github.com/resin-io/etcher/issues/881
Change-Type: patch
Changelog-Entry: Normalize button text casing.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The current validation message is obscure and tends to lead users to
believe there is a problem with Etcher.
Fixes: https://github.com/resin-io/etcher/issues/735
Change-Type: patch
Changelog-Entry: Improve validation error message.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The `.modal-menu` class holds buttons that are shown at the bottom of
the modal. If there are two buttons, the class will show them side by
side with equal sizes, however if there is only one button, it will be
incorrectly resized to 50% of the available space.
Change-Type: patch
Changelog-Entry: Fix alignment of single call to action buttons inside modals.
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>
`SelectionStateModel`'s methods `isSystemDrive` and `isDriveLocked`
don't depend on application state. They have been extracted in a different
AngularJS service: `DriveConstraintsModel`. The new service's actual
implementation is in `lib/src`, in order to be reused by the CLI.
Miscellaneous changes:
- Rename `lib/src` to `lib/shared`
- Refactor `drive-constraints` to throw when image is undefined
The default behaviour was to pretend that we're all good if the if
the image is not specified. We're not using this "feature", and
it can be dangerous if we forget to pass in the image.
- Make `isSystemDrive` return `false` if `system` property is undefined
- Use `drive-constraints` in `store.js`
Change-Type: patch
System drives in the drive-list widget now have a red warning label
beneath. Also new is the `isSystemDrive()` method under
`SelectionStateModel` and its unit-tests.
See: https://github.com/resin-io/etcher/issues/888
Changelog-Entry: Label system drives in the drive-list widget
We show the Etcher version string in the update notifier modal, by giving
the version string to the template through options similar to the warning
modal.
- We memoize the version Promise and assume the update version won't change
during runtime.
Changelog-Entry: Show available Etcher version in the update notifier.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
When Etcher is writing to a drive and the user closes the window,
currently there is no confirmation. This commit changes that and
the user has to confirm the exit.
Other changes include the warning modal taking a `rejectionLabel` option
that shows a reject button when provided.
Closes: https://github.com/resin-io/etcher/issues/744
Change-Type: minor
Changelog-Entry: Confirm before user quits while writing.
We add a blue clickable link to the Github changelog in the update dialog
modal.
Closes: https://github.com/resin-io/etcher/issues/905
Change-Type: patch
Changelog-Entry: Add a changelog link to the update notifier modal.
The user can now double-click to swiftly select a drive in the
drive widget instead of having to toggle a drive and then clicking the
continue button to close the modal and finalize the drive selection.
Closes: https://github.com/resin-io/etcher/issues/880
Change-Type: patch
Changelog-Entry: Implement double-click to quick-select drives in the
drive widget.
The cursor is incorrectly a pointer on hover over a disabled and
unselectable drive in the drive selector widget. This patch changes the
cursor to `not-allowed`, providing the user with visual feedback that it is
not selectable.
Fixes: https://github.com/resin-io/etcher/issues/865
Change-Type: patch
Changelog-Entry: Use not-allowed cursor over disabled drives in the
drive selector widget.
Drives with long names or descriptions expand outside the drivelist,
this commit fixes that using CSS `word-break: break-all`.
Change-Type: patch
Changelog-Entry: Wrap drive names and descriptions in the drive selector widget.
Currently we resolve `false`, which might not mean very much to some
modal use cases. `undefined` is a much more generic falsy value.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
Pressing the ESC key in any modal dialogue currently just emits a
message. This change actually cancels the modal, closing it.
Closes: https://github.com/resin-io/etcher/issues/874
Change-Type: patch
Changelog-Entry: Allow the user to press ESC to cancel a modal dialog.
Every modal in the application should contain the same "close" X at the
top right corner, for consistency purposes. The only modal lacking this
button was the update notifier modal.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
- 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>
The `settings-dangerous-modal` modal size class doesn't exist anymore,
and was renamed to `warning-modal`. This was causing the exclamation
sign from the header to not be displayed in red, as it should.
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>
If the user encounters a flash error, and then presses the "Retry"
button, the drive selection is cleared, but then is re-selected right
away because its probably the only available drive, leading to a very
strange behaviour UX-wise.
As a solution, we avoid clearing the drive selection.
Change-Type: patch
Changelog-Entry: Don't clear the drive selection if clicking the "Retry" button.
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>
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>
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>
Steps to reproduce:
- Insert a single drive.
- Open drive selector modal.
- Extract the drive while drive selectector modal is open.
- Check DevTools.
The solution is to use `.close()` instead of `.dismiss()`. After some
diving into the documentation and the code, `.dismiss()` is only
available from within the modal controller, however if you want to close
the modal from outside, `.close()` is the way to go.
Notice that `.close()` returns a rejected promise when being called from
the modal itself, but thats not the case from outside, which is quite
confusing, but means we can safely use `.close()` in this context.
Change-Type: patch
Changelog-Entry: Fix "`modal.dismiss` is not a function" exception.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
When the user clicks on the backdrop of a modal, the modal promise gets
rejected, therefore triggering our application error handler.
UI Bootstrap provides a way to disable the backdrop completely, but
doesn't provide a way to allow a backdrop click to simply close the
modal rather than rejecting it, as if an issue happened.
To mitigate this issue, and still preserve the backdrop functionality,
we created `ModalService`, which abstracts the messy details of calling
`$uibModal`, and has custom logic to ignore "backdrop click" errors.
Change-Type: patch
Changelog-Entry: Fix "backdrop click" uncaught errors on modals.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Instead of storing the whole selected drive object, we barely store a
reference to the corresponding drive in the available drives array (the
reference being the drive device).
This greatly simplifies the application state in the following ways:
- The drive metadata (size, description, etc) is not duplicated in the
state, enforcing a single source of truth.
- If the selected drive stops being available (e.g: is unplugged), the
reference doesn't hold anymore, making this functionality very natural
to implement.
- Makes `SelectionStateModel.isCurrentDrive()` much more inuitive, since
we don't have to document that changes in the metadata of the drive
object, or extra keys such as `$$hashKey` don't change the result of
this function.
- Ensures the state never goes into a problematic state where we try to
to write to an unavailable drive.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
