Wizard: Refactor Description input using new component

This commit refactors the Description field by replacing HookValidatedInput with the new ValidatedInputAndTextArea component.
It fixes a bug where the validation icon remained visible after the user cleared the Description field.

src/Components/CreateImageWizard/ValidatedInput.tsx

@@ -122,7 +122,7 @@ export const ValidatedInputAndTextArea = ({
   inputType = 'textInput',
   isRequired,
 }: ValidationInputProp) => {
-  const errorMessage = stepValidation.errors[fieldName];
+  const errorMessage = stepValidation.errors[fieldName] || '';
   const hasError = errorMessage !== '';
 
   const [isPristine, setIsPristine] = useState(!value);

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

@@ -19,10 +19,7 @@ import {
 } from '../../../../store/wizardSlice';
 import { useGenerateDefaultName } from '../../utilities/useGenerateDefaultName';
 import { useDetailsValidation } from '../../utilities/useValidation';
-import {
-  HookValidatedInput,
-  ValidatedInputAndTextArea,
-} from '../../ValidatedInput';
+import { ValidatedInputAndTextArea } from '../../ValidatedInput';
 
 const DetailsStep = () => {
   const dispatch = useAppDispatch();
@@ -62,7 +59,6 @@ const DetailsStep = () => {
           ariaLabel="blueprint name"
           dataTestId="blueprint"
           value={blueprintName}
-          isDisabled={false}
           onChange={handleNameChange}
           placeholder="Add blueprint name"
           stepValidation={stepValidation}
@@ -83,11 +79,10 @@ const DetailsStep = () => {
         label="Blueprint description"
         fieldId="blueprint-description-name"
       >
-        <HookValidatedInput
+        <ValidatedInputAndTextArea
           ariaLabel="blueprint description"
           dataTestId="blueprint description"
-          value={blueprintDescription || ''}
-          isDisabled={false}
+          value={blueprintDescription}
           onChange={handleDescriptionChange}
           placeholder="Add description"
           stepValidation={stepValidation}

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -417,7 +417,6 @@ export function useDetailsValidation(): StepValidation {
   const blueprintId = useAppSelector(selectBlueprintId);
 
   const nameValid = isBlueprintNameValid(name);
-  const descriptionValid = isBlueprintDescriptionValid(description);
   const [uniqueName, setUniqueName] = useState<boolean | null>(null);
 
   const [trigger] = useLazyGetBlueprintsQuery();
@@ -467,12 +466,16 @@ export function useDetailsValidation(): StepValidation {
     return { errors: { name: '' }, disabledNext: false };
   }
 
+  const descriptionError = !isBlueprintDescriptionValid(description)
+    ? 'Invalid description'
+    : '';
+
   return {
     errors: {
       name: nameError,
-      description: descriptionValid ? '' : 'Invalid description',
+      description: descriptionError,
     },
     // if uniqueName is null, we are still waiting for the API response
-    disabledNext: !!nameError || !descriptionValid || uniqueName !== true,
+    disabledNext: !!nameError || !!descriptionError || uniqueName !== true,
   };
 }

src/Components/CreateImageWizard/validators.ts

@@ -49,6 +49,10 @@ export const isSnapshotValid = (dateString: string) => {
 };
 
 export const isBlueprintDescriptionValid = (blueprintDescription: string) => {
+  if (!blueprintDescription) {
+    return true;
+  }
+
   return blueprintDescription.length <= 250;
 };