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>
The problem can be reproduced with the following steps:
- Start Etcher.
- Plug a single drive, and let Etcher auto-select it.
- Navigate to the settings screen.
- Go back to the main screen.
The drive is auto-removed for a very small amount of time, until
auto-selection takes care of selecting it again. This behaviour causes
no harm, but its a bit annoying.
The problem was caused by a previous fix, which auto-removed the drive
if navigating back to the main screen after a flash finished, however
the fix no longer makes a lot of sense now that we allow a drive to be
selected even when no image has been chosen.
Change-Type: patch
Changelog-Entry: Prevent selected drive from getting auto-removed when navigating back to the main screen from another screen.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Currently, we show "Finishing..." indenpendently on if we're waiting for
the flash to emit the "done" event, or we're waiting for the drive to be
unmounted.
As a way to simplify things, we move the hairy `ngShow` stack from the
main template to a nice function in the controller.
Change-Type: minor
Changelog-Entry: Show "Unmounting..." while unmounting a drive.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
There are some cases where AngularJS won't recognise that the available
drive list has changed, and incorrectly keeps asking the user to connect
a drive.
This problem was mainly witnessed in Windows, and could be reproduced
with the following steps:
- Start Etcher with no available drive.
- Select an image.
- Plug a drive.
Etcher keeps showing "Connect a drive" in the second step.
Change-Type: patch
Changelog-Entry: Fix new available drives not being recognised automatically in Windows.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Currently, the client application knows too much about how the flash
results are stored in the internal state, and relies on its structure to
perform its logic.
This PR introduces several getters to `FlashStateModel` and makes
`FlashStateModel.getFlashResults()` private, ensuring clients don't
depend on the flash results object.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
`lib/gui/app.js` contains a lot of code that should have been split long
ago. This PR extracts the "main page" logic into an actual page
component in `lib/gui/pages`.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
`ImageWriterService` currently has two responsibilities. It contains
logic to start and manage a flash process, and provides an API to
interact with the current flash state.
To honour the single responsibility principle, we extract
`FlashStateModel` from `ImageWriterService`.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
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>
This setting makes Etcher not filter non-removable drives, allowing you to
arbitrarily write to your system drives.
This is a dangerous option, therefore we present it in a separate section of
the settings page, and show an informative confirmation dialog.
Change-Type: minor
Changelog-Entry: Add an "unsafe" option to bypass drive protection.
Fixes: https://github.com/resin-io/etcher/issues/480
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* refactor: getter/setter interface for SettingsModel
This PR introduces a getter/setter interface for `SettingsModel`, which
replaces the old way of managing setting values by simply assigning
properties to an object.
This is the first step towards moving the settings functionality to the
Redux store.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* refactor: store settings in redux store
The state data structure now contains a property called `settings`,
which is a map containing all setting values.
The list of supported settings can be calculated by retrieving the keys
from the `settings` object, which means that if we support a setting, we
must include a default.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
* feat: store settings in localStorage
This functionality was deleted by acb0de2 when moving the settings
object to the redux store, promising that the feature will be added back
in a future commit.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This is a rather big PR that moves the flash results information to the
Redux store, which simplifies and improves a lot of things as throughly
described in the commits that introduced Redux.
Here's a summary of the changes:
- Add a `flashResults` property to the store.
- Validate the contents of `flashResults`, handling certain edge cases
that make the modal incoherent.
- Split `ImageWriterService.setFlashing()` to
`ImageWriterService.setFlashingFlag()` and
`ImageWriterService.unsetFlashingFlag()`.
- Require the flash results to be passed to
`ImageWriterService.unsetFlashingFlag()`.
- Stop resolving the flash results from `ImageWriterService.flash()`.
- Implement `ImageWriterService.getFlashResults()`.
- Make the `RESET_FLASH_STATE` action reset the flash results.
- Access the source checksum from the store in the "finish" page,
instead of requiring the controller to pass it as a state parameter.
- Implement `.wasLastFlashSuccessful()` function in the main controller
to replace the `.success` property.
- Completely remove the `.success` property in the main controller.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
ES6 fat arrows provide reasonable `this` behaviour, which protects us
from some subtle accidental bugs, and erradicates `const self = this`
from the codebase.
Far arrows were not applied in Mocha code and AngularJS
controllers/services constructors since these frameworks rely on
`.bind()` on those functions.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Currently, we were taking care of resetting the flashing state manually
across several controllers. Now that data mutations live in a single
place, we trigger a flash state reset whenever the flashing flag is set
to false, which reliably handles every case and allows us to forget
about it.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
We want to re-use the `label` component without big paddings in other
areas of the application, therefore we move the custom padding to a
separate label modifier.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This is by no means a complete CSS refactoring. There still a lot to be
done. This encompasses mostly:
- Move "Finish page" specific styles to that module.
- Remove unused CSS rules.
- Move generic Bootstrap rules to `_bootstrap.scss`.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
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.
Fixes: https://github.com/resin-io/etcher/issues/396
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
The fact that there is a checkbox at the left of the items already makes
clear the ticking them enables the setting.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This refactoring will be useful on future changes, where there will be
a single application entry point that will execute the CLI or the GUI
version depending on the environment.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
