build(deps): upgrade react-router to 6.30.1

package.json

@@ -114,8 +114,8 @@
     "react-i18next": "^15.1.0",
     "react-joyride": "^2.9.3",
     "react-redux": "^8.0.5",
-    "react-router-dom": "5.3.x",
-    "react-router-dom-v5-compat": "^6.11.2",
+    "react-router": "^6.30.1",
+    "react-router-dom": "^6.30.1",
     "rxjs": "^7.8.1",
     "semver": "^7.6.0",
     "showdown": "^2.1.0"

src/app/AppLayout/AppLayout.tsx

@@ -84,7 +84,7 @@ import {
 import _ from 'lodash';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { matchPath, NavLink, useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { matchPath, NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { map } from 'rxjs/operators';
 import { LogoutIcon } from './LogoutIcon';
 import { ThemeToggle } from './ThemeToggle';

src/app/AppLayout/SslErrorModal.tsx

@@ -16,7 +16,7 @@
 import { portalRoot, toPath } from '@app/utils/utils';
 import { Button, Modal, ModalVariant, Text } from '@patternfly/react-core';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 
 export interface SslErrorModalProps {
   visible: boolean;

src/app/Archives/Archives.tsx

@@ -35,7 +35,7 @@ import {
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { of } from 'rxjs';
 import { AllArchivedRecordingsTable } from './AllArchivedRecordingsTable';
 import { AllTargetsArchivedRecordingsTable } from './AllTargetsArchivedRecordingsTable';

src/app/BreadcrumbPage/BreadcrumbPage.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import {
   Breadcrumb,
   BreadcrumbHeading,
@@ -23,7 +24,6 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
 import { BreadcrumbTrail } from './types';
 import { isItemFilled } from './utils';
 
@@ -40,7 +40,7 @@ export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = ({ pageTitle, bread
         <Breadcrumb>
           {(breadcrumbs || []).map(({ title, path }) => (
             <BreadcrumbItem key={path}>
-              <Link to={path}>{title}</Link>
+              <CryostatLink to={path}>{title}</CryostatLink>
             </BreadcrumbItem>
           ))}
           <BreadcrumbHeading>{pageTitle}</BreadcrumbHeading>

src/app/CreateRecording/CustomRecordingForm.tsx

@@ -57,7 +57,7 @@ import {
 import { HelpIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { forkJoin } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { EventTemplateIdentifier, CustomRecordingFormData } from './types';

src/app/CreateRecording/SnapshotRecordingForm.tsx

@@ -20,7 +20,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { ActionGroup, Button, Form, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { first } from 'rxjs';
 
 export interface SnapshotRecordingFormProps {}

src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx

@@ -44,7 +44,7 @@ import {
 import { DataSourceIcon, ExternalLinkAltIcon, SyncAltIcon, TachometerAltIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { interval } from 'rxjs';
 import { DashboardCard } from '../../DashboardCard';
 import { ChartContext } from '../context';

src/app/Dashboard/Dashboard.tsx

@@ -31,7 +31,7 @@ import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import { Grid, GridItem } from '@patternfly/react-core';
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { AddCard } from './AddCard';
 import { ChartContext } from './Charts/context';
 import { JFRMetricsChartController } from './Charts/jfr/JFRMetricsChartController';

src/app/Dashboard/DashboardSolo.tsx

@@ -28,7 +28,7 @@ import {
 import { MonitoringIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { CardConfig } from './types';
 import { getCardDescriptorByName } from './utils';
 

src/app/Events/EventTemplates.tsx

@@ -61,7 +61,7 @@ import {
 } from '@patternfly/react-table';
 import _ from 'lodash';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { forkJoin, Observable, of } from 'rxjs';
 import { catchError, concatMap, defaultIfEmpty, first, tap } from 'rxjs/operators';
 

src/app/Events/Events.tsx

@@ -19,7 +19,7 @@ import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { getActiveTab, switchTab } from '@app/utils/utils';
 import { Card, CardBody, Tab, Tabs } from '@patternfly/react-core';
 import * as React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { EventTemplates } from './EventTemplates';
 import { EventTypes } from './EventTypes';
 

src/app/JMCAgent/JMCAgent.tsx

@@ -19,7 +19,7 @@ import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { getActiveTab, switchTab } from '@app/utils/utils';
 import { Card, CardBody, Tab, Tabs, Tooltip } from '@patternfly/react-core';
 import * as React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { concatMap, filter } from 'rxjs';
 import { AgentLiveProbes } from './AgentLiveProbes';
 import { AgentProbeTemplates } from './AgentProbeTemplates';

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -77,7 +77,7 @@ import { EllipsisVIcon, ProcessAutomationIcon } from '@patternfly/react-icons';
 import { SortByDirection, Tbody, Td, Tr } from '@patternfly/react-table';
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { combineLatest, forkJoin, Observable, Subject } from 'rxjs';
 import { concatMap, filter, first } from 'rxjs/operators';
 import { DeleteWarningModal } from '../Modal/DeleteWarningModal';

src/app/Reports/Reports.tsx

@@ -57,7 +57,7 @@ import {
 import { ProcessAutomationIcon, SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { concatMap, filter, first, map, tap } from 'rxjs';
 
 type ReportEntry = { loading: boolean; target: Target; hasSources: boolean; report: AggregateReport };

src/app/Rules/CreateRule.tsx

@@ -59,7 +59,7 @@ import { HelpIcon } from '@patternfly/react-icons';
 import _ from 'lodash';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { combineLatest, forkJoin, iif, of, Subject } from 'rxjs';
 import { catchError, debounceTime, map, switchMap, tap } from 'rxjs/operators';
 import { RuleFormData } from './types';

src/app/Rules/Rules.tsx

@@ -71,7 +71,7 @@ import {
 import _ from 'lodash';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { first } from 'rxjs/operators';
 import { AUTOANALYZE_KEY } from './CreateRule';
 import { RuleDeleteWarningModal } from './RuleDeleteWarningModal';

src/app/Settings/Settings.tsx

@@ -38,7 +38,7 @@ import {
 } from '@patternfly/react-core';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { AutoRefresh } from './Config/AutoRefresh';
 import { ChartCards } from './Config/ChartCards';
 import { DatetimeControl } from './Config/DatetimeControl';

src/app/Shared/Components/CryostatLink.tsx

@@ -16,7 +16,7 @@
 
 import { BASEPATH, toPath } from '@app/utils/utils';
 import React from 'react';
-import { Link, LinkProps, Path, To } from 'react-router-dom-v5-compat';
+import { Link, LinkProps, Path, To } from 'react-router-dom';
 
 export interface CryostatLinkProps extends LinkProps {}
 

src/app/Topology/Actions/CreateTarget.tsx

@@ -55,7 +55,7 @@ import {
 import { CheckCircleIcon, ExclamationCircleIcon, PendingIcon, SyncAltIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 
 export const isValidTargetConnectURL = (connectUrl?: string) => connectUrl && !connectUrl.match(/\s+/);
 

src/app/Topology/Actions/NodeActions.tsx

@@ -29,7 +29,7 @@ import {
 import { css } from '@patternfly/react-styles';
 import { ContextMenuItem as PFContextMenuItem } from '@patternfly/react-topology';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { Observable, Subject, switchMap } from 'rxjs';
 import { GraphElement, ListElement } from '../Shared/types';
 import { ActionUtils, MenuItemComponent, MenuItemVariant, NodeActionFunction } from './types';

src/app/Topology/Actions/QuickSearchPanel.tsx

@@ -49,7 +49,7 @@ import { css } from '@patternfly/react-styles';
 import { useHover } from '@patternfly/react-topology';
 import _ from 'lodash';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import QuickSearchIcon from '../../Shared/Components/QuickSearchIcon';
 import quickSearches, { QuickSearchId, quickSearchIds } from './quicksearches/all-quick-searches';
 import { QuickSearchItem } from './types';

src/app/Topology/Actions/WarningResolver.tsx

@@ -14,21 +14,22 @@
  * limitations under the License.
  */
 import { CreateCredentialModal } from '@app/SecurityPanel/Credentials/CreateCredentialModal';
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import { TargetNode } from '@app/Shared/Services/api.types';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Button, ButtonProps } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link, LinkProps, useNavigate } from 'react-router-dom-v5-compat';
+import { LinkProps, useNavigate } from 'react-router-dom';
 import { ActionUtils } from './types';
 
 export interface WarningResolverAsLinkProps extends LinkProps {}
 
 export const WarningResolverAsLink: React.FC<WarningResolverAsLinkProps> = ({ to, children, ...props }) => {
   return (
-    <Link to={to} {...props}>
+    <CryostatLink to={to} {...props}>
       {children}
-    </Link>
+    </CryostatLink>
   );
 };
 

src/app/Topology/Actions/types.ts

@@ -20,7 +20,7 @@ import { Services } from '@app/Shared/Services/Services';
 import { LabelProps, DropdownItemProps } from '@patternfly/react-core';
 import { ContextMenuItem as PFContextMenuItem } from '@patternfly/react-topology';
 import * as React from 'react';
-import { NavigateFunction } from 'react-router-dom-v5-compat';
+import { NavigateFunction } from 'react-router-dom';
 import { Observable } from 'rxjs';
 import type { GraphElement, ListElement } from '../Shared/types';
 

src/app/Topology/Entity/utils.tsx

@@ -36,7 +36,7 @@ import {
   Popover,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { LinkProps } from 'react-router-dom-v5-compat';
+import { LinkProps } from 'react-router-dom';
 import {
   catchError,
   combineLatest,

src/app/index.tsx

@@ -27,7 +27,7 @@ import { NotificationsContext, NotificationsInstance } from '@app/Shared/Service
 import { ServiceContext, defaultServices } from '@app/Shared/Services/Services';
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom-v5-compat';
+import { BrowserRouter as Router } from 'react-router-dom';
 import { JoyrideProvider } from './Joyride/JoyrideProvider';
 import { CapabilitiesContext, defaultCapabilities } from './Shared/Services/Capabilities';
 

src/app/routes.tsx

@@ -15,7 +15,7 @@
  */
 
 import * as React from 'react';
-import { useLocation, Route, Routes } from 'react-router-dom-v5-compat';
+import { useLocation, Route, Routes } from 'react-router-dom';
 import About from './About/About';
 import Archives from './Archives/Archives';
 import CreateRecording from './CreateRecording/CreateRecording';

src/app/utils/utils.ts

@@ -19,7 +19,7 @@ import { ISortBy, SortByDirection, ThProps } from '@patternfly/react-table';
 import humanizeDuration from 'humanize-duration';
 import { TFunction } from 'i18next';
 import _ from 'lodash';
-import { NavigateFunction } from 'react-router-dom-v5-compat';
+import { NavigateFunction } from 'react-router-dom';
 import { BehaviorSubject, Observable } from 'rxjs';
 import semverGt from 'semver/functions/gt';
 import semverValid from 'semver/functions/valid';

src/test/CreateRecording/CustomRecordingForm.test.tsx

@@ -30,8 +30,8 @@ jest.mock('@patternfly/react-core', () => ({
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...jest.requireActual('react-router-dom-v5-compat'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockNavigate,
 }));
 

src/test/CreateRecording/SnapshotRecordingForm.test.tsx

@@ -57,8 +57,8 @@ jest.spyOn(defaultServices.target, 'authRetry').mockReturnValue(of());
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...jest.requireActual('react-router-dom-v5-compat'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockNavigate,
 }));
 

src/test/Dashboard/Charts/jfr/JFRMetricsChartCard.test.tsx

@@ -60,8 +60,8 @@ const mockChartContext = {
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...jest.requireActual('react-router-dom-v5-compat'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockNavigate,
 }));
 

src/test/Rules/CreateRule.test.tsx

@@ -66,8 +66,8 @@ const mockRule: Rule = {
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...jest.requireActual('react-router-dom-v5-compat'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockNavigate,
 }));
 

src/test/Settings/Settings.test.tsx

@@ -110,8 +110,8 @@ jest.mock('@app/Settings/Config/Theme', () => ({
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...jest.requireActual('react-router-dom-v5-compat'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockNavigate,
 }));
 

src/test/utils.tsx

@@ -32,7 +32,7 @@ import userEvent from '@testing-library/user-event';
 import { t, TOptions } from 'i18next';
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom-v5-compat';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import renderer from 'react-test-renderer';
 
 export interface ProviderInstance<T> {