From 631ddf520e3a5f4b3dd9244bc7179fa7fc1ccaba Mon Sep 17 00:00:00 2001 From: Michal Gold Date: Mon, 10 Feb 2025 16:03:27 +0200 Subject: [PATCH 1/2] Wizrad: add condition to useHostnameValidation in case of empty string this adds condition to useHostnameValidation in case of empty string if user decide to delete the value in hostname field --- .../CreateImageWizard/ValidatedInput.tsx | 20 ++++++++++++++++--- .../steps/FileSystem/FileSystemTable.tsx | 1 + .../CreateImageWizard/validators.ts | 3 +++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/Components/CreateImageWizard/ValidatedInput.tsx b/src/Components/CreateImageWizard/ValidatedInput.tsx index 4b77a3a4c..e46fc215e 100644 --- a/src/Components/CreateImageWizard/ValidatedInput.tsx +++ b/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} /> @@ -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 ( <> diff --git a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx index 0a5c4d4e6..39875dbac 100644 --- a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx +++ b/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} diff --git a/src/Components/CreateImageWizard/validators.ts b/src/Components/CreateImageWizard/validators.ts index 2c3f1439e..6633697f5 100644 --- a/src/Components/CreateImageWizard/validators.ts +++ b/src/Components/CreateImageWizard/validators.ts @@ -33,6 +33,9 @@ export const isGcpEmailValid = (gcpShareWithAccount: string | undefined) => { }; export const isMountpointMinSizeValid = (minSize: string) => { + if (!minSize) { + return false; + } return /^\d+$/.test(minSize) && parseInt(minSize) > 0; }; From c18a15276d3fd659fa9df11a4d6d2fed48a65b64 Mon Sep 17 00:00:00 2001 From: Michal Gold Date: Thu, 20 Feb 2025 13:59:06 +0200 Subject: [PATCH 2/2] fix Detalis step --- .../CreateImageWizard/CreateImageWizard.tsx | 1 - .../CreateImageWizard/steps/Details/index.tsx | 1 + .../CreateImageWizard/utilities/useValidation.tsx | 2 +- src/Components/CreateImageWizard/validators.ts | 15 +++++++++++---- 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/Components/CreateImageWizard/CreateImageWizard.tsx b/src/Components/CreateImageWizard/CreateImageWizard.tsx index 8e636022b..596f3ac91 100644 --- a/src/Components/CreateImageWizard/CreateImageWizard.tsx +++ b/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={ { placeholder="Add blueprint name" stepValidation={stepValidation} fieldName="name" + isRequired={true} /> diff --git a/src/Components/CreateImageWizard/utilities/useValidation.tsx b/src/Components/CreateImageWizard/utilities/useValidation.tsx index 7763c3aa7..e1fc0733f 100644 --- a/src/Components/CreateImageWizard/utilities/useValidation.tsx +++ b/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'; diff --git a/src/Components/CreateImageWizard/validators.ts b/src/Components/CreateImageWizard/validators.ts index 6633697f5..e012829df 100644 --- a/src/Components/CreateImageWizard/validators.ts +++ b/src/Components/CreateImageWizard/validators.ts @@ -39,10 +39,17 @@ export const isMountpointMinSizeValid = (minSize: string) => { 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();