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:
parent
17f975e0ef
commit
d448db9a04
3 changed files with 16 additions and 3 deletions
|
|
@ -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} />}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue