feat: upgrade react router to v6 (#1001)

* feat: upgrade react router to v6 * fix: test cases affected due to router upgrade * chore: remove history usage * fix: navigation * fix: settings tab navigation * chore: improve coverage * chore: remove unnecessary history usage * fix: navigation issue of learner management tab
openedx · Jan 17, 2024 · 4b56103 · 4b56103
1 parent 42a493c
commit 4b56103
Show file tree

Hide file tree

Showing 103 changed files with 22,811 additions and 13,807 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,11 +31,11 @@
   "dependencies": {
     "@babel/plugin-transform-runtime": "7.12.1",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-enterprise-catalog-search": "4.5.0",
-    "@edx/frontend-enterprise-hotjar": "1.4.0",
-    "@edx/frontend-enterprise-logistration": "3.4.0",
-    "@edx/frontend-enterprise-utils": "3.4.0",
-    "@edx/frontend-platform": "4.4.0",
+    "@edx/frontend-enterprise-catalog-search": "5.0.0",
+    "@edx/frontend-enterprise-hotjar": "2.0.0",
+    "@edx/frontend-enterprise-logistration": "4.0.0",
+    "@edx/frontend-enterprise-utils": "4.0.0",
+    "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "20.46.3",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-query-devtools": "4.36.1",
@@ -62,8 +62,8 @@
     "react-instantsearch-dom": "6.8.3",
     "react-markdown": "6.0.0",
     "react-redux": "7.2.9",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "6.21.1",
+    "react-router-dom": "6.21.1",
     "redux": "4.0.4",
     "redux-devtools-extension": "2.13.8",
     "redux-form": "8.3.8",

diff --git a/src/components/Admin/Admin.test.jsx b/src/components/Admin/Admin.test.jsx
@@ -60,9 +60,8 @@ const AdminWrapper = props => (
               course_start: Date.now(),
             },
           ]}
-          match={{
-            params: {},
-            url: '/',
+          location={{
+            pathname: '/',
           }}
           {...props}
           fetchDashboardInsights={() => {}}
@@ -457,11 +456,9 @@ describe('<Admin />', () => {
                 },
               },
             }}
-            match={{
-              url: '/',
-              params: {
-                actionSlug: key !== 'enrollments' ? key : undefined,
-              },
+            actionSlug={key}
+            location={{
+              pathname: '/',
             }}
           />
         ));

diff --git a/src/components/Admin/AdminSearchForm.jsx b/src/components/Admin/AdminSearchForm.jsx
@@ -9,6 +9,7 @@ import { Info } from '@edx/paragon/icons';
 import SearchBar from '../SearchBar';
 import { updateUrl } from '../../utils';
 import IconWithTooltip from '../IconWithTooltip';
+import { withLocation, withNavigate } from '../../hoc';
 
 class AdminSearchForm extends React.Component {
   componentDidUpdate(prevProps) {
@@ -32,14 +33,15 @@ class AdminSearchForm extends React.Component {
   }
 
   onCourseSelect(event) {
+    const { navigate, location } = this.props;
     const updateParams = {
       search_course: event.target.value,
       page: 1,
     };
     if (event.target.value === '') {
       updateParams.search_start_date = '';
     }
-    updateUrl(updateParams);
+    updateUrl(navigate, location.pathname, updateParams);
   }
 
   render() {
@@ -89,7 +91,7 @@ class AdminSearchForm extends React.Component {
                   as="select"
                   className="w-100"
                   value={searchDateQuery}
-                  onChange={event => updateUrl({
+                  onChange={event => updateUrl(this.props.navigate, this.props.location.pathname, {
                     search_start_date: event.target.value,
                     page: 1,
                   })}
@@ -111,11 +113,11 @@ class AdminSearchForm extends React.Component {
               <Form.Label id="search-email-label" className="mb-2">Filter by email</Form.Label>
               <SearchBar
                 placeholder="Search by email..."
-                onSearch={query => updateUrl({
+                onSearch={query => updateUrl(this.props.navigate, this.props.location.pathname, {
                   search: query,
                   page: 1,
                 })}
-                onClear={() => updateUrl({ search: undefined })}
+                onClear={() => updateUrl(this.props.navigate, this.props.location.pathname, { search: undefined })}
                 value={searchQuery}
                 aria-labelledby="search-email-label"
                 className="py-0"
@@ -141,6 +143,10 @@ AdminSearchForm.propTypes = {
     searchDateQuery: PropTypes.string,
   }).isRequired,
   tableData: PropTypes.arrayOf(PropTypes.shape({})),
+  navigate: PropTypes.func,
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+  }),
 };
 
-export default AdminSearchForm;
+export default withLocation(withNavigate(AdminSearchForm));
diff --git a/src/components/Admin/AdminSearchForm.test.jsx b/src/components/Admin/AdminSearchForm.test.jsx
@@ -1,10 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { FormControl } from '@edx/paragon';
 
 import AdminSearchForm from './AdminSearchForm';
 import SearchBar from '../SearchBar';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn(),
+  useNavigate: jest.fn(),
+}));
+
 const DEFAULT_PROPS = {
   searchEnrollmentsList: () => {},
   searchParams: {},
@@ -13,7 +19,7 @@ const DEFAULT_PROPS = {
 
 describe('<AdminSearchForm />', () => {
   it('displays three filters', () => {
-    const wrapper = shallow(<AdminSearchForm {...DEFAULT_PROPS} />);
+    const wrapper = mount(<AdminSearchForm {...DEFAULT_PROPS} />);
     expect(wrapper.find(FormControl)).toHaveLength(2);
     expect(wrapper.find(SearchBar)).toHaveLength(1);
     expect(wrapper.find(FormControl).at(1).text()).toContain('Choose a course');
@@ -26,7 +32,7 @@ describe('<AdminSearchForm />', () => {
     it(`calls searchEnrollmentsList when ${Object.keys(searchParams)[0]} changes`, () => {
       const spy = jest.fn();
       const props = { ...DEFAULT_PROPS, searchEnrollmentsList: spy };
-      const wrapper = shallow(<AdminSearchForm {...props} />);
+      const wrapper = mount(<AdminSearchForm {...props} />);
       wrapper.setProps({ searchParams });
       expect(spy).toHaveBeenCalledTimes(1);
     });

diff --git a/src/components/Admin/EmbeddedSubscription.jsx b/src/components/Admin/EmbeddedSubscription.jsx
@@ -67,7 +67,7 @@ const EmbeddedSubscription = () => {
                 <span className="ml-4.5"> Learn more helpful tips in </span>
                 <span>
                   <Link
-                    to={{ pathname: bestPracticesUrl }}
+                    to={bestPracticesUrl}
                     target="_blank"
                   >
                     Best Practices

diff --git a/src/components/Admin/EmbeddedSubscription.test.jsx b/src/components/Admin/EmbeddedSubscription.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { SubsidyRequestsContext } from '../subsidy-requests';
@@ -51,13 +50,11 @@ const initialSubsidyRequestContextValue = {
 const EmbeddedSubscriptionWrapper = () => (
   <IntlProvider locale="en">
     <AppContextProvider>
-      <MemoryRouter initialEntries={['/test-enterprise/admin/subscriptions/1234']}>
-        <SubsidyRequestsContext.Provider value={initialSubsidyRequestContextValue}>
-          <MockSubscriptionContext subscriptionPlan={subscriptionPlan}>
-            <EmbeddedSubscription />
-          </MockSubscriptionContext>
-        </SubsidyRequestsContext.Provider>
-      </MemoryRouter>
+      <SubsidyRequestsContext.Provider value={initialSubsidyRequestContextValue}>
+        <MockSubscriptionContext subscriptionPlan={subscriptionPlan}>
+          <EmbeddedSubscription />
+        </MockSubscriptionContext>
+      </SubsidyRequestsContext.Provider>
     </AppContextProvider>
   </IntlProvider>
 );

diff --git a/src/components/Admin/SubscriptionDetailPage.jsx b/src/components/Admin/SubscriptionDetailPage.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
+import { useParams } from 'react-router-dom';
 import SubscriptionExpirationModals from '../subscriptions/expiration/SubscriptionExpirationModals';
 import SubscriptionDetails from './SubscriptionDetails';
 import LicenseAllocationDetails from './licenses/LicenseAllocationDetails';
@@ -11,8 +12,9 @@ import SubscriptionDetailsSkeleton from '../subscriptions/SubscriptionDetailsSke
 import { LPR_SUBSCRIPTION_PAGE_SIZE } from '../subscriptions/data/constants';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const SubscriptionDetailPage = ({ enterpriseSlug, match }) => {
-  const [subscription, loadingSubscription] = useSubscriptionFromParams({ match });
+export const SubscriptionDetailPage = ({ enterpriseSlug }) => {
+  const { subscriptionUUID } = useParams();
+  const [subscription, loadingSubscription] = useSubscriptionFromParams({ subscriptionUUID });
 
   if (!subscription && !loadingSubscription) {
     return (
@@ -40,11 +42,6 @@ export const SubscriptionDetailPage = ({ enterpriseSlug, match }) => {
 };
 
 SubscriptionDetailPage.propTypes = {
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      subscriptionUUID: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
 };
 

diff --git a/src/components/Admin/SubscriptionDetailPage.test.jsx b/src/components/Admin/SubscriptionDetailPage.test.jsx
@@ -2,7 +2,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { SubscriptionDetailPage } from './SubscriptionDetailPage';
@@ -13,6 +12,13 @@ import {
   MockSubscriptionContext,
 } from '../subscriptions/tests/TestUtilities';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    subscriptionUUID: '28d4dcdc-c026-4c02-a263-82dd9c0d8b43',
+  }),
+}));
+
 const subscriptionPlan = generateSubscriptionPlan({
   licenses: {
     allocated: 1,
@@ -29,15 +35,6 @@ const defaultAppContext = {
   enterpriseConfig: {
     slug: 'test-enterprise',
   },
-  match: {
-    subscription: {
-      uuid: '1234',
-    },
-    params: {
-      subscriptionUUID: '28d4dcdc-c026-4c02-a263-82dd9c0d8b43',
-    },
-    loadingSubscription: false,
-  },
 };
 
 const initialSubsidyRequestContextValue = {
@@ -55,31 +52,20 @@ const AppContextProvider = ({ children }) => (
 const SubscriptionDetailPageWrapper = ({ context = defaultAppContext }) => (
   <IntlProvider locale="en">
     <AppContextProvider>
-      <MemoryRouter initialEntries={['/test-enterprise/admin/subscriptions/1234']}>
-        <SubsidyRequestsContext.Provider value={initialSubsidyRequestContextValue}>
-          <MockSubscriptionContext subscriptionPlan={subscriptionPlan}>
-            <SubscriptionDetailPage
-              enterpriseSlug={context.enterpriseSlug}
-              match={context.match}
-            />
-          </MockSubscriptionContext>
-        </SubsidyRequestsContext.Provider>
-      </MemoryRouter>
+      <SubsidyRequestsContext.Provider value={initialSubsidyRequestContextValue}>
+        <MockSubscriptionContext subscriptionPlan={subscriptionPlan}>
+          <SubscriptionDetailPage
+            enterpriseSlug={context.enterpriseSlug}
+            match={context.match}
+          />
+        </MockSubscriptionContext>
+      </SubsidyRequestsContext.Provider>
     </AppContextProvider>
   </IntlProvider>
 );
 SubscriptionDetailPageWrapper.propTypes = {
   context: PropTypes.shape({
     enterpriseSlug: PropTypes.string,
-    match: PropTypes.shape({
-      subscription: PropTypes.shape({
-        uuid: PropTypes.string,
-      }),
-      params: PropTypes.shape({
-        subscriptionUUID: PropTypes.string,
-      }),
-      loadingSubscription: PropTypes.bool,
-    }),
   }).isRequired,
 };