Wizrad: add condition to useHostnameValidation in case of empty string

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -606,7 +606,6 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             name="Details"
             id="step-details"
             navItem={customStatusNavItem}
-            status={detailsValidation.disabledNext ? 'error' : 'default'}
             footer={
               <CustomWizardFooter
                 disableNext={detailsValidation.disabledNext}

src/Components/CreateImageWizard/ValidatedInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import {
   HelperText,
@@ -36,6 +36,7 @@ type HookValidatedInputPropTypes = TextInputProps &
     fieldName: string;
     warning?: string;
     inputType?: 'textInput' | 'textArea';
+    isRequired?: boolean;
   };
 
 export const HookPasswordValidatedInput = ({
@@ -50,6 +51,7 @@ export const HookPasswordValidatedInput = ({
   warning = undefined,
   inputType,
   isDisabled,
+  isRequired,
 }: HookValidatedInputPropTypes) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const togglePasswordVisibility = () => {
@@ -73,6 +75,7 @@ export const HookPasswordValidatedInput = ({
             inputType={inputType || 'textInput'}
             warning={warning || ''}
             isDisabled={isDisabled || false}
+            isRequired={isRequired || false}
           />
         </InputGroupItem>
         <InputGroupItem>
@@ -102,8 +105,10 @@ export const HookValidatedInput = ({
   type = 'text',
   inputType,
   warning = undefined,
+  isRequired = false,
 }: HookValidatedInputPropTypes) => {
-  const [isPristine, setIsPristine] = useState(!value ? true : false);
+  const isEmpty = value === undefined || value === null || value === '';
+  const [isPristine, setIsPristine] = useState(isEmpty);
   // Do not surface validation on pristine state components
   // Allow step validation to be set on pristine state, when needed
   const validated = isPristine
@@ -115,8 +120,17 @@ export const HookValidatedInput = ({
     : 'success';
 
   const handleBlur = () => {
-    setIsPristine(false);
+    if (isEmpty && !isRequired) {
+      setIsPristine(true);
+    } else {
+      setIsPristine(false);
+    }
   };
+  useEffect(() => {
+    if (isEmpty && !isRequired) {
+      setIsPristine(true);
+    }
+  }, [value, setIsPristine]);
 
   return (
     <>

src/Components/CreateImageWizard/steps/Details/index.tsx

@@ -64,6 +64,7 @@ const DetailsStep = () => {
           placeholder="Add blueprint name"
           stepValidation={stepValidation}
           fieldName="name"
+          isRequired={true}
         />
         <FormHelperText>
           <HelperText>

src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx

@@ -262,6 +262,7 @@ const MinimumSize = ({ partition }: MinimumSizePropTypes) => {
           ? 'The Wizard only supports KiB, MiB, or GiB. Adjust or keep the current value.'
           : ''
       }
+      isRequired={true}
       type="text"
       ouiaId="size"
       stepValidation={stepValidation}

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -454,7 +454,7 @@ export function useDetailsValidation(): StepValidation {
   }, [blueprintId, name, setUniqueName, trigger, nameValid]);
 
   let nameError = '';
-  if (name && !nameValid) {
+  if (!nameValid) {
     nameError = 'Invalid blueprint name';
   } else if (uniqueName === false) {
     nameError = 'Blueprint with this name already exists';

src/Components/CreateImageWizard/validators.ts

@@ -33,13 +33,23 @@ export const isGcpEmailValid = (gcpShareWithAccount: string | undefined) => {
 };
 
 export const isMountpointMinSizeValid = (minSize: string) => {
+  if (!minSize) {
+    return false;
+  }
   return /^\d+$/.test(minSize) && parseInt(minSize) > 0;
 };
 
-export const isBlueprintNameValid = (blueprintName: string) =>
-  blueprintName.length >= 2 &&
-  blueprintName.length <= 100 &&
-  /\w+/.test(blueprintName);
+export const isBlueprintNameValid = (blueprintName: string) => {
+  if (!blueprintName) {
+    return false;
+  }
+
+  return (
+    blueprintName.length >= 2 &&
+    blueprintName.length <= 100 &&
+    /\w+/.test(blueprintName)
+  );
+};
 
 export const isSnapshotDateValid = (date: Date) => date.getTime() <= Date.now();