Paragon form component deprecations

.env.development

@@ -47,4 +47,5 @@ IS_MAINTENANCE_ALERT_ENABLED=''
 MAINTENANCE_ALERT_MESSAGE=''
 MAINTENANCE_ALERT_START_TIMESTAMP=''
 USE_API_CACHE='true'
+FEATURE_SSO_SETTINGS_TAB='true'
 SUBSCRIPTION_LPR='true'

src/components/FileInput/index.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { clearFields } from 'redux-form';
-import { Button, Icon, ValidationFormGroup } from '@edx/paragon';
+import { Button, Icon, Form } from '@edx/paragon';
+import { Error } from '@edx/paragon/icons';
 
 class FileInput extends React.Component {
   constructor(props) {
@@ -68,12 +69,10 @@ class FileInput extends React.Component {
     } = this.props;
     const hasError = !!(touched && error);
     return (
-      <ValidationFormGroup
+      <Form.Group
         className="file-input"
-        for={id}
-        helpText={description}
-        invalid={hasError}
-        invalidMessage={error}
+        controlId={id}
+        isInvalid={hasError}
       >
         <label className="m-0 mb-1" htmlFor={id}>{label}</label>
         <div
@@ -140,12 +139,17 @@ class FileInput extends React.Component {
               Remove
             </Button>
           )}
+          <Form.Text>{description}</Form.Text>
+          {hasError && (
+            <Form.Control.Feedback icon={<Error className="mr-1" />}>
+              {error}
+            </Form.Control.Feedback>
+          )}
         </div>
-      </ValidationFormGroup>
+      </Form.Group>
     );
   }
 }
-
 FileInput.defaultProps = {
   accept: undefined,
   description: undefined,

src/components/MultipleFileInputField/MultipleFileInputField.jsx

@@ -71,7 +71,6 @@ const MultipleFileInputField = ({
           'm-0',
           'ml-2',
         )}
-        htmlFor="multiple-file-input-control"
       >Select files
       </Form.Label>
       <Form.Control

src/components/ReduxFormCheckbox/CheckboxWithTooltip.scss

@@ -1,7 +1,7 @@
 .checkbox-with-tooltip {
   display: flex;
   align-items: center;
-  .form-group {
+  .pgn__form-group {
     margin-bottom: 0;
   }
 }

src/components/ReduxFormCheckbox/__snapshots__/ReduxFormCheckbox.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<ReduxFormCheckbox /> renders checked correctly 1`] = `
 <div
-  className="form-group"
+  className="pgn__form-group"
 >
   <div
     className="form-check"
@@ -12,7 +12,6 @@ exports[`<ReduxFormCheckbox /> renders checked correctly 1`] = `
       className="form-check-input position-static"
       defaultChecked={false}
       disabled={false}
-      id="id"
       type="checkbox"
     />
   </div>
@@ -21,7 +20,7 @@ exports[`<ReduxFormCheckbox /> renders checked correctly 1`] = `
 
 exports[`<ReduxFormCheckbox /> renders unchecked correctly 1`] = `
 <div
-  className="form-group"
+  className="pgn__form-group"
 >
   <div
     className="form-check"
@@ -31,7 +30,6 @@ exports[`<ReduxFormCheckbox /> renders unchecked correctly 1`] = `
       className="form-check-input position-static"
       defaultChecked={false}
       disabled={false}
-      id="id"
       type="checkbox"
     />
   </div>

src/components/ReduxFormCheckbox/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form, ValidationFormGroup } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 const ReduxFormCheckbox = (props) => {
   const {
@@ -12,19 +12,16 @@ const ReduxFormCheckbox = (props) => {
   } = props;
 
   return (
-    <ValidationFormGroup
-      for={id}
-      helpText={helptext}
-    >
+    <Form.Group controlId={id}>
       <Form.Check
         {...input}
-        id={id}
         type="checkbox"
         defaultChecked={defaultChecked}
         checked={input.checked}
         label={label}
       />
-    </ValidationFormGroup>
+      {helptext && <Form.Text>{helptext}</Form.Text>}
+    </Form.Group>
   );
 };
 

src/components/ReportingConfig/EmailDeliveryMethodForm.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Input, ValidationFormGroup } from '@edx/paragon';
-import isEmpty from 'lodash/isEmpty';
+import { Form } from '@edx/paragon';
+import { Error } from '@edx/paragon/icons'; import isEmpty from 'lodash/isEmpty';
 import isEmail from 'validator/lib/isEmail';
 
 const EmailDeliveryMethodForm = ({ invalidFields, config, handleBlur }) => {
@@ -10,16 +10,13 @@ const EmailDeliveryMethodForm = ({ invalidFields, config, handleBlur }) => {
   return (
     <div className="row">
       <div className="col">
-        <ValidationFormGroup
-          for="email"
-          helpText="The email(s), one per line, where the report should be sent"
-          invalidMessage="Required. One email per line. Emails must be formatted properly ([email protected])"
-          invalid={invalidFields.emailRaw}
+        <Form.Group
+          controlId="email"
+          isInvalid={invalidFields.emailRaw}
         >
-          <label htmlFor="email">Email(s)</label>
-          <Input
-            type="textarea"
-            id="email"
+          <Form.Label>Email(s)</Form.Label>
+          <Form.Control
+            as="textarea"
             name="emailRaw"
             defaultValue={config ? config.email.join('\n') : undefined}
             onBlur={e => handleBlur(e, () => {
@@ -28,36 +25,48 @@ const EmailDeliveryMethodForm = ({ invalidFields, config, handleBlur }) => {
               return !isEmpty(emails);
             })}
             data-hj-suppress
+            autoResize
           />
-        </ValidationFormGroup>
+          <Form.Text>The email(s), one per line, where the report should be sent</Form.Text>
+          {invalidFields.emailRaw && (
+            <Form.Control.Feedback icon={<Error className="mr-1" />}>
+              Required. One email per line. Emails must be formatted properly ([email protected])
+            </Form.Control.Feedback>
+          )}
+        </Form.Group>
         {config && (
-          <div className="form-group">
-            <label htmlFor="changePassword">Change Password</label>
-            <Input
-              type="checkbox"
-              id="changePassword"
-              className="ml-3"
+          <Form.Group controlId="changePassword">
+            <Form.Checkbox
+              name="changePassword"
               checked={checked}
               onChange={() => setChecked(!checked)}
-            />
-          </div>
+              floatLabelLeft
+            >
+              Change Password
+            </Form.Checkbox>
+          </Form.Group>
         )}
-        <ValidationFormGroup
-          for="encryptedPassword"
-          helpText="This password will be used to secure the zip file. It will be encrypted when stored in the database."
-          invalid={invalidFields.encryptedPassword}
-          invalidMessage="Required. Password must not be blank"
+        <Form.Group
+          controlId="encryptedPassword"
+          isInvalid={invalidFields.encryptedPassword}
         >
-          <label htmlFor="encryptedPassword">Password</label>
-          <Input
+          <Form.Label>Password</Form.Label>
+          <Form.Control
             type="password"
-            id="encryptedPassword"
             name="encryptedPassword"
             disabled={config && !checked}
             onBlur={e => handleBlur(e)}
             data-hj-suppress
           />
-        </ValidationFormGroup>
+          <Form.Text>
+            This password will be used to secure the zip file. It will be encrypted when stored in the database.
+          </Form.Text>
+          {invalidFields.emailRaw && (
+            <Form.Control.Feedback icon={<Error className="mr-1" />}>
+              Required. Password must not be blank
+            </Form.Control.Feedback>
+          )}
+        </Form.Group>
       </div>
     </div>
   );