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

* refactor: replace @edx/paragon and @edx/frontend-build * refactor: updated edx packages * fix: fixed failing test cases by remmoving paragon mock * fix: updated lock file to fix build issues --------- Co-authored-by: mashal-m <[email protected]> Co-authored-by: Bilal Qamar <[email protected]> Co-authored-by: Muhammad Abdullah Waheed <[email protected]>
openedx · Feb 28, 2024 · f67ffdd · f67ffdd
1 parent 836df49
commit f67ffdd
Show file tree

Hide file tree

Showing 60 changed files with 4,563 additions and 4,484 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,5 @@
-const { createConfig } = require('@edx/frontend-build');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {

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: [
@@ -15,8 +15,4 @@ module.exports = createConfig('jest', {
   ],
   testTimeout: 120000,
   testEnvironment: 'jsdom',
-  moduleNameMapper: {
-    '^@openedx/paragon$': '<rootDir>/mockParagon.js',
-    '^@openedx/paragon/(.*)$': '<rootDir>/mockParagon.js',
-  },
 });
diff --git a/mockParagon.js b/mockParagon.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,15 +25,15 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.7.1",
-    "@edx/frontend-component-header": "4.11.1",
-    "@edx/frontend-platform": "5.6.1",
+    "@edx/frontend-component-footer": "13.0.2",
+    "@edx/frontend-component-header": "5.0.2",
+    "@edx/frontend-platform": "7.1.0",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/paragon": "^20.44.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@openedx/paragon": "21.11.3",
     "@redux-beacon/segment": "^1.1.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/user-event": "^14.0.0",
@@ -55,7 +55,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-intl": "^5.20.9",
+    "react-intl": "6.4.7",
     "react-pdf": "^5.5.0",
     "react-redux": "^7.2.9",
     "react-router": "6.21.3",
@@ -73,9 +73,9 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
-    "@edx/frontend-build": "13.0.1",
-    "@edx/react-unit-test-utils": "1.7.1",
+    "@edx/react-unit-test-utils": "2.0.0",
     "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "13.0.28",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "^1.20.0",

diff --git a/src/App.scss b/src/App.scss
@@ -1,7 +1,7 @@
 // frontend-app-*/src/index.scss
 @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";
 
 $fa-font-path: "~font-awesome/fonts";

diff --git a/src/components/ConfirmModal.jsx b/src/components/ConfirmModal.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { AlertModal, ActionRow, Button } from '@edx/paragon';
+import { AlertModal, ActionRow, Button } from '@openedx/paragon';
 import { nullMethod } from 'hooks';
 
 export const ConfirmModal = ({

diff --git a/src/components/DemoAlert/index.jsx b/src/components/DemoAlert/index.jsx
@@ -6,7 +6,7 @@ import {
   ActionRow,
   AlertModal,
   Button,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import messages from './messages';
 

diff --git a/src/components/FilePreview/Banners/ErrorBanner.jsx b/src/components/FilePreview/Banners/ErrorBanner.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Alert, Button } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert, Button } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 const messageShape = PropTypes.shape({

diff --git a/src/components/FilePreview/Banners/LoadingBanner.jsx b/src/components/FilePreview/Banners/LoadingBanner.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Alert, Spinner } from '@edx/paragon';
+import { Alert, Spinner } from '@openedx/paragon';
 
 export const LoadingBanner = () => (
   <Alert variant="info">

diff --git a/src/components/FilePreview/BaseRenderers/PDFRenderer.jsx b/src/components/FilePreview/BaseRenderers/PDFRenderer.jsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { pdfjs, Document, Page } from 'react-pdf';
 import {
   Icon, Form, ActionRow, IconButton,
-} from '@edx/paragon';
-import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { ChevronLeft, ChevronRight } from '@openedx/paragon/icons';
 import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
 
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

diff --git a/src/components/FilePreview/FileCard.jsx b/src/components/FilePreview/FileCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Card, Collapsible } from '@edx/paragon';
+import { Card, Collapsible } from '@openedx/paragon';
 import FilePopoverContent from 'components/FilePopoverContent';
 import FileInfo from './FileInfo';
 

diff --git a/src/components/FilePreview/FileCard.scss b/src/components/FilePreview/FileCard.scss
@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 
 .file-card {
   margin: map-get($spacers, 1) 0;

diff --git a/src/components/FilePreview/FileCard.test.jsx b/src/components/FilePreview/FileCard.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';
 
 import FilePopoverContent from 'components/FilePopoverContent';
 import FileInfo from './FileInfo';

diff --git a/src/components/FilePreview/FileInfo.jsx b/src/components/FilePreview/FileInfo.jsx
@@ -5,8 +5,8 @@ import {
   Button,
   OverlayTrigger,
   Popover,
-} from '@edx/paragon';
-import { InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { nullMethod } from 'hooks';
 import messages from './messages';

diff --git a/src/components/FilePreview/FileInfo.test.jsx b/src/components/FilePreview/FileInfo.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Popover } from '@edx/paragon';
+import { Popover } from '@openedx/paragon';
 
 import FileInfo from './FileInfo';
 

diff --git a/src/components/InfoPopover/index.jsx b/src/components/InfoPopover/index.jsx
@@ -6,8 +6,8 @@ import {
   Popover,
   Icon,
   IconButton,
-} from '@edx/paragon';
-import { InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { nullMethod } from 'hooks';

diff --git a/src/components/LoadingMessage.jsx b/src/components/LoadingMessage.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Spinner } from '@edx/paragon';
+import { Spinner } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 /**

diff --git a/src/components/StatusBadge.jsx b/src/components/StatusBadge.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Badge } from '@edx/paragon';
+import { Badge } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { StrictDict } from 'utils';

diff --git a/src/containers/CTA/index.jsx b/src/containers/CTA/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { PageBanner, Hyperlink } from '@edx/paragon';
+import { PageBanner, Hyperlink } from '@openedx/paragon';
 
 import messages from './messages';
 

diff --git a/src/containers/CriterionContainer/CriterionFeedback.jsx b/src/containers/CriterionContainer/CriterionFeedback.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { feedbackRequirement } from 'data/services/lms/constants';

diff --git a/src/containers/CriterionContainer/RadioCriterion.jsx b/src/containers/CriterionContainer/RadioCriterion.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from 'data/redux';

diff --git a/src/containers/CriterionContainer/ReviewCriterion.jsx b/src/containers/CriterionContainer/ReviewCriterion.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Form, FormControlFeedback } from '@edx/paragon';
+import { Form, FormControlFeedback } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { selectors } from 'data/redux';

diff --git a/src/containers/CriterionContainer/index.jsx b/src/containers/CriterionContainer/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import { selectors } from 'data/redux';
 import { gradeStatuses } from 'data/services/lms/constants';

diff --git a/src/containers/DemoWarning/index.jsx b/src/containers/DemoWarning/index.jsx
@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
 import { selectors } from 'data/redux';
 import messages from './messages';

diff --git a/src/containers/ListView/EmptySubmission.jsx b/src/containers/ListView/EmptySubmission.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Button } from '@edx/paragon';
+import { Hyperlink, Button } from '@openedx/paragon';
 
 import urls from 'data/services/lms/urls';
 import emptyStateSVG from './assets/empty-state.svg';

diff --git a/src/containers/ListView/EmptySubmission.test.jsx b/src/containers/ListView/EmptySubmission.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 
 import urls from 'data/services/lms/urls';
 

diff --git a/src/containers/ListView/FilterStatusComponent.jsx b/src/containers/ListView/FilterStatusComponent.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, DataTableContext } from '@edx/paragon';
+import { Button, DataTableContext } from '@openedx/paragon';
 
 import * as module from './FilterStatusComponent';
 

diff --git a/src/containers/ListView/ListError.jsx b/src/containers/ListView/ListError.jsx
@@ -6,8 +6,8 @@ import {
   Alert,
   Button,
   Hyperlink,
-} from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import urls from 'data/services/lms/urls';

diff --git a/src/containers/ListView/ListView.scss b/src/containers/ListView/ListView.scss
@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 
 span.pgn__icon.breadcrumb-arrow {
   width: 16px !important;

diff --git a/src/containers/ListView/ListViewBreadcrumb.jsx b/src/containers/ListView/ListViewBreadcrumb.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { ArrowBack, Launch } from '@edx/paragon/icons';
-import { Hyperlink, Icon } from '@edx/paragon';
+import { ArrowBack, Launch } from '@openedx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { selectors } from 'data/redux';

diff --git a/src/containers/ListView/ListViewBreadcrumb.test.jsx b/src/containers/ListView/ListViewBreadcrumb.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 
 import * as constants from 'data/constants/app';
 import urls from 'data/services/lms/urls';

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

diff --git a/src/containers/ListView/SubmissionsTable.jsx b/src/containers/ListView/SubmissionsTable.jsx
@@ -7,7 +7,7 @@ import {
   DataTable,
   TextFilter,
   MultiSelectDropdownFilter,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { gradingStatuses, submissionFields } from 'data/services/lms/constants';

diff --git a/src/containers/ListView/SubmissionsTable.test.jsx b/src/containers/ListView/SubmissionsTable.test.jsx
@@ -4,7 +4,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 import {
   MultiSelectDropdownFilter,
   TextFilter,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { selectors, thunkActions } from 'data/redux';
 import { gradingStatuses as statuses, submissionFields } from 'data/services/lms/constants';

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

diff --git a/src/containers/ListView/index.jsx b/src/containers/ListView/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Container, Spinner } from '@edx/paragon';
+import { Container, Spinner } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { selectors, thunkActions } from 'data/redux';

diff --git a/src/containers/ListView/index.test.jsx b/src/containers/ListView/index.test.jsx
@@ -34,7 +34,7 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Container: 'Container',
   Spinner: 'Spinner',
 }));

diff --git a/src/containers/ResponseDisplay/FileDownload.jsx b/src/containers/ResponseDisplay/FileDownload.jsx
@@ -6,7 +6,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   StatefulButton,
   Icon,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { RequestKeys, RequestStates } from 'data/constants/requests';
 import { selectors, thunkActions } from 'data/redux';

diff --git a/src/containers/ResponseDisplay/ResponseDisplay.scss b/src/containers/ResponseDisplay/ResponseDisplay.scss
@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 
 .response-display {
   padding: map-get($spacers, 0);

diff --git a/src/containers/ResponseDisplay/SubmissionFiles.jsx b/src/containers/ResponseDisplay/SubmissionFiles.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import {
   Card, Collapsible, Icon, DataTable, Button,
-} from '@edx/paragon';
-import { ArrowDropDown, ArrowDropUp, WarningFilled } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { ArrowDropDown, ArrowDropUp, WarningFilled } from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';