fix(deps): update dependency react-router-dom to v7

package.json

@@ -87,7 +87,7 @@
     "react-papaparse": "^4.0.2",
     "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.1.1",
-    "react-router-dom": "^6.14.1",
+    "react-router": "^7.6.2",
     "react-select": "^5.7.3",
     "react-simple-keyboard": "^3.6.27",
     "react-sortable-hoc": "^2.0.0",

src/commons/ReactRouterPrompt.tsx

@@ -1,14 +1,14 @@
 /**
  * Intermediate implementation of deprecated <Prompt /> component
- * from react-router-dom's v5 to v6 upgrade.
+ * from react-router's v5 to v6 upgrade.
  *
- * react-router-dom plans to bring <Prompt /> back in the future. Until then,
+ * react-router plans to bring <Prompt /> back in the future. Until then,
  * we can use this suggested implementation.
  *
  * See: https://github.com/remix-run/react-router/issues/8139#issuecomment-1382428200
  */
 import React from 'react';
-import { useBeforeUnload, useBlocker } from 'react-router-dom';
+import { useBeforeUnload, useBlocker } from 'react-router';
 
 // You can abstract `useBlocker` to use the browser's `window.confirm` dialog to
 // determine whether or not the user should navigate within the current origin.

src/commons/application/Application.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import Messages, {
   MessageType,
   MessageTypeNames,

src/commons/application/ApplicationWrapper.tsx

@@ -3,8 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { RouterProvider } from 'react-router';
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router';
 import { getAcademyRoutes } from 'src/pages/academy/academyRoutes';
 
 import { getFullAcademyRouterConfig, playgroundOnlyRouterConfig } from '../../routes/routerConfig';
@@ -38,9 +37,7 @@ const ApplicationWrapper: React.FC = () => {
       ? playgroundOnlyRouterConfig
       : getFullAcademyRouterConfig({ name, isLoggedIn, courseId, academyRoutes });
 
-    const r = createBrowserRouter(routerConfig, {
-      future: { v7_relativeSplatPath: true }
-    });
+    const r = createBrowserRouter(routerConfig);
     dispatch(updateReactRouter(r));
 
     return r;

src/commons/application/actions/CommonsActions.ts

@@ -1,4 +1,4 @@
-import { Router } from '@remix-run/router';
+import { Router } from 'src/commons/application/types/CommonsTypes';
 import { createActions } from 'src/commons/redux/utils';
 
 const CommonsActions = createActions('commons', {

src/commons/application/types/CommonsTypes.ts

@@ -1,3 +1,4 @@
-import { Router } from '@remix-run/router';
+import type { createBrowserRouter } from 'react-router';
 
+export type Router = ReturnType<typeof createBrowserRouter>;
 export type RouterState = Router | null;

src/commons/assessment/Assessment.tsx

@@ -22,8 +22,7 @@ import classNames from 'classnames';
 import { sortBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { Navigate, useLoaderData, useParams } from 'react-router';
-import { NavLink } from 'react-router-dom';
+import { Navigate, NavLink, useLoaderData, useParams } from 'react-router';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
 import classes from 'src/styles/Academy.module.scss';
 

src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap

@@ -493,6 +493,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/3/0"
                         onClick={[Function]}
                       >
@@ -715,6 +716,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/2/0"
                         onClick={[Function]}
                       >
@@ -1090,6 +1092,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/1/0"
                         onClick={[Function]}
                       >
@@ -1354,6 +1357,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/3/0"
                         onClick={[Function]}
                       >
@@ -1576,6 +1580,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/2/0"
                         onClick={[Function]}
                       >

src/commons/dropdown/DropdownSettings.tsx

@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { EditorBinding, WorkspaceSettingsContext } from '../WorkspaceSettingsContext';
 import LocaleSelector from './LocaleSelector';

src/commons/editingOverviewCard/EditingOverviewCard.tsx

@@ -16,7 +16,7 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import React, { useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import Textarea from 'react-textarea-autosize';
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg';

src/commons/navigationBar/NavigationBar.tsx

@@ -16,7 +16,7 @@ import { IconName, IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { Translation } from 'react-i18next';
-import { Location, NavLink, Route, Routes, useLocation } from 'react-router-dom';
+import { Location, NavLink, Route, Routes, useLocation } from 'react-router';
 import { i18nDefaultLangKeys } from 'src/i18n/i18next';
 import classes from 'src/styles/NavigationBar.module.scss';
 

src/commons/navigationBar/__tests__/NavigationBar.tsx

@@ -1,12 +1,12 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 import { shallowRender } from 'src/commons/utils/TestUtils';
 
 import { Role } from '../../application/ApplicationTypes';
 import NavigationBar from '../NavigationBar';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useLocation: jest.fn()
 }));
 jest.mock('react-redux', () => ({

src/commons/navigationBar/subcomponents/__tests__/SicpNavigationBar.tsx

@@ -1,12 +1,14 @@
-import * as ReactRouter from 'react-router';
 import { shallowRender } from 'src/commons/utils/TestUtils';
 
 import SicpNavigationBar from '../SicpNavigationBar';
 
-test('Navbar renders correctly', () => {
-  jest.spyOn(ReactRouter, 'useParams').mockReturnValue({ section: 'index' });
-  jest.spyOn(ReactRouter, 'useNavigate').mockReturnValue(jest.fn());
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useParams: jest.fn().mockReturnValue({ section: 'index' }),
+  useNavigate: jest.fn().mockReturnValue(jest.fn())
+}));
 
+test('Navbar renders correctly', () => {
   const navbar = <SicpNavigationBar />;
   const tree = shallowRender(navbar);
   expect(tree).toMatchSnapshot();

src/commons/profile/ProfileCard.tsx

@@ -1,7 +1,7 @@
 import { Callout, ProgressBar } from '@blueprintjs/core';
 import { IconName } from '@blueprintjs/icons';
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { AssessmentOverview, AssessmentType } from '../assessment/AssessmentTypes';
 import { assessmentTypeLink } from '../utils/ParamParseHelper';

src/commons/sideContent/content/remoteExecution/SideContentRemoteExecution.tsx

@@ -10,7 +10,7 @@ import {
 import classNames from 'classnames';
 import React, { SetStateAction, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import BrickSvg from 'src/assets/BrickSvg';
 import PortSvg from 'src/assets/PortSvg';
 import { deleteDevice } from 'src/commons/sagas/RequestsSaga';

src/features/sicp/parser/ParseJson.tsx

@@ -1,7 +1,7 @@
 import { Blockquote, Code, H1, H2, H4, Icon, OL, Pre, UL } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Constants from 'src/commons/utils/Constants';
 import SicpExercise from 'src/pages/sicp/subcomponents/SicpExercise';
 import SicpLatex from 'src/pages/sicp/subcomponents/SicpLatex';

src/features/sicp/parser/__tests__/ParseJson.tsx

@@ -1,5 +1,5 @@
 import lzString from 'lz-string';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { renderTreeJson } from 'src/commons/utils/TestUtils';
 import { CodeSnippetProps } from 'src/pages/sicp/subcomponents/CodeSnippet';
 

src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap

@@ -197,6 +197,7 @@ exports[`Parse figures FIGURE with image and scale successful 1`] = `
 >
   <a
     className="sicp-anchor-link"
+    data-discover="true"
     href="/id"
     onClick={[Function]}
     style={
@@ -247,6 +248,7 @@ exports[`Parse figures FIGURE with image successful 1`] = `
 >
   <a
     className="sicp-anchor-link"
+    data-discover="true"
     href="/id"
     onClick={[Function]}
     style={
@@ -297,6 +299,7 @@ exports[`Parse figures FIGURE with snippet successful 1`] = `
 >
   <a
     className="sicp-anchor-link"
+    data-discover="true"
     href="/id"
     onClick={[Function]}
     style={
@@ -345,6 +348,7 @@ exports[`Parse figures FIGURE with table successful 1`] = `
 >
   <a
     className="sicp-anchor-link"
+    data-discover="true"
     href="/id"
     onClick={[Function]}
     style={
@@ -485,6 +489,7 @@ exports[`Parse latex LATEX inline successful 1`] = `
 exports[`Parse links FOOTNOTE_REF  successful 1`] = `
 <sup>
   <a
+    data-discover="true"
     href="/bad-link"
     onClick={[Function]}
   >
@@ -503,6 +508,7 @@ exports[`Parse links LINK  successful 1`] = `
 
 exports[`Parse links REF  successful 1`] = `
 <a
+  data-discover="true"
   href="/bad-link"
   onClick={[Function]}
 >

src/pages/academy/Academy.tsx

@@ -41,7 +41,8 @@ const CourseSelectingAcademy: React.FC = () => {
   React.useEffect(() => {
     // Regex to handle case where routeCourseIdStr is not a number
     if (!routeCourseIdStr?.match(numberRegExp)) {
-      return navigate('/');
+      navigate('/');
+      return;
     }
 
     if (routeCourseId !== undefined && !Number.isNaN(routeCourseId) && courseId !== routeCourseId) {

src/pages/academy/grading/subcomponents/GradingActions.tsx

@@ -2,7 +2,7 @@ import { Button, Icon, Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { ProgressStatus, ProgressStatuses } from 'src/commons/assessment/AssessmentTypes';
 import GradingFlex from 'src/commons/grading/GradingFlex';

src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { ProgressStatuses } from 'src/commons/assessment/AssessmentTypes';
 import GradingFlex from 'src/commons/grading/GradingFlex';
 import GradingText from 'src/commons/grading/GradingText';

src/pages/academy/teamFormation/subcomponents/TeamFormationActions.tsx

@@ -3,7 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { Flex, Icon } from '@tremor/react';
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 import { useSession } from 'src/commons/utils/Hooks';

src/pages/academy/teamFormation/subcomponents/TeamFormationForm.tsx

@@ -3,8 +3,7 @@ import '@tremor/react/dist/esm/tremor.css';
 import { Button } from '@blueprintjs/core';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router';
-import { Form, useParams } from 'react-router-dom';
+import { Form, useNavigate, useParams } from 'react-router';
 import Select, { ActionMeta, MultiValue } from 'react-select';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { User } from 'src/commons/application/types/SessionTypes';

src/pages/academy/teamFormation/subcomponents/TeamFormationImport.tsx

@@ -4,8 +4,7 @@ import { Button } from '@blueprintjs/core';
 import { useState } from 'react';
 import { FileUploader } from 'react-drag-drop-files';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router';
-import { Form } from 'react-router-dom';
+import { Form, useNavigate } from 'react-router';
 import Select from 'react-select';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { AssessmentOverview } from 'src/commons/assessment/AssessmentTypes';

src/pages/githubCallback/__tests__/GitHubCallback.tsx

@@ -1,8 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { MockedFunction } from 'jest-mock';
 import { act } from 'react';
-import { Route, Routes } from 'react-router';
-import { StaticRouter } from 'react-router-dom/server';
+import { Route, Routes, StaticRouter } from 'react-router';
 
 import Constants from '../../../commons/utils/Constants';
 import { exchangeAccessCode } from '../../../features/github/GitHubUtils';