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.
25 lines
668 B
JavaScript
25 lines
668 B
JavaScript
import React from 'react';
|
|
|
|
import { useFormApi } from '@data-driven-forms/react-form-renderer';
|
|
import { Gallery, GalleryItem } from '@patternfly/react-core';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const GalleryLayout = ({ fields, minWidths, maxWidths }) => {
|
|
const { renderForm } = useFormApi();
|
|
|
|
return (
|
|
<Gallery minWidths={minWidths} maxWidths={maxWidths} hasGutter>
|
|
{fields.map((field) => (
|
|
<GalleryItem key={field.name}>{renderForm([field])}</GalleryItem>
|
|
))}
|
|
</Gallery>
|
|
);
|
|
};
|
|
|
|
GalleryLayout.propTypes = {
|
|
fields: PropTypes.array,
|
|
maxWidths: PropTypes.object,
|
|
minWidths: PropTypes.object,
|
|
};
|
|
|
|
export default GalleryLayout;
|