PF3->Carbon: Replace async-credentials' validate button and result

ManageIQ · Nov 13, 2020 · a107273 · a107273
1 parent 3e31d54
commit a107273
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 95 deletions.
diff --git a/app/javascript/components/async-credentials/async-credentials.jsx b/app/javascript/components/async-credentials/async-credentials.jsx
@@ -1,9 +1,10 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { isEqual, flatMap, get, set } from 'lodash';
+import { Button, InlineLoading } from 'carbon-components-react';
+
 import { useFormApi, useFieldApi, validatorTypes, FormSpy } from '@@ddf';
-import { Button, FormGroup, HelpBlock } from 'patternfly-react';
-import ButtonSpinner from '../../forms/button-spinner';
+import HelperTextBlock from '../../forms/helper-text-block';
 
 const extractNames = (schema) => {
   const childFields = schema.fields ? flatMap(schema.fields, field => extractNames(field)) : [];
@@ -77,7 +78,7 @@ const AsyncCredentials = ({
         ...(field.component === 'password-field' ? { parent: name, edit } : undefined),
         isDisabled: field.isDisabled,
       })), formOptions)}
-      <FormGroup validationState={meta.error ? 'error' : null}>
+      <>
         <input type="hidden" {...input} />
 
         <FormSpy subscription={{ values: true, dirtyFields: true }}>
@@ -98,17 +99,20 @@ const AsyncCredentials = ({
 
             return (
               <>
-                <Button bsSize="small" bsStyle="primary" onClick={onClick} disabled={isValid || !depsValid || validating}>
+                <Button size="small" kind="tertiary" onClick={onClick} disabled={isValid || !depsValid || validating}>
+                  {validating && <InlineLoading /> }
                   {validating ? validationProgressLabel : validateLabel}
-                  {validating && <ButtonSpinner /> }
                 </Button>
-                { !meta.error && isEqual(currentValues, lastValid) && <HelpBlock>{ validationSuccessLabel }</HelpBlock> }
-                { meta.error && !validating && <HelpBlock>{ errorMessage || validateDefaultError }</HelpBlock> }
+
+                <HelperTextBlock
+                  helperText={!meta.error && isEqual(currentValues, lastValid) && validationSuccessLabel}
+                  errorText={meta.error && !validating && (errorMessage || validateDefaultError)}
+                />
               </>
             );
           }}
         </FormSpy>
-      </FormGroup>
+      </>
     </>
   );
 };

diff --git a/app/javascript/spec/async-credentials/__snapshots__/async-credentials.spec.js.snap b/app/javascript/spec/async-credentials/__snapshots__/async-credentials.spec.js.snap
@@ -45,106 +45,94 @@ exports[`Async credentials component should render correctly 1`] = `
           initialValue="bar"
           name="foo"
         >
-          <Pf3FormGroup
-            meta={
-              Object {
-                "active": false,
-                "data": Object {},
-                "dirty": false,
-                "dirtySinceLastSubmit": false,
-                "error": undefined,
-                "initial": "bar",
-                "invalid": false,
-                "length": undefined,
-                "modified": false,
-                "modifiedSinceLastSubmit": false,
-                "pristine": true,
-                "submitError": undefined,
-                "submitFailed": false,
-                "submitSucceeded": false,
-                "submitting": false,
-                "touched": false,
-                "valid": true,
-                "validating": false,
-                "visited": false,
-              }
-            }
+          <ForwardRef(TextInput)
+            disabled={false}
+            helperText=""
+            id="foo"
+            inline={false}
+            invalid={false}
+            invalidText=""
+            key="foo"
+            light={false}
+            name="foo"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            type="text"
+            value="bar"
+            warn={false}
+            warnText=""
           >
-            <FormGroup
-              bsClass="form-group"
-              validationState={null}
+            <div
+              className="bx--form-item bx--text-input-wrapper"
             >
               <div
-                className="form-group"
+                className="bx--text-input__field-outer-wrapper"
               >
-                <FormControl
-                  bsClass="form-control"
-                  componentClass="input"
-                  name="foo"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  value="bar"
+                <div
+                  className="bx--text-input__field-wrapper"
+                  data-invalid={null}
                 >
                   <input
-                    className="form-control"
+                    className="bx--text-input bx--text__input"
+                    disabled={false}
+                    id="foo"
                     name="foo"
                     onBlur={[Function]}
                     onChange={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
+                    type="text"
                     value="bar"
                   />
-                </FormControl>
+                </div>
               </div>
-            </FormGroup>
-          </Pf3FormGroup>
+            </div>
+          </ForwardRef(TextInput)>
         </TextField>
       </FormFieldHideWrapper>
     </FormConditionWrapper>
   </SingleField>
-  <FormGroup
-    bsClass="form-group"
-    validationState={null}
+  <input
+    name="validate_credentials"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="hidden"
+    value={true}
+  />
+  <FormSpy
+    subscription={
+      Object {
+        "dirtyFields": true,
+        "values": true,
+      }
+    }
   >
-    <div
-      className="form-group"
+    <Button
+      disabled={true}
+      kind="tertiary"
+      onClick={[Function]}
+      size="small"
+      tabIndex={0}
+      tooltipAlignment="center"
+      tooltipPosition="top"
+      type="button"
     >
-      <input
-        name="validate_credentials"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        type="hidden"
-        value={true}
-      />
-      <FormSpy
-        subscription={
-          Object {
-            "dirtyFields": true,
-            "values": true,
-          }
-        }
+      <button
+        className="bx--btn bx--btn--sm bx--btn--tertiary bx--btn--disabled"
+        disabled={true}
+        onClick={[Function]}
+        tabIndex={0}
+        type="button"
       >
-        <Button
-          active={false}
-          block={false}
-          bsClass="btn"
-          bsSize="small"
-          bsStyle="primary"
-          disabled={true}
-          onClick={[Function]}
-        >
-          <button
-            className="btn btn-sm btn-primary"
-            disabled={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Validate
-          </button>
-        </Button>
-      </FormSpy>
-    </div>
-  </FormGroup>
+        Validate
+      </button>
+    </Button>
+    <HelperTextBlock
+      helperText={false}
+    />
+  </FormSpy>
 </AsyncCredentials>
 `;
diff --git a/app/javascript/spec/async-credentials/async-credentials.spec.js b/app/javascript/spec/async-credentials/async-credentials.spec.js
@@ -78,7 +78,7 @@ describe('Async credentials component', () => {
 
     wrapper.update();
 
-    expect(wrapper.find('span.help-block').text()).toEqual('Validation failed');
+    expect(wrapper.find('div.bx--form-requirement.ddorg__carbon-error-helper-text').text()).toEqual('Validation failed');
 
     done();
   });
@@ -94,10 +94,10 @@ describe('Async credentials component', () => {
 
     wrapper.update();
 
-    expect(wrapper.find('span.help-block').text()).toEqual('Validation successful');
+    expect(wrapper.find('div.bx--form__helper-text').text()).toEqual('Validation successful');
     wrapper.find('input[name="foo"]').simulate('change', { target: { value: 'test' } });
     wrapper.update();
-    expect(wrapper.find('span.help-block').text()).toEqual('Validation Required');
+    expect(wrapper.find('div.bx--form-requirement.ddorg__carbon-error-helper-text').text()).toEqual('Validation Required');
 
     done();
   });
@@ -113,13 +113,13 @@ describe('Async credentials component', () => {
 
     wrapper.update();
 
-    expect(wrapper.find('span.help-block').text()).toEqual('Validation successful');
+    expect(wrapper.find('div.bx--form__helper-text').text()).toEqual('Validation successful');
     wrapper.find('input[name="foo"]').simulate('change', { target: { value: 'test' } });
     wrapper.update();
-    expect(wrapper.find('span.help-block').text()).toEqual('Validation Required');
+    expect(wrapper.find('div.bx--form-requirement.ddorg__carbon-error-helper-text').text()).toEqual('Validation Required');
     wrapper.find('input[name="foo"]').simulate('change', { target: { value: 'baz' } });
     wrapper.update();
-    expect(wrapper.find('span.help-block').text()).toEqual('Validation successful');
+    expect(wrapper.find('div.bx--form__helper-text').text()).toEqual('Validation successful');
 
     done();
   });