diff --git a/src/Components/CreateImageWizardV2/CreateImageWizard.tsx b/src/Components/CreateImageWizardV2/CreateImageWizard.tsx index 5f8a8873..a16e1fe2 100644 --- a/src/Components/CreateImageWizardV2/CreateImageWizard.tsx +++ b/src/Components/CreateImageWizardV2/CreateImageWizard.tsx @@ -16,6 +16,7 @@ import { useGetAllowedTargets, } from './steps/ImageOutput/Environment'; import ImageOutputStep from './steps/ImageOutput/ImageOutput'; +import ReviewStep from './steps/Review/ReviewStep'; import { RHEL_9, X86_64 } from '../../constants'; import './CreateImageWizard.scss'; @@ -135,6 +136,13 @@ const CreateImageWizard = () => { isSuccess={isSuccess} /> + } + > + + diff --git a/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx new file mode 100644 index 00000000..51864d9e --- /dev/null +++ b/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx @@ -0,0 +1,42 @@ +import React, { useState } from 'react'; + +import { ExpandableSection, Form, Title } from '@patternfly/react-core'; + +import { ImageOutputList } from './imageOutput'; + +import { + ArchitectureItem, + Distributions, +} from '../../../../store/imageBuilderApi'; + +type ReviewStepPropTypes = { + release: Distributions; + arch: ArchitectureItem['arch']; +}; + +const ReviewStep = ({ release, arch }: ReviewStepPropTypes) => { + const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false); + + const onToggleImageOutput = (isExpandedImageOutput: boolean) => + setIsExpandedImageOutput(isExpandedImageOutput); + return ( + <> +
+ Review + + onToggleImageOutput(isExpandedImageOutput) + } + isExpanded={isExpandedImageOutput} + isIndented + data-testid="image-output-expandable" + > + + +
+ + ); +}; + +export default ReviewStep; diff --git a/src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx b/src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx new file mode 100644 index 00000000..d9d24bed --- /dev/null +++ b/src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +import { + TextContent, + TextList, + TextListItem, + TextListVariants, + TextListItemVariants, +} from '@patternfly/react-core'; + +import { RELEASES } from '../../../../constants'; +import { + ArchitectureItem, + Distributions, +} from '../../../../store/imageBuilderApi'; + +type ImageOutputListPropTypes = { + release: Distributions; + arch: ArchitectureItem['arch']; +}; + +export const ImageOutputList = ({ + release, + arch, +}: ImageOutputListPropTypes) => { + return ( + + + + Release + + + {RELEASES.get(release)} + + + Architecture + + {arch} + +
+
+ ); +};