Paragon form component deprecations

src/account-settings/AccountSettingsPage.jsx

@@ -31,6 +31,7 @@ import PageLoading from './PageLoading';
 import JumpNav from './JumpNav';
 import DeleteAccount from './delete-account';
 import EditableField from './EditableField';
+import EditableSelectField from './EditableSelectField';
 import ResetPassword from './reset-password';
 import NameChange from './name-change';
 import ThirdPartyAuth from './third-party-auth';
@@ -609,7 +610,7 @@ class AccountSettingsPage extends React.Component {
           <ResetPassword email={this.props.formValues.email} />
           {(!getConfig().ENABLE_COPPA_COMPLIANCE)
             && (
-            <EditableField
+            <EditableSelectField
               name="year_of_birth"
               type="select"
               label={this.props.intl.formatMessage(messages['account.settings.field.dob'])}
@@ -619,7 +620,7 @@ class AccountSettingsPage extends React.Component {
               {...editableFieldProps}
             />
             )}
-          <EditableField
+          <EditableSelectField
             name="country"
             type="select"
             value={this.props.formValues.country}
@@ -635,7 +636,7 @@ class AccountSettingsPage extends React.Component {
           />
           {showState
             && (
-            <EditableField
+            <EditableSelectField
               name="state"
               type="select"
               value={this.props.formValues.state}
@@ -657,16 +658,18 @@ class AccountSettingsPage extends React.Component {
             {this.props.intl.formatMessage(messages['account.settings.section.profile.information'])}
           </h2>
 
-          <EditableField
+          <EditableSelectField
             name="level_of_education"
             type="select"
             value={this.props.formValues.level_of_education}
-            options={educationLevelOptions}
+            options={getConfig().ENABLE_COPPA_COMPLIANCE
+              ? educationLevelOptions.filter(option => option.value !== 'el')
+              : educationLevelOptions}
             label={this.props.intl.formatMessage(messages['account.settings.field.education'])}
             emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.education.empty'])}
             {...editableFieldProps}
           />
-          <EditableField
+          <EditableSelectField
             name="gender"
             type="select"
             value={this.props.formValues.gender}
@@ -675,7 +678,7 @@ class AccountSettingsPage extends React.Component {
             emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.gender.empty'])}
             {...editableFieldProps}
           />
-          <EditableField
+          <EditableSelectField
             name="language_proficiencies"
             type="select"
             value={this.props.formValues.language_proficiencies}
@@ -738,7 +741,7 @@ class AccountSettingsPage extends React.Component {
           </h2>
 
           <BetaLanguageBanner />
-          <EditableField
+          <EditableSelectField
             name="siteLanguage"
             type="select"
             options={this.props.siteLanguageOptions}
@@ -747,7 +750,7 @@ class AccountSettingsPage extends React.Component {
             helpText={this.props.intl.formatMessage(messages['account.settings.field.site.language.help.text'])}
             {...editableFieldProps}
           />
-          <EditableField
+          <EditableSelectField
             name="time_zone"
             type="select"
             value={this.props.formValues.time_zone}

src/account-settings/EditableField.jsx

@@ -1,11 +1,9 @@
-/* eslint-disable react/jsx-no-useless-fragment */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Button, Input, StatefulButton, ValidationFormGroup,
+  Button, Form, StatefulButton,
 } from '@edx/paragon';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -28,7 +26,6 @@ const EditableField = (props) => {
     type,
     value,
     userSuppliedValue,
-    options,
     saveState,
     error,
     confirmationMessageDefinition,
@@ -45,10 +42,6 @@ const EditableField = (props) => {
     ...others
   } = props;
   const id = `field-${name}`;
-  let inputOptions = options;
-  if (getConfig().ENABLE_COPPA_COMPLIANCE && name === 'level_of_education' && options) {
-    inputOptions = options.filter(option => option.value !== 'el');
-  }
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -80,15 +73,6 @@ const EditableField = (props) => {
     }
     let finalValue = rawValue;
 
-    if (options) {
-      // Use == instead of === to prevent issues when HTML casts numbers as strings
-      // eslint-disable-next-line eqeqeq
-      const selectedOption = options.find(option => option.value == rawValue);
-      if (selectedOption) {
-        finalValue = selectedOption.label;
-      }
-    }
-
     if (userSuppliedValue) {
       finalValue += `: ${userSuppliedValue}`;
     }
@@ -112,25 +96,24 @@ const EditableField = (props) => {
         editing: (
           <>
             <form onSubmit={handleSubmit}>
-              <ValidationFormGroup
-                for={id}
-                invalid={error != null}
-                invalidMessage={error}
-                helpText={helpText}
+              <Form.Group
+                controlId={id}
+                isInvalid={error != null}
               >
-                <label className="h6 d-block" htmlFor={id}>{label}</label>
-                <Input
+                <Form.Label size="sm" className="h6 d-block" htmlFor={id}>{label}</Form.Label>
+                <Form.Control
                   data-hj-suppress
                   name={name}
                   id={id}
                   type={type}
                   value={value}
                   onChange={handleChange}
-                  options={inputOptions}
                   {...others}
                 />
-                <>{others.children}</>
-              </ValidationFormGroup>
+                {!!helpText && <Form.Text>{helpText}</Form.Text>}
+                {error != null && <Form.Control.Feedback hasIcon={false}>{error}</Form.Control.Feedback>}
+                {others.children}
+              </Form.Group>
               <p>
                 <StatefulButton
                   type="submit"
@@ -188,10 +171,6 @@ EditableField.propTypes = {
   type: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   userSuppliedValue: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  })),
   saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),
   error: PropTypes.string,
   confirmationMessageDefinition: PropTypes.shape({
@@ -213,7 +192,6 @@ EditableField.propTypes = {
 
 EditableField.defaultProps = {
   value: undefined,
-  options: undefined,
   saveState: undefined,
   label: undefined,
   emptyLabel: undefined,