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 updates the Repositories and Review step as per [mocks](https://www.sketch.com/s/d7aa6d29-fca0-4283-a846-09cc5fd10612/a/MyEbDz7).
Repositories with the unavailable or invalid status have a popover that allows for further inspection. The time of the last introspection and the counter of failed attempts was added to the popover, together with the "Go to Repositories" button.
On Recreate the payload repositories are checked against "freshly" fetched list of repositories. In case any of the previously checked repositories is no longer available in content sources an Alert is rendered on both Repositories and Review steps. The unavailable repository is checked, but the checkbox is disabled and the information is dashed out. Since the information about the repository is stored in the Repository type, the only information available to be rendered is the baseurl.
Create image button is also disabled when recreating an image with unavailable repositories.
v6 of react-router-dom is now supported everywhere, and leaving the
event listener can cause navigation bugs.
See gkarat/ocp-advisor-frontend#101 as an example.
This makes the wizard feel much 'faster' for a better user experience.
The implementation uses RTK Query for prefetching. For most API
requests, prefetching is done when the 'next' button is hovered over on
the previous step.
This commit replaces all calls to the insights.chrome global with calls
to the useChrome() hook (or the useGetEnvironment() custom hook that
wraps useChrome()).
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 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.
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.
The App and Routes components are updated for compatibility with React
Router v5 and to follow updates made to RedHatInsights'
frontend-starter-app. Mainly, we no longer map our Routes to another
component and our main components are lazy loaded instead of mapped to
an asyncComponent. Also, the App component is rewritten to use react
hooks and remove unneccessary bloat.
