If a user choses packages and then changes to a different step, the
packagesChosen state is wiped. These packages are now stored in the form
state under 'selected-packages'. When the packages step is mounted, if
there are 'selected-packages', these are the initial state for
packagesChosen.
When adding all packages we no longer depend on the state update.
Instead, we initialize an object with the chosen packages and pass that
to both the step's state and the form's state. Using the step state to
set the form's state was causing the form's state to be set from the
prior step state and not the state with the new package list.
The addEventListener call needs to have the useCapture field set to
true. The data-driven-forms patternfly 4 wizard will continue to the
next step when the Enter key is pressed. If we add our keydownHandler as
an event listener with useCapture set to True, the keydownHandler will
trigger before the wizards handler. This will effectively override the
wizard's handling of the Enter key so that it can be used to search when
the user has either package search bar in focus.
The review step is improved. The create button now states 'Create
image'. The step description text is updated. The fields to be reviewed
are now split into tabs for 'Target environment', 'Registration',
'System Configuration'. The target environments show the logo of the
environment now. The quantity of packages selected also displays now.
Tests are also updated.
The test Router now takes location and navigator instead of history.
This also means that the history function no longer needs to be mocked
by jest. Instead, the location and pathname can simply be expected.
React router is moving away from redirects in favor of server side
redirecting since redirects are confusing because the initial "invalid"
route will still return a 200 status and redirecting unnecessarily
wastes resources. Instead of server routing we can also place our
Redirect inside of a Route as an element. Also, instead of using a
Redirect we use a Navigate. This is due to changes in how React Router
handles the history.
In React Router v6 the Route paramater 'exact' is replaced by using a
trailing * to indicate the path matches deeply. Also, elements are now
preferred over components. React, itself, has also been making this
switch. Using elements is simpler than components and integrates
better with hooks.
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.
The composeAdded action includes a field 'insert'. When set to true
`insert` will place the added compose at the beginning of the images
list. The test is modified so the new composes are added to the
beginning of the list.
Sort the package results in the CreateImageWizard
first by exact matches and then by pacakge results
that start with the same letters as the search term,
otherwise sort alphabetically.
Fixes#256
PF4 now allows more control over the DualListSelector. This component is
rewritten to use custom callbacks which allow us to display a more
customized version of the DualListSelector. Currently, the component is
visually identical to the existing implemention except for the addition
of a search button to filter the chosen packages.
When clicking the packages add all button the list of available packages
did not get added to the list of chosen packages. Now the chosen
packages and available packages are concatenated together.
screen.click() was being used but in React 17 the registration fields
will not be loaded into the dom until the user selects the radio option.
So, userEvent.click() must be used instead.
When image creation failed to start the wizard would get stuck in the
saving state with no notice to the user. Now the user will get an error
alert contain the status code and message. The wizard no longer gets
stuck in the saving state.
On authorization of image builder on azure, the user will be redirected
to portal.azure.com. The response mode is changed to query instead of
form_post because form_post makes a POST request while query makes a GET
request. portal.azure.com does not respond when we make a POST request
to it so users will not be redirected unless we use the response mode
of query.
The info text is updated and the authorize button is moved below tenant
ID. The tenant ID is now validated as a valid GUID and if is not valid
the authorize button is disabled. This tenant id is now used to validate
image builder on azure because the authorize url containing the tenant
id will authorize for any microsoft account type. Tests are also
updated.
Get rid of duplicate entry points.
Depending on the NODE_ENV, add the logger middleware in AppEntry.
Filter out undefined items to avoid 'middleware is not a function' error.
