diff --git a/src/Components/CreateImageWizard/ValidatedInput.tsx b/src/Components/CreateImageWizard/ValidatedInput.tsx index f7809f54..3b278e89 100644 --- a/src/Components/CreateImageWizard/ValidatedInput.tsx +++ b/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); diff --git a/src/Components/CreateImageWizard/steps/Details/index.tsx b/src/Components/CreateImageWizard/steps/Details/index.tsx index 7d41c735..4443e818 100644 --- a/src/Components/CreateImageWizard/steps/Details/index.tsx +++ b/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" > - (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, }; } diff --git a/src/Components/CreateImageWizard/validators.ts b/src/Components/CreateImageWizard/validators.ts index 70e7706a..c2695d03 100644 --- a/src/Components/CreateImageWizard/validators.ts +++ b/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; };