This commit converts the Images Table to Typescript and converts all API
calls to image-builder to use RTK Query hooks.
This should increase the performance of the app significantly.
Previously our calls to the image-builder API were made in series. They
are now made in parallel. We may want to investigate the possibility of
hitting rate limiting now that we will be issuing requests in much more
rapid succession.
In the tests, moving to RTK Query hooks has allowed us to remove
virtually all Jest mocking. However, this means that some of our
previous tests which tested against implementation details were broken.
Most notably, we no longer check the Redux store to verify that clones
have been added correctly and we no longer check that compose requests
were issued successfully. Test coverage will be restored in a follow-up
PR where the dev-dependency @msw/data is added. Adding a persistent data
layer to the tests using @msw/data will allow us to verify that our POST
requests (creating composes and cloning them) are working by testing
that the Images Table has been updated.
This adds `request` to a reponse from the `composes/{composeId}` endpoint and `meta` to a response from the `/composes/{composeId}/clones` endpoint as per API documentation.
The incomplete responses were causing problems when fetching data from the endpoints mentioned above.
The fixture was also migrated to TypeScript.
This eliminates the `Error: Uncaught [TypeError: stepBody.scrollTo is not a function]` console error by mocking `scrollTo` as a prototype.
The error was caused by `scrollTo` not being implemented in JSDOM.
This wraps clicking on an error popover into `act()` and thus removes the `When testing, code that causes React state updates should be wrapped into act(...)` error.
This commit adds the edge images table as a federated module, gated behind a feature flag.
the configuration is for dev environment to work with federation modules locally
The use of chrome.isBeta is deprecated, the useChrome hook should be
used instead to obtain an isBeta() function. Using the deprecrated
chrome.isBeta pollutes the browser console with warning messages.
This commit replaces the isBeta() helper function with a new custom
hook, useGetEnvironment().
We still sometimes need to know which environment is running outside of
React components, where we cannot call the useChrome() or
useGetEnvironment() hooks. For instance, in the json used to define a
wizard step. Therefore a new isBeta variable has been added to the
form's initialState for use in these cases.
This removes error details from the image detail and moves them to popovers activated by clicking on "Image build failed" status.
Popovers were also added for clones which didn't include any error details previously.
Insights offers 'quickstarts', which can be used to provide
mini-tutorials in a sidebar.
Unfortunately, these quickstarts change our URL... they add an optional
query parameter related to the quickstart. The process of doing so
destroys our router's `location`, setting it to undefined.
We have been using the location state to store the GUID of the image,
needed when opening the wizard via the `Recreate image` action or when
opening the share modal.
As a workaround, we can simply accept that the quickstarts will change
our URL and destroy our router's location. Instead, we now put the image
id (its UUID) in the route itself. We can access it in the components as
necessary via the useParams hook.
This bumps user-event library by a major release and resolves the breaking changes.
Direct invocation of `userEvent` APIs (such as `userEvent.click()`and `userEvent.type()`) was replaced by calling the methods returned by `userEvent.setup()` as described here:
https://testing-library.com/docs/user-event/intro
Require const declarations for variables that are never reassigned after
being declared. If a variable is never reassigned, using the const
declaration is better. const declaration tells readers, “this variable
is never reassigned,” reducing cognitive load and improving
maintainability.
Moving to @redhat-cloud-services/frontend-component utilities broke
several tests, this commit fixes those tests.
Additionally, this commit bumps @patternfly/react-core and
@patternfly/react-table to versions 4.267.6 and 4.112.6, respectively.
Fixes#899. The status of images (parent images and clones) in the
clones table was displayed incorrectly - the 'highest priority'
(e.g. failure > success) was displayed for all images.
This was due to a bug in a conditional in the ImageBuildStatus
component. In the main images table, rows for AWS images should display
the highest priority status of *all* images. A single failed clone
should cause the status of the row in the main images table to be
failure, even if the parent compose status is successful.
This logic was incorrectly being applied to *all* statuses. This commit
fixes this - from now on, this logic is only used for rows in the main
images table.
'ami' was deprecated a while ago, and is kept around as an alias of
'aws'. Same with 'vhd' and 'azure', and 'vhd' and 'gcp'.
This maintains support for the old aliases where necessary.
Prior to this commit, the downloaded request was just an ugly unformatted
json. Surely, `jq . <request.json` could fix that, but it's much more
convenient if the frontend does it itself.
Signed-off-by: Ondřej Budai <ondrej@budai.cz>
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.
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.
Fixes#594. This adds pagination to the bottom of the images list so the user doesn't have to scroll up to use it.
Tests were also updated to reflect the change.
In order to help people transition from using GUI to use the API directly,
it's helpful to give them an easy way to inspect the whole raw compose
request.
This commit adds a new button next to each compose that simply downloads
the original compose request in a json format. This request can then be
directly piped into the IB API to build a new image.
Original idea by Troy Dawson
Co-authored-by: Lucas Garfield <lucas@redhat.com>
Signed-off-by: Ondřej Budai <ondrej@budai.cz>
Add error information for failed image
builds. The error details are only displayed
for failed builds and the error highest up
the error chain is displayed in the expandable
section of the image.
This commit displays the UUID in an expandable details row. This is
necessary because if an image was named, the UUID was not displayed.
It is important that a user know the UUID for troubleshooting, for
example in the case of requesting help with an image.
To facilitate this, the original Table component was converted to a
TableComposable component. TableComposable is newer and recommended over
the older Table by PatternFly.
Verify that clicking recreate will pass the expected compose request to
the CreateImageWizard. Also, verify that if passed a composeRequest and
initialStep of 'review', the wizard will display the review page with
all info filled.
If a user has specified an image name the name will appear. Otherwise
the image's UUID will appear.
The test needed to be modified to search for the compose in the store
with either the image name or the id
The "guest-image", "image-installer", and "vsphere" image types now
display proper labels in the ImagesTable target column. Also, the upload
component is renamed to Target for consistency.
In order to avoid unnexpected sideeffects and to be more specific in our
tests the components should be rendered in each test and not in the
beforeAll. This will improve the testing libraries ability to run
cleanup. Moving the render into a setUp function is okay because it is
still called from within each test and won't cause sideefects for the
cleanup.
