Migrate from react-router-dom@6 to react-router@7

apps/SageAccountWeb/package.json

@@ -23,7 +23,7 @@
     "react-cookie": "4.0.0",
     "react-dom": "18.2.0",
     "react-easy-crop": "^5.0.7",
-    "react-router-dom": "^6.28.1",
+    "react-router": "^7.1.1",
     "sass": "^1.71.1",
     "synapse-react-client": "workspace:*",
     "universal-cookie": "^4.0.4"

apps/SageAccountWeb/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router'
 import {
   CookiesNotification,
   processRedirectURLInOneSage,

apps/SageAccountWeb/src/AppWrapper.tsx

@@ -1,14 +1,14 @@
-import { PropsWithChildren } from 'react'
-import { RESET_2FA_ROUTE, RESET_2FA_SIGNED_TOKEN_PARAM } from './Constants'
 import { StyledEngineProvider } from '@mui/material/styles'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { PropsWithChildren } from 'react'
+import { useNavigate } from 'react-router'
 import {
   ApplicationSessionManager,
   SynapseToastContainer,
 } from 'synapse-react-client'
-import { SourceAppProvider } from './components/useSourceApp'
 import AppInitializer from './AppInitializer'
-import { useNavigate } from 'react-router-dom'
+import { SourceAppProvider } from './components/useSourceApp'
+import { RESET_2FA_ROUTE, RESET_2FA_SIGNED_TOKEN_PARAM } from './Constants'
 
 const queryClient = new QueryClient({
   defaultOptions: {

apps/SageAccountWeb/src/LoginPage.tsx

@@ -1,14 +1,14 @@
 import { Box, Typography } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import {
   LoginMethod,
+  restoreLastPlace,
   StandaloneLoginForm,
+  storeLastPlace,
   SynapseConstants,
   SystemUseNotification,
-  storeLastPlace,
-  restoreLastPlace,
-  useLastLoginInfoState,
   useApplicationSessionContext,
+  useLastLoginInfoState,
 } from 'synapse-react-client'
 import { backButtonSx } from './components/BackButton.js'
 import { SourceAppDescription, SourceAppLogo } from './components/SourceApp.js'

apps/SageAccountWeb/src/components/AccountCreatedPage.tsx

@@ -1,15 +1,15 @@
-import { SourceAppLogo } from './SourceApp'
 import { Button, Grid, Link, Typography } from '@mui/material'
-import { AppContextConsumer } from '../AppContext'
-import { Link as RouterLink } from 'react-router-dom'
-import { LeftRightPanel } from './LeftRightPanel'
-import useMembershipInvitationTokenHandler from '../hooks/useMembershipInvitationTokenHandler'
-import { useSourceApp } from './useSourceApp'
+import { Link as RouterLink } from 'react-router'
 import {
-  SynapseHookUtils,
   processRedirectURLInOneSage,
+  SynapseHookUtils,
 } from 'synapse-react-client'
+import { AppContextConsumer } from '../AppContext'
+import useMembershipInvitationTokenHandler from '../hooks/useMembershipInvitationTokenHandler'
 import { sourceAppConfigTableID } from '../resources'
+import { LeftRightPanel } from './LeftRightPanel'
+import { SourceAppLogo } from './SourceApp'
+import { useSourceApp } from './useSourceApp'
 
 export type AccountCreatedPageProps = {}
 

apps/SageAccountWeb/src/components/AccountSettings.tsx

@@ -20,7 +20,7 @@ import {
 } from '@sage-bionetworks/synapse-types'
 import { RefObject, useEffect, useRef, useState } from 'react'
 import { Form } from 'react-bootstrap'
-import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom'
+import { Link as RouterLink, useLocation, useNavigate } from 'react-router'
 import {
   ChangePassword,
   CookiePreferencesDialog,

apps/SageAccountWeb/src/components/BackButton.tsx

@@ -1,10 +1,7 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import { IconButton, SxProps } from '@mui/material'
 import { MouseEventHandler } from 'react'
-import {
-  Link as RouterLink,
-  LinkProps as RouterLinkProps,
-} from 'react-router-dom'
+import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router'
 
 type StyleProps = { sx?: SxProps }
 type BackLinkProps = { to: RouterLinkProps['to'] }

apps/SageAccountWeb/src/components/CertificationQuiz.tsx

@@ -1,7 +1,7 @@
-import { Link as RouterLink } from 'react-router-dom'
-import { MuiContainer, CertificationQuiz as Quiz } from 'synapse-react-client'
-import ReturnArrow from '../assets/ReturnArrow.svg?url'
 import { Link, Paper } from '@mui/material'
+import { Link as RouterLink } from 'react-router'
+import { CertificationQuiz as Quiz, MuiContainer } from 'synapse-react-client'
+import ReturnArrow from '../assets/ReturnArrow.svg?url'
 
 export const CertificationQuiz = () => {
   return (

apps/SageAccountWeb/src/components/CurrentAffiliationPage.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react'
-import { SourceAppLogo } from './SourceApp'
 import { TextField, Typography } from '@mui/material'
-import { LeftRightPanel } from './LeftRightPanel'
-import { StyledFormControl } from './StyledComponents'
+import { useEffect, useState } from 'react'
+import { Navigate } from 'react-router'
 import {
   displayToast,
   SynapseClient,
   SynapseQueries,
   useSynapseContext,
 } from 'synapse-react-client'
-import { Navigate } from 'react-router-dom'
+import { LeftRightPanel } from './LeftRightPanel'
 import { ContinueButton } from './ProfileValidation/ContinueButton'
+import { SourceAppLogo } from './SourceApp'
+import { StyledFormControl } from './StyledComponents'
 import { useSourceApp } from './useSourceApp'
 
 export const CurrentAffiliationPage = () => {

apps/SageAccountWeb/src/components/JoinTeamPage.tsx

@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react'
+import { CelebrationOutlined, Groups2Outlined } from '@mui/icons-material'
 import { Box, Button, Typography, useTheme } from '@mui/material'
-import { useAppContext } from '../AppContext'
-import {
-  displayToast,
-  SynapseClient,
-  UserOrTeamBadge,
-} from 'synapse-react-client'
-import { Navigate } from 'react-router-dom'
 import {
   isJoinTeamSignedToken,
   isMembershipInvtnSignedToken,
   JoinTeamSignedToken,
   MembershipInvitation,
   ResponseMessage,
 } from '@sage-bionetworks/synapse-types'
-import { CelebrationOutlined, Groups2Outlined } from '@mui/icons-material'
+import { useEffect, useState } from 'react'
+import { Navigate } from 'react-router'
+import {
+  displayToast,
+  SynapseClient,
+  UserOrTeamBadge,
+} from 'synapse-react-client'
+import { useAppContext } from '../AppContext'
 import { StyledOuterContainer } from './StyledComponents'
 
 export function JoinTeamPage() {

apps/SageAccountWeb/src/components/LogoutPage.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { SynapseClient } from 'synapse-react-client'
 
 export default function LogoutPage() {

apps/SageAccountWeb/src/components/ProfileValidation/ProfileValidation.tsx

@@ -1,22 +1,5 @@
-import { SyntheticEvent, useEffect, useState } from 'react'
-import { Navigate } from 'react-router-dom'
-import {
-  displayToast,
-  SynapseClient,
-  SynapseConstants,
-  SynapseContextUtils,
-} from 'synapse-react-client'
-import CloseIcon from '@mui/icons-material/Close'
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
-import {
-  UserBundle,
-  UserProfile,
-  VerificationSubmission,
-} from '@sage-bionetworks/synapse-types'
-import { getSearchParam } from '../../URLUtils'
-import { ProfileFieldsEditor } from './ProfileFieldsEditor'
-import { VerifyIdentify } from './VerifyIdentify'
-import { StyledInnerContainer, StyledOuterContainer } from '../StyledComponents'
+import CloseIcon from '@mui/icons-material/Close'
 import {
   Box,
   Button,
@@ -26,14 +9,31 @@ import {
   Typography,
   useTheme,
 } from '@mui/material'
+import {
+  UserBundle,
+  UserProfile,
+  VerificationSubmission,
+} from '@sage-bionetworks/synapse-types'
+import { SyntheticEvent, useEffect, useState } from 'react'
+import { Navigate } from 'react-router'
+import {
+  displayToast,
+  SynapseClient,
+  SynapseConstants,
+  SynapseContextUtils,
+} from 'synapse-react-client'
+import { getSearchParam } from '../../URLUtils'
+import { BackButton } from '../BackButton'
 import { SourceAppLogo } from '../SourceApp'
-import Attestation from './Attestation'
-import ThankYou from './ThankYou'
-import TermsAndConditionsWrapped from './TermsAndConditionsWrapped'
-import { ReturnToAppButton } from './ReturnToAppButton'
+import { StyledInnerContainer, StyledOuterContainer } from '../StyledComponents'
 import { TermsOfUseRightPanelText } from '../TermsOfUseRightPanelText'
-import { BackButton } from '../BackButton'
 import { useSourceApp } from '../useSourceApp'
+import Attestation from './Attestation'
+import { ProfileFieldsEditor } from './ProfileFieldsEditor'
+import { ReturnToAppButton } from './ReturnToAppButton'
+import TermsAndConditionsWrapped from './TermsAndConditionsWrapped'
+import ThankYou from './ThankYou'
+import { VerifyIdentify } from './VerifyIdentify'
 
 const IDENTITY_ATTESTATION_TEMPLATE_DOCUMENT_LINK =
   'https://help.synapse.org/__attachments/2007072795/signing_official.doc?inst-v=77bba77d-449d-4402-a8bb-6895820b38a9'

apps/SageAccountWeb/src/components/ProfileValidation/ReturnToAppButton.tsx

@@ -1,3 +1,4 @@
+import CloseIcon from '@mui/icons-material/Close'
 import {
   Box,
   Button,
@@ -10,9 +11,8 @@ import {
   Typography,
   useTheme,
 } from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
 import { cloneElement, PropsWithChildren, ReactElement, useState } from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router'
 
 export function ReturnToAppButton({ children }: PropsWithChildren) {
   const theme = useTheme()

apps/SageAccountWeb/src/components/RegisterAccount1.tsx

@@ -1,4 +1,3 @@
-import { SyntheticEvent, useEffect, useMemo, useState } from 'react'
 import {
   Box,
   Button,
@@ -7,6 +6,12 @@ import {
   Typography,
   useTheme,
 } from '@mui/material'
+import {
+  AliasType,
+  isMembershipInvtnSignedToken,
+} from '@sage-bionetworks/synapse-types'
+import { SyntheticEvent, useEffect, useMemo, useState } from 'react'
+import { Link as RouterLink, useLocation } from 'react-router'
 import {
   displayToast,
   IconSvg,
@@ -18,16 +23,11 @@ import {
   useLastLoginInfo,
   useSynapseContext,
 } from 'synapse-react-client'
-import {
-  AliasType,
-  isMembershipInvtnSignedToken,
-} from '@sage-bionetworks/synapse-types'
-import { SourceAppLogo } from './SourceApp'
-import { Link as RouterLink, useLocation } from 'react-router-dom'
-import { EmailConfirmationPage } from './EmailConfirmationPage'
-import GoogleLogo from '../assets/g-logo.png'
 import { useAppContext } from '../AppContext'
+import GoogleLogo from '../assets/g-logo.png'
 import { BackButton } from './BackButton'
+import { EmailConfirmationPage } from './EmailConfirmationPage'
+import { SourceAppLogo } from './SourceApp'
 import {
   StyledFormControl,
   StyledInnerContainer,

apps/SageAccountWeb/src/components/ResetPassword.tsx

@@ -1,13 +1,13 @@
 import { Box, Button, SxProps, TextField, Typography } from '@mui/material'
+import { PasswordResetSignedToken } from '@sage-bionetworks/synapse-types'
 import { FormEvent, useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import {
   ChangePasswordWithToken,
   displayToast,
   SynapseClientError,
   SynapseQueries,
 } from 'synapse-react-client'
-import { PasswordResetSignedToken } from '@sage-bionetworks/synapse-types'
 import { getSearchParam, hexDecodeAndDeserialize } from '../URLUtils'
 import { BackButton } from './BackButton'
 import { LeftRightPanel } from './LeftRightPanel'

apps/SageAccountWeb/src/components/SageResourcesPage.tsx

@@ -2,20 +2,20 @@ import {
   Box,
   Button,
   Grid,
+  Link,
   Paper,
   Typography,
   useTheme,
-  Link,
 } from '@mui/material'
+import { Link as RouterLink } from 'react-router'
 import { ShowMore, SynapseHookUtils } from 'synapse-react-client'
+import { sourceAppConfigTableID } from '../resources'
 import { StyledOuterContainer } from './StyledComponents'
-import { Link as RouterLink } from 'react-router-dom'
 import {
-  SYNAPSE_SOURCE_APP_ID,
   SourceAppProvider,
+  SYNAPSE_SOURCE_APP_ID,
   useSourceApp,
 } from './useSourceApp'
-import { sourceAppConfigTableID } from '../resources'
 
 export function SageResourcesPageInternal() {
   const theme = useTheme()

apps/SageAccountWeb/src/components/SignUpdatedTermsOfUsePage.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mui/material'
 import { TermsOfServiceState } from '@sage-bionetworks/synapse-types'
 import { SyntheticEvent, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import {
   displayToast,
   GovernanceMarkdownGithub,

apps/SageAccountWeb/src/components/TwoFactorAuth/ResetTwoFactorAuth.tsx

@@ -1,6 +1,8 @@
 import { Alert, Box, Button, Typography } from '@mui/material'
+import { TwoFactorAuthErrorResponse } from '@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse'
+import { TwoFactorAuthResetToken } from '@sage-bionetworks/synapse-types'
 import { useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import {
   displayToast,
   PasswordField,
@@ -9,13 +11,11 @@ import {
   useApplicationSessionContext,
   useQuerySearchParam,
 } from 'synapse-react-client'
-import { TwoFactorAuthResetToken } from '@sage-bionetworks/synapse-types'
-import { TwoFactorAuthErrorResponse } from '@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse'
+import { RESET_2FA_SIGNED_TOKEN_PARAM } from '../../Constants'
 import { hexDecodeAndDeserialize } from '../../URLUtils'
 import { BackButton } from '../BackButton'
 import { LeftRightPanel } from '../LeftRightPanel'
 import { SourceAppLogo } from '../SourceApp'
-import { RESET_2FA_SIGNED_TOKEN_PARAM } from '../../Constants'
 
 export function ResetTwoFactorAuth() {
   const navigate = useNavigate()

apps/SageAccountWeb/src/components/TwoFactorAuth/TwoFactorAuthBackupCodesPage.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router'
 import { TwoFactorBackupCodes } from 'synapse-react-client'
 
 /**

apps/SageAccountWeb/src/components/TwoFactorAuth/TwoFactorAuthEnrollmentPage.tsx

@@ -1,5 +1,5 @@
+import { useNavigate } from 'react-router'
 import { TwoFactorEnrollmentForm } from 'synapse-react-client'
-import { useNavigate } from 'react-router-dom'
 
 export default function TwoFactorAuthEnrollmentPage() {
   const navigate = useNavigate()

apps/SageAccountWeb/src/hooks/useMaybeRedirectToSignTermsOfService.ts

@@ -1,6 +1,6 @@
 import { TermsOfServiceState } from '@sage-bionetworks/synapse-types'
 import { useEffect, useState } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router'
 import {
   storeLastPlace,
   useApplicationSessionContext,