Wizard: Validate snapshot date with useValidation

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -29,6 +29,7 @@ import Azure from './steps/TargetEnvironment/Azure';
 import Gcp from './steps/TargetEnvironment/Gcp';
 import {
   useFilesystemValidation,
+  useSnapshotValidation,
   useFirstBootValidation,
   useDetailsValidation,
 } from './utilities/useValidation';
@@ -62,8 +63,6 @@ import {
   selectImageTypes,
   selectRegistrationType,
   addImageType,
-  selectSnapshotDate,
-  selectUseLatest,
 } from '../../store/wizardSlice';
 import { resolveRelPath } from '../../Utilities/path';
 import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
@@ -180,13 +179,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const registrationType = useAppSelector(selectRegistrationType);
   const activationKey = useAppSelector(selectActivationKey);
 
-  const snapshotDate = useAppSelector(selectSnapshotDate);
-  const useLatest = useAppSelector(selectUseLatest);
-
-  const snapshotStepRequiresChoice = !useLatest && !snapshotDate;
-
   const [filesystemPristine, setFilesystemPristine] = useState(true);
   const fileSystemValidation = useFilesystemValidation();
+  const snapshotValidation = useSnapshotValidation();
   const firstBootValidation = useFirstBootValidation();
   const detailsValidation = useDetailsValidation();
 
@@ -367,13 +362,15 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             id="step-content"
             steps={[
               <WizardStep
-                name="Repository snapshot"
+                name="Content snapshot"
                 id="wizard-repository-snapshot"
                 key="wizard-repository-snapshot"
+                navItem={customStatusNavItem}
+                status={snapshotValidation.disabledNext ? 'error' : 'default'}
                 isHidden={!snapshottingEnabled}
                 footer={
                   <CustomWizardFooter
-                    disableNext={snapshotStepRequiresChoice}
+                    disableNext={snapshotValidation.disabledNext}
                   />
                 }
               >
@@ -383,7 +380,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 name="Custom repositories"
                 id="wizard-custom-repositories"
                 key="wizard-custom-repositories"
-                isDisabled={snapshotStepRequiresChoice}
+                isDisabled={snapshotValidation.disabledNext}
                 footer={<CustomWizardFooter disableNext={false} />}
               >
                 <RepositoriesStep />
@@ -392,7 +389,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 name="Additional packages"
                 id="wizard-additional-packages"
                 key="wizard-additional-packages"
-                isDisabled={snapshotStepRequiresChoice}
+                isDisabled={snapshotValidation.disabledNext}
                 footer={<CustomWizardFooter disableNext={false} />}
               >
                 <PackagesStep />
@@ -417,7 +414,6 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
           <WizardStep
             name="Details"
             id={'step-details'}
-            isDisabled={snapshotStepRequiresChoice}
             navItem={customStatusNavItem}
             status={detailsValidation.disabledNext ? 'error' : 'default'}
             footer={
@@ -431,7 +427,6 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
           <WizardStep
             name="Review"
             id="step-review"
-            isDisabled={snapshotStepRequiresChoice}
             footer={<ReviewWizardFooter />}
           >
             {/* Intentional prop drilling for simplicity - To be removed */}

src/Components/CreateImageWizard/steps/Snapshot/Snapshot.tsx

@@ -22,15 +22,7 @@ import {
   dateToMMDDYYYY,
   parseMMDDYYYYtoDate,
 } from '../../../../Utilities/time';
-
-const dateValidators = [
-  (date: Date) => {
-    if (date.getTime() > Date.now()) {
-      return 'Cannot set a date in the future';
-    }
-    return '';
-  },
-];
+import { isSnapshotDateValid } from '../../validators';
 
 export default function Snapshot() {
   const dispatch = useAppDispatch();
@@ -89,7 +81,14 @@ export default function Snapshot() {
                 placeholder="MM/DD/YYYY"
                 dateParse={parseMMDDYYYYtoDate}
                 dateFormat={dateToMMDDYYYY}
-                validators={dateValidators}
+                validators={[
+                  (date: Date) => {
+                    if (!isSnapshotDateValid(date)) {
+                      return 'Cannot set a date in the future';
+                    }
+                    return '';
+                  }
+                ]}
                 onChange={(_, val) => dispatch(changeSnapshotDate(val))}
               />
               <Button

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -12,12 +12,15 @@ import {
   selectFileSystemPartitionMode,
   selectFirstBootScript,
   selectPartitions,
+  selectSnapshotDate,
+  selectUseLatest,
 } from '../../../store/wizardSlice';
 import {
   getDuplicateMountPoints,
   isBlueprintNameValid,
   isBlueprintDescriptionValid,
   isMountpointMinSizeValid,
+  isSnapshotValid,
 } from '../validators';
 
 export type StepValidation = {
@@ -29,10 +32,11 @@ export type StepValidation = {
 
 export function useIsBlueprintValid(): boolean {
   const filesystem = useFilesystemValidation();
+  const snapshot = useSnapshotValidation();
   const firstBoot = useFirstBootValidation();
   const details = useDetailsValidation();
   return (
-    !filesystem.disabledNext && !firstBoot.disabledNext && !details.disabledNext
+    !filesystem.disabledNext && !snapshot.disabledNext && !firstBoot.disabledNext && !details.disabledNext
   );
 }
 
@@ -60,6 +64,16 @@ export function useFilesystemValidation(): StepValidation {
   return { errors, disabledNext };
 }
 
+export function useSnapshotValidation(): StepValidation {
+  const snapshotDate = useAppSelector(selectSnapshotDate);
+  const useLatest = useAppSelector(selectUseLatest);
+
+  if (!useLatest && !isSnapshotValid(snapshotDate)) {
+    return { errors: { snapshotDate: 'Invalid snapshot date' }, disabledNext: true };
+  }
+  return { errors: {}, disabledNext: false };
+}
+
 export function useFirstBootValidation(): StepValidation {
   const script = useAppSelector(selectFirstBootScript);
   let hasShebang = false;

src/Components/CreateImageWizard/validators.ts

@@ -51,6 +51,13 @@ export const isBlueprintNameValid = (blueprintName: string) =>
   blueprintName.length <= 100 &&
   /\w+/.test(blueprintName);
 
+export const isSnapshotDateValid = (date: Date) => date.getTime() <= Date.now();
+
+export const isSnapshotValid = (dateString: string) => {
+  const date = new Date(dateString);
+  return !isNaN(date.getTime()) && isSnapshotDateValid(date);
+};
+
 export const isBlueprintDescriptionValid = (blueprintDescription: string) => {
   return blueprintDescription.length <= 250;
 };