wizard: add support of TextArea for ssh_key field

this commit add support of TextArea for ssh_key field

src/Components/CreateImageWizard/ValidatedInput.tsx

@@ -3,6 +3,8 @@ import React, { useState } from 'react';
 import {
   HelperText,
   HelperTextItem,
+  TextArea,
+  TextAreaProps,
   TextInput,
   TextInputProps,
 } from '@patternfly/react-core';
@@ -19,16 +21,18 @@ interface ValidatedTextInputPropTypes extends TextInputProps {
   placeholder?: string;
 }
 
-interface HookValidatedTextInputPropTypes extends TextInputProps {
-  dataTestId?: string | undefined;
-  ouiaId?: string;
-  ariaLabel: string | undefined;
-  value: string;
-  placeholder?: string;
-  stepValidation: StepValidation;
-  fieldName: string;
-  warning?: string;
-}
+type HookValidatedInputPropTypes = TextInputProps &
+  TextAreaProps & {
+    dataTestId?: string | undefined;
+    ouiaId?: string;
+    ariaLabel: string | undefined;
+    value: string;
+    placeholder?: string;
+    stepValidation: StepValidation;
+    fieldName: string;
+    warning?: string;
+    inputType?: 'textInput' | 'textArea';
+  };
 
 export const HookValidatedInput = ({
   dataTestId,
@@ -41,8 +45,9 @@ export const HookValidatedInput = ({
   stepValidation,
   fieldName,
   type = 'text',
+  inputType,
   warning = undefined,
-}: HookValidatedTextInputPropTypes) => {
+}: HookValidatedInputPropTypes) => {
   const [isPristine, setIsPristine] = useState(!value ? true : false);
   // Do not surface validation on pristine state components
   // Allow step validation to be set on pristine state, when needed
@@ -60,18 +65,31 @@ export const HookValidatedInput = ({
 
   return (
     <>
-      <TextInput
-        value={value}
-        data-testid={dataTestId}
-        ouiaId={ouiaId || ''}
-        type={type}
-        onChange={onChange!}
-        validated={validated}
-        aria-label={ariaLabel || ''}
-        onBlur={handleBlur}
-        placeholder={placeholder || ''}
-        isDisabled={isDisabled || false}
-      />
+      {inputType === 'textArea' ? (
+        <TextArea
+          value={value}
+          data-testid={dataTestId}
+          onChange={onChange!}
+          validated={validated}
+          aria-label={ariaLabel || ''}
+          onBlur={handleBlur}
+          placeholder={placeholder || ''}
+          isDisabled={isDisabled || false}
+        />
+      ) : (
+        <TextInput
+          value={value}
+          data-testid={dataTestId}
+          ouiaId={ouiaId || ''}
+          type={type}
+          onChange={onChange!}
+          validated={validated}
+          aria-label={ariaLabel || ''}
+          onBlur={handleBlur}
+          placeholder={placeholder || ''}
+          isDisabled={isDisabled || false}
+        />
+      )}
       {validated === 'error' && (
         <HelperText>
           <HelperTextItem variant="error" hasIcon>
@@ -90,7 +108,7 @@ export const HookValidatedInput = ({
   );
 };
 
-export const ValidatedTextInput = ({
+export const ValidatedInput = ({
   dataTestId,
   ouiaId,
   ariaLabel,

src/Components/CreateImageWizard/steps/Details/index.tsx

@@ -19,7 +19,7 @@ import {
 } from '../../../../store/wizardSlice';
 import { useGenerateDefaultName } from '../../utilities/useGenerateDefaultName';
 import { useDetailsValidation } from '../../utilities/useValidation';
-import { HookValidatedInput } from '../../ValidatedTextInput';
+import { HookValidatedInput } from '../../ValidatedInput';
 
 const DetailsStep = () => {
   const dispatch = useAppDispatch();
@@ -29,14 +29,14 @@ const DetailsStep = () => {
   useGenerateDefaultName();
 
   const handleNameChange = (
-    _event: React.FormEvent<HTMLInputElement>,
+    _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     name: string
   ) => {
     dispatch(changeBlueprintName(name));
   };
 
   const handleDescriptionChange = (
-    _event: React.FormEvent<HTMLInputElement>,
+    _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     description: string
   ) => {
     dispatch(changeBlueprintDescription(description));

src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx

@@ -33,7 +33,7 @@ import {
   selectPartitions,
 } from '../../../../store/wizardSlice';
 import { useFilesystemValidation } from '../../utilities/useValidation';
-import { HookValidatedInput } from '../../ValidatedTextInput';
+import { HookValidatedInput } from '../../ValidatedInput';
 
 export const FileSystemContext = React.createContext<boolean>(true);
 

src/Components/CreateImageWizard/steps/Hostname/components/HostnameInput.tsx

@@ -8,7 +8,7 @@ import {
   selectHostname,
 } from '../../../../../store/wizardSlice';
 import { useHostnameValidation } from '../../../utilities/useValidation';
-import { HookValidatedInput } from '../../../ValidatedTextInput';
+import { HookValidatedInput } from '../../../ValidatedInput';
 
 const HostnameInput = () => {
   const dispatch = useAppDispatch();

src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/index.tsx

@@ -26,7 +26,7 @@ import {
   selectAwsAccountId,
   selectAwsShareMethod,
 } from '../../../../../store/wizardSlice';
-import { ValidatedTextInput } from '../../../ValidatedTextInput';
+import { ValidatedInput } from '../../../ValidatedInput';
 import { isAwsAccountIdValid } from '../../../validators';
 
 export type AwsShareMethod = 'manual' | 'sources';
@@ -123,7 +123,7 @@ const Aws = () => {
       {shareMethod === 'manual' && (
         <>
           <FormGroup label="AWS account ID" isRequired>
-            <ValidatedTextInput
+            <ValidatedInput
               ariaLabel="aws account id"
               value={shareWithAccount || ''}
               validator={isAwsAccountIdValid}

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/index.tsx

@@ -31,7 +31,7 @@ import {
   selectAzureSubscriptionId,
   selectAzureTenantId,
 } from '../../../../../store/wizardSlice';
-import { ValidatedTextInput } from '../../../ValidatedTextInput';
+import { ValidatedInput } from '../../../ValidatedInput';
 import {
   isAzureResourceGroupValid,
   isAzureSubscriptionIdValid,
@@ -159,7 +159,7 @@ const Azure = () => {
       {shareMethod === 'manual' && (
         <>
           <FormGroup label="Azure tenant GUID" isRequired>
-            <ValidatedTextInput
+            <ValidatedInput
               ariaLabel="Azure tenant GUID"
               value={tenantId || ''}
               validator={isAzureTenantGUIDValid}
@@ -169,7 +169,7 @@ const Azure = () => {
           </FormGroup>
           <AzureAuthButton />
           <FormGroup label="Subscription ID" isRequired>
-            <ValidatedTextInput
+            <ValidatedInput
               ariaLabel="subscription id"
               value={subscriptionId}
               validator={isAzureSubscriptionIdValid}
@@ -180,7 +180,7 @@ const Azure = () => {
             />
           </FormGroup>
           <FormGroup label="Resource group" isRequired>
-            <ValidatedTextInput
+            <ValidatedInput
               ariaLabel="resource group"
               value={resourceGroup}
               validator={isAzureResourceGroupValid}

src/Components/CreateImageWizard/steps/TargetEnvironment/Gcp/index.tsx

@@ -11,7 +11,7 @@ import {
   selectGcpEmail,
   selectGcpShareMethod,
 } from '../../../../../store/wizardSlice';
-import { ValidatedTextInput } from '../../../ValidatedTextInput';
+import { ValidatedInput } from '../../../ValidatedInput';
 import { isGcpEmailValid } from '../../../validators';
 
 export type GcpShareMethod = 'withGoogle' | 'withInsights';
@@ -129,7 +129,7 @@ const Gcp = () => {
             }
             isRequired
           >
-            <ValidatedTextInput
+            <ValidatedInput
               ariaLabel="google principal"
               dataTestId="principal"
               value={gcpEmail || ''}

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

@@ -16,7 +16,7 @@ import {
   setUserAdministratorByIndex,
 } from '../../../../../store/wizardSlice';
 import { useUsersValidation } from '../../../utilities/useValidation';
-import { HookValidatedInput } from '../../../ValidatedTextInput';
+import { HookValidatedInput } from '../../../ValidatedInput';
 const UserInfo = () => {
   const dispatch = useAppDispatch();
   const index = 0;
@@ -30,21 +30,21 @@ const UserInfo = () => {
   const userIsAdministrator = useAppSelector(userIsAdministratorSelector);
 
   const handleNameChange = (
-    _e: React.FormEvent<HTMLInputElement>,
+    _e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     value: string
   ) => {
     dispatch(setUserNameByIndex({ index: index, name: value }));
   };
 
   const handlePasswordChange = (
-    _event: React.FormEvent<HTMLInputElement>,
+    _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     value: string
   ) => {
     dispatch(setUserPasswordByIndex({ index: index, password: value }));
   };
 
   const handleSshKeyChange = (
-    _event: React.FormEvent<HTMLInputElement>,
+    _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     value: string
   ) => {
     dispatch(setUserSshKeyByIndex({ index: index, sshKey: value }));
@@ -85,6 +85,7 @@ const UserInfo = () => {
       </FormGroup>
       <FormGroup isRequired label="SSH key">
         <HookValidatedInput
+          inputType={'textArea'}
           ariaLabel="public SSH key"
           value={userSshKey || ''}
           type={'text'}