feat(olmo): add css variables support and cdn compatibility (#4)

* chore: update dependencies to alpha version * fix: migrated functions to arrow functions to fix linting * Paragon form component deprecations (openedx#612) * refactor: removed deprecated paragon components from CoachingToggle and used alternatives * refactor: removed deprecated paragon components from ConfirmationModal and used alternatives * refactor: removed deprecations from EditableField and created separate component for SelectField * refactor: updated DemographicsSection to use new select component * refactor: removed deprecations from EmailField and used alternatives * refactor: removed deprecated Input from CoachingConsentForm * refactor: removed deprecated Input from DemographicsSection * refactor: removed deprecated Input from SummaryPanel component * refactor: removed deprecated CheckBox and used Form.CheckBox * refactor: fixed unit tests * refactor: changes based on PR reviews * fix: linting issue * refactor: migrate off modal paragon depreciation components (openedx#654) * refactor: worked on modal paragon depreciation component and changed them into latest paragon modals * refactor: migrate off modal paragon depreciation components * fix: fix eslint and commit message * fix: units tests were not working, its fixed * test: add unit tests in modal * test: add unit tests in id verfication modal * refactor: convert test cases from enzyme to react testing library * refactor: remove empty file * fix: downgrade paragon to 21.0.0
eduNEXT · Dec 15, 2023 · 7863af8 · 7863af8
1 parent b23d72d
commit 7863af8
Show file tree

Hide file tree

Showing 56 changed files with 14,103 additions and 26,210 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "bugs": {
     "url": "https://github.com/openedx/frontend-app-account/issues"
@@ -28,10 +29,10 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "12.0.0",
-    "@edx/frontend-component-header": "4.0.0",
-    "@edx/frontend-platform": "4.2.0",
-    "@edx/paragon": "20.28.5",
+    "@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@13.0.0-alpha.6",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.0.0-alpha.6",
+    "@edx/frontend-platform": "npm:@edunext/frontend-platform@3.7.0-alpha.14",
+    "@edx/paragon": "21.0.0-alpha.42",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -81,7 +82,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.1",
-    "@edx/frontend-build": "12.0.6",
+    "@edx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables",
     "@edx/reactifex": "1.1.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",

diff --git a/src/account-settings/AccountSettingsPage.jsx b/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}

diff --git a/src/account-settings/Alert.jsx b/src/account-settings/Alert.jsx
@@ -2,18 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-function Alert(props) {
-  return (
-    <div className={classNames('alert d-flex align-items-start', props.className)}>
-      <div>
-        {props.icon}
-      </div>
-      <div>
-        {props.children}
-      </div>
+const Alert = (props) => (
+  <div className={classNames('alert d-flex align-items-start', props.className)}>
+    <div>
+      {props.icon}
     </div>
-  );
-}
+    <div>
+      {props.children}
+    </div>
+  </div>
+);
 
 Alert.propTypes = {
   className: PropTypes.string,

diff --git a/src/account-settings/DOBForm.jsx b/src/account-settings/DOBForm.jsx
@@ -10,7 +10,7 @@ import { YEAR_OF_BIRTH_OPTIONS } from './data/constants';
 import { editableFieldSelector } from './data/selectors';
 import { saveSettingsReset } from './data/actions';
 
-function DOBModal(props) {
+const DOBModal = (props) => {
   const {
     saveState,
     error,
@@ -131,7 +131,7 @@ function DOBModal(props) {
       </ModalDialog>
     </>
   );
-}
+};
 
 DOBModal.propTypes = {
   saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),

diff --git a/src/account-settings/EditableField.jsx b/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';
@@ -20,15 +18,14 @@ import {
 import { editableFieldSelector } from './data/selectors';
 import CertificatePreference from './certificate-preference/CertificatePreference';
 
-function EditableField(props) {
+const EditableField = (props) => {
   const {
     name,
     label,
     emptyLabel,
     type,
     value,
     userSuppliedValue,
-    options,
     saveState,
     error,
     confirmationMessageDefinition,
@@ -45,10 +42,6 @@ function 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 @@ function 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 @@ function 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"
@@ -179,7 +162,7 @@ function EditableField(props) {
       }}
     />
   );
-}
+};
 
 EditableField.propTypes = {
   name: PropTypes.string.isRequired,
@@ -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,