From 276063c822452889d439f6e23ee72d5bd3c1deff Mon Sep 17 00:00:00 2001 From: openshift-trt Date: Thu, 27 Aug 2026 16:09:37 +0000 Subject: [PATCH 1/4] feat(frontend): replace react-router-dom with react-router Replace the react-router-dom dependency with react-router (v7.18.2) to consolidate on the unified package that react-router v8 uses. In v7, react-router already exports all DOM-specific components (BrowserRouter, Link, etc.), making react-router-dom redundant. Add a custom ReactRouterAdapter for use-query-params since the built-in ReactRouter6Adapter imports from react-router-dom. react-router v8 proper requires React >=19, so we stay on v7 with the v8-compatible import pattern. Co-Authored-By: Claude Opus 4.6 --- sippy-ng/package-lock.json | 34 +++++++++++++++++--- sippy-ng/package.json | 2 +- sippy-ng/src/App.jsx | 6 ++-- sippy-ng/src/adapters/ReactRouterAdapter.jsx | 34 ++++++++++++++++++++ 4 files changed, 68 insertions(+), 8 deletions(-) create mode 100644 sippy-ng/src/adapters/ReactRouterAdapter.jsx diff --git a/sippy-ng/package-lock.json b/sippy-ng/package-lock.json index 3414d68a0c..2d52ba184c 100644 --- a/sippy-ng/package-lock.json +++ b/sippy-ng/package-lock.json @@ -46,7 +46,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", @@ -12176,9 +12176,9 @@ } }, "node_modules/react-router": { - "version": "7.18.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.1.tgz", - "integrity": "sha512-GDLgg3i3uM0aeJO3Fm+TCS+sDQ7gu12T6x0qdTEzcwqEfleci7JwugVNIF3U//0FWKnJT7ptG+20B2jfDqnZAg==", + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.2.tgz", + "integrity": "sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -12202,6 +12202,8 @@ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.1.tgz", "integrity": "sha512-KaZh+X/6UtEp28x51AUYZDMg9NGoz2ja3dNHa+ta/tk40vCzKhQ/RypCWBMLbmDr6//E24Vv5uPsrqXFozdkAg==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "react-router": "7.18.1" }, @@ -12213,6 +12215,30 @@ "react-dom": ">=18" } }, + "node_modules/react-router-dom/node_modules/react-router": { + "version": "7.18.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.1.tgz", + "integrity": "sha512-GDLgg3i3uM0aeJO3Fm+TCS+sDQ7gu12T6x0qdTEzcwqEfleci7JwugVNIF3U//0FWKnJT7ptG+20B2jfDqnZAg==", + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/sippy-ng/package.json b/sippy-ng/package.json index 7b75350b36..6ef25c537f 100644 --- a/sippy-ng/package.json +++ b/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", diff --git a/sippy-ng/src/App.jsx b/sippy-ng/src/App.jsx index 5dcdb7852e..c0312eb2ec 100644 --- a/sippy-ng/src/App.jsx +++ b/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) { { + 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) +} From 20fa5e1cad0cc3a797520342e54b1221a68ebddf Mon Sep 17 00:00:00 2001 From: openshift-trt Date: Thu, 27 Aug 2026 16:09:47 +0000 Subject: [PATCH 2/4] refactor(frontend): update all imports from react-router-dom to react-router Update 60 source files and README.md to import from react-router instead of react-router-dom. No API changes are needed since react-router v7 exports the same components and hooks (BrowserRouter, Link, Route, Routes, Navigate, useParams, useNavigate, useLocation, etc.). Co-Authored-By: Claude Opus 4.6 --- sippy-ng/README.md | 4 ++-- sippy-ng/src/build_clusters/BuildClusterTable.jsx | 2 +- sippy-ng/src/chat/ChatMessage.jsx | 2 +- sippy-ng/src/component_readiness/CompCapRow.jsx | 2 +- sippy-ng/src/component_readiness/CompReadyCapCell.jsx | 2 +- sippy-ng/src/component_readiness/CompReadyCapsCell.jsx | 2 +- sippy-ng/src/component_readiness/CompReadyCell.jsx | 2 +- .../src/component_readiness/CompReadyEnvCapabilities.jsx | 2 +- .../src/component_readiness/CompReadyEnvCapability.jsx | 2 +- .../component_readiness/CompReadyEnvCapabilityTest.jsx | 2 +- sippy-ng/src/component_readiness/CompReadyMainInputs.jsx | 2 +- sippy-ng/src/component_readiness/CompReadyRow.jsx | 2 +- sippy-ng/src/component_readiness/CompTestRow.jsx | 2 +- sippy-ng/src/component_readiness/ComponentReadiness.jsx | 8 +------- .../src/component_readiness/ComponentReadinessHelp.jsx | 2 +- .../component_readiness/ComponentReadinessIndicator.jsx | 2 +- .../src/component_readiness/ComponentReadinessToolBar.jsx | 2 +- sippy-ng/src/component_readiness/RegressionRedirect.jsx | 2 +- sippy-ng/src/component_readiness/TestDetailsReport.jsx | 2 +- sippy-ng/src/component_readiness/TriagedRegressions.jsx | 2 +- sippy-ng/src/components/MiniCard.jsx | 2 +- sippy-ng/src/components/NumberCard.jsx | 2 +- sippy-ng/src/components/Sidebar.jsx | 2 +- sippy-ng/src/components/SimpleBreadcrumbs.jsx | 2 +- sippy-ng/src/components/SummaryCard.jsx | 2 +- sippy-ng/src/datagrid/utils.jsx | 2 +- sippy-ng/src/index.jsx | 2 +- sippy-ng/src/jobs/JobAnalysis.jsx | 2 +- sippy-ng/src/jobs/JobDetailTable.jsx | 2 +- sippy-ng/src/jobs/JobRunsTable.jsx | 2 +- sippy-ng/src/jobs/JobStackedChart.jsx | 2 +- sippy-ng/src/jobs/JobTable.jsx | 2 +- sippy-ng/src/jobs/Jobs.jsx | 2 +- sippy-ng/src/jobs/VariantStatus.jsx | 2 +- sippy-ng/src/prow_job_runs/EventsChart.jsx | 2 +- sippy-ng/src/prow_job_runs/IntervalsChart.jsx | 2 +- sippy-ng/src/pull_requests/PullRequestsTable.jsx | 2 +- sippy-ng/src/releases/Install.jsx | 2 +- sippy-ng/src/releases/PayloadCalendar.jsx | 2 +- sippy-ng/src/releases/PayloadMiniCalendar.jsx | 2 +- sippy-ng/src/releases/PayloadStream.jsx | 2 +- sippy-ng/src/releases/PayloadStreamTestFailures.jsx | 2 +- sippy-ng/src/releases/PayloadStreamsTable.jsx | 2 +- sippy-ng/src/releases/RecentTestFailures.jsx | 2 +- sippy-ng/src/releases/ReleaseOverview.jsx | 2 +- sippy-ng/src/releases/ReleasePayloadAcceptance.jsx | 2 +- sippy-ng/src/releases/ReleasePayloadDetails.jsx | 2 +- sippy-ng/src/releases/ReleasePayloadTable.jsx | 2 +- sippy-ng/src/releases/TopLevelIndicators.jsx | 2 +- sippy-ng/src/releases/Upgrades.jsx | 2 +- sippy-ng/src/repositories/RepositoriesTable.jsx | 2 +- sippy-ng/src/repositories/RepositoryDetails.jsx | 2 +- sippy-ng/src/tests/FeatureGateDetail.jsx | 2 +- sippy-ng/src/tests/FeatureGatePromotionTab.jsx | 2 +- sippy-ng/src/tests/FeatureGates.jsx | 2 +- sippy-ng/src/tests/TestAnalysis.jsx | 2 +- sippy-ng/src/tests/TestByVariantTable.jsx | 2 +- sippy-ng/src/tests/TestRegressionsTable.jsx | 2 +- sippy-ng/src/tests/TestTable.jsx | 2 +- sippy-ng/src/tests/Tests.jsx | 2 +- 60 files changed, 61 insertions(+), 67 deletions(-) diff --git a/sippy-ng/README.md b/sippy-ng/README.md index 580340013b..99da9976b8 100644 --- a/sippy-ng/README.md +++ b/sippy-ng/README.md @@ -53,7 +53,7 @@ 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' +import { Link } from 'react-router' import { relativeTime, safeEncodeURIComponent } from '../helpers' ``` @@ -61,7 +61,7 @@ vs. ``` 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' diff --git a/sippy-ng/src/build_clusters/BuildClusterTable.jsx b/sippy-ng/src/build_clusters/BuildClusterTable.jsx index 2422a6b2a1..78e48999e7 100644 --- a/sippy-ng/src/build_clusters/BuildClusterTable.jsx +++ b/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' diff --git a/sippy-ng/src/chat/ChatMessage.jsx b/sippy-ng/src/chat/ChatMessage.jsx index 39ca711840..a9f4f1567a 100644 --- a/sippy-ng/src/chat/ChatMessage.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompCapRow.jsx b/sippy-ng/src/component_readiness/CompCapRow.jsx index ddd33c1334..c5710ae309 100644 --- a/sippy-ng/src/component_readiness/CompCapRow.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompReadyCapCell.jsx b/sippy-ng/src/component_readiness/CompReadyCapCell.jsx index c400aa1185..06d36459c2 100644 --- a/sippy-ng/src/component_readiness/CompReadyCapCell.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompReadyCapsCell.jsx b/sippy-ng/src/component_readiness/CompReadyCapsCell.jsx index 83a126d524..57d203fa40 100644 --- a/sippy-ng/src/component_readiness/CompReadyCapsCell.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompReadyCell.jsx b/sippy-ng/src/component_readiness/CompReadyCell.jsx index 1b32524ea3..7ab0500567 100644 --- a/sippy-ng/src/component_readiness/CompReadyCell.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompReadyEnvCapabilities.jsx b/sippy-ng/src/component_readiness/CompReadyEnvCapabilities.jsx index c045ca849d..167f7a4063 100644 --- a/sippy-ng/src/component_readiness/CompReadyEnvCapabilities.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompReadyEnvCapability.jsx b/sippy-ng/src/component_readiness/CompReadyEnvCapability.jsx index 7821b1ade9..75c535de10 100644 --- a/sippy-ng/src/component_readiness/CompReadyEnvCapability.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompReadyEnvCapabilityTest.jsx b/sippy-ng/src/component_readiness/CompReadyEnvCapabilityTest.jsx index 457b9e17f4..2d840f728c 100644 --- a/sippy-ng/src/component_readiness/CompReadyEnvCapabilityTest.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompReadyMainInputs.jsx b/sippy-ng/src/component_readiness/CompReadyMainInputs.jsx index c3258bc5b6..f747403ff4 100644 --- a/sippy-ng/src/component_readiness/CompReadyMainInputs.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompReadyRow.jsx b/sippy-ng/src/component_readiness/CompReadyRow.jsx index e691f11432..9a29aabf4c 100644 --- a/sippy-ng/src/component_readiness/CompReadyRow.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/CompTestRow.jsx b/sippy-ng/src/component_readiness/CompTestRow.jsx index c742a863d9..7fb7ed1bd9 100644 --- a/sippy-ng/src/component_readiness/CompTestRow.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/ComponentReadiness.jsx b/sippy-ng/src/component_readiness/ComponentReadiness.jsx index e56afdc4f5..ecf8b073e3 100644 --- a/sippy-ng/src/component_readiness/ComponentReadiness.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/ComponentReadinessHelp.jsx b/sippy-ng/src/component_readiness/ComponentReadinessHelp.jsx index 0927aede73..55e479a9b3 100644 --- a/sippy-ng/src/component_readiness/ComponentReadinessHelp.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/ComponentReadinessIndicator.jsx b/sippy-ng/src/component_readiness/ComponentReadinessIndicator.jsx index 39b728f599..9e0c5dc74e 100644 --- a/sippy-ng/src/component_readiness/ComponentReadinessIndicator.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/ComponentReadinessToolBar.jsx b/sippy-ng/src/component_readiness/ComponentReadinessToolBar.jsx index 7220642be9..6a5a29ca3f 100644 --- a/sippy-ng/src/component_readiness/ComponentReadinessToolBar.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/RegressionRedirect.jsx b/sippy-ng/src/component_readiness/RegressionRedirect.jsx index 2f10f82eff..5edc54b761 100644 --- a/sippy-ng/src/component_readiness/RegressionRedirect.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/TestDetailsReport.jsx b/sippy-ng/src/component_readiness/TestDetailsReport.jsx index ae2fa30955..36e0c3f2c2 100644 --- a/sippy-ng/src/component_readiness/TestDetailsReport.jsx +++ b/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' diff --git a/sippy-ng/src/component_readiness/TriagedRegressions.jsx b/sippy-ng/src/component_readiness/TriagedRegressions.jsx index 21c4581162..97b0d6d650 100644 --- a/sippy-ng/src/component_readiness/TriagedRegressions.jsx +++ b/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' diff --git a/sippy-ng/src/components/MiniCard.jsx b/sippy-ng/src/components/MiniCard.jsx index 3f06c7a9c3..af19e13e53 100644 --- a/sippy-ng/src/components/MiniCard.jsx +++ b/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' diff --git a/sippy-ng/src/components/NumberCard.jsx b/sippy-ng/src/components/NumberCard.jsx index 8e88a35a00..d2ffa261bd 100644 --- a/sippy-ng/src/components/NumberCard.jsx +++ b/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' diff --git a/sippy-ng/src/components/Sidebar.jsx b/sippy-ng/src/components/Sidebar.jsx index dd7509f434..32e8873a28 100644 --- a/sippy-ng/src/components/Sidebar.jsx +++ b/sippy-ng/src/components/Sidebar.jsx @@ -13,7 +13,7 @@ import { } from '@mui/icons-material' import { DEFAULT_TEST_FILTERS } from '../constants' import { LaunderedListItem } from './Laundry' -import { Link, useLocation } from 'react-router-dom' +import { Link, useLocation } from 'react-router' import { ListItemButton, ListSubheader, useTheme } from '@mui/material' import { pathForJobsWithFilter, diff --git a/sippy-ng/src/components/SimpleBreadcrumbs.jsx b/sippy-ng/src/components/SimpleBreadcrumbs.jsx index 229897d5dd..bd451d67e2 100644 --- a/sippy-ng/src/components/SimpleBreadcrumbs.jsx +++ b/sippy-ng/src/components/SimpleBreadcrumbs.jsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import Breadcrumbs from '@mui/material/Breadcrumbs' import PropTypes from 'prop-types' import React from 'react' diff --git a/sippy-ng/src/components/SummaryCard.jsx b/sippy-ng/src/components/SummaryCard.jsx index 43673db1b4..e1d8d559c9 100644 --- a/sippy-ng/src/components/SummaryCard.jsx +++ b/sippy-ng/src/components/SummaryCard.jsx @@ -1,6 +1,6 @@ import { Box, Card, CardContent, Tooltip, Typography } from '@mui/material' import { Doughnut } from 'react-chartjs-2' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles, useTheme } from '@mui/styles' import { scale } from 'chroma-js' import InfoIcon from '@mui/icons-material/Info' diff --git a/sippy-ng/src/datagrid/utils.jsx b/sippy-ng/src/datagrid/utils.jsx index 87df9a0413..f6b9063fe9 100644 --- a/sippy-ng/src/datagrid/utils.jsx +++ b/sippy-ng/src/datagrid/utils.jsx @@ -2,7 +2,7 @@ import { Close } from '@mui/icons-material' import { createTheme } from '@mui/material/styles' import { format, utcToZonedTime } from 'date-fns-tz' import { green, orange, red } from '@mui/material/colors' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { ListItem, ListItemIcon, ListItemText, Tooltip } from '@mui/material' import { scale } from 'chroma-js' import List from '@mui/material/List' diff --git a/sippy-ng/src/index.jsx b/sippy-ng/src/index.jsx index 6579cd3cc8..46c9bd7868 100644 --- a/sippy-ng/src/index.jsx +++ b/sippy-ng/src/index.jsx @@ -1,6 +1,6 @@ import './index.css' import { createRoot } from 'react-dom/client' -import { BrowserRouter as Router } from 'react-router-dom' +import { BrowserRouter as Router } from 'react-router' import App from './App' import React from 'react' diff --git a/sippy-ng/src/jobs/JobAnalysis.jsx b/sippy-ng/src/jobs/JobAnalysis.jsx index c1fe2244c6..95adc31d7c 100644 --- a/sippy-ng/src/jobs/JobAnalysis.jsx +++ b/sippy-ng/src/jobs/JobAnalysis.jsx @@ -33,7 +33,7 @@ import { GridView } from '../datagrid/GridView' import { hourFilter, JobStackedChart } from './JobStackedChart' import { JOB_THRESHOLDS } from '../constants' import { Line } from 'react-chartjs-2' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { ReportEndContext } from '../App' import { scale } from 'chroma-js' import { usePageContextForChat } from '../chat/store/useChatStore' diff --git a/sippy-ng/src/jobs/JobDetailTable.jsx b/sippy-ng/src/jobs/JobDetailTable.jsx index 62b9e3febc..6c9b6772a4 100644 --- a/sippy-ng/src/jobs/JobDetailTable.jsx +++ b/sippy-ng/src/jobs/JobDetailTable.jsx @@ -1,5 +1,5 @@ import './JobDetailTable.css' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { pathForExactJob } from '../helpers' import { TableContainer } from '@mui/material' import JobDetailTestModal from './JobDetailTestModal' diff --git a/sippy-ng/src/jobs/JobRunsTable.jsx b/sippy-ng/src/jobs/JobRunsTable.jsx index 5cbf92945b..6b1659c025 100644 --- a/sippy-ng/src/jobs/JobRunsTable.jsx +++ b/sippy-ng/src/jobs/JobRunsTable.jsx @@ -25,7 +25,7 @@ import { safeEncodeURIComponent, useStableJSONQueryParam, } from '../helpers' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { NumberParam, StringParam, useQueryParam } from 'use-query-params' import { ReportEndContext } from '../App' import Alert from '@mui/material/Alert' diff --git a/sippy-ng/src/jobs/JobStackedChart.jsx b/sippy-ng/src/jobs/JobStackedChart.jsx index f8ada8e11a..bfd238eca5 100644 --- a/sippy-ng/src/jobs/JobStackedChart.jsx +++ b/sippy-ng/src/jobs/JobStackedChart.jsx @@ -5,7 +5,7 @@ import React, { useEffect } from 'react' import './JobAnalysis.css' import { safeEncodeURIComponent } from '../helpers' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' export const dayFilter = (days, startDate) => { return [ diff --git a/sippy-ng/src/jobs/JobTable.jsx b/sippy-ng/src/jobs/JobTable.jsx index 97a0c08035..c64dc75e3b 100644 --- a/sippy-ng/src/jobs/JobTable.jsx +++ b/sippy-ng/src/jobs/JobTable.jsx @@ -13,7 +13,7 @@ import { } from '../helpers' import { generateClasses } from '../datagrid/utils' import { GridView } from '../datagrid/GridView' -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 { usePageContextForChat } from '../chat/store/useChatStore' diff --git a/sippy-ng/src/jobs/Jobs.jsx b/sippy-ng/src/jobs/Jobs.jsx index 395c46a94a..feb96004ed 100644 --- a/sippy-ng/src/jobs/Jobs.jsx +++ b/sippy-ng/src/jobs/Jobs.jsx @@ -5,7 +5,7 @@ import React, { Fragment, useEffect } from 'react' import './JobDetailTable.css' import { filterFor } from '../helpers' -import { Link, Route, Routes, useLocation } from 'react-router-dom' +import { Link, Route, Routes, useLocation } from 'react-router' import JobRunsTable from './JobRunsTable' import JobTable from './JobTable' import SimpleBreadcrumbs from '../components/SimpleBreadcrumbs' diff --git a/sippy-ng/src/jobs/VariantStatus.jsx b/sippy-ng/src/jobs/VariantStatus.jsx index 87c5d79b13..e3ec87643b 100644 --- a/sippy-ng/src/jobs/VariantStatus.jsx +++ b/sippy-ng/src/jobs/VariantStatus.jsx @@ -1,7 +1,7 @@ import { Card, Container, Grid, Tab, Typography } from '@mui/material' import { filterFor } from '../helpers' import { JobStackedChart } from './JobStackedChart' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { TabContext, TabList, TabPanel } from '@mui/lab' import JobRunsTable from './JobRunsTable' import JobTable from './JobTable' diff --git a/sippy-ng/src/prow_job_runs/EventsChart.jsx b/sippy-ng/src/prow_job_runs/EventsChart.jsx index de9b8c2eea..3184fa2033 100644 --- a/sippy-ng/src/prow_job_runs/EventsChart.jsx +++ b/sippy-ng/src/prow_job_runs/EventsChart.jsx @@ -20,7 +20,7 @@ import { Typography, } from '@mui/material' import { makeStyles } from '@mui/styles' -import { Link as RouterLink, useParams } from 'react-router-dom' +import { Link as RouterLink, useParams } from 'react-router' import { StringParam, useQueryParam } from 'use-query-params' import Alert from '@mui/material/Alert' import LaunderedLink from '../components/Laundry' diff --git a/sippy-ng/src/prow_job_runs/IntervalsChart.jsx b/sippy-ng/src/prow_job_runs/IntervalsChart.jsx index e46e24726c..d6a393cccf 100644 --- a/sippy-ng/src/prow_job_runs/IntervalsChart.jsx +++ b/sippy-ng/src/prow_job_runs/IntervalsChart.jsx @@ -19,7 +19,7 @@ import { } from '@mui/material' import { escapeRegex } from '../helpers' import { makeStyles } from '@mui/styles' -import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom' +import { Link as RouterLink, useNavigate, useParams } from 'react-router' import { stringify } from 'query-string' import Alert from '@mui/material/Alert' import FormControlLabel from '@mui/material/FormControlLabel' diff --git a/sippy-ng/src/pull_requests/PullRequestsTable.jsx b/sippy-ng/src/pull_requests/PullRequestsTable.jsx index 02e34391af..8647565d30 100644 --- a/sippy-ng/src/pull_requests/PullRequestsTable.jsx +++ b/sippy-ng/src/pull_requests/PullRequestsTable.jsx @@ -22,7 +22,7 @@ import { useStableJSONQueryParam, } from '../helpers' import { GridView } from '../datagrid/GridView' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles, useTheme } from '@mui/styles' import { ReportEndContext } from '../App' import { StringParam, useQueryParam } from 'use-query-params' diff --git a/sippy-ng/src/releases/Install.jsx b/sippy-ng/src/releases/Install.jsx index addc7338ee..7c338657bc 100644 --- a/sippy-ng/src/releases/Install.jsx +++ b/sippy-ng/src/releases/Install.jsx @@ -1,6 +1,6 @@ import './Install.css' import { Grid, Typography } from '@mui/material' -import { Navigate, Route, Routes } from 'react-router-dom' +import { Navigate, Route, Routes } from 'react-router' import Alert from '@mui/material/Alert' import PropTypes from 'prop-types' import React, { Fragment, useEffect } from 'react' diff --git a/sippy-ng/src/releases/PayloadCalendar.jsx b/sippy-ng/src/releases/PayloadCalendar.jsx index de4c36af35..4a28a37ad1 100644 --- a/sippy-ng/src/releases/PayloadCalendar.jsx +++ b/sippy-ng/src/releases/PayloadCalendar.jsx @@ -2,7 +2,7 @@ import FullCalendar from '@fullcalendar/react' import { Alert, Grid } from '@mui/material' import { filterFor } from '../helpers' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { useTheme } from '@mui/material/styles' import dayGridPlugin from '@fullcalendar/daygrid' import PayloadCalendarLegend from './PayloadCalendarLegend' diff --git a/sippy-ng/src/releases/PayloadMiniCalendar.jsx b/sippy-ng/src/releases/PayloadMiniCalendar.jsx index 3c0f38899d..3192850cad 100644 --- a/sippy-ng/src/releases/PayloadMiniCalendar.jsx +++ b/sippy-ng/src/releases/PayloadMiniCalendar.jsx @@ -2,7 +2,7 @@ import FullCalendar from '@fullcalendar/react' import { filterFor, safeEncodeURIComponent } from '../helpers' import { Tooltip, Typography } from '@mui/material' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { useTheme } from '@mui/material/styles' import Alert from '@mui/material/Alert' import dayGridPlugin from '@fullcalendar/daygrid' diff --git a/sippy-ng/src/releases/PayloadStream.jsx b/sippy-ng/src/releases/PayloadStream.jsx index 2675a5b5a6..a372f637e7 100644 --- a/sippy-ng/src/releases/PayloadStream.jsx +++ b/sippy-ng/src/releases/PayloadStream.jsx @@ -1,6 +1,6 @@ import { filterFor } from '../helpers' import { Grid, Paper, Tab, Tabs, Typography } from '@mui/material' -import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom' +import { Link, Navigate, Route, Routes, useLocation } from 'react-router' import { makeStyles } from '@mui/styles' import { StringParam, useQueryParam } from 'use-query-params' import { TabContext } from '@mui/lab' diff --git a/sippy-ng/src/releases/PayloadStreamTestFailures.jsx b/sippy-ng/src/releases/PayloadStreamTestFailures.jsx index ef4da80bd5..28f0121759 100644 --- a/sippy-ng/src/releases/PayloadStreamTestFailures.jsx +++ b/sippy-ng/src/releases/PayloadStreamTestFailures.jsx @@ -2,7 +2,7 @@ import { BLOCKER_SCORE_THRESHOLDS } from '../constants' import { Box, Card, Grid, Tooltip, Typography } 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 { NumberParam, StringParam, useQueryParam } from 'use-query-params' import { safeEncodeURIComponent, useStableJSONQueryParam } from '../helpers' import { withStyles } from '@mui/styles' diff --git a/sippy-ng/src/releases/PayloadStreamsTable.jsx b/sippy-ng/src/releases/PayloadStreamsTable.jsx index bcaa460e29..46a08ccd05 100644 --- a/sippy-ng/src/releases/PayloadStreamsTable.jsx +++ b/sippy-ng/src/releases/PayloadStreamsTable.jsx @@ -1,6 +1,6 @@ import { CheckCircle, Error as ErrorIcon, Help } from '@mui/icons-material' import { DataGrid } from '@mui/x-data-grid' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles, useTheme } from '@mui/styles' import { NumberParam, StringParam, useQueryParam } from 'use-query-params' import { safeEncodeURIComponent, useStableJSONQueryParam } from '../helpers' diff --git a/sippy-ng/src/releases/RecentTestFailures.jsx b/sippy-ng/src/releases/RecentTestFailures.jsx index 7eca517a0f..cd31887860 100644 --- a/sippy-ng/src/releases/RecentTestFailures.jsx +++ b/sippy-ng/src/releases/RecentTestFailures.jsx @@ -18,7 +18,7 @@ import { Typography, } from '@mui/material' import { DirectionsBoat, OpenInNew } from '@mui/icons-material' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles } from '@mui/styles' import { pathForExactTestAnalysis, diff --git a/sippy-ng/src/releases/ReleaseOverview.jsx b/sippy-ng/src/releases/ReleaseOverview.jsx index 83fc12e8ac..ff4fa078f5 100644 --- a/sippy-ng/src/releases/ReleaseOverview.jsx +++ b/sippy-ng/src/releases/ReleaseOverview.jsx @@ -6,7 +6,7 @@ import { Tooltip, Typography, } from '@mui/material' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles } from '@mui/styles' import { ReleasesContext } from '../App' import { usePageContextForChat } from '../chat/store/useChatStore' diff --git a/sippy-ng/src/releases/ReleasePayloadAcceptance.jsx b/sippy-ng/src/releases/ReleasePayloadAcceptance.jsx index 3325012fc0..aaa930d8ec 100644 --- a/sippy-ng/src/releases/ReleasePayloadAcceptance.jsx +++ b/sippy-ng/src/releases/ReleasePayloadAcceptance.jsx @@ -10,7 +10,7 @@ import { relativeTime, safeEncodeURIComponent, } from '../helpers' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles } from '@mui/styles' import { ReportEndContext } from '../App' import Alert from '@mui/material/Alert' diff --git a/sippy-ng/src/releases/ReleasePayloadDetails.jsx b/sippy-ng/src/releases/ReleasePayloadDetails.jsx index c77a65676d..1bbb5a161f 100644 --- a/sippy-ng/src/releases/ReleasePayloadDetails.jsx +++ b/sippy-ng/src/releases/ReleasePayloadDetails.jsx @@ -10,7 +10,7 @@ import { } from '@mui/material' import { filterFor, safeEncodeURIComponent } from '../helpers' import { Fragment } from 'react' -import { Link, Route, Routes, useLocation } from 'react-router-dom' +import { Link, Route, Routes, useLocation } from 'react-router' import { makeStyles } from '@mui/styles' import { StringParam, useQueryParam } from 'use-query-params' import { WarningOutlined } from '@mui/icons-material' diff --git a/sippy-ng/src/releases/ReleasePayloadTable.jsx b/sippy-ng/src/releases/ReleasePayloadTable.jsx index d99866dbc5..fa7b5ee31f 100644 --- a/sippy-ng/src/releases/ReleasePayloadTable.jsx +++ b/sippy-ng/src/releases/ReleasePayloadTable.jsx @@ -14,7 +14,7 @@ import { safeEncodeURIComponent, useStableJSONQueryParam, } from '../helpers' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles, useTheme } from '@mui/styles' import { NumberParam, StringParam, useQueryParam } from 'use-query-params' import { ReportEndContext } from '../App' diff --git a/sippy-ng/src/releases/TopLevelIndicators.jsx b/sippy-ng/src/releases/TopLevelIndicators.jsx index 562c9efa0d..5e8c0603b4 100644 --- a/sippy-ng/src/releases/TopLevelIndicators.jsx +++ b/sippy-ng/src/releases/TopLevelIndicators.jsx @@ -5,7 +5,7 @@ import { TEST_THRESHOLDS, UPGRADE_THRESHOLDS, } from '../constants' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles } from '@mui/styles' import { pathForTestByVariant, useNewInstallTests } from '../helpers' import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' diff --git a/sippy-ng/src/releases/Upgrades.jsx b/sippy-ng/src/releases/Upgrades.jsx index e9cf73e756..447ebfa61f 100644 --- a/sippy-ng/src/releases/Upgrades.jsx +++ b/sippy-ng/src/releases/Upgrades.jsx @@ -1,6 +1,6 @@ import './Upgrades.css' import { Grid, Typography } from '@mui/material' -import { Navigate, Route, Routes } from 'react-router-dom' +import { Navigate, Route, Routes } from 'react-router' import Alert from '@mui/material/Alert' import PropTypes from 'prop-types' import React, { Fragment, useEffect } from 'react' diff --git a/sippy-ng/src/repositories/RepositoriesTable.jsx b/sippy-ng/src/repositories/RepositoriesTable.jsx index 5757773d2e..1d0a7dce83 100644 --- a/sippy-ng/src/repositories/RepositoriesTable.jsx +++ b/sippy-ng/src/repositories/RepositoriesTable.jsx @@ -18,7 +18,7 @@ import { useStableJSONQueryParam, } from '../helpers' import { StringParam, useQueryParam } from 'use-query-params' -import { useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router' import { withStyles } from '@mui/styles' import Alert from '@mui/material/Alert' import GridToolbar from '../datagrid/GridToolbar' diff --git a/sippy-ng/src/repositories/RepositoryDetails.jsx b/sippy-ng/src/repositories/RepositoryDetails.jsx index 05927e9594..2463bc0136 100644 --- a/sippy-ng/src/repositories/RepositoryDetails.jsx +++ b/sippy-ng/src/repositories/RepositoryDetails.jsx @@ -1,6 +1,6 @@ import { Card, Container, Grid, Typography } from '@mui/material' import { filterFor, pathForJobsWithFilter, withSort } from '../helpers' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles } from '@mui/styles' import JobTable from '../jobs/JobTable' import PropTypes from 'prop-types' diff --git a/sippy-ng/src/tests/FeatureGateDetail.jsx b/sippy-ng/src/tests/FeatureGateDetail.jsx index 38979180bb..7d0b1b66b3 100644 --- a/sippy-ng/src/tests/FeatureGateDetail.jsx +++ b/sippy-ng/src/tests/FeatureGateDetail.jsx @@ -11,7 +11,7 @@ import { Tooltip, Typography, } from '@mui/material' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { SafeJSONParam } from '../helpers' import { useQueryParam } from 'use-query-params' import Alert from '@mui/material/Alert' diff --git a/sippy-ng/src/tests/FeatureGatePromotionTab.jsx b/sippy-ng/src/tests/FeatureGatePromotionTab.jsx index 9805871dbb..870b267aa0 100644 --- a/sippy-ng/src/tests/FeatureGatePromotionTab.jsx +++ b/sippy-ng/src/tests/FeatureGatePromotionTab.jsx @@ -14,7 +14,7 @@ import { Tooltip, Typography, } from '@mui/material' -import { Link, useNavigate } from 'react-router-dom' +import { Link, useNavigate } from 'react-router' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import PropTypes from 'prop-types' import React from 'react' diff --git a/sippy-ng/src/tests/FeatureGates.jsx b/sippy-ng/src/tests/FeatureGates.jsx index 0620f0ce7a..c420d2d440 100644 --- a/sippy-ng/src/tests/FeatureGates.jsx +++ b/sippy-ng/src/tests/FeatureGates.jsx @@ -1,6 +1,6 @@ import { Container, Typography } from '@mui/material' import { DataGrid } from '@mui/x-data-grid' -import { Link, useNavigate } from 'react-router-dom' +import { Link, useNavigate } from 'react-router' import { NumberParam, StringParam, useQueryParam } from 'use-query-params' import { parseVersion, diff --git a/sippy-ng/src/tests/TestAnalysis.jsx b/sippy-ng/src/tests/TestAnalysis.jsx index 4840884a70..3f42578d42 100644 --- a/sippy-ng/src/tests/TestAnalysis.jsx +++ b/sippy-ng/src/tests/TestAnalysis.jsx @@ -32,7 +32,7 @@ import { useStableJSONQueryParam, withSort, } from '../helpers' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { StringParam, useQueryParam } from 'use-query-params' import { TEST_THRESHOLDS } from '../constants' import { TestDurationChart } from './TestDurationChart' diff --git a/sippy-ng/src/tests/TestByVariantTable.jsx b/sippy-ng/src/tests/TestByVariantTable.jsx index 74fa94472b..09efa931ad 100644 --- a/sippy-ng/src/tests/TestByVariantTable.jsx +++ b/sippy-ng/src/tests/TestByVariantTable.jsx @@ -1,6 +1,6 @@ import './TestByVariantTable.css' import { grey } from '@mui/material/colors' -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { makeStyles } from '@mui/styles' import { parseVariantName, pathForExactTestAnalysis } from '../helpers' import { scale } from 'chroma-js' diff --git a/sippy-ng/src/tests/TestRegressionsTable.jsx b/sippy-ng/src/tests/TestRegressionsTable.jsx index 522f37ffde..7cdf72a35a 100644 --- a/sippy-ng/src/tests/TestRegressionsTable.jsx +++ b/sippy-ng/src/tests/TestRegressionsTable.jsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router-dom' +import { Link } from 'react-router' import { Paper, Table, diff --git a/sippy-ng/src/tests/TestTable.jsx b/sippy-ng/src/tests/TestTable.jsx index a961465f56..269ce40bc2 100644 --- a/sippy-ng/src/tests/TestTable.jsx +++ b/sippy-ng/src/tests/TestTable.jsx @@ -27,7 +27,7 @@ import { } from '../helpers' import { generateClasses } from '../datagrid/utils' import { GridView } from '../datagrid/GridView' -import { Link, useLocation } from 'react-router-dom' +import { Link, useLocation } from 'react-router' import { makeStyles, useTheme } from '@mui/styles' import { NumberParam, StringParam, useQueryParam } from 'use-query-params' import { StyledDataGrid } from '../datagrid/StyledDataGrid' diff --git a/sippy-ng/src/tests/Tests.jsx b/sippy-ng/src/tests/Tests.jsx index 13914d25a1..57120e6724 100644 --- a/sippy-ng/src/tests/Tests.jsx +++ b/sippy-ng/src/tests/Tests.jsx @@ -3,7 +3,7 @@ import { TabContext } from '@mui/lab' import PropTypes from 'prop-types' import React, { Fragment, useEffect } from 'react' -import { Link, Route, Routes, useLocation } from 'react-router-dom' +import { Link, Route, Routes, useLocation } from 'react-router' import SimpleBreadcrumbs from '../components/SimpleBreadcrumbs' import TestTable from './TestTable' From 09a255690697cbe9148e5daf90d68c2a10825afa Mon Sep 17 00:00:00 2001 From: openshift-trt Date: Thu, 27 Aug 2026 19:28:25 +0000 Subject: [PATCH 3/4] fix(frontend): address review feedback on react-router upgrade Pin react-router to exact version 7.18.2, add explanatory comments to the ReactRouterAdapter about UNSAFE_ prefix convention, add language identifiers to README code fences, and add unit tests for the adapter. Co-Authored-By: Claude Opus 4.6 --- sippy-ng/README.md | 4 +- sippy-ng/package-lock.json | 2 +- sippy-ng/package.json | 2 +- sippy-ng/src/adapters/ReactRouterAdapter.jsx | 4 ++ .../src/adapters/ReactRouterAdapter.test.jsx | 50 +++++++++++++++++++ 5 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 sippy-ng/src/adapters/ReactRouterAdapter.test.jsx diff --git a/sippy-ng/README.md b/sippy-ng/README.md index 99da9976b8..94358452d3 100644 --- a/sippy-ng/README.md +++ b/sippy-ng/README.md @@ -52,14 +52,14 @@ 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. -``` +```javascript import { Link } from 'react-router' import { relativeTime, safeEncodeURIComponent } from '../helpers' ``` vs. -``` +```javascript import { getReportStartDate, relativeTime, safeEncodeURIComponent } from '../helpers' import { Link } from 'react-router' ``` diff --git a/sippy-ng/package-lock.json b/sippy-ng/package-lock.json index 2d52ba184c..c0bb6055a7 100644 --- a/sippy-ng/package-lock.json +++ b/sippy-ng/package-lock.json @@ -46,7 +46,7 @@ "react-joyride": "^3.2.0", "react-markdown": "^8.0.7", "react-plotly.js": "^2.6.0", - "react-router": "^7.18.2", + "react-router": "7.18.2", "remark-gfm": "^3.0.1", "timelines-chart": "^2.12.1", "universal-cookie": "^7.2.1", diff --git a/sippy-ng/package.json b/sippy-ng/package.json index 6ef25c537f..f32e303ccb 100644 --- a/sippy-ng/package.json +++ b/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": "^7.18.2", + "react-router": "7.18.2", "remark-gfm": "^3.0.1", "timelines-chart": "^2.12.1", "universal-cookie": "^7.2.1", diff --git a/sippy-ng/src/adapters/ReactRouterAdapter.jsx b/sippy-ng/src/adapters/ReactRouterAdapter.jsx index 97510421b3..40ec248ed6 100644 --- a/sippy-ng/src/adapters/ReactRouterAdapter.jsx +++ b/sippy-ng/src/adapters/ReactRouterAdapter.jsx @@ -1,3 +1,7 @@ +// 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, diff --git a/sippy-ng/src/adapters/ReactRouterAdapter.test.jsx b/sippy-ng/src/adapters/ReactRouterAdapter.test.jsx new file mode 100644 index 0000000000..67be209427 --- /dev/null +++ b/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 ( +
+ {value ?? ''} + +
+ ) +} + +function renderWithRouter(ui, { route = '/' } = {}) { + window.history.pushState({}, '', route) + return render( + + {ui} + + ) +} + +describe('ReactRouterAdapter', () => { + it('renders children via the adapter', () => { + renderWithRouter() + expect(screen.getByTestId('value')).toBeInTheDocument() + }) + + it('reads query params from the URL', () => { + renderWithRouter(, { route: '/?foo=hello' }) + expect(screen.getByTestId('value')).toHaveTextContent('hello') + }) + + it('updates query params on push', async () => { + renderWithRouter() + await act(async () => { + screen.getByText('Set').click() + }) + expect(window.location.search).toContain('foo=bar') + expect(screen.getByTestId('value')).toHaveTextContent('bar') + }) +}) From fc84607cbda8c635a1676200f197ba963daa39b2 Mon Sep 17 00:00:00 2001 From: openshift-trt Date: Thu, 27 Aug 2026 20:04:04 +0000 Subject: [PATCH 4/4] fix(frontend): restore caret range on react-router dependency Match the repo convention of using caret ranges for all dependencies. Co-Authored-By: Claude Opus 4.6 --- sippy-ng/package-lock.json | 2 +- sippy-ng/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/sippy-ng/package-lock.json b/sippy-ng/package-lock.json index c0bb6055a7..2d52ba184c 100644 --- a/sippy-ng/package-lock.json +++ b/sippy-ng/package-lock.json @@ -46,7 +46,7 @@ "react-joyride": "^3.2.0", "react-markdown": "^8.0.7", "react-plotly.js": "^2.6.0", - "react-router": "7.18.2", + "react-router": "^7.18.2", "remark-gfm": "^3.0.1", "timelines-chart": "^2.12.1", "universal-cookie": "^7.2.1", diff --git a/sippy-ng/package.json b/sippy-ng/package.json index f32e303ccb..6ef25c537f 100644 --- a/sippy-ng/package.json +++ b/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": "7.18.2", + "react-router": "^7.18.2", "remark-gfm": "^3.0.1", "timelines-chart": "^2.12.1", "universal-cookie": "^7.2.1",