wizard: add support of TextArea for ssh_key field

this commit add support of TextArea for ssh_key field
osbuild · Jan 14, 2025 · abf1bc0 · abf1bc0
1 parent 52a8b08
commit abf1bc0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 28 deletions.
diff --git a/src/Components/CreateImageWizard/ValidatedTextInput.tsx b/src/Components/CreateImageWizard/ValidatedTextInput.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>

diff --git a/src/Components/CreateImageWizard/steps/Details/index.tsx b/src/Components/CreateImageWizard/steps/Details/index.tsx
@@ -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));

diff --git a/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx b/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx
@@ -25,21 +25,21 @@ const UserInfo = () => {
   const userSshKey = useAppSelector(userSshKeySelector);
 
   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 }));
@@ -54,6 +54,7 @@ const UserInfo = () => {
     <>
       <FormGroup isRequired label="Username">
         <HookValidatedInput
+          inputType={'textInput'}
           ariaLabel="blueprint user name"
           value={userName || ''}
           placeholder="Enter username"
@@ -64,6 +65,7 @@ const UserInfo = () => {
       </FormGroup>
       <FormGroup isRequired label="Password">
         <HookValidatedInput
+          inputType={'textInput'}
           ariaLabel="blueprint user password"
           value={userPassword || ''}
           onChange={(_e, value) => handlePasswordChange(_e, value)}
@@ -74,6 +76,7 @@ const UserInfo = () => {
       </FormGroup>
       <FormGroup isRequired label="SSH key">
         <HookValidatedInput
+          inputType={'textArea'}
           ariaLabel="public SSH key"
           value={userSshKey || ''}
           type={'text'}