This commit updates the Redux store so that the new clone API end points
can be used. The composes slice is updated - composes now have a clones
property - and a clones slice is added.
Selectors are added as well. Although not used in this commit, the
selectors will allow us to significantly simplify our React components
that need to retreive data from the store.
We now must work with both `composes` and `clones`. `Composes` and `clones`
have slightly different schema in the Redux store because of differences
in their API responses (the store schema generally mirrors the API
response schema). Selectors are defined for `images` that work for
both `composes` and `clones`.
Using selectors allows our React components to interact with the Redux store
as if it were a database - components can simply query the store by id
using a selector. This hugely simplifies our React components - they no
longer need to accept multiple props related to a `compose` (or `clone`
or `image`). They can simply take a `composeId` (or `cloneId` or
`imageId`) prop and use an appropriate selector to obtain the necessary
information.
Selectors also encapsulate the store schema. Components no longer need to know
about the store schema to get information about an image - they simply
use a selector and in return receive a normalized (and flat) object.
This means that in the future we could easily migrate the API and slices
to RTK Query without the need to modify any of our React components.
Fixes#774. This matches the Review step with the updated mocks as per SPUR.
The changes are following:
1. Target environment tab:
- value of AWS `Account ID` aligned with GCP and Azure values
2. Registration tab:
- `Subscription` changed to `Registration type`
- `Organization ID` removed, will be added in a different place so it's clearer it's associated with an activation key
3. System configuration:
- updated column name `Type` to `File system type` in partitions popover
- updated the width of the column to accommodate the change
- unified line spacing of `Image size` with the other rows
- changes `Packages` to `Additional packages`
The Content Sources service can now be used for handling package info and
search. The api call to this service requires a list of repo urls. The
`repos.json` file tracks the supported repositories for each distro.
This is then mapped into a url array for whichever distro we are
searching for packages. The response body is similar to what existed in
image-builder but the key `package_name` needs to be mapped to just
`name`. Also, there is no pagination in Content Sources for `/rpms/names`
so we can currently only fetch a limit of 20 packages.
By adding custom CSS For the `ib-subdued-link` class the link now looks
like normal text. This approach was chosen as other approaches such as
clicking a non-rendered link cause serious ruckus in the test suite.
This resolves: #805.
This adds indication of expiring presigned urls for aws.s3 targets. Previously the targets remained marked as `Ready` until the builds disappeared after 14 days.
When an image is ready, the countdown in hours is shown in `Status` column. After that the image is marked as `Expired` and the download link changes to `Recreate image`.
The insights platform is moving to react router v6, meaning router
contexts can no longer be nested. As a result all applications will end
up sharing the same `BrowserRouter`.
Switch to using the release (`/` or `/beta/`) as a basename for the
BrowserRouter, and offload the full path (`/insights/$appname`) to the
individual routes. This makes it easier to drop the BrowserRouter in
image builder for the platform one in future.
Because of mismatched redux versions between NotificationPortal and our
app, the former couldn't automatically discover the store.
Also drop reregister of notificationsReducer, we already register it in
store.
This commit modernizes the Redux store to bring it in line with the
current recommended best practices/patterns. It is possible because of a
recent previous commit that added Redux Toolkit as a dependency.
For detailed information on what modern Redux entails, see the Redux docs:
https://redux.js.org/introduction/getting-started#learn-modern-redux-livestream
Practically speaking, this means a huge reduction in boilerplate code.
Maintaining and extending the code will be much easier. All Redux logic
is now encapsulated by 'slices'. Reducers are defined in the slices, and
action creators and action types are generated automatically.
Redux Toolkit includes Immer, which greatly simplifies writing reducer logic
much simpler - state updates in Redux must be immutable, but working
with Javascript objects in an immutable fashion is clumsy, requiring
gratuitious use of the spread ... operator. With Immer, the state can be
updated as if mutable updates were allowed. Reducer logic has been
changed to take advantage of this in this commit.
This commit also removes a large amount of unused code. Fingers crossed
that nothing breaks. The tests do pass, afterall...
One other minor change... composesGet was renamed to fetchComposes and
composeGetStatus was renamed to fetchComposeStatus. This is in line with
the Redux documentation examples.
Fixes#797. This increases the size of the margin at the bottom of the table of images. That way the pagination controls are not obscured by the notifications icon.
This commit adds a test that checks the new behavior of the file system
configuration buttons by adding duplicate mount points and verifying
that errors do not appear until the next button is clicked.
Related to #778. This replaces `verifyButtons()` function with `getBackButton()`, `getNextButton()` and `getCancelButton()`.
The functions run `getByRole` query before a button is clicked allowing detection and use of custom buttons.
Test `Click through all steps › with valid values` was updated to reflect changes in functionality of the `File system configuration` step.
This commit improves the file system configuration step's error handling
by performing validation only when the next button is clicked. This
allows an invalid state to temporarily exist while the user is modifying
the mountpoints without bothersome error messages needlessly appearing.
Broadly speaking there were two options for the implementation: (1)
delay the validation, performing validation only upon clicking the next
button -or- (2) perform validation immediately as normal but hide error
messages until the next button is clicked. Option (1) proved to be
untenable - Data Driven Forms does provide `pauseValidation()` and
`resumeValidation()` functions from React Final Form which theoretically
would make this option possible... However, we need to call
`resumeValidation()` in the next button's click handler and then
immediately make a decision based on the validation results either to
remain on the step and display the errors or move to the next step.
When we tried implmenting this we found that `resumeValidation()` does
not immediately peform validation - validation only resumes after
exiting the handler. Therefore, this approach was not considered and
option (2) was used.
In order to gain control over the behavior of the next button, custom
buttons are implemented for this step. Sharing state between the custom
buttons and the form was a challenge. With pure React it would have been
as simple as moving the relevant state to the parent component, but that
was not possible due to Data Driven Forms. Instead, state is shared
using the form state. A new property,
`'file-system-config-show-errors'`, in the form state is used to
determine whether or not error messages should be displayed.
In order to cause a re-render upon a change in
`'file-system-config-show-errors'`, the file system configuration
component is wrapped in a `<FormSpy>` component.
Previously the polling was started once on mount, but the reference to
the list of composes the polling function had didn't get updated. Reset
the polling on each render, ensuring the polling function has the latest
the list of composes from the store.
Fixes#767
