V2Wizard: Review step improvements (HMS-4085)

src/Components/CreateImageWizardV2/steps/Oscap/OscapProfileInformation.tsx

@@ -53,7 +53,6 @@ export const OscapProfileInformation = (): JSX.Element => {
       {isSuccessOscapProfileInfo && (
         <>
           <TextContent>
-            <br />
             <TextList component={TextListVariants.dl}>
               <TextListItem
                 component={TextListItemVariants.dt}

src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   DropdownList,
@@ -7,6 +7,8 @@ import {
   Spinner,
   Flex,
   FlexItem,
+  Modal,
+  Button,
 } from '@patternfly/react-core';
 
 import {
@@ -63,31 +65,78 @@ export const CreateSaveButton = ({
   const [createBlueprint, { isLoading }] = useCreateBlueprintMutation({
     fixedCacheKey: 'createBlueprintKey',
   });
+  const [showModal, setShowModal] = useState(false);
+  const wasModalSeen = window.localStorage.getItem(
+    'imageBuilder.saveAndBuildModalSeen'
+  );
+
+  const SaveAndBuildImagesModal = () => {
+    const handleClose = () => {
+      setShowModal(false);
+    };
+
+    return (
+      <Modal
+        title="Save time by building images"
+        isOpen={showModal}
+        onClose={handleClose}
+        width="50%"
+        actions={[
+          <Button
+            key="back"
+            variant="primary"
+            data-testid="close-button-saveandbuild-modal"
+            onClick={handleClose}
+          >
+            Close
+          </Button>,
+        ]}
+      >
+        Building blueprints and images doesn’t need to be a two step process. To
+        build images simultaneously, use the dropdown arrow to the right side of
+        this button.
+      </Modal>
+    );
+  };
+
+  const onClick = () => {
+    if (!wasModalSeen) {
+      setShowModal(true);
+      window.localStorage.setItem('imageBuilder.saveAndBuildModalSeen', 'true');
+    } else {
+      onSave();
+    }
+  };
+
   const onSave = async () => {
     const requestBody = await getBlueprintPayload();
     setIsOpen(false);
     requestBody && createBlueprint({ createBlueprintRequest: requestBody });
   };
+
   return (
-    <MenuToggleAction
-      onClick={onSave}
-      id="wizard-create-save-btn"
-      isDisabled={isDisabled}
-    >
-      <Flex display={{ default: 'inlineFlex' }}>
-        {isLoading && (
-          <FlexItem>
-            <Spinner
-              style={
-                { '--pf-v5-c-spinner--Color': '#fff' } as React.CSSProperties
-              }
-              isInline
-              size="md"
-            />
-          </FlexItem>
-        )}
-        <FlexItem>Create blueprint</FlexItem>
-      </Flex>
-    </MenuToggleAction>
+    <>
+      {showModal && <SaveAndBuildImagesModal />}
+      <MenuToggleAction
+        onClick={onClick}
+        id="wizard-create-save-btn"
+        isDisabled={isDisabled}
+      >
+        <Flex display={{ default: 'inlineFlex' }}>
+          {isLoading && (
+            <FlexItem>
+              <Spinner
+                style={
+                  { '--pf-v5-c-spinner--Color': '#fff' } as React.CSSProperties
+                }
+                isInline
+                size="md"
+              />
+            </FlexItem>
+          )}
+          <FlexItem>Create blueprint</FlexItem>
+        </Flex>
+      </MenuToggleAction>
+    </>
   );
 };

src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx

@@ -1,11 +1,14 @@
 import React, { useState } from 'react';
 
 import {
+  Button,
   ExpandableSection,
   Text,
   TextContent,
   TextVariants,
+  useWizardContext,
 } from '@patternfly/react-core';
+import { ArrowRightIcon } from '@patternfly/react-icons';
 
 import {
   ContentList,
@@ -36,21 +39,23 @@ import {
 import useBetaFlag from '../../../../Utilities/useBetaFlag';
 
 const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
+  const { goToStepById } = useWizardContext();
+
   const blueprintName = useAppSelector(selectBlueprintName);
   const blueprintDescription = useAppSelector(selectBlueprintDescription);
   const distribution = useAppSelector(selectDistribution);
   const environments = useAppSelector(selectImageTypes);
   const oscapProfile = useAppSelector(selectProfile);
   const registrationType = useAppSelector(selectRegistrationType);
 
-  const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false);
-  const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(false);
-  const [isExpandedFSC, setIsExpandedFSC] = useState(false);
-  const [isExpandedContent, setIsExpandedContent] = useState(false);
-  const [isExpandedRegistration, setIsExpandedRegistration] = useState(false);
-  const [isExpandedImageDetail, setIsExpandedImageDetail] = useState(false);
-  const [isExpandedOscapDetail, setIsExpandedOscapDetail] = useState(false);
-  const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(false);
+  const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(true);
+  const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(true);
+  const [isExpandedFSC, setIsExpandedFSC] = useState(true);
+  const [isExpandedContent, setIsExpandedContent] = useState(true);
+  const [isExpandedRegistration, setIsExpandedRegistration] = useState(true);
+  const [isExpandedImageDetail, setIsExpandedImageDetail] = useState(true);
+  const [isExpandedOscapDetail, setIsExpandedOscapDetail] = useState(true);
+  const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true);
 
   const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
     setIsExpandedImageOutput(isExpandedImageOutput);
@@ -69,11 +74,43 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const onToggleFirstBoot = (isExpandableFirstBoot: boolean) =>
     setIsExpandedFirstBoot(isExpandableFirstBoot);
 
+  type RevisitStepButtonProps = {
+    ariaLabel: string;
+    stepId: string;
+  };
+
+  const RevisitStepButton = ({ ariaLabel, stepId }: RevisitStepButtonProps) => {
+    return (
+      <Button
+        variant="link"
+        aria-label={ariaLabel}
+        component="span"
+        onClick={() => revisitStep(stepId)}
+        className="pf-u-p-0 pf-u-ml-xl"
+        isInline
+      >
+        Revisit step <ArrowRightIcon />
+      </Button>
+    );
+  };
+
+  const revisitStep = (stepId: string) => {
+    goToStepById(stepId);
+  };
+
   const isFirstBootEnabled = useBetaFlag('image-builder.firstboot.enabled');
   return (
     <>
       <ExpandableSection
-        toggleContent={'Image output'}
+        toggleContent={
+          <>
+            Image output{' '}
+            <RevisitStepButton
+              ariaLabel="Revisit Image output step"
+              stepId="step-image-output"
+            />
+          </>
+        }
         onToggle={(_event, isExpandedImageOutput) =>
           onToggleImageOutput(isExpandedImageOutput)
         }
@@ -84,7 +121,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
         <ImageOutputList />
       </ExpandableSection>
       <ExpandableSection
-        toggleContent={'Target environments'}
+        toggleContent={
+          <>
+            Target environments{' '}
+            <RevisitStepButton
+              ariaLabel="Revisit Target environments step"
+              stepId="step-image-output"
+            />
+          </>
+        }
         onToggle={(_event, isExpandedTargetEnvs) =>
           onToggleTargetEnvs(isExpandedTargetEnvs)
         }
@@ -135,7 +180,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
       </ExpandableSection>
       {isRhel(distribution) && (
         <ExpandableSection
-          toggleContent={'Registration'}
+          toggleContent={
+            <>
+              Registration{' '}
+              <RevisitStepButton
+                ariaLabel="Revisit Registration step"
+                stepId="step-register"
+              />
+            </>
+          }
           onToggle={(_event, isExpandedRegistration) =>
             onToggleRegistration(isExpandedRegistration)
           }
@@ -149,7 +202,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
       )}
       {oscapProfile && (
         <ExpandableSection
-          toggleContent={'OpenSCAP'}
+          toggleContent={
+            <>
+              OpenSCAP{' '}
+              <RevisitStepButton
+                ariaLabel="Revisit OpenSCAP step"
+                stepId="step-oscap"
+              />
+            </>
+          }
           onToggle={(_event, isExpandedOscapDetail) =>
             onToggleOscapDetails(isExpandedOscapDetail)
           }
@@ -161,7 +222,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
         </ExpandableSection>
       )}
       <ExpandableSection
-        toggleContent={'File system configuration'}
+        toggleContent={
+          <>
+            File system configuration{' '}
+            <RevisitStepButton
+              ariaLabel="Revisit File system configuration step"
+              stepId="step-file-system"
+            />
+          </>
+        }
         onToggle={(_event, isExpandedFSC) => onToggleFSC(isExpandedFSC)}
         isExpanded={isExpandedFSC}
         isIndented
@@ -170,7 +239,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
         <FSCList />
       </ExpandableSection>
       <ExpandableSection
-        toggleContent={'Content'}
+        toggleContent={
+          <>
+            Content{' '}
+            <RevisitStepButton
+              ariaLabel="Revisit Content step"
+              stepId="wizard-custom-repositories"
+            />
+          </>
+        }
         onToggle={(_event, isExpandedContent) =>
           onToggleContent(isExpandedContent)
         }
@@ -183,7 +260,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
       </ExpandableSection>
       {isFirstBootEnabled && (
         <ExpandableSection
-          toggleContent={'First boot'}
+          toggleContent={
+            <>
+              First boot{' '}
+              <RevisitStepButton
+                ariaLabel="Revisit First boot step"
+                stepId="wizard-first-boot"
+              />
+            </>
+          }
           onToggle={(_event, isExpandableFirstBoot) =>
             onToggleFirstBoot(isExpandableFirstBoot)
           }
@@ -196,7 +281,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
       )}
       {(blueprintName || blueprintDescription) && (
         <ExpandableSection
-          toggleContent={'Image details'}
+          toggleContent={
+            <>
+              Image details{' '}
+              <RevisitStepButton
+                ariaLabel="Revisit Image details step"
+                stepId="step-details"
+              />
+            </>
+          }
           onToggle={(_event, isExpandedImageDetail) =>
             onToggleImageDetail(isExpandedImageDetail)
           }