Merge branch 'master' into persian-language

package.json

@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-platform": "^4.6.0",
-    "@edx/paragon": "20.46.0",
+    "@edx/frontend-platform": "^5.0.0",
+    "@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",
@@ -54,21 +54,21 @@
     "react-loading-skeleton": "3.3.1",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "react-zendesk": "^0.1.13",
     "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-mock-store": "1.5.4",
     "redux-saga": "1.2.3",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.13.11",
+    "regenerator-runtime": "0.14.0",
     "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.4",
+    "@edx/frontend-build": "12.9.8",
     "@edx/reactifex": "1.1.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-plugin-formatjs": "10.5.3",

src/MainApp.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { Helmet } from 'react-helmet';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import {
   EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
@@ -37,26 +37,26 @@ const MainApp = () => (
       <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
     </Helmet>
     {getConfig().ZENDESK_KEY && <Zendesk />}
-    <Switch>
-      <Route exact path="/">
-        <Redirect to={updatePathWithQueryParams(REGISTER_PAGE)} />
-      </Route>
-      <EmbeddedRegistrationRoute
-        exact
+    <Routes>
+      <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+      <Route
         path={REGISTER_EMBEDDED_PAGE}
-        component={RegistrationPage}
+        element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
       />
-      <UnAuthOnlyRoute exact path={LOGIN_PAGE} render={() => <Logistration selectedPage={LOGIN_PAGE} />} />
-      <UnAuthOnlyRoute exact path={REGISTER_PAGE} component={Logistration} />
-      <UnAuthOnlyRoute exact path={RESET_PAGE} component={ForgotPasswordPage} />
-      <Route exact path={PASSWORD_RESET_CONFIRM} component={ResetPasswordPage} />
-      <Route exact path={AUTHN_PROGRESSIVE_PROFILING} component={ProgressiveProfiling} />
-      <Route exact path={RECOMMENDATIONS} component={RecommendationsPage} />
-      <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
-      <Route path="*">
-        <Redirect to={PAGE_NOT_FOUND} />
-      </Route>
-    </Switch>
+      <Route
+        path={LOGIN_PAGE}
+        element={
+          <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+        }
+      />
+      <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>} />
+      <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
+      <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
+      <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+      <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+      <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+      <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+    </Routes>
   </AppProvider>
 );
 

src/common-components/EmbeddedRegistrationRoute.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { Redirect, Route } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
 import { PAGE_NOT_FOUND } from '../data/constants';
 import { isHostAvailableInQueryParams } from '../data/utils';
@@ -10,19 +10,19 @@ import { isHostAvailableInQueryParams } from '../data/utils';
  * This wrapper redirects the requester to embedded register page only if host
  * query param is present.
  */
-const EmbeddedRegistrationRoute = (props) => {
+const EmbeddedRegistrationRoute = ({ children }) => {
   const registrationEmbedded = isHostAvailableInQueryParams();
 
   // Show registration page for embedded experience even if the user is authenticated
   if (registrationEmbedded) {
-    return <Route {...props} />;
+    return children;
   }
 
-  return <Redirect to={PAGE_NOT_FOUND} />;
+  return <Navigate to={PAGE_NOT_FOUND} replace />;
 };
 
 EmbeddedRegistrationRoute.propTypes = {
-  path: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default EmbeddedRegistrationRoute;

src/common-components/RedirectLogistration.jsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
 import {
   AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
@@ -49,13 +47,13 @@ const RedirectLogistration = (props) => {
       }
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
-        <Redirect to={{
-          pathname: AUTHN_PROGRESSIVE_PROFILING,
-          state: {
+        <Navigate
+          to={AUTHN_PROGRESSIVE_PROFILING}
+          state={{
             registrationResult,
             optionalFields,
-          },
-        }}
+          }}
+          replace
         />
       );
     }
@@ -64,14 +62,14 @@ const RedirectLogistration = (props) => {
     if (redirectToRecommendationsPage) {
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
-        <Redirect to={{
-          pathname: RECOMMENDATIONS,
-          state: {
+        <Navigate
+          to={RECOMMENDATIONS}
+          state={{
             registrationResult,
             educationLevel,
             userId,
-          },
-        }}
+          }}
+          replace
         />
       );
     }

src/common-components/UnAuthOnlyRoute.jsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import PropTypes from 'prop-types';
-import { Route } from 'react-router-dom';
 
 import {
   DEFAULT_REDIRECT_URL,
@@ -13,7 +12,7 @@ import {
  * This wrapper redirects the requester to our default redirect url if they are
  * already authenticated.
  */
-const UnAuthOnlyRoute = (props) => {
+const UnAuthOnlyRoute = ({ children }) => {
   const [authUser, setAuthUser] = useState({});
   const [isReady, setIsReady] = useState(false);
 
@@ -30,14 +29,14 @@ const UnAuthOnlyRoute = (props) => {
       return null;
     }
 
-    return <Route {...props} />;
+    return children;
   }
 
   return null;
 };
 
 UnAuthOnlyRoute.propTypes = {
-  path: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default UnAuthOnlyRoute;

src/common-components/tests/EmbeddedRegistrationRoute.test.jsx

@@ -9,7 +9,9 @@ import { act } from 'react-dom/test-utils';
 import { REGISTER_EMBEDDED_PAGE } from '../../data/constants';
 import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
 
-import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
 
 const RRD = require('react-router-dom');
 // Just render plain div with its children
@@ -20,9 +22,12 @@ module.exports = RRD;
 const TestApp = () => (
   <Router>
     <div>
-      <Switch>
-        <EmbeddedRegistrationRoute path={REGISTER_EMBEDDED_PAGE} render={() => (<span>Embedded Register Page</span>)} />
-      </Switch>
+      <Routes>
+        <Route
+          path={REGISTER_EMBEDDED_PAGE}
+          element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
+        />
+      </Routes>
     </div>
   </Router>
 );

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -9,7 +9,9 @@ import { act } from 'react-dom/test-utils';
 import { UnAuthOnlyRoute } from '..';
 import { REGISTER_PAGE } from '../../data/constants';
 
-import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedUser: jest.fn(),
@@ -25,9 +27,9 @@ module.exports = RRD;
 const TestApp = () => (
   <Router>
     <div>
-      <Switch>
-        <UnAuthOnlyRoute path={REGISTER_PAGE} render={() => (<span>Register Page</span>)} />
-      </Switch>
+      <Routes>
+        <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
+      </Routes>
     </div>
   </Router>
 );

src/forgot-password/ForgotPasswordPage.jsx

@@ -15,7 +15,7 @@ import {
 import { ChevronLeft } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { Redirect } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { forgotPassword, setForgotPasswordFormData } from './data/actions';
 import { forgotPasswordResultSelector } from './data/selectors';
@@ -38,7 +38,7 @@ const ForgotPasswordPage = (props) => {
   const [bannerEmail, setBannerEmail] = useState('');
   const [formErrors, setFormErrors] = useState('');
   const [validationError, setValidationError] = useState(emailValidationError);
-  const [key, setKey] = useState('');
+  const navigate = useNavigate();
 
   useEffect(() => {
     sendPageEvent('login_and_registration', 'reset');
@@ -102,12 +102,9 @@ const ForgotPasswordPage = (props) => {
         </title>
       </Helmet>
       <div>
-        <Tabs activeKey="" id="controlled-tab" onSelect={(k) => setKey(k)}>
+        <Tabs activeKey="" id="controlled-tab" onSelect={(key) => navigate(updatePathWithQueryParams(key))}>
           <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
         </Tabs>
-        { key && (
-          <Redirect to={updatePathWithQueryParams(key)} />
-        )}
         <div id="main-content" className="main-content">
           <Form id="forget-password-form" name="forget-password-form" className="mw-xs">
             <ForgotPasswordAlert email={bannerEmail} emailError={formErrors} status={status} />

src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -4,25 +4,29 @@ import { Provider } from 'react-redux';
 import { mergeConfig } from '@edx/frontend-platform';
 import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
-import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
-import { MemoryRouter, Router } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
 import { INTERNAL_SERVER_ERROR, LOGIN_PAGE } from '../../data/constants';
 import { PASSWORD_RESET } from '../../reset-password/data/constants';
 import { setForgotPasswordFormData } from '../data/actions';
 import ForgotPasswordPage from '../ForgotPasswordPage';
 
+const mockedNavigator = jest.fn();
+
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendPageEvent: jest.fn(),
   sendTrackEvent: jest.fn(),
 }));
 jest.mock('@edx/frontend-platform/auth');
+jest.mock('react-router-dom', () => ({
+  ...(jest.requireActual('react-router-dom')),
+  useNavigate: () => mockedNavigator,
+}));
 
 const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage);
 const mockStore = configureStore();
-const history = createMemoryHistory();
 
 const initialState = {
   forgotPassword: {
@@ -225,15 +229,11 @@ describe('ForgotPasswordPage', () => {
   });
 
   it('should redirect onto login page', async () => {
-    const forgotPasswordPage = mount(reduxWrapper(
-      <Router history={history}>
-        <IntlForgotPasswordPage {...props} />
-      </Router>,
-    ));
+    const forgotPasswordPage = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     await act(async () => { await forgotPasswordPage.find('nav').find('a').first().simulate('click'); });
 
     forgotPasswordPage.update();
-    expect(history.location.pathname).toEqual(LOGIN_PAGE);
+    expect(mockedNavigator).toHaveBeenCalledWith(LOGIN_PAGE);
   });
 });

src/login/ChangePasswordPrompt.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -7,7 +7,7 @@ import {
 } from '@edx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import messages from './messages';
 import { DEFAULT_REDIRECT_URL, RESET_PAGE } from '../data/constants';
@@ -29,10 +29,14 @@ const ChangePasswordPrompt = ({ variant, redirectUrl }) => {
   // eslint-disable-next-line no-unused-vars
   const [isOpen, open, close] = useToggle(true, handlers);
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (redirectToResetPasswordPage) {
+      navigate(updatePathWithQueryParams(RESET_PAGE));
+    }
+  }, [redirectToResetPasswordPage, navigate]);
 
-  if (redirectToResetPasswordPage) {
-    return <Redirect to={updatePathWithQueryParams(RESET_PAGE)} />;
-  }
   return (
     <ModalDialog
       title="Password security"