CreateImageWizard: improve review step
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.
This commit is contained in:
Jacob Kozol
Tom Gundersen
parent
3be89815f4
commit
2602ff346f
3 changed files with 164 additions and 106 deletions
|
|
@ -157,7 +157,7 @@ const CreateImageWizard = () => {
|
|||
isDynamic: true,
|
||||
inModal: true,
|
||||
buttonLabels: {
|
||||
submit: 'Create',
|
||||
submit: 'Create image',
|
||||
},
|
||||
showTitles: true,
|
||||
title: 'Create image',
|
||||
|
|
|
|||
|
|
@ -1,113 +1,154 @@
|
|||
import React from 'react';
|
||||
import { TextContent, Text, TextVariants, Gallery, GalleryItem } from '@patternfly/react-core';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
DescriptionList, DescriptionListTerm, DescriptionListGroup, DescriptionListDescription,
|
||||
List, ListItem,
|
||||
Tabs, Tab, TabTitleText,
|
||||
Text, TextContent, TextVariants, TextList, TextListVariants, TextListItem, TextListItemVariants
|
||||
} from '@patternfly/react-core';
|
||||
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
|
||||
import { releaseValues } from '../steps/imageOutput';
|
||||
import { registerValues } from '../steps/registration';
|
||||
import { googleAccType } from '../steps/googleCloud';
|
||||
|
||||
const ReviewStep = () => {
|
||||
const [ activeTabKey, setActiveTabKey ] = useState(0);
|
||||
const { getState } = useFormApi();
|
||||
|
||||
const handleTabClick = (event, tabIndex) => {
|
||||
setActiveTabKey(tabIndex);
|
||||
};
|
||||
|
||||
return (
|
||||
<TextContent>
|
||||
<>
|
||||
<Text>
|
||||
Review the information and click the Create button
|
||||
to create your image using the following criteria.
|
||||
Review the information and click "Create image"
|
||||
to create the image using the following criteria.
|
||||
</Text>
|
||||
<Text component={ TextVariants.h3 }>Image output</Text>
|
||||
<Gallery data-testid='review-image-output'>
|
||||
<GalleryItem>
|
||||
<Text component={ TextVariants.h4 }>Release</Text>
|
||||
</GalleryItem>
|
||||
<GalleryItem>
|
||||
<Text>
|
||||
<DescriptionList>
|
||||
<DescriptionListGroup>
|
||||
<DescriptionListTerm>Release</DescriptionListTerm>
|
||||
<DescriptionListDescription>
|
||||
{releaseValues?.[getState()?.values?.release]}
|
||||
</Text>
|
||||
</GalleryItem>
|
||||
</Gallery>
|
||||
<Text component={ TextVariants.h3 }>Target environment</Text>
|
||||
{getState()?.values?.['aws-account-id'] && <>
|
||||
<Text id="destination-header">Amazon Web Services</Text>
|
||||
<Gallery data-testid='review-image-upload-aws'>
|
||||
<GalleryItem>
|
||||
<Text component={ TextVariants.h4 }>Account ID</Text>
|
||||
</GalleryItem>
|
||||
<GalleryItem>
|
||||
<Text>{getState()?.values?.['aws-account-id']}</Text>
|
||||
</GalleryItem>
|
||||
</Gallery>
|
||||
</>}
|
||||
{getState()?.values?.['google-account-type'] && <>
|
||||
<Text id="destination-header">Google Cloud Platform</Text>
|
||||
<Gallery data-testid='review-image-upload-google'>
|
||||
<GalleryItem>
|
||||
<Text component={ TextVariants.h4 }>
|
||||
{googleAccType?.[getState()?.values?.['google-account-type']]}
|
||||
</Text>
|
||||
</GalleryItem>
|
||||
<GalleryItem>
|
||||
<Text>
|
||||
{getState()?.values?.['google-email'] || getState()?.values?.['google-domain']}
|
||||
</Text>
|
||||
</GalleryItem>
|
||||
</Gallery>
|
||||
</>}
|
||||
{getState()?.values?.['azure-subscription-id'] && <>
|
||||
<Text id="destination-header">Microsoft Azure</Text>
|
||||
<Gallery data-testid='review-image-upload-azure'>
|
||||
<GalleryItem>
|
||||
<Text component={ TextVariants.h4 }>Subscription ID</Text>
|
||||
</GalleryItem>
|
||||
<GalleryItem>
|
||||
<Text>{getState()?.values?.['azure-subscription-id']}</Text>
|
||||
</GalleryItem>
|
||||
</Gallery>
|
||||
<Gallery>
|
||||
<GalleryItem>
|
||||
<Text component={ TextVariants.h4 }>Tenant ID</Text>
|
||||
</GalleryItem>
|
||||
<GalleryItem>
|
||||
<Text>{getState()?.values?.['azure-tenant-id']}</Text>
|
||||
</GalleryItem>
|
||||
</Gallery>
|
||||
<Gallery>
|
||||
<GalleryItem>
|
||||
<Text component={ TextVariants.h4 }>Resource group</Text>
|
||||
</GalleryItem>
|
||||
<GalleryItem>
|
||||
<Text>{getState()?.values?.['azure-resource-group']}</Text>
|
||||
</GalleryItem>
|
||||
</Gallery>
|
||||
</>}
|
||||
{getState()?.values?.['register-system'] === 'subscribe-now-radio' &&
|
||||
getState()?.values?.release.includes('rhel') &&
|
||||
<>
|
||||
<Text component={ TextVariants.h3 }>Registration</Text>
|
||||
<Gallery data-testid='review-image-registration'>
|
||||
<GalleryItem>
|
||||
<Text component={ TextVariants.h4 }>Subscription</Text>
|
||||
</GalleryItem>
|
||||
<GalleryItem>
|
||||
<Text>
|
||||
{getState()?.values?.['register-system'] === 'subscribe-now-radio' ?
|
||||
'Register the system on first boot' :
|
||||
registerValues?.[getState()?.values?.['register-system']?.title]
|
||||
}
|
||||
</Text>
|
||||
</GalleryItem>
|
||||
</Gallery>
|
||||
<Gallery>
|
||||
<GalleryItem>
|
||||
<Text component={ TextVariants.h4 }>Activation key</Text>
|
||||
</GalleryItem>
|
||||
<GalleryItem>
|
||||
<Text type="password">
|
||||
{'*'.repeat(getState()?.values?.['subscription-activation']?.length)}
|
||||
</Text>
|
||||
</GalleryItem>
|
||||
</Gallery>
|
||||
</>
|
||||
}
|
||||
</TextContent>
|
||||
</DescriptionListDescription>
|
||||
</DescriptionListGroup>
|
||||
</DescriptionList>
|
||||
<Tabs isFilled activeKey={ activeTabKey } onSelect={ handleTabClick } className="pf-u-w-75">
|
||||
<Tab eventKey={ 0 } title={ <TabTitleText>Target environment</TabTitleText> } data-testid='tab-target'>
|
||||
<List isPlain iconSize="large">
|
||||
{getState()?.values?.['aws-account-id'] &&
|
||||
<ListItem icon={ <img className='provider-icon' src='/apps/frontend-assets/partners-icons/aws.svg' /> }>
|
||||
<TextContent>
|
||||
<Text component={ TextVariants.h3 }>
|
||||
Amazon Web Services
|
||||
</Text>
|
||||
<TextList component={ TextListVariants.dl }>
|
||||
<TextListItem component={ TextListItemVariants.dt }>Account ID</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
{getState()?.values?.['aws-account-id']}
|
||||
</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
</ListItem>
|
||||
}
|
||||
{getState()?.values?.['google-account-type'] &&
|
||||
<ListItem
|
||||
className='pf-c-list__item pf-u-mt-md'
|
||||
icon={ <img className='provider-icon' src='/apps/frontend-assets/partners-icons/google-cloud-short.svg' /> }>
|
||||
<TextContent>
|
||||
<Text component={ TextVariants.h3 }>Google Cloud Platform</Text>
|
||||
<TextList component={ TextListVariants.dl }>
|
||||
<TextListItem component={ TextListItemVariants.dt }>
|
||||
{googleAccType?.[getState()?.values?.['google-account-type']]}
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
{getState()?.values?.['google-email'] || getState()?.values?.['google-domain']}
|
||||
</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
</ListItem>
|
||||
}
|
||||
{getState()?.values?.['azure-subscription-id'] &&
|
||||
<ListItem
|
||||
className='pf-c-list__item pf-u-mt-md'
|
||||
icon={ <img className='provider-icon' src='/apps/frontend-assets/partners-icons/microsoft-azure-short.svg' /> }>
|
||||
<TextContent>
|
||||
<Text component={ TextVariants.h3 }>Microsoft Azure</Text>
|
||||
<TextList component={ TextListVariants.dl }>
|
||||
<TextListItem component={ TextListItemVariants.dt }>
|
||||
Subscription ID
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
{getState()?.values?.['azure-subscription-id']}
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dt }>
|
||||
Tenant ID
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
{getState()?.values?.['azure-tenant-id']}
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dt }>
|
||||
Resource group
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
{getState()?.values?.['azure-resource-group']}
|
||||
</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
</ListItem>
|
||||
}
|
||||
</List>
|
||||
</Tab>
|
||||
<Tab eventKey={ 1 } title={ <TabTitleText>Registration</TabTitleText> } data-testid='tab-registration'>
|
||||
{getState()?.values?.['register-system'] === 'register-later-radio-button' &&
|
||||
<TextContent>
|
||||
<TextList component={ TextListVariants.dl }>
|
||||
<TextListItem component={ TextListItemVariants.dt }>
|
||||
Subscription
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
Register the system later
|
||||
</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
}
|
||||
{getState()?.values?.['register-system'] === 'subscribe-now-radio' &&
|
||||
getState()?.values?.release.includes('rhel') &&
|
||||
<TextContent>
|
||||
<TextList component={ TextListVariants.dl }>
|
||||
<TextListItem component={ TextListItemVariants.dt }>
|
||||
Subscription
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
{getState()?.values?.['register-system'] === 'subscribe-now-radio' ?
|
||||
'Register the system on first boot' :
|
||||
registerValues?.[getState()?.values?.['register-system']?.title]
|
||||
}
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dt }>
|
||||
Activation key
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
{'*'.repeat(getState()?.values?.['subscription-activation']?.length)}
|
||||
</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
}
|
||||
</Tab>
|
||||
<Tab eventKey={ 2 } title={ <TabTitleText>System configuration</TabTitleText> } data-testid='tab-system'>
|
||||
<TextContent>
|
||||
<Text component={ TextVariants.h3 }>Packages</Text>
|
||||
<TextList component={ TextListVariants.dl }>
|
||||
<TextListItem component={ TextListItemVariants.dt }>
|
||||
Chosen
|
||||
</TextListItem>
|
||||
<TextListItem component={ TextListItemVariants.dd }>
|
||||
{getState()?.values?.['selected-packages']?.length || 0}
|
||||
</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -425,7 +425,7 @@ describe('Step Packages', () => {
|
|||
const [ next, , ] = verifyButtons();
|
||||
next.click();
|
||||
|
||||
screen.getByText('Review the information and click the Create button to create your image using the following criteria.');
|
||||
screen.getByText('Review the information and click "Create image" to create the image using the following criteria.');
|
||||
});
|
||||
|
||||
test('clicking Back loads Register', () => {
|
||||
|
|
@ -567,6 +567,23 @@ describe('Step Review', () => {
|
|||
const cancel = screen.getByRole('button', { name: /Cancel/ });
|
||||
verifyCancelButton(cancel, history);
|
||||
});
|
||||
|
||||
test('has three tabs', async () => {
|
||||
const buttonTarget = screen.getByTestId('tab-target');
|
||||
const buttonRegistration = screen.getByTestId('tab-registration');
|
||||
const buttonSystem = screen.getByTestId('tab-system');
|
||||
|
||||
userEvent.click(buttonTarget);
|
||||
screen.getByRole('heading', {
|
||||
name: 'Amazon Web Services'
|
||||
});
|
||||
userEvent.click(buttonRegistration);
|
||||
screen.getByText('Register the system on first boot');
|
||||
userEvent.click(buttonSystem);
|
||||
screen.getByRole('heading', {
|
||||
name: 'Packages'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Click through all steps', () => {
|
||||
|
|
@ -624,7 +641,7 @@ describe('Click through all steps', () => {
|
|||
|
||||
// review
|
||||
await screen.
|
||||
findByText('Review the information and click the Create button to create your image using the following criteria.');
|
||||
findByText('Review the information and click "Create image" to create the image using the following criteria.');
|
||||
await screen.findAllByText('Amazon Web Services');
|
||||
await screen.findAllByText('Google Cloud Platform');
|
||||
await screen.findByText('Register the system on first boot');
|
||||
|
|
@ -752,7 +769,7 @@ describe('Click through all steps', () => {
|
|||
next.click();
|
||||
|
||||
expect(screen.queryByText(
|
||||
'Review the information and click the Create button to create your image using the following criteria.'
|
||||
'Review the information and click "Create image" to create the image using the following criteria.'
|
||||
)).not.toBeInTheDocument();
|
||||
|
||||
// fill in the registration
|
||||
|
|
@ -762,7 +779,7 @@ describe('Click through all steps', () => {
|
|||
screen.getByRole('button', { name: /Next/ }).click();
|
||||
|
||||
await screen.
|
||||
findByText('Review the information and click the Create button to create your image using the following criteria.');
|
||||
findByText('Review the information and click "Create image" to create the image using the following criteria.');
|
||||
// review
|
||||
await screen.findAllByText('Amazon Web Services');
|
||||
await screen.findByText('Register the system on first boot');
|
||||
|
|
@ -786,7 +803,7 @@ describe('Click through all steps', () => {
|
|||
screen.getByRole('button', { name: /Next/ }).click();
|
||||
|
||||
expect(screen.queryByText(
|
||||
'Review the information and click the Create button to create your image using the following criteria.'
|
||||
'Review the information and click "Create image" to create the image using the following criteria.'
|
||||
)).not.toBeInTheDocument();
|
||||
|
||||
// fill in the registration
|
||||
|
|
@ -796,7 +813,7 @@ describe('Click through all steps', () => {
|
|||
screen.getByRole('button', { name: /Next/ }).click();
|
||||
|
||||
await screen.
|
||||
findByText('Review the information and click the Create button to create your image using the following criteria.');
|
||||
findByText('Review the information and click "Create image" to create the image using the following criteria.');
|
||||
await screen.findAllByText('Amazon Web Services');
|
||||
await screen.findByText('Register the system on first boot');
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue