Commit graph

111 commits

Author SHA1 Message Date
Sanne Raymaekers
cb8ab9347e CreateImageWizard: use non-deprecated image type aliases
'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.
2022-12-06 15:14:53 +01:00
regexowl
ab1a7f4aab ESLint: Use --fix with updated rules to order imports
This applies the updated sorting rules to the files by running `npm run lint:js:fix`
2022-12-02 16:29:58 +01:00
regexowl
b2a6c403bf Wizard: Add additional information for an activation key in Review step
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.
2022-12-01 12:35:07 +01:00
Ondřej Budai
47d99a3903 ImagesTable: indent the downloaded compose request
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>
2022-11-30 11:43:13 +01:00
Sanne Raymaekers
c982fe7038 test: fix console warnings
- fix proptype of RegionsSelect
- wrap state-changing events in act
2022-11-09 15:29:50 +01:00
lucasgarfield
c49d96871a Tests: Add tests for ImagesTable, ClonesTable, and new ShareImageModal 2022-11-08 11:29:31 +01:00
lucasgarfield
5c37e3b45b Images Table: Add clones table for AWS composes 2022-11-08 11:29:31 +01:00
lucasgarfield
c4b59374f2 Redux: Add clones slice
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.
2022-11-08 11:29:31 +01:00
regexowl
6d789da727 Wizard: Update Review step
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`
2022-11-07 16:36:50 +01:00
Sanne Raymaekers
06d47e5428 CreateImageWizard: fix typo in aws step 2022-11-07 12:26:08 +01:00
Simon de Vlieger
35afba1bf2 imagestable: request.json link now non-styled
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.
2022-10-25 18:00:40 +02:00
regexowl
5168b80eeb ImagesTable: Indicate expiration of aws.s3 targets
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`.
2022-10-20 11:08:47 +02:00
Sanne Raymaekers
03421acc74 src/Router: use release as a basename in BrowserRouter
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.
2022-10-17 15:53:21 +02:00
lucasgarfield
a17a759d5e Redux: Modernize Redux store
This commit modernizes the Redux store to bring it in line with the
current recommended best practices/patterns. It is possible because of a
recent previous commit that added Redux Toolkit as a dependency.

For detailed information on what modern Redux entails, see the Redux docs:
https://redux.js.org/introduction/getting-started#learn-modern-redux-livestream

Practically speaking, this means a huge reduction in boilerplate code.
Maintaining and extending the code will be much easier. All Redux logic
is now encapsulated by 'slices'. Reducers are defined in the slices, and
action creators and action types are generated automatically.

Redux Toolkit includes Immer, which greatly simplifies writing reducer logic
much simpler - state updates in Redux must be immutable, but working
with Javascript objects in an immutable fashion is clumsy, requiring
gratuitious use of the spread ... operator. With Immer, the state can be
updated as if mutable updates were allowed. Reducer logic has been
changed to take advantage of this in this commit.

This commit also removes a large amount of unused code. Fingers crossed
that nothing breaks. The tests do pass, afterall...

One other minor change... composesGet was renamed to fetchComposes and
composeGetStatus was renamed to fetchComposeStatus. This is in line with
the Redux documentation examples.
2022-09-30 13:17:09 +02:00
Sanne Raymaekers
1276b4ae9c test/ImagesTable: use redux store and mocked api
Instead of supplying the composes directly in the store, let the
component call the api.
2022-09-26 14:04:01 +02:00
lucasgarfield
2cac343b2f Wizard: Add test for file system configuration buttons
This commit adds a test that checks the new behavior of the file system
configuration buttons by adding duplicate mount points and verifying
that errors do not appear until the next button is clicked.
2022-09-23 18:11:35 +02:00
regexowl
69c29e4336 Wizard: Update tests
Related to #778. This replaces `verifyButtons()` function with `getBackButton()`, `getNextButton()` and `getCancelButton()`.

The functions run `getByRole` query before a button is clicked allowing detection and use of custom buttons.

Test `Click through all steps › with valid values` was updated to reflect changes in functionality of the `File system configuration` step.
2022-09-23 18:11:35 +02:00
regexowl
a3afc562c8 Wizard: Update tests
Related to #773. This updates tests to reflect changes in the description of the Packages step.
2022-09-19 16:19:30 +02:00
regexowl
0bced556a9 ESLint: Use --fix with new rules to order import declarations
Related to #795. This applies the new sorting rules in ESLint to the files by running `npm run lint:js:fix`
2022-09-14 13:24:38 +02:00
regexowl
05e678f8c1 ImagesTable: Add pagination to the bottom of the table
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.
2022-09-14 10:32:38 +02:00
lucasgarfield
a977f4b72b Redux: Add Redux Toolkit
This commit adds Redux Toolkit as a dependency. Adding Redux Toolkit is
beneficial because it will allow us to use the current best-practice Redux
development patterns and tools as well as reduce the number of
dependencies. Redux Toolkit is backwards compatible with existing Redux code,
and therefore works with all of the current actions and reducers.

The store is now created using Redux Toolkit's configureStore(). Previously, a
custom store creator developed by Red Hat Insights was used. However,
this is actually not required for Insights apps, and creating the store using
configureStore() is necessary to take advantage of Redux Toolkit. For
instance, the store can now be inspected using the Redux devtools in the
browser.

This commit removes the redux-logger middleware. It is no longer
necessary, as the Redux development tools can now be used to easily inspect and
reason about the redux store and its state.

The Thunk middleware dependency has also been removed, as Thunks are already
included in Redux Toolkit.

The redux-promise-middleware dependency has been left in place for now,
but its functionality is also available in Redux Toolkit and it may be
considered for removal in the future.

Using Redux Toolkit will also allow us to move to the `Slice` pattern when
defining actions/reducers in the future if we wish. This will make
writing, reasoning about, and debugging the code related to the Redux
store much easier.
2022-09-06 11:01:25 +02:00
lucasgarfield
1d6a92a7f9 Wizard: CentOS acknowledgement text updated for production 2022-09-02 17:01:12 +02:00
Ondřej Budai
5264896bff ImagesTable: add option to download a raw compose request
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>
2022-08-15 15:38:13 +02:00
lucasgarfield
489d6a334f CreateImageWizard: Add CentOS acknowledgement
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.
2022-07-08 11:17:10 +02:00
lucasgarfield
f6a98d2dca CreateImageWizard: Add CentOS speedbump
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.
2022-07-08 11:17:10 +02:00
Sanne Raymaekers
1c5542ca81 CreateImageWizard: Use stage candlepin urls on stage consoledot 2022-06-07 14:53:45 +02:00
Jacob Kozol
4fa71cede8 update style across the project
The eslint updates require style changes in all components.
2022-05-23 12:47:20 +02:00
Sanne Raymaekers
e160aec170 test: Add test to check for all the available releases
This obsoletes the 'non-rhel releases on beta' test, as it checks all
releases.
2022-05-18 15:24:04 +02:00
Sanne Raymaekers
2e39b47095 test: Remove commented out image output test 2022-05-18 15:24:04 +02:00
Jacob Kozol
40f7be170c CreateImageWizard: require max image name length of 100 chars 2022-05-13 12:51:48 +02:00
Gianluca Zuccarelli
90d15807a6 ImagesTable: add error status
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.
2022-04-29 17:13:37 +02:00
lucasgarfield
d7035d544b ImagesTable: Show UUID in expandable details row
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.
2022-04-26 16:11:30 +02:00
Sanne Raymaekers
294cb08a0f CreateImageWizard: Use 'gcp' image type for gcp
The vhd alias for gcp was dropped, as image-builder includes extra repos
for gcp.
2022-04-25 14:00:54 +02:00
Sanne Raymaekers
445d56273f test: Use userEvent.click for checkboxes 2022-04-22 16:44:48 +02:00
Sanne Raymaekers
4da829ff8f CreateImageWizard: Don't show centos on non-beta
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.
2022-04-22 16:44:48 +02:00
Jacob Kozol
787b0180de CreateImageWizard: fix validation for activation keys
The validators are passed values by the useFieldApi hook. Adding this to
the activation key component allows the `required` validation to work.
2022-04-21 18:36:19 +02:00
lucasgarfield
fa7b0ca553 CreateImageWizard: Package search reset buttons and typeahead filter
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.
2022-04-21 16:05:18 +02:00
Jacob Kozol
2f5f6dcc46 CreateImageWizard: move name image step to end
The Details step is renamed to Name Image and moved to the last step
before Review. Also, the validation is removed since all utf-8
characters are supported for image names.
2022-04-19 14:07:46 +02:00
Sanne Raymaekers
1b471b762d test: Wait for rendering to finish in keyboard accessability test
Waits for components to finish rendering before continuing. This gets
rid of the test warnings.
2022-04-12 13:07:50 +02:00
Sanne Raymaekers
ed12903519 Revert "CreateImageWizard: Disable vmware and installer images"
This reverts commit 8e4b4ff6d5.
2022-04-06 11:30:09 +01:00
Gianluca Zuccarelli
78123bff0e CreateImageWizard: target env validation
Validation is not enforced on the image output step
when selecting and then deselecting an image type. This
is because the only validation which is set is `Required`.
However, after deselecting an image type the input becomes
a key-value object with all the values set to false. This
commit adds a custom validator to check that at least one
value in the object is set to true. Fixes #575
2022-04-04 15:11:45 +02:00
Sanne Raymaekers
5643a142d1 CreateImageWizard: Add customTitle to step template
This is used by substeps.
2022-03-29 16:13:14 +02:00
lucasgarfield
e99b7b7d0b CreateImageWizard: Make target environments keyboard selectable
The AWS, Google, and Azure tiles on the image output step can now be
selected/deselected using SPACE and/or ENTER.
2022-03-25 15:47:48 +01:00
lucasgarfield
e649e5c385 CreateImageWizard: Override Data Driven Form Enter behavior
Resolves #466. The default behavior for the DDF Wizard is to either advance to
the next step or submit the form when the ENTER is pressed.

This is inappropriate for complex forms that contain many different
types of elements that are typically interacted with using ENTER. For
instance, the default behavior when a link is focused and ENTER is pressed
is not to open the link in a browser but to advance or submit the form.

This commit overrides the default behavior by passing an onKeyDown prop
to the wizard which calls a custom onKeyDown function. The new custom
function does not define any behavior for when ENTER is pressed,
but does recreate DDF's default ESCAPE behavior, which is to close the
modal.
2022-03-25 15:47:48 +01:00
lucasgarfield
c28e0d15b6 CreateImageWizard: Make steps autofocus on first input upon render
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.
2022-03-25 15:47:48 +01:00
Jacob Kozol
4b9e98bff3 test: able to recreate image
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.
2022-03-23 12:30:42 +01:00
Jacob Kozol
80918f97e4 CreateImageWizard: only display Image name review field when it exists 2022-03-03 17:17:03 +01:00
Jacob Kozol
2300af1152 ImagesTable: add image name
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
2022-03-02 16:24:35 +01:00
Jacob Kozol
c257eec540 CreateImageWizard: add image name field
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.
2022-03-02 16:24:35 +01:00
Sanne Raymaekers
350acbd21b CreateImageWizard: File system configuration 2022-02-28 15:27:09 +01:00