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
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue