chore(router): migrate Links and Switches

src/app/AppLayout/AppLayout.tsx

@@ -81,8 +81,7 @@ import {
 import _ from 'lodash';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, matchPath, NavLink, useLocation } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { Link, matchPath, NavLink, useLocation , useNavigate } from 'react-router-dom-v5-compat';
 import { map } from 'rxjs/operators';
 
 export interface AppLayoutProps {
@@ -517,9 +516,9 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                         isActive={isActiveRoute(route)}
                       >
                         <NavLink
-                          exact
+                          end
                           to={route.path}
-                          activeClassName="pf-m-current"
+                          className={(active) => active? "pf-m-current": undefined}
                           data-quickstart-id={`nav-${cleanDataId(route.label)}-tab`}
                           data-tour-id={`${cleanDataId(route.label)}`}
                         >

src/app/AppLayout/AuthModal.tsx

@@ -18,7 +18,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { Modal, ModalVariant, Text } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { Observable, filter, first, map, mergeMap } from 'rxjs';
 import { CredentialAuthForm } from './CredentialAuthForm';
 

src/app/Archives/Archives.tsx

@@ -22,8 +22,7 @@ import { getActiveTab, switchTab } from '@app/utils/utils';
 import { Card, CardBody, EmptyState, EmptyStateIcon, Tab, Tabs, TabTitleText, Title } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation , useNavigate } from 'react-router-dom-v5-compat';
 import { of } from 'rxjs';
 import { AllArchivedRecordingsTable } from './AllArchivedRecordingsTable';
 import { AllTargetsArchivedRecordingsTable } from './AllTargetsArchivedRecordingsTable';

src/app/BreadcrumbPage/BreadcrumbPage.tsx

@@ -23,7 +23,7 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { BreadcrumbTrail } from './types';
 import { isItemFilled } from './utils';
 

src/app/CreateRecording/CustomRecordingForm.tsx

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

src/app/Dashboard/DashboardSolo.tsx

@@ -19,8 +19,7 @@ import { Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateIcon, Title } f
 import { MonitoringIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation, withRouter } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { CardConfig } from './types';
 import { getCardDescriptorByName } from './utils';
 
@@ -90,4 +89,4 @@ const DashboardSolo: React.FC<DashboardSoloProps> = () => {
   return content;
 };
 
-export default withRouter(DashboardSolo);
+export default DashboardSolo;

src/app/Events/Events.tsx

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

src/app/NotFound/NotFound.tsx

@@ -28,7 +28,7 @@ import {
 } from '@patternfly/react-core';
 import { MapMarkedAltIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { NotFoundCard } from './NotFoundCard';
 
 export interface NotFoundProps {}

src/app/NotFound/NotFoundCard.tsx

@@ -16,7 +16,7 @@
 
 import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 
 export interface NotFoundCardProps {
   title: React.ReactNode;

src/app/QuickStarts/QuickStartsCatalogPage.tsx

@@ -16,7 +16,6 @@
 import { QuickStartCatalogPage } from '@patternfly/quickstarts';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { withRouter } from 'react-router-dom';
 
 export interface QuickStartsCatalogPageProps {}
 
@@ -36,4 +35,4 @@ const QuickStartsCatalogPage: React.FC<QuickStartsCatalogPageProps> = (_) => {
   );
 };
 
-export default withRouter(QuickStartsCatalogPage);
+export default QuickStartsCatalogPage;

src/app/Rules/Rules.tsx

@@ -51,8 +51,7 @@ import {
   Tr,
 } from '@patternfly/react-table';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { Link , useNavigate } from 'react-router-dom-v5-compat';
 import { first } from 'rxjs/operators';
 import { RuleDeleteWarningModal } from './RuleDeleteWarningModal';
 import { RuleUploadModal } from './RulesUploadModal';

src/app/SecurityPanel/Credentials/StoreCredentials.tsx

@@ -44,7 +44,7 @@ import {
 import { OutlinedQuestionCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { forkJoin } from 'rxjs';
 import { SecurityCard } from '../types';
 import { CreateCredentialModal } from './CreateCredentialModal';

src/app/Settings/Config/CredentialsStorage.tsx

@@ -18,7 +18,7 @@ import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { SettingTab, UserSetting } from '../types';
 
 export interface Location {

src/app/Settings/Settings.tsx

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

src/app/Shared/Components/FileUploads.tsx

@@ -24,7 +24,6 @@ import {
 } from '@patternfly/react-core';
 import { InProgressIcon, UploadIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { Prompt } from 'react-router-dom';
 import { Subject } from 'rxjs';
 
 export type ProgressVariant = 'success' | 'danger' | 'warning';
@@ -258,7 +257,7 @@ export const MultiFileUpload: React.FC<MultiFileUploadProps> = ({
 
   return (
     <>
-      <Prompt when={uploading} message="Are you sure you wish to cancel the file upload?" />
+      {/* <Prompt when={uploading} message="Are you sure you wish to cancel the file upload?" /> */}
       <CancelUploadModal
         visible={showCancelPrompt}
         title="Upload in Progress"

src/app/TargetView/TargetContextSelector.tsx

@@ -21,7 +21,7 @@ import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { getFromLocalStorage, removeFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
 import { Button, Divider, Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 
 export interface TargetContextSelectorProps {
   className?: string;

src/app/Topology/Actions/QuickSearchPanel.tsx

@@ -48,8 +48,7 @@ import { SearchIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 import { useHover } from '@patternfly/react-topology';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { Link , useNavigate } from 'react-router-dom-v5-compat';
 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

@@ -19,11 +19,10 @@ 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 } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { Link , LinkProps, useNavigate } from 'react-router-dom-v5-compat';
 import { ActionUtils } from './types';
 
-export interface WarningResolverAsLinkProps extends React.ComponentProps<Link> {}
+export interface WarningResolverAsLinkProps extends LinkProps {}
 
 export const WarningResolverAsLink: React.FC<WarningResolverAsLinkProps> = ({ to, children, ...props }) => {
   return (

src/app/Topology/Actions/quicksearches/custom-target.tsx

@@ -30,8 +30,8 @@ const _CustomTargetSearchItem: QuickSearchItem = {
   descriptionShort: 'Define a custom target definition.',
   descriptionFull: 'Provide a JMX Service URL along with necessary credentials to point to a target JVM.',
   featureLevel: FeatureLevel.PRODUCTION,
-  createAction: ({ history }) => {
-    history.push('/topology/create-custom-target');
+  createAction: ({ navigate }) => {
+    navigate('/topology/create-custom-target');
   },
 };
 

src/app/Topology/Entity/EntityDetails.tsx

@@ -48,7 +48,7 @@ import { css } from '@patternfly/react-styles';
 import { ExpandableRowContent, TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { GraphElement, NodeStatus } from '@patternfly/react-topology';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { catchError, concatMap, map, of } from 'rxjs';
 import { EmptyText } from '../../Shared/Components/EmptyText';
 import { NodeAction } from '../Actions/types';

src/app/Topology/Entity/utils.tsx

@@ -35,7 +35,7 @@ import {
   Popover,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { LinkProps } from 'react-router-dom-v5-compat';
 import {
   catchError,
   combineLatest,
@@ -240,7 +240,7 @@ export const getResourceListPatchFn = (
 // TODO: Revisit when updating to react-router v6
 export const getLinkPropsForTargetResource = (
   resourceType: TargetOwnedResourceType | TargetRelatedResourceType,
-): React.ComponentProps<Link> => {
+): LinkProps => {
   switch (resourceType) {
     case 'activeRecordings':
       return { to: { pathname: '/recordings', search: '?tab=active-recording' } };

src/app/Topology/Shared/Components/TopologyEmptyState.tsx

@@ -29,7 +29,7 @@ import {
 import { TopologyIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { DiscoveryTreeContext } from '../utils';
 
 export interface TopologyEmptyStateProps {}

src/app/Topology/Topology.tsx

@@ -28,7 +28,6 @@ import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { Bullseye, Card, CardBody } from '@patternfly/react-core';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 import { TopologyGraphView } from './GraphView/TopologyGraphView';
 import { TopologyListView } from './ListView/TopologyListView';
 import { DiscoveryTreeContext } from './Shared/utils';
@@ -160,4 +159,4 @@ export const Topology: React.FC<TopologyProps> = ({ ..._props }) => {
   );
 };
 
-export default withRouter(Topology);
+export default Topology;

src/app/index.tsx

@@ -27,8 +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';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { BrowserRouter as Router , CompatRouter } from 'react-router-dom-v5-compat';
 import { JoyrideProvider } from './Joyride/JoyrideProvider';
 
 export const App: React.FC = () => (

src/app/routes.tsx

@@ -15,8 +15,8 @@
  */
 
 import * as React from 'react';
-import { RouteComponentProps, Switch, useLocation } from 'react-router-dom';
-import { CompatRoute } from 'react-router-dom-v5-compat';
+import { RouteComponentProps } from 'react-router-dom';
+import { useLocation , CompatRoute, Routes } from 'react-router-dom-v5-compat';
 import About from './About/About';
 import Archives from './Archives/Archives';
 import CreateRecording from './CreateRecording/CreateRecording';
@@ -241,23 +241,22 @@ const PageNotFound = ({ title }: { title: string }) => {
   return <CompatRoute component={NotFound} />;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface AppRoutesProps {}
 
 const AppRoutes: React.FC<AppRoutesProps> = (_) => {
   const loggedIn = useLogin();
   const activeLevel = useFeatureLevel();
 
   return (
-    <Switch>
+    <Routes>
       {flatten(routes)
         .filter((r) => (loggedIn ? r.component !== Login : r.anonymous))
         .filter((r) => r.featureLevel === undefined || r.featureLevel >= activeLevel)
         .map(({ path, exact, component, title }, idx) => (
           <RouteWithTitleUpdates path={path} exact={exact} component={component} key={idx} title={title} />
-        ))}
+      ))}
       <PageNotFound title="404 Page Not Found" />
-    </Switch>
+    </Routes>
   );
 };