TRT-2866: Upgrade react-router-dom to v8 in Sippy frontend

sippy-ng/README.md

@@ -52,16 +52,16 @@ followed by "Format Document" to quickly fix them.
 
 Imports must be sorted alphabetically. If using a multi-line import (also sorted alphabetically) then the first entry in that import determines the sort order relative to the other import statements.
 
-```
-import { Link } from 'react-router-dom'
+```javascript
+import { Link } from 'react-router'
 import { relativeTime, safeEncodeURIComponent } from '../helpers'
 ```
 
 vs.
 
-```
+```javascript
 import { getReportStartDate, relativeTime, safeEncodeURIComponent } from '../helpers'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 ```
 
 Helpers for each of these can be configured for on save actions or 'sort-imports'

sippy-ng/package.json

@@ -41,7 +41,7 @@
     "react-joyride": "^3.2.0",
     "react-markdown": "^8.0.7",
     "react-plotly.js": "^2.6.0",
-    "react-router-dom": "^7.18.1",
+    "react-router": "^7.18.2",
     "remark-gfm": "^3.0.1",
     "timelines-chart": "^2.12.1",
     "universal-cookie": "^7.2.1",

sippy-ng/src/App.jsx

@@ -27,10 +27,10 @@ import {
   useLocation,
   useNavigate,
   useParams,
-} from 'react-router-dom'
+} from 'react-router'
 import { parse, stringify } from 'query-string'
 import { QueryParamProvider } from 'use-query-params'
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'
+import { ReactRouterAdapter } from './adapters/ReactRouterAdapter'
 import { TestAnalysis } from './tests/TestAnalysis'
 import { useCookies } from 'react-cookie'
 import { useDrawer } from './chat/store/useChatStore'
@@ -562,7 +562,7 @@ function App(_props) {
                 <AccessibilityModeProvider>
                   <CssBaseline />
                   <QueryParamProvider
-                    adapter={ReactRouter6Adapter}
+                    adapter={ReactRouterAdapter}
                     options={{
                       enableBatching: true,
                       searchStringToObject: parse,

sippy-ng/src/adapters/ReactRouterAdapter.jsx

@@ -0,0 +1,38 @@
+// Copy of use-query-params' ReactRouter6Adapter, importing from 'react-router'
+// instead of 'react-router-dom' (which this project no longer depends on).
+// The UNSAFE_ prefixed contexts are React Router's convention for internal APIs
+// intentionally exported for library interop, not a security concern.
+import {
+  UNSAFE_DataRouterContext,
+  UNSAFE_NavigationContext,
+  useLocation,
+  useNavigate,
+} from 'react-router'
+import { useContext } from 'react'
+
+export const ReactRouterAdapter = ({ children }) => {
+  const { navigator } = useContext(UNSAFE_NavigationContext)
+  const navigate = useNavigate()
+  const router = useContext(UNSAFE_DataRouterContext)?.router
+  const location = useLocation()
+
+  const adapter = {
+    replace(location) {
+      navigate(location.search || '?', {
+        replace: true,
+        state: location.state,
+      })
+    },
+    push(location) {
+      navigate(location.search || '?', {
+        replace: false,
+        state: location.state,
+      })
+    },
+    get location() {
+      return router?.state?.location ?? navigator?.location ?? location
+    },
+  }
+
+  return children(adapter)
+}

sippy-ng/src/adapters/ReactRouterAdapter.test.jsx

@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom'
+import { act, render, screen } from '@testing-library/react'
+import { BrowserRouter } from 'react-router'
+import {
+  QueryParamProvider,
+  StringParam,
+  useQueryParam,
+} from 'use-query-params'
+import { ReactRouterAdapter } from './ReactRouterAdapter'
+import React from 'react'
+
+function TestComponent() {
+  const [value, setValue] = useQueryParam('foo', StringParam)
+  return (
+    <div>
+      <span data-testid="value">{value ?? ''}</span>
+      <button onClick={() => setValue('bar')}>Set</button>
+    </div>
+  )
+}
+
+function renderWithRouter(ui, { route = '/' } = {}) {
+  window.history.pushState({}, '', route)
+  return render(
+    <BrowserRouter>
+      <QueryParamProvider adapter={ReactRouterAdapter}>{ui}</QueryParamProvider>
+    </BrowserRouter>
+  )
+}
+
+describe('ReactRouterAdapter', () => {
+  it('renders children via the adapter', () => {
+    renderWithRouter(<TestComponent />)
+    expect(screen.getByTestId('value')).toBeInTheDocument()
+  })
+
+  it('reads query params from the URL', () => {
+    renderWithRouter(<TestComponent />, { route: '/?foo=hello' })
+    expect(screen.getByTestId('value')).toHaveTextContent('hello')
+  })
+
+  it('updates query params on push', async () => {
+    renderWithRouter(<TestComponent />)
+    await act(async () => {
+      screen.getByText('Set').click()
+    })
+    expect(window.location.search).toContain('foo=bar')
+    expect(screen.getByTestId('value')).toHaveTextContent('bar')
+  })
+})

sippy-ng/src/build_clusters/BuildClusterTable.jsx

@@ -2,7 +2,7 @@ import { BUILD_CLUSTER_THRESHOLDS } from '../constants'
 import { CircularProgress, Tooltip } from '@mui/material'
 import { DataGrid } from '@mui/x-data-grid'
 import { generateClasses } from '../datagrid/utils'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { makeStyles } from '@mui/styles'
 import { NumberParam, StringParam, useQueryParam } from 'use-query-params'
 import { safeEncodeURIComponent, SafeJSONParam } from '../helpers'

sippy-ng/src/chat/ChatMessage.jsx

@@ -8,7 +8,7 @@ import {
   SmartToy as SmartToyIcon,
 } from '@mui/icons-material'
 import { formatChatTimestamp, humanize, MESSAGE_TYPES } from './chatUtils'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { makeStyles } from '@mui/styles'
 import { useModels } from './store/useChatStore'
 import MessageChart from './MessageChart'

sippy-ng/src/component_readiness/CompCapRow.jsx

@@ -2,7 +2,7 @@ import './ComponentReadiness.css'
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { CompReadyVarsContext } from './CompReadyVars'
 import { Fragment, useContext } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { sortQueryParams } from './CompReadyUtils'
 import { Tooltip, Typography } from '@mui/material'
 import CompReadyCapsCell from './CompReadyCapsCell'

sippy-ng/src/component_readiness/CompReadyCapCell.jsx

@@ -1,7 +1,7 @@
 import './ComponentReadiness.css'
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { CompReadyVarsContext } from './CompReadyVars'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { safeEncodeURIComponent } from '../helpers'
 import { sortQueryParams } from './CompReadyUtils'
 import { Tooltip } from '@mui/material'

sippy-ng/src/component_readiness/CompReadyCapsCell.jsx

@@ -1,7 +1,7 @@
 import './ComponentReadiness.css'
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { CompReadyVarsContext } from './CompReadyVars'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { safeEncodeURIComponent } from '../helpers'
 import { sortQueryParams } from './CompReadyUtils'
 import { Tooltip } from '@mui/material'

sippy-ng/src/component_readiness/CompReadyCell.jsx

@@ -1,7 +1,7 @@
 import './ComponentReadiness.css'
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { CompReadyVarsContext } from './CompReadyVars'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { safeEncodeURIComponent } from '../helpers'
 import { sortQueryParams } from './CompReadyUtils'
 import { Tooltip } from '@mui/material'

sippy-ng/src/component_readiness/CompReadyEnvCapabilities.jsx

@@ -13,7 +13,7 @@ import {
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { CompReadyVarsContext } from './CompReadyVars'
 import { escapeRegex, safeEncodeURIComponent } from '../helpers'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { TableContainer, Tooltip, Typography } from '@mui/material'
 import CompCapRow from './CompCapRow'
 import ComponentReadinessToolBar from './ComponentReadinessToolBar'

sippy-ng/src/component_readiness/CompReadyEnvCapability.jsx

@@ -13,7 +13,7 @@ import {
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { CompReadyVarsContext } from './CompReadyVars'
 import { escapeRegex, safeEncodeURIComponent } from '../helpers'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { TableContainer, Tooltip, Typography } from '@mui/material'
 import ComponentReadinessToolBar from './ComponentReadinessToolBar'
 import CompReadyCancelled from './CompReadyCancelled'

sippy-ng/src/component_readiness/CompReadyEnvCapabilityTest.jsx

@@ -11,7 +11,7 @@ import {
 } from './CompReadyUtils'
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { CompReadyVarsContext } from './CompReadyVars'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { safeEncodeURIComponent } from '../helpers'
 import { TableContainer, Tooltip, Typography } from '@mui/material'
 import CompCapTestRow from './CompCapTestRow'

sippy-ng/src/component_readiness/CompReadyMainInputs.jsx

@@ -2,7 +2,7 @@ import './ComponentReadiness.css'
 import { CompReadyVarsContext } from './CompReadyVars'
 import { dateFormat, formatLongDate } from './CompReadyUtils'
 import { makeStyles, useTheme } from '@mui/styles'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import AdvancedOptions from './AdvancedOptions'
 import Button from '@mui/material/Button'
 import GroupByCheckboxList from './GroupByCheckboxList'

sippy-ng/src/component_readiness/CompReadyRow.jsx

@@ -1,7 +1,7 @@
 import './ComponentReadiness.css'
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { Fragment, useContext } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { safeEncodeURIComponent } from '../helpers'
 import { Tooltip, Typography } from '@mui/material'
 import CompReadyCell from './CompReadyCell'

sippy-ng/src/component_readiness/CompTestRow.jsx

@@ -1,7 +1,7 @@
 import './ComponentReadiness.css'
 import { ComponentReadinessStyleContext } from './ComponentReadiness'
 import { Fragment, useContext } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { safeEncodeURIComponent } from '../helpers'
 import { sortQueryParams } from './CompReadyUtils'
 import { Tooltip, Typography } from '@mui/material'

sippy-ng/src/component_readiness/ComponentReadiness.jsx

@@ -27,13 +27,7 @@ import { CompReadyVarsContext } from './CompReadyVars'
 import { escapeRegex, safeEncodeURIComponent } from '../helpers'
 import { grey } from '@mui/material/colors'
 import { makeStyles, useTheme } from '@mui/styles'
-import {
-  Navigate,
-  Route,
-  Routes,
-  useLocation,
-  useParams,
-} from 'react-router-dom'
+import { Navigate, Route, Routes, useLocation, useParams } from 'react-router'
 import ComponentReadinessHelp from './ComponentReadinessHelp'
 import ComponentReadinessToolBar from './ComponentReadinessToolBar'
 import CompReadyCancelled from './CompReadyCancelled'

sippy-ng/src/component_readiness/ComponentReadinessHelp.jsx

@@ -5,7 +5,7 @@ import {
   Grid,
   Typography,
 } from '@mui/material'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { QuestionAnswer } from '@mui/icons-material'
 import Breadcrumbs from '@mui/material/Breadcrumbs'
 import React, { Fragment } from 'react'

sippy-ng/src/component_readiness/ComponentReadinessIndicator.jsx

@@ -16,7 +16,7 @@ import {
   getTestDetailsLink,
   getTriagesAPIUrl,
 } from './CompReadyUtils'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { makeStyles } from '@mui/styles'
 import { relativeTime } from '../helpers'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'

sippy-ng/src/component_readiness/ComponentReadinessToolBar.jsx

@@ -34,7 +34,7 @@ import {
   SearchIconWrapper,
   StyledInputBase,
 } from './CompReadyUtils'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { SippyCapabilitiesContext } from '../App'
 import { usePageContextForChat } from '../chat/store/useChatStore'
 import IconButton from '@mui/material/IconButton'

sippy-ng/src/component_readiness/RegressionRedirect.jsx

@@ -3,7 +3,7 @@ import {
   getRegressionAPIUrl,
   getTestDetailsLink,
 } from './CompReadyUtils'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import Alert from '@mui/material/Alert'
 import React from 'react'
 import Typography from '@mui/material/Typography'

sippy-ng/src/component_readiness/TestDetailsReport.jsx

@@ -25,7 +25,7 @@ import {
 } from './CompReadyUtils'
 import { CompReadyVarsContext } from './CompReadyVars'
 import { FileCopy, Help } from '@mui/icons-material'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { pathForExactTestAnalysisWithFilter } from '../helpers'
 import { ReleasesContext, SippyCapabilitiesContext } from '../App'
 import { usePageContextForChat } from '../chat/store/useChatStore'

sippy-ng/src/component_readiness/TriagedRegressions.jsx

@@ -7,7 +7,7 @@ import {
   jiraUrlPrefix,
   jiraUrlPrefixDeprecated,
 } from './CompReadyUtils'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { NumberParam, StringParam, useQueryParam } from 'use-query-params'
 import { Tooltip, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'

sippy-ng/src/components/MiniCard.jsx

@@ -6,7 +6,7 @@ import {
   Grid,
   Tooltip,
 } from '@mui/material'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { makeStyles, useTheme } from '@mui/styles'
 import { parseVariantName } from '../helpers'
 import { scale } from 'chroma-js'

sippy-ng/src/components/NumberCard.jsx

@@ -1,5 +1,5 @@
 import { Box, Card, CardContent, Tooltip, Typography } from '@mui/material'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { makeStyles } from '@mui/styles'
 import PropTypes from 'prop-types'
 import React from 'react'