refactor: replace @edx/paragon and @edx/frontend-build (#945)

* refactor: replace @edx/paragon and @edx/frontend-build * refactor: updated edx packages --------- Co-authored-by: mashal-m <[email protected]> Co-authored-by: Bilal Qamar <[email protected]>
openedx · Feb 22, 2024 · 676166a · 676166a
1 parent 761995b
commit 676166a
Show file tree

Hide file tree

Showing 20 changed files with 1,047 additions and 1,169 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,4 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('eslint');
diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,11 +29,10 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.7.0",
-    "@edx/frontend-component-header": "4.11.0",
-    "@edx/frontend-platform": "5.6.1",
-    "@edx/openedx-atlas": "^0.6.0",
-    "@edx/paragon": "^20.44.0",
+    "@edx/frontend-component-footer": "13.0.2",
+    "@edx/frontend-component-header": "5.0.2",
+    "@edx/frontend-platform": "7.1.0",
+    "@openedx/paragon": "21.13.1",
     "@fortawesome/fontawesome-svg-core": "6.5.1",
     "@fortawesome/free-brands-svg-icons": "6.5.1",
     "@fortawesome/free-regular-svg-icons": "6.5.1",
@@ -67,7 +66,7 @@
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-angular": "17.8.1",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "13.0.14",
+    "@openedx/frontend-build": "13.0.28",
     "@edx/reactifex": "2.2.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",

diff --git a/src/i18n/index.js b/src/i18n/index.js
@@ -1,6 +1,6 @@
 import { messages as headerMessages } from '@edx/frontend-component-header';
 import { messages as footerMessages } from '@edx/frontend-component-footer';
-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';
 import dedeCAMessages from './messages/de_DE.json';

diff --git a/src/index.scss b/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 "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";

diff --git a/src/profile/AgeMessage.jsx b/src/profile/AgeMessage.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 

diff --git a/src/profile/ProfilePage.jsx b/src/profile/ProfilePage.jsx
@@ -6,7 +6,7 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
+import { Alert, Hyperlink } from '@openedx/paragon';
 
 // Actions
 import {

diff --git a/src/profile/UsernameDescription.jsx b/src/profile/UsernameDescription.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { VisibilityOff } from '@edx/paragon/icons';
-import { Icon } from '@edx/paragon';
+import { VisibilityOff } from '@openedx/paragon/icons';
+import { Icon } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 const UsernameDescription = () => (

diff --git a/src/profile/__snapshots__/ProfilePage.test.jsx.snap b/src/profile/__snapshots__/ProfilePage.test.jsx.snap
@@ -135,6 +135,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -207,6 +208,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -2192,6 +2194,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                           >
                             <span
                               class="pgn__icon"
+                              data-testid="hyperlink-icon"
                               style="height: 1em; width: 1em;"
                             >
                               <svg
@@ -2337,6 +2340,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -2409,6 +2413,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -3188,6 +3193,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                           >
                             <span
                               class="pgn__icon"
+                              data-testid="hyperlink-icon"
                               style="height: 1em; width: 1em;"
                             >
                               <svg
@@ -3333,6 +3339,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -3405,6 +3412,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -5059,6 +5067,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                           >
                             <span
                               class="pgn__icon"
+                              data-testid="hyperlink-icon"
                               style="height: 1em; width: 1em;"
                             >
                               <svg
@@ -5215,6 +5224,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -5315,6 +5325,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -5607,6 +5618,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -5679,6 +5691,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -6336,6 +6349,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                           >
                             <span
                               class="pgn__icon"
+                              data-testid="hyperlink-icon"
                               style="height: 1em; width: 1em;"
                             >
                               <svg
@@ -6481,6 +6495,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -6553,6 +6568,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -7274,6 +7290,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                           >
                             <span
                               class="pgn__icon"
+                              data-testid="hyperlink-icon"
                               style="height: 1em; width: 1em;"
                             >
                               <svg
@@ -7419,6 +7436,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -7491,6 +7509,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <span
                   class="pgn__icon"
+                  data-testid="hyperlink-icon"
                   style="height: 1em; width: 1em;"
                 >
                   <svg
@@ -8220,6 +8239,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                           >
                             <span
                               class="pgn__icon"
+                              data-testid="hyperlink-icon"
                               style="height: 1em; width: 1em;"
                             >
                               <svg
@@ -9016,6 +9036,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                           >
                             <span
                               class="pgn__icon"
+                              data-testid="hyperlink-icon"
                               style="height: 1em; width: 1em;"
                             >
                               <svg

diff --git a/src/profile/forms/Bio.jsx b/src/profile/forms/Bio.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import messages from './Bio.messages';
 

diff --git a/src/profile/forms/Certificates.jsx b/src/profile/forms/Certificates.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   FormattedDate, FormattedMessage, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
 

diff --git a/src/profile/forms/Country.jsx b/src/profile/forms/Country.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import messages from './Country.messages';
 

diff --git a/src/profile/forms/Education.jsx b/src/profile/forms/Education.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import get from 'lodash.get';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import messages from './Education.messages';
 

diff --git a/src/profile/forms/PreferredLanguage.jsx b/src/profile/forms/PreferredLanguage.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import messages from './PreferredLanguage.messages';
 

diff --git a/src/profile/forms/ProfileAvatar.jsx b/src/profile/forms/ProfileAvatar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Dropdown } from '@edx/paragon';
+import { Button, Dropdown } from '@openedx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { ReactComponent as DefaultAvatar } from '../assets/avatar.svg';

diff --git a/src/profile/forms/SocialLinks.jsx b/src/profile/forms/SocialLinks.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';

diff --git a/src/profile/forms/elements/EditButton.jsx b/src/profile/forms/elements/EditButton.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import messages from './EditButton.messages';
 

diff --git a/src/profile/forms/elements/FormControls.jsx b/src/profile/forms/elements/FormControls.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, StatefulButton } from '@edx/paragon';
+import { Button, StatefulButton } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import messages from './FormControls.messages';

diff --git a/src/profile/forms/elements/SwitchContent.jsx b/src/profile/forms/elements/SwitchContent.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TransitionReplace } from '@edx/paragon';
+import { TransitionReplace } from '@openedx/paragon';
 
 const onChildExit = (htmlNode) => {
   // If the leaving child has focus, take control and redirect it