Wizard: set status on step

This implements error status for a step navigation.
It helps user to see on what step there is an validation error and why they can't create the blueprint.

src/Components/CreateImageWizardV2/CreateImageWizard.tsx

@@ -4,7 +4,9 @@ import {
   Button,
   Wizard,
   WizardFooterWrapper,
+  WizardNavItem,
   WizardStep,
+  WizardStepType,
   useWizardContext,
 } from '@patternfly/react-core';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -190,6 +192,38 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
     }
   }
 
+  const detailsNavItem = (
+    step: WizardStepType,
+    activeStep: WizardStepType,
+    steps: WizardStepType[],
+    goToStepByIndex: (index: number) => void
+  ) => {
+    const isVisitRequired = true;
+    const hasVisitedNextStep = steps.some(
+      (step) => step.index > step.index + 1 && step.isVisited
+    );
+
+    return (
+      <WizardNavItem
+        key={step.id}
+        id={step.id}
+        content={step.name}
+        isCurrent={activeStep?.id === step.id}
+        isDisabled={
+          step.isDisabled ||
+          (isVisitRequired && !step.isVisited && !hasVisitedNextStep)
+        }
+        isVisited={step.isVisited}
+        stepIndex={step.index}
+        onClick={() => goToStepByIndex(step.index)}
+        status={
+          (step.isVisited && step.id !== activeStep?.id && step.status) ||
+          'default'
+        }
+      />
+    );
+  };
+
   return (
     <>
       <ImageBuilderHeader inWizard />
@@ -375,6 +409,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             name="Details"
             id={'step-details'}
             isDisabled={snapshotStepRequiresChoice}
+            navItem={detailsNavItem}
+            status={detailsValidation.disabledNext ? 'error' : 'default'}
             footer={
               <CustomWizardFooter
                 disableNext={detailsValidation.disabledNext}