particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CreateImageWizard: Align all values on the review step

Browse source 
Closes #194
This commit is contained in:
Simon Steinbeiss 2021-07-21 11:41:50 +02:00 • committed by Sanne Raymaekers
parent d407442c83
commit 6d08382fce
1 changed files with 78 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/Components/CreateImageWizard/formComponents/ReviewStep.js
View file

@ -1,5 +1,5 @@
import React from 'react';
import { TextContent, Text, TextVariants, TextList, TextListItem, TextListVariants, TextListItemVariants } from '@patternfly/react-core';
import { TextContent, Text, TextVariants, TextListItem, TextListVariants, TextListItemVariants, Gallery, GalleryItem } 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';
@ -14,58 +14,96 @@ const ReviewStep = () => {
to create your image using the following criteria.
</Text>
<Text component={ TextVariants.h3 }>Image output</Text>
<TextList component={ TextListVariants.dl } data-testid='review-image-output'>
<TextListItem component={ TextListItemVariants.dt }>Release</TextListItem>
<TextListItem component={ TextListItemVariants.dd }>
{releaseValues?.[getState()?.values?.release]}
</TextListItem>
</TextList>
<Gallery component={ TextListVariants.dl } data-testid='review-image-output'>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dt }>Release</TextListItem>
</GalleryItem>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dd }>
{releaseValues?.[getState()?.values?.release]}
</TextListItem>
</GalleryItem>
</Gallery>
<Text component={ TextVariants.h3 }>Target environment</Text>
{getState()?.values?.['aws-account-id'] && <>
<Text id="destination-header">Amazon Web Services</Text>
<TextList component={ TextListVariants.dl } data-testid='review-image-upload-aws'>
<TextListItem component={ TextListItemVariants.dt }>Account ID</TextListItem>
<TextListItem component={ TextListItemVariants.dd }>{getState()?.values?.['aws-account-id']}</TextListItem>
</TextList>
<Gallery component={ TextListVariants.dl } data-testid='review-image-upload-aws'>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dt }>Account ID</TextListItem>
</GalleryItem>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dd }>{getState()?.values?.['aws-account-id']}</TextListItem>
</GalleryItem>
</Gallery>
</>}
{getState()?.values?.['google-account-type'] && <>
<Text id="destination-header">Google Cloud Platform</Text>
<TextList component={ TextListVariants.dl } data-testid='review-image-upload-google'>
<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>
<Gallery component={ TextListVariants.dl } data-testid='review-image-upload-google'>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dt }>
{googleAccType?.[getState()?.values?.['google-account-type']]}
</TextListItem>
</GalleryItem>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dd }>
{getState()?.values?.['google-email'] || getState()?.values?.['google-domain']}
</TextListItem>
</GalleryItem>
</Gallery>
</>}
{getState()?.values?.['azure-subscription-id'] && <>
<Text id="destination-header">Microsoft Azure</Text>
<TextList component={ TextListVariants.dl } data-testid='review-image-upload-azure'>
<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>
<Gallery component={ TextListVariants.dl } data-testid='review-image-upload-azure'>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dt }>Subscription ID</TextListItem>
</GalleryItem>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dd }>{getState()?.values?.['azure-subscription-id']}</TextListItem>
</GalleryItem>
</Gallery>
<Gallery>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dt }>Tenant ID</TextListItem>
</GalleryItem>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dd }>{getState()?.values?.['azure-tenant-id']}</TextListItem>
</GalleryItem>
</Gallery>
<Gallery>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dt }>Resource group</TextListItem>
</GalleryItem>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dd }>{getState()?.values?.['azure-resource-group']}</TextListItem>
</GalleryItem>
</Gallery>
</>}
{getState()?.values?.['register-system'] === 'subscribe-now-radio' &&
getState()?.values?.release.includes('rhel') && <>
<Text component={ TextVariants.h3 }>Registration</Text>
<TextList component={ TextListVariants.dl } data-testid='review-image-registration'>
<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 } type="password">
{'*'.repeat(getState()?.values?.['subscription-activation']?.length)}
</TextListItem>
</TextList>
<Gallery component={ TextListVariants.dl } data-testid='review-image-registration'>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dt }>Subscription</TextListItem>
</GalleryItem>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dd }>
{getState()?.values?.['register-system'] === 'subscribe-now-radio' ?
'Register the system on first boot' :
registerValues?.[getState()?.values?.['register-system']?.title]
}
</TextListItem>
</GalleryItem>
</Gallery>
<Gallery>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dt }>Activation key</TextListItem>
</GalleryItem>
<GalleryItem>
<TextListItem component={ TextListItemVariants.dd } type="password">
{'*'.repeat(getState()?.values?.['subscription-activation']?.length)}
</TextListItem>
</GalleryItem>
</Gallery>
</>}
</TextContent>
);