chore(deps): update paragon and frontend-build to openedx scope (#1132)

.eslintrc.js

@@ -1,12 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('eslint', {
   rules: {
     // Temporarily update the 'indent', 'template-curly-spacing' and
     // 'no-multiple-empty-lines' rules since they are causing eslint
     // to fail for no apparent reason since upgrading
-    // @edx/frontend-build from v3 to v5:
+    // @openedx/frontend-build from v3 to v5:
     // - TypeError: Cannot read property 'range' of null
     indent: [
       'error',

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFiles: [

package.json

@@ -33,12 +33,12 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "^5.5.4",
+    "@edx/frontend-platform": "7.0.1",
-    "@edx/paragon": "20.46.2",
     "@fortawesome/fontawesome-svg-core": "6.4.2",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/paragon": "^21.13.1",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.2.5",
     "@testing-library/react": "^12.1.5",
@@ -71,10 +71,10 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "13.0.8",
     "@edx/reactifex": "1.1.0",
     "babel-plugin-formatjs": "10.5.10",
     "eslint-plugin-import": "2.28.0",
+    "@openedx/frontend-build": "13.0.27",
     "glob": "7.2.3",
     "history": "5.3.0",
     "husky": "7.0.4",

src/base-container/components/default-layout/LargeLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';

src/base-container/components/default-layout/MediumLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';

src/base-container/components/default-layout/SmallLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';

src/base-container/components/image-layout/ExtraSmallLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 
 import messages from './messages';
 

src/base-container/components/image-layout/LargeLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 
 import './index.scss';
 import messages from './messages';

src/base-container/components/image-layout/MediumLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 
 import './index.scss';
 import messages from './messages';

src/base-container/components/image-layout/SmallLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 
 import messages from './messages';
 

src/base-container/components/welcome-page-layout/LargeLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/base-container/components/welcome-page-layout/MediumLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/base-container/components/welcome-page-layout/SmallLayout.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/base-container/index.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { breakpoints } from '@edx/paragon';
+import { breakpoints } from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';

src/common-components/EnterpriseSSO.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   Button, Form,
   Icon,
-} from '@edx/paragon';
+} from '@openedx/paragon';
-import { Login } from '@edx/paragon/icons';
+import { Login } from '@openedx/paragon/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/common-components/FormGroup.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import {
   Form, TransitionReplace,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 const FormGroup = (props) => {

src/common-components/InstitutionLogistration.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Hyperlink, Icon } from '@edx/paragon';
+import { Button, Hyperlink, Icon } from '@openedx/paragon';
-import { Institution } from '@edx/paragon/icons';
+import { Institution } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/common-components/PasswordField.jsx

@@ -4,10 +4,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
   Check, Remove, Visibility, VisibilityOff,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/common-components/SocialAuthProviders.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon } from '@edx/paragon';
-import { Login } from '@edx/paragon/icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Icon } from '@openedx/paragon';
+import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/common-components/ThirdPartyAuth.jsx

@@ -4,8 +4,8 @@ import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Hyperlink, Icon,
-} from '@edx/paragon';
+} from '@openedx/paragon';
-import { Institution } from '@edx/paragon/icons';
+import { Institution } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import Skeleton from 'react-loading-skeleton';
 

src/common-components/ThirdPartyAuthAlert.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/data/utils/useMobileResponsive.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { breakpoints } from '@edx/paragon';
+import { breakpoints } from '@openedx/paragon';
 
 /**
  * A react hook used to determine if the current window is mobile or not.

src/field-renderer/FieldRenderer.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Form, Icon } from '@edx/paragon';
+import { Form, Icon } from '@openedx/paragon';
-import { ExpandMore } from '@edx/paragon/icons';
+import { ExpandMore } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 const FormFieldRenderer = (props) => {

src/forgot-password/ForgotPasswordAlert.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
-import { CheckCircle, Error } from '@edx/paragon/icons';
+import { CheckCircle, Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/forgot-password/ForgotPasswordPage.jsx

@@ -11,8 +11,8 @@ import {
   StatefulButton,
   Tab,
   Tabs,
-} from '@edx/paragon';
+} from '@openedx/paragon';
-import { ChevronLeft } from '@edx/paragon/icons';
+import { ChevronLeft } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useNavigate } from 'react-router-dom';

src/i18n/index.jsx

@@ -1,4 +1,4 @@
-import { messages as paragonMessages } from '@edx/paragon';
+import { messages as paragonMessages } from '@openedx/paragon';
 
 import arMessages from './messages/ar.json';
 import deMessages from './messages/de.json';

src/index.scss

@@ -1,6 +1,6 @@
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 @import "sass/style";

src/login/AccountActivationMessage.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
-import { CheckCircle, Error } from '@edx/paragon/icons';
+import { CheckCircle, Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import { ACCOUNT_ACTIVATION_MESSAGE } from './data/constants';

src/login/ChangePasswordPrompt.jsx

@@ -4,7 +4,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow, ModalDialog, useToggle,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Link, useNavigate } from 'react-router-dom';

src/login/LoginFailure.jsx

@@ -3,8 +3,8 @@ import React, { useEffect } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthService } from '@edx/frontend-platform/auth';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
+import { Alert, Hyperlink } from '@openedx/paragon';
-import { Error } from '@edx/paragon/icons';
+import { Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import ChangePasswordPrompt from './ChangePasswordPrompt';

src/login/LoginPage.jsx

@@ -6,7 +6,7 @@ import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'
 import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, StatefulButton,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import Skeleton from 'react-loading-skeleton';

src/logistration/Logistration.jsx

@@ -9,8 +9,8 @@ import {
   Icon,
   Tab,
   Tabs,
-} from '@edx/paragon';
+} from '@openedx/paragon';
-import { ChevronLeft } from '@edx/paragon/icons';
+import { ChevronLeft } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Navigate, useNavigate } from 'react-router-dom';
 

src/progressive-profiling/ProgressiveProfiling.jsx

@@ -16,8 +16,8 @@ import {
   Hyperlink,
   Spinner,
   StatefulButton,
-} from '@edx/paragon';
+} from '@openedx/paragon';
-import { Error } from '@edx/paragon/icons';
+import { Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useLocation } from 'react-router-dom';

src/progressive-profiling/ProgressiveProfilingPageModal.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, Button, ModalDialog } from '@edx/paragon';
+import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';

src/recommendations/ProductCard/BaseCard/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Badge, Card, Hyperlink } from '@edx/paragon';
+import { Badge, Card, Hyperlink } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import { truncateText } from '../../data/utils';

src/recommendations/RecommendationsPage.jsx

@@ -10,7 +10,7 @@ import {
   Image, Skeleton,
   StatefulButton,
   useMediaQuery,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { Helmet } from 'react-helmet';
 import { useLocation } from 'react-router-dom';
 

src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Skeleton } from '@edx/paragon';
+import { Skeleton } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import loadingCoursesPlaceholders from '../data/loadingCoursesPlaceholders';

src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Skeleton } from '@edx/paragon';
+import { Skeleton } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import loadingCoursesPlaceholders from '../data/loadingCoursesPlaceholders';

src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx

@@ -13,8 +13,8 @@ jest.mock('react-router-dom', () => ({
   useLocation: jest.fn(),
 }));
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@edx/paragon'),
+  ...jest.requireActual('@openedx/paragon'),
   useMediaQuery: jest.fn(),
 }));
 

src/recommendations/tests/RecommendationsPage.test.jsx

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import { useMediaQuery } from '@edx/paragon';
+import { useMediaQuery } from '@openedx/paragon';
 import { fireEvent, render } from '@testing-library/react';
 import { useLocation } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -28,8 +28,8 @@ jest.mock('react-router-dom', () => ({
   useLocation: jest.fn(),
 }));
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@edx/paragon'),
+  ...jest.requireActual('@openedx/paragon'),
   useMediaQuery: jest.fn(),
 }));
 

src/register/RegistrationFields/CountryField/CountryField.jsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { FormAutosuggest, FormAutosuggestOption, FormControlFeedback } from '@edx/paragon';
+import { FormAutosuggest, FormAutosuggestOption, FormControlFeedback } from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 

src/register/RegistrationFields/EmailField/EmailField.jsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert, Icon } from '@edx/paragon';
+import { Alert, Icon } from '@openedx/paragon';
-import { Close, Error } from '@edx/paragon/icons';
+import { Close, Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import validateEmail from './validator';

src/register/RegistrationFields/HonorCodeField/HonorCode.jsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Form, Hyperlink } from '@edx/paragon';
+import { Form, Hyperlink } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from '../../messages';

src/register/RegistrationFields/TermsOfServiceField/TermsOfService.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Form, Hyperlink } from '@edx/paragon';
+import { Form, Hyperlink } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from '../../messages';

src/register/RegistrationFields/UsernameField/UsernameField.jsx

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon, IconButton } from '@edx/paragon';
+import { Button, Icon, IconButton } from '@openedx/paragon';
-import { Close } from '@edx/paragon/icons';
+import { Close } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import validateUsername from './validator';

src/register/RegistrationPage.jsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Form, Spinner, StatefulButton } from '@edx/paragon';
+import { Form, Spinner, StatefulButton } from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';

src/register/components/RegistrationFailure.jsx

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
-import { Error } from '@edx/paragon/icons';
+import { Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import { windowScrollTo } from '../../data/utils';

src/reset-password/ResetPasswordFailure.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
-import { Error } from '@edx/paragon/icons';
+import { Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import { FORM_SUBMISSION_ERROR, PASSWORD_RESET, PASSWORD_VALIDATION_ERROR } from './data/constants';

src/reset-password/ResetPasswordPage.jsx

@@ -10,8 +10,8 @@ import {
   StatefulButton,
   Tab,
   Tabs,
-} from '@edx/paragon';
+} from '@openedx/paragon';
-import { ChevronLeft } from '@edx/paragon/icons';
+import { ChevronLeft } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useNavigate, useParams } from 'react-router-dom';

src/reset-password/ResetPasswordSuccess.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import messages from './messages';
 

webpack.prod.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('webpack-prod');