Wizard: Refactor HookValidatedInput component

This commit splits the HookValidatedInput component into three separate functions to improve modularity and readability:

- `getValidationState`: Calculates the validation state ('default', 'success', 'error') based on whether the input is pristine and if there is an error message.
- `ValidatedInputAndTextArea`: Renders the TextInput or TextArea component, utilizing the `getValidationState` output.
- `ErrorMessage`: Displays validation error messages.

This refactoring enhances code maintainability and testability, and the updated structure is now implemented for the username field.

src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx

@@ -20,6 +20,7 @@ import { useUsersValidation } from '../../../utilities/useValidation';
 import {
   HookPasswordValidatedInput,
   HookValidatedInput,
+  ValidatedInputAndTextArea,
 } from '../../../ValidatedInput';
 const UserInfo = () => {
   const dispatch = useAppDispatch();
@@ -72,7 +73,7 @@ const UserInfo = () => {
   return (
     <>
       <FormGroup isRequired label="Username">
-        <HookValidatedInput
+        <ValidatedInputAndTextArea
           ariaLabel="blueprint user name"
           value={userName || ''}
           placeholder="Enter username"