Wizard: Refactor Minimum Size input in File system step to use new component

This commit refactors the Minimun size field by replacing HookValidatedInput with the new ValidatedInputAndTextArea component.
It fixes a bug where the error icon remained visible after the user cleared the value in the field.
This commit is contained in:
Michal Gold 2025-03-16 13:53:43 +02:00 committed by Lucas Garfield
parent 17f975e0ef
commit d448db9a04
3 changed files with 16 additions and 3 deletions

View file

@ -48,6 +48,7 @@ type ValidationInputProp = TextInputProps &
value: string
) => void;
isRequired?: boolean;
warning?: string;
};
type ErrorMessageProps = {
@ -66,6 +67,7 @@ export const ValidatedInputAndTextArea = ({
ariaLabel,
inputType = 'textInput',
isRequired,
warning = undefined,
}: ValidationInputProp) => {
const errorMessage = stepValidation.errors[fieldName] || '';
const hasError = errorMessage !== '';
@ -108,6 +110,13 @@ export const ValidatedInputAndTextArea = ({
data-testid={dataTestId}
/>
)}
{warning !== undefined && warning !== '' && (
<HelperText>
<HelperTextItem variant="warning" hasIcon>
{warning}
</HelperTextItem>
</HelperText>
)}
{hasError && <ErrorMessage errorMessage={errorMessage} />}
</>
);

View file

@ -33,7 +33,7 @@ import {
selectPartitions,
} from '../../../../store/wizardSlice';
import { useFilesystemValidation } from '../../utilities/useValidation';
import { HookValidatedInput } from '../../ValidatedInput';
import { ValidatedInputAndTextArea } from '../../ValidatedInput';
export const FileSystemContext = React.createContext<boolean>(true);
@ -253,7 +253,7 @@ const MinimumSize = ({ partition }: MinimumSizePropTypes) => {
const stepValidation = useFilesystemValidation();
return (
<HookValidatedInput
<ValidatedInputAndTextArea
ariaLabel="minimum partition size"
value={partition.min_size}
isDisabled={partition.unit === 'B'}
@ -266,6 +266,7 @@ const MinimumSize = ({ partition }: MinimumSizePropTypes) => {
ouiaId="size"
stepValidation={stepValidation}
fieldName={`min-size-${partition.id}`}
placeholder="File system"
onChange={(event, minSize) => {
if (minSize === '' || /^\d+$/.test(minSize)) {
dispatch(

View file

@ -166,7 +166,10 @@ export function useFilesystemValidation(): StepValidation {
const duplicates = getDuplicateMountPoints(partitions);
for (const partition of partitions) {
if (!isMountpointMinSizeValid(partition.min_size)) {
if (partition.min_size === '') {
errors[`min-size-${partition.id}`] = 'partition size is required';
disabledNext = true;
} else if (!isMountpointMinSizeValid(partition.min_size)) {
errors[`min-size-${partition.id}`] = 'Must be larger than 0';
disabledNext = true;
}