The search input on the Packages step is disabled until needed data is fetched. This was causing a problem on the Additional custom packages step which uses the same component.
A check of the current step was added so the search input gets disabled only for the Packages step.
Previously the base repository links for each distribution were read from `repos.js` file. This gets the needed information
from a call to api endpoint `architectures/{distribution}`. The data is fetched via RTK Query and is then filtered by an
architecture. For now the x86_64 architecture is hardcoded, this will change when multiple architectures get available.
This commit adds the ability to specify AWS targets using the sources
service on insights.
This is the first commit to the codebase that makes use of the new RTK
Query endpoints, so I will provide a bit of additional context here:
The sources are obtained by calling the `useGetAWSSourcesQuery()` hook.
This hook can be called in any component where information about the
sources is needed.
A few tricks are used to make the user experience as responsive as
possible.
The `prefetch()` hook provided by RTK Query is called when the user
clicks on the AWS button on the image output step. This triggers the
initial request for the sources, which will then (hopefully) be ready by the
time the user clicks to the next step (the AWS target environment step)
where they are needed.
Because we anticipate a common user workflow to involve using the Create
image wizard in one browser tab and the sources service in another tab,
sources are also refetched every time the source dropdown is opened.
This means that if a user adds a source while in the middle of using the
wizard, they will be able to see it in the wizard's sources dropdown
without refreshing their browser.
Finally, because of the `Recreate image` feature, the
`useGetAWSSourcesQuery` hook also needs to be called on the review step.
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.
Fixes#909. Fixes#918.
This updates the order of the releases on the Image output step to sort from newest to oldest. The RELEASES Object was converted to Map which remembers insertion order.
The color of the `Show options for further development of RHEL` option in the Release dropdown select was also changed to blue.
Fixes#911. Fixes#912.
This updates the File system step. The changes are:
- changed the toggle group for selecting the mode of partitioning to radio select and updated information for each radio button as mentioned in #911
- added information to the "automatic" option of the file system configuration as mentioned in #912
- updated information for the "manual" option of the configuration as mentioned in mocks
All instances of '3rd party repositories' (and its variations) have been
changed to 'Custom repositories'. This is in better agreement with the
content sources app on consoledot, which generally is called either
'Custom Repositories' or 'Repositories'. Additionally, it is possible to
add and manage Red Hat repositories via content sources, which makes
'3rd party' confusing.
This commit fixes#893 by removing the ability to clear the release
select on the image output step (this is the select where the user
chooses from RHEL 8, RHEL 9, CentOS 8 or 9, etc...).
Originally the ability to clear the select was added so that the default
state (where CentOS options are hidden behind a 'speedbump') could be
returned to but this seems unnecessary in retrospect and introduces
opportunities for bugs (as seen with the validation in #893) so it seems
wise to simply remove the ability to clear altogether.
Adds support for 3rd party repositories using the Red Hat Insights
Repositories app on console.redhat.com.
The packages step has been refactored heavily to reduce the bug surface
area and improve its reusability (it is now used in two Wizard steps).
New features related to the Repositories app are currently only exposed
in stage. Because stage and production are quite divergent (they have
different steps, for instance) there are separate test suites for the
production and stage versions of the Wizard. When these features are
moved into production, the two test suites can be merged into one.
This adds a `TextList` with additional information for a chosen activation key in Registration step of the Wizard.
Component `AdditionalKeyInformation` is wrapped within a new component called `RegistrationKeyInformation` for the purpose of displaying the information on the Registration step. As the component needed to use `FormSpy` element to work properly in this context within the Data Driven Forms.
Without it the validation of the form didn't work as expected, because of a persisting reference to the element it was evaluated against.
Popover for an Activation key was also updated according to SPUR mocks.
Fixes#822. This adds component `ActivationKeyInformation` with additional information for an activation key on a Registration tab of Review step.
The added fields are:
- Name
- Role
- SLA
- Usage
- Additional repositories
Organization ID is added to the Activation key popover.
Function `getActivationKey` was added to `api` to get an additional information about activation key from RHSM api based on the name of the key.
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.
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.
