refactor(addSourceWizardStepTwo): discovery-153 pf4 textInput (#159)

quipucords · Sep 14, 2022 · 86d6259 · 86d6259
1 parent d59707e
commit 86d6259
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 12 deletions.
diff --git a/src/components/addSourceWizard/__tests__/__snapshots__/addSourceWizardStepTwo.test.js.snap b/src/components/addSourceWizard/__tests__/__snapshots__/addSourceWizardStepTwo.test.js.snap
@@ -45,7 +45,12 @@ exports[`AddSourceWizardStepTwo Component should display different forms for sou
       class="pf-c-form__group-control"
     >
       <input
-        class="form-control"
+        aria-invalid="false"
+        class="pf-c-form-control quipucords-form__text-input "
+        data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+        data-ouia-component-type="PF4/TextInput"
+        data-ouia-safe="true"
+        id="name"
         name="name"
         placeholder="Enter a name for the Network source"
         type="text"
@@ -111,7 +116,12 @@ exports[`AddSourceWizardStepTwo Component should display different forms for sou
       class="pf-c-form__group-control"
     >
       <input
-        class="form-control"
+        aria-invalid="false"
+        class="pf-c-form-control quipucords-form__text-input "
+        data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+        data-ouia-component-type="PF4/TextInput"
+        data-ouia-safe="true"
+        id="port"
         maxlength="5"
         name="port"
         placeholder="Default port is 22"
@@ -292,7 +302,12 @@ exports[`AddSourceWizardStepTwo Component should display different forms for sou
       class="pf-c-form__group-control"
     >
       <input
-        class="form-control"
+        aria-invalid="false"
+        class="pf-c-form-control quipucords-form__text-input "
+        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+        data-ouia-component-type="PF4/TextInput"
+        data-ouia-safe="true"
+        id="name"
         name="name"
         placeholder="Enter a name for the VCenter source"
         type="text"
@@ -322,7 +337,12 @@ exports[`AddSourceWizardStepTwo Component should display different forms for sou
       class="pf-c-form__group-control"
     >
       <input
-        class="form-control"
+        aria-invalid="false"
+        class="pf-c-form-control quipucords-form__text-input "
+        data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+        data-ouia-component-type="PF4/TextInput"
+        data-ouia-safe="true"
+        id="hostsSingle"
         name="hostsSingle"
         placeholder="Enter an IP address or hostname (default port is 443)"
         type="text"
@@ -581,7 +601,12 @@ exports[`AddSourceWizardStepTwo Component should render a non-connected componen
       class="pf-c-form__group-control"
     >
       <input
-        class="form-control"
+        aria-invalid="false"
+        class="pf-c-form-control quipucords-form__text-input "
+        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+        data-ouia-component-type="PF4/TextInput"
+        data-ouia-safe="true"
+        id="name"
         name="name"
         placeholder="Enter a name for the Network source"
         type="text"
@@ -647,7 +672,12 @@ exports[`AddSourceWizardStepTwo Component should render a non-connected componen
       class="pf-c-form__group-control"
     >
       <input
-        class="form-control"
+        aria-invalid="false"
+        class="pf-c-form-control quipucords-form__text-input "
+        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+        data-ouia-component-type="PF4/TextInput"
+        data-ouia-safe="true"
+        id="port"
         maxlength="5"
         name="port"
         placeholder="Default port is 22"

diff --git a/src/components/addSourceWizard/addSourceWizardStepTwo.js b/src/components/addSourceWizard/addSourceWizardStepTwo.js
@@ -11,6 +11,7 @@ import { FormGroup } from '../form/formGroup';
 import { Checkbox } from '../form/checkbox';
 import { TextArea, TextAreResizeOrientation } from '../form/textArea';
 import { formHelpers } from '../form/formHelpers';
+import { TextInput } from '../form/textInput';
 import { FormState } from '../formState/formState';
 import { DropdownSelect, SelectVariant } from '../dropdownSelect/dropdownSelect';
 import { translate } from '../i18n/i18n';
@@ -168,12 +169,17 @@ class AddSourceWizardStepTwo extends React.Component {
         error={(touched.name && errors.name) || stepTwoErrorMessages.name}
         errorMessage={stepTwoErrorMessages.name || 'A source name is required'}
       >
-        <Pf3Form.FormControl
-          type="text"
+        <TextInput
           name="name"
           value={values.name}
           placeholder={`Enter a name for the ${dictionary[type] || ''} source`}
           onChange={handleOnEvent}
+          onClear={handleOnEvent}
+          validated={
+            (touched.name && errors.name) || stepTwoErrorMessages.name
+              ? ValidatedOptions.error
+              : ValidatedOptions.default
+          }
         />
       </FormGroup>
     );
@@ -256,13 +262,18 @@ class AddSourceWizardStepTwo extends React.Component {
               error={(touched.port && errors.port) || stepTwoErrorMessages.port}
               errorMessage="Port must be valid"
             >
-              <Pf3Form.FormControl
+              <TextInput
                 name="port"
-                type="text"
                 value={values.port}
                 maxLength={5}
                 placeholder="Default port is 22"
                 onChange={handleOnEvent}
+                onClear={handleOnEvent}
+                validated={
+                  (touched.port && errors.port) || stepTwoErrorMessages.port
+                    ? ValidatedOptions.error
+                    : ValidatedOptions.default
+                }
               />
             </FormGroup>
           </React.Fragment>
@@ -293,12 +304,20 @@ class AddSourceWizardStepTwo extends React.Component {
                 hostPortError
               }
             >
-              <Pf3Form.FormControl
+              <TextInput
                 name="hostsSingle"
-                type="text"
                 value={values.hostsSingle}
                 placeholder="Enter an IP address or hostname (default port is 443)"
                 onChange={onChangeSingleHost}
+                onClear={onChangeSingleHost}
+                validated={
+                  (touched.hostsSingle && errors.hosts) ||
+                  errors.port ||
+                  stepTwoErrorMessages.hosts ||
+                  stepTwoErrorMessages.port
+                    ? ValidatedOptions.error
+                    : ValidatedOptions.default
+                }
               />
             </FormGroup>
           </React.Fragment>