feat: replace @edx/paragon with @openedx/paragon (#143)

* feat: replace @edx/paragon with @openedx/paragon

BREAKING CHANGE:
- replace @edx/paragon with @openedx/paragon
- upgrade @edx/frontend-platform to version 7

* chore: replace @edx/frontend-build to @openedx/frontend-build and update tests

.env.test

@@ -1,3 +1,11 @@
+# required for tests
+BASE_URL='http://localhost:2000'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+# ------------------------
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 EXAMS_BASE_URL='http://localhost:18740'

.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');

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  

package.json

@@ -54,8 +54,8 @@
     "eventemitter3": "^4.0.7"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^4.2.0 || ^5.0.0",
-    "@edx/paragon": "^19.4.1 || ^20.22.4",
+    "@edx/frontend-platform": "^7.0.0",
+    "@openedx/paragon": "^22.0.0",
     "@reduxjs/toolkit": "^1.5.1",
     "prop-types": "^15.7.2",
     "react": "^16.14.0 || ^17.0.0",
@@ -66,10 +66,10 @@
     "redux": "^4.0.5"
   },
   "devDependencies": {
-    "@edx/frontend-build": "13.0.1",
-    "@edx/frontend-platform": "5.5.4",
-    "@edx/paragon": "20.44.0",
+    "@edx/frontend-platform": "^7.1.3",
     "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "^13.0.29",
+    "@openedx/paragon": "^22.2.0",
     "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/dom": "7.16.3",
     "@testing-library/jest-dom": "5.10.1",
@@ -82,7 +82,6 @@
     "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-intl": "^5.25.0",
     "react-redux": "^7.2.9",
     "react-router": "6.15.0",
     "react-router-dom": "6.15.0",

src/api.test.jsx

@@ -1,7 +1,7 @@
 import { Factory } from 'rosie';
 
 import { useExamAccessToken, useFetchExamAccessToken, useIsExam } from './api';
-import { initializeTestStore, render } from './setupTest';
+import { initializeMockApp, initializeTestStore, render } from './setupTest';
 
 /**
  * Hooks must be run in the scope of a component. To run the hook, wrap it in a test component whose sole
@@ -25,6 +25,7 @@ describe('External API integration tests', () => {
     let store;
 
     beforeAll(() => {
+      initializeMockApp();
       const mockExam = Factory.build('exam', { attempt: Factory.build('attempt') });
       const mockToken = Factory.build('examAccessToken');
       const mockState = { specialExams: { exam: mockExam, examAccessToken: mockToken } };

src/exam/Exam.jsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert, Spinner } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert, Spinner } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import { ExamTimerBlock } from '../timer';
 import Instructions from '../instructions';
 import ExamAPIError from './ExamAPIError';

src/exam/ExamAPIError.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
-import { Alert, Hyperlink, Icon } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert, Hyperlink, Icon } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 

src/exam/ExamWrapper.test.jsx

@@ -29,8 +29,9 @@ describe('SequenceExamWrapper', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     store = initializeTestStore({
-      specialExams: Factory.build('specialExams'),
-      isLoading: false,
+      specialExams: Factory.build('specialExams', {
+        isLoading: false,
+      }),
     });
   });
 

src/instructions/EntranceInstructions.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 import { ExamType } from '../constants';
 import { EntranceProctoredExamInstructions } from './proctored_exam';
 import { EntranceOnboardingExamInstructions } from './onboarding_exam';

src/instructions/ErrorInstructions.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 import { ExamType } from '../constants';
 import { ErrorPracticeExamInstructions } from './practice_exam';
 import { ErrorOnboardingExamInstructions } from './onboarding_exam';

src/instructions/ExpiredInstructions.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 
 const ExpiredExamInstructions = () => (
   <Container className="border py-5 mb-4 bg-warning-100">

src/instructions/RejectedInstructions.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ExamType } from '../constants';
 import { RejectedOnboardingExamInstructions } from './onboarding_exam';

src/instructions/SubmitInstructions.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Container } from '@edx/paragon';
+import { Button, Container } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import Emitter from '../data/emitter';
 import { ExamType } from '../constants';

src/instructions/SubmittedInstructions.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 import { ExamType } from '../constants';
 import { SubmittedPracticeExamInstructions } from './practice_exam';
 import { SubmittedProctoredExamInstructions } from './proctored_exam';

src/instructions/UnknownAttemptStatusError.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 const UnknownAttemptStatusError = () => (
   <Alert variant="danger" data-testid="unknown-status-error">

src/instructions/VerifiedInstructions.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 import { ExamType } from '../constants';
 import { VerifiedOnboardingExamInstructions } from './onboarding_exam';
 import { VerifiedProctoredExamInstructions } from './proctored_exam';

src/instructions/onboarding_exam/EntranceOnboardingExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button, MailtoLink } from '@edx/paragon';
+import { Button, MailtoLink } from '@openedx/paragon';
 
 import { createProctoredExamAttempt } from '../../data';
 

src/instructions/onboarding_exam/ErrorOnboardingExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { resetExam } from '../../data';
 

src/instructions/onboarding_exam/RejectedOnboardingExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button, MailtoLink } from '@edx/paragon';
+import { Button, MailtoLink } from '@openedx/paragon';
 
 import { resetExam } from '../../data';
 

src/instructions/onboarding_exam/SubmittedOnboardingExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button, MailtoLink, useToggle } from '@edx/paragon';
+import { Button, MailtoLink, useToggle } from '@openedx/paragon';
 
 import { resetExam } from '../../data';
 

src/instructions/onboarding_exam/VerifiedOnboardingExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { MailtoLink } from '@edx/paragon';
+import { MailtoLink } from '@openedx/paragon';
 
 const VerifiedOnboardingExamInstructions = () => {
   const { proctoringSettings } = useSelector(state => state.specialExams);

src/instructions/practice_exam/EntrancePracticeExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { createProctoredExamAttempt } from '../../data';
 

src/instructions/practice_exam/ErrorPracticeExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { resetExam } from '../../data';
 

src/instructions/practice_exam/SubmittedPracticeExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { resetExam } from '../../data';
 

src/instructions/proctored_exam/EntranceProctoredExamInstructions.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { createProctoredExamAttempt } from '../../data';
 import SkipProctoredExamButton from './SkipProctoredExamButton';

src/instructions/proctored_exam/ErrorProctoredExamInstructions.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
-import { Hyperlink, MailtoLink } from '@edx/paragon';
+import { Hyperlink, MailtoLink } from '@openedx/paragon';
 
 const ErrorProctoredExamInstructions = () => {
   const { proctoring_escalation_email: proctoringEscalationEmail } = useSelector(
@@ -31,7 +31,7 @@ const ErrorProctoredExamInstructions = () => {
         defaultMessage={'A system error has occurred with your proctored exam. '
         + 'Please reach out to {supportLink} for assistance, and return to '
         + 'the exam once you receive further instructions.'}
-        values={{ supportLink: <Hyperlink href={contactUsUrl} target="_blank">{platformName} Support</Hyperlink> }}
+        values={{ supportLink: <Hyperlink destination={contactUsUrl} target="_blank">{platformName} Support</Hyperlink> }}
       />
     );
   };

src/instructions/proctored_exam/Footer.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 

src/instructions/proctored_exam/OnboardingErrorExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Container, MailtoLink, Hyperlink } from '@edx/paragon';
+import { Container, MailtoLink, Hyperlink } from '@openedx/paragon';
 import { ExamStatus } from '../../constants';
 import Footer from './Footer';
 

src/instructions/proctored_exam/ReadyToStartProctoredExamInstructions.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
-import { Button, Container, Spinner } from '@edx/paragon';
+import { Button, Container, Spinner } from '@openedx/paragon';
 import Footer from './Footer';
 
 import { getExamReviewPolicy, startProctoredExam } from '../../data';

src/instructions/proctored_exam/SkipProctoredExamButton.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';
 
 const SkipProctoredExamButton = ({ handleClick }) => (

src/instructions/proctored_exam/SkipProctoredExamInstruction.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button, Container } from '@edx/paragon';
+import { Button, Container } from '@openedx/paragon';
 import Footer from './Footer';
 
 import { skipProctoringExam } from '../../data';

src/instructions/proctored_exam/SubmitProctoredExamInstructions.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { ExamType } from '../../constants';
 import { submitExam } from '../../data';
 

src/instructions/proctored_exam/WarningModal.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ActionRow, ModalDialog, Button } from '@edx/paragon';
+import { ActionRow, ModalDialog, Button } from '@openedx/paragon';
 
 const WarningModal = ({
   isOpen, handleClose, title, body,
 }) => (
   <ModalDialog
     isOpen={isOpen}
     hasCloseButton={false}
+    title={title}
+    onClose={handleClose}
   >
 
     <ModalDialog.Header>

src/instructions/proctored_exam/download-instructions/DownloadButtons.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';
 
 const DownloadButtons = ({

src/instructions/proctored_exam/download-instructions/ExamCode.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { StatefulButton, Form } from '@edx/paragon';
-import { Check } from '@edx/paragon/icons';
+import { StatefulButton, Form } from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 const ExamCode = ({ code }) => {

src/instructions/proctored_exam/download-instructions/LtiProviderInstructions.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 
 const LtiProviderExamInstructions = ({
   providerName, supportEmail, supportPhone, supportURL,
 }) => {
   const supportURLHyperlink = (chunks) => (
-    <Hyperlink destination={chunks} target="_blank">
+    <Hyperlink destination={chunks[0]} target="_blank">
       {chunks}
     </Hyperlink>
   );

src/instructions/proctored_exam/download-instructions/index.jsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 import { ExamStatus } from '../../../constants';
 import { getExamAttemptsData } from '../../../data';
 import WarningModal from '../WarningModal';

src/instructions/proctored_exam/prerequisites-instructions/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import PendingPrerequisitesProctoredExamInstructions from './Pending';
 import FailedPrerequisitesProctoredExamInstructions from './Failed';

src/instructions/timed_exam/StartTimedExamInstructions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { startTimedExam } from '../../data';
 
 const StartTimedExamInstructions = () => {