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.
Fixes#772. This updates description of the step according to recent SPUR.
The `Authorizing an Azure account` expandable was removed (both from the step and `ImageCreator.js`) as well as `Destination` heading. Size of the Oauth 2.0 link was changed from small to default.
Adds a PF4 info <Alert> that informs users that CentOS is intended only
for development of RHEL-Next if CentOS is the selected distro in the
Image Output step.
When selecting a distribution during the Image Output step, only RHEL
distributions are shown initially. A button at the bottom of the list of
distributions can be clicked to expand the list and display all
distributions, which at the moment adds CentOS-8 and CentOS-9 to the
list.
Implemented by passing a PF4 SelectViewMoreObject as the LoadingVariant
prop to the <Select>.
This feature (and therefore the ability to build CentOS images) is only
available in beta.
/tmp was added to the list of valid mountpoints in the filesystem
customization step.
No validation is necessary at this time because rhel-86, centos-8, and
centos-9 all support a /tmp mountpoint.
The distinction is made by checking if the distribution contained
'rhel'. This is the same way the review page determins if it should show
a registration tab.
Resolves#604. The available and chosen package search inputs now have a
reset button which resets the search and list elements to their default
states. This fixes a cosmetic issue related to the focus-visible width
being smaller than the search input width. This is accomplished by passing
an onClear prop to the search input.
The functions used to add all and selected packages were split from two
functions into four functions. The functions appear similiar but this is only
superficial; the logic is actually quite different and there is very
little code reuse. Four separate functions will be easier to understand and
maintain.
This commit includes several other modifications:
1. The chosen package search is now a typeahead filter. This brings it
in line with PatternFly dual list selector examples.
2. The available package search button has changed to be in line with
the PatternFly <SearchInput /> component examples.
3. Package sorting behavior is now consistent. Previously, packages would be
sorted if 'add all' was used but not if 'add selected' was used. Now
the default behavior is to always sort the package list.
Rely on the index matching instead. During a drag, if onDragOver is
fired the index the item will be dragged to (the target index) will be
set. If the target index doesn't match the source index, the new
tempItemOrder is made and the new target index is set.
Initially this index is null, so even if the target index is the
same as the current index, the tempItemOrder and target index will be
set once.
By not shorting this event based on the visual layout, the drag state
gets initialized correctly every time.
Fixes#679
Adds all valid prefixes defined in composer, removes invalid ones, and
disables the TextInput for the root partition. This makes customized
filesystems less error prone.
https://bugzilla.redhat.com/show_bug.cgi?id=2070761
The default behavior of Data Driven Forms when moving to the previous or
next step is to maintain focus on the previous or next button,
respectively.
This commit makes the UI more friendly to keyboard users by focusing
on the first input element of a given step when it is rendered.
Whenever possible, autofocus is achieved by passing components the
autoFocus prop. When this is not possible, then useRef and useEffect hooks
are used to set focus.
At the moment, it is not possible to autofocus the image output step's
release selector or the file system configuration step's toggle using the
above methods. This is because these PatternFly components do not
currently pass props to the appropriate child component and do not
support ref forwarding. The best option for autofocus in these cases is
currently being investigated.
Optional chaining can return undefined. So, we should not use `of` on
getState()?.values?.['file-system-configuration']. But, since we already
check for the existance of this variable we do not need to optionally
chain.
Add a details step where the user can enter a descriptive image name.
This name is displayed in the review step above the Release. Both these
fields are now horizontal to save vertical space.
When searching for a package, all matching packages are now returned. First an
attempt is made using the api's default limit and if there are more
matching packages than the default limit a second request is made with
an increased limit. To facilitate this, api.getPackages() now accepts an
optional limit parameter. Retrieving all matching packages is necessary
because of the sorting logic.
The registration step now provides users with a type ahead input so they
can select from all activation keys associated with their accounts.
The testing for this requires that we wait for the mocked api response.
When we load the organization id but do not use or display it we can
have an act warning because we unmount the component without handling
the response.
Update the registration options to include registering without insights.
Also, improve the text info in the step.
The org id is also removed from the registration step since we no
longer display the id in this step.
At the final review step, only render the Registration tab
if the user has selected RHEL 8 as the release. Add a test to
ensure that if the user selects CentOS as the release, there
are only two tabs at the review step.
The image types 'vsphere', 'guest-image', and 'image-installer' are now
supported by the CreateImageWizard. They require no additional
customizations and support the current registration and packages
customizations.
Loading the organization ID is now done in the registration step. This
prevents the entire wizard from waiting on the org id and prevents the
wizard from remounting when the async getUser() completes.
When a user searches for available packages, already chosen packages are
filtered from the available packages list. This prevents the user from
adding duplicate packages.
When the user filters the chosen packages list they may find no packages
containing the entered string. In this case we display a message that no
packages are found. There are now tests for both the available and
chosen packages lists for when packages are not found.
Having the available packages list be either undefined, empty, or with
elements requires complicated logic. Instead, initialize
packagesAvailable to an empty array. In order to display an error state
when the packages search returned no packages, now use a boolean flag if
available packages were found. This check also sets us up in case we
want to provdie further feedback on failed package searches.
