build(deps): upgrade react-router to v6

package.json

@@ -68,7 +68,6 @@
     "prettier": "^3.0.3",
     "prop-types": "^15.7.2",
     "raw-loader": "^4.0.2",
-    "react-router-dom": "^5.3.4",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.11",
     "rimraf": "^4.1.2",
@@ -87,8 +86,7 @@
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.0",
     "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.8.0",
-    "yarn": "^1.22.19"
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
     "@patternfly/quickstarts": "^2.3.3",
@@ -101,7 +99,7 @@
     "@patternfly/react-topology": "4.91.27",
     "@reduxjs/toolkit": "^1.9.3",
     "@types/lodash": "^4.14.191",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react": "^17.0.69",
     "dayjs": "^1.11.7",
     "i18next": "^22.4.10",
     "i18next-browser-languagedetector": "^7.0.1",
@@ -114,9 +112,13 @@
     "react-i18next": "^12.3.1",
     "react-joyride": "^2.5.3",
     "react-redux": "^8.0.5",
+    "react-router-dom": "^6.17.0",
     "rxjs": "^7.8.0",
     "semver": "^7.5.4",
     "showdown": "^2.1.0"
   },
+  "resolutions": {
+    "@types/react": "^17.0.69"
+  },
   "packageManager": "[email protected]"
 }

src/app/AppLayout/AppLayout.tsx

@@ -81,7 +81,7 @@ import {
 import _ from 'lodash';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, matchPath, NavLink, useHistory, useLocation } from 'react-router-dom';
+import { Link, matchPath, NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { map } from 'rxjs/operators';
 
 export interface AppLayoutProps {
@@ -92,7 +92,6 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const serviceContext = React.useContext(ServiceContext);
   const notificationsContext = React.useContext(NotificationsContext);
   const addSubscription = useSubscriptions();
-  const routerHistory = useHistory();
   const { t } = useTranslation();
   const {
     setState: setJoyState,
@@ -117,6 +116,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const [errorNotificationsCount, setErrorNotificationsCount] = React.useState(0);
   const [activeLevel, setActiveLevel] = React.useState(FeatureLevel.PRODUCTION);
   const location = useLocation();
+  const navigate = useNavigate();
   const [theme] = useTheme();
 
   React.useEffect(() => {
@@ -251,10 +251,6 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     [isMobileView, setIsNavOpen],
   );
 
-  const handleSettingsButtonClick = React.useCallback(() => {
-    routerHistory.push('/settings');
-  }, [routerHistory]);
-
   const handleNotificationCenterToggle = React.useCallback(() => {
     notificationsContext.setDrawerState(!isNotificationDrawerExpanded);
   }, [isNotificationDrawerExpanded, notificationsContext]);
@@ -272,13 +268,12 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   }, [serviceContext.login, addSubscription]);
 
   const handleLanguagePref = React.useCallback(() => {
-    if (routerHistory.location.pathname === '/settings') {
+    if (location.pathname === '/settings') {
       selectTab(SettingTab.GENERAL);
     } else {
-      const query = new URLSearchParams({ tab: tabAsParam(SettingTab.GENERAL) });
-      routerHistory.push(`/settings?${query}`);
+      navigate(`/settings?${new URLSearchParams({ tab: tabAsParam(SettingTab.GENERAL) })}`);
     }
-  }, [routerHistory]);
+  }, [location, navigate]);
 
   const handleUserInfoToggle = React.useCallback(() => setShowUserInfoDropdown((v) => !v), [setShowUserInfoDropdown]);
 
@@ -400,13 +395,14 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button
-                    onClick={handleSettingsButtonClick}
                     variant="plain"
-                    icon={<CogIcon size="sm" />}
                     aria-label="Settings"
                     data-tour-id="settings-link"
                     data-quickstart-id="settings-link"
-                  />
+                    component={(props) => <Link {...props} to="/settings" />}
+                  >
+                    <CogIcon size="sm" />
+                  </Button>
                 </ToolbarItem>
                 <ToolbarItem>
                   <ApplicationLauncher
@@ -441,7 +437,6 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
       unreadNotificationsCount,
       errorNotificationsCount,
       handleNotificationCenterToggle,
-      handleSettingsButtonClick,
       handleHelpToggle,
       setShowUserInfoDropdown,
       showUserIcon,
@@ -489,7 +484,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const isActiveRoute = React.useCallback(
     (route: IAppRoute): boolean => {
       const match = matchPath(location.pathname, route.path);
-      if (match && match.isExact) {
+      if (match) {
         return true;
       } else if (route.children) {
         let childMatch = false;
@@ -521,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/SslErrorModal.tsx

@@ -16,20 +16,20 @@
 import { portalRoot } from '@app/utils/utils';
 import { Button, Modal, ModalVariant, Text } from '@patternfly/react-core';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 export interface SslErrorModalProps {
   visible: boolean;
   onDismiss: () => void;
 }
 
 export const SslErrorModal: React.FC<SslErrorModalProps> = ({ visible, onDismiss }) => {
-  const routerHistory = useHistory();
+  const navigate = useNavigate();
 
-  const handleClick = () => {
-    routerHistory.push('/security');
+  const handleClick = React.useCallback(() => {
+    navigate('/security');
     onDismiss();
-  };
+  }, [navigate, onDismiss]);
 
   return (
     <Modal

src/app/Archives/Archives.tsx

@@ -22,7 +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 { useHistory, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { of } from 'rxjs';
 import { AllArchivedRecordingsTable } from './AllArchivedRecordingsTable';
 import { AllTargetsArchivedRecordingsTable } from './AllTargetsArchivedRecordingsTable';
@@ -48,7 +48,7 @@ export interface ArchivesProps {}
 
 export const Archives: React.FC<ArchivesProps> = ({ ...props }) => {
   const { search, pathname } = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
 
@@ -64,8 +64,8 @@ export const Archives: React.FC<ArchivesProps> = ({ ...props }) => {
 
   const onTabSelect = React.useCallback(
     (_: React.MouseEvent, key: string | number) =>
-      switchTab(history, pathname, search, { tabKey: 'tab', tabValue: `${key}` }),
-    [history, pathname, search],
+      switchTab(navigate, pathname, search, { tabKey: 'tab', tabValue: `${key}` }),
+    [navigate, pathname, search],
   );
 
   const uploadTargetAsObs = React.useMemo(() => of(uploadAsTarget), []);

src/app/CreateRecording/CustomRecordingForm.tsx

@@ -48,7 +48,7 @@ import {
 } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { forkJoin } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { EventTemplateIdentifier, CustomRecordingFormData } from './types';
@@ -57,9 +57,9 @@ import { isDurationValid, isRecordingNameValid } from './utils';
 export const CustomRecordingForm: React.FC = () => {
   const context = React.useContext(ServiceContext);
   const notifications = React.useContext(NotificationsContext);
-  const history = useHistory();
+  const navigate = useNavigate();
   const addSubscription = useSubscriptions();
-  const location = useLocation<Partial<CustomRecordingFormData> | undefined>();
+  const location = useLocation();
 
   const [formData, setFormData] = React.useState<CustomRecordingFormData>({
     name: '',
@@ -82,7 +82,7 @@ export const CustomRecordingForm: React.FC = () => {
   const [loading, setLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
 
-  const exitForm = React.useCallback(() => history.goBack(), [history]);
+  const exitForm = React.useCallback(() => navigate('..', { relative: 'path' }), [navigate]);
 
   const handleCreateRecording = React.useCallback(
     (recordingAttributes: RecordingAttributes) => {
@@ -357,6 +357,7 @@ export const CustomRecordingForm: React.FC = () => {
   }, [addSubscription, context.target, refreshFormOptions]);
 
   React.useEffect(() => {
+    const prefilled: Partial<CustomRecordingFormData> = location.state || {};
     const {
       name,
       restart,
@@ -370,7 +371,7 @@ export const CustomRecordingForm: React.FC = () => {
       maxSizeUnit,
       continuous,
       skipDurationCheck,
-    } = location.state || {};
+    } = prefilled;
     setFormData((old) => ({
       ...old,
       name: name ?? '',
@@ -631,7 +632,7 @@ export const CustomRecordingForm: React.FC = () => {
           >
             {loading ? 'Creating' : 'Create'}
           </Button>
-          <Button variant="secondary" onClick={history.goBack} isDisabled={loading}>
+          <Button variant="secondary" onClick={exitForm} isDisabled={loading}>
             Cancel
           </Button>
         </ActionGroup>

src/app/CreateRecording/SnapshotRecordingForm.tsx

@@ -20,18 +20,20 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { ActionGroup, Button, Form, Text, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { first } from 'rxjs';
 
 export interface SnapshotRecordingFormProps {}
 
 export const SnapshotRecordingForm: React.FC<SnapshotRecordingFormProps> = (_) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
   const [loading, setLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
 
+  const exitForm = React.useCallback(() => navigate('..', { relative: 'path' }), [navigate]);
+
   const handleCreateSnapshot = React.useCallback(() => {
     setLoading(true);
     addSubscription(
@@ -41,11 +43,11 @@ export const SnapshotRecordingForm: React.FC<SnapshotRecordingFormProps> = (_) =
         .subscribe((success) => {
           setLoading(false);
           if (success) {
-            history.push('/recordings');
+            exitForm();
           }
         }),
     );
-  }, [addSubscription, context.api, history, setLoading]);
+  }, [addSubscription, context.api, exitForm, setLoading]);
 
   const createButtonLoadingProps = React.useMemo(
     () =>
@@ -117,7 +119,7 @@ export const SnapshotRecordingForm: React.FC<SnapshotRecordingFormProps> = (_) =
           <Button variant="primary" onClick={handleCreateSnapshot} isDisabled={loading} {...createButtonLoadingProps}>
             {loading ? 'Creating' : 'Create'}
           </Button>
-          <Button variant="secondary" onClick={history.goBack} isDisabled={loading}>
+          <Button variant="secondary" onClick={exitForm} isDisabled={loading}>
             Cancel
           </Button>
         </ActionGroup>

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

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { CustomRecordingFormData } from '@app/CreateRecording/types';
 import {
   DashboardCardTypeProps,
   DashboardCardFC,
@@ -43,7 +42,7 @@ import {
 import { DataSourceIcon, ExternalLinkAltIcon, SyncAltIcon, TachometerAltIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { interval } from 'rxjs';
 import { DashboardCard } from '../../DashboardCard';
 import { ChartContext } from '../context';
@@ -91,7 +90,7 @@ export const JFRMetricsChartCard: DashboardCardFC<JFRMetricsChartCardProps> = (p
   const [t] = useTranslation();
   const serviceContext = React.useContext(ServiceContext);
   const controllerContext = React.useContext(ChartContext);
-  const history = useHistory();
+  const navigate = useNavigate();
   const addSubscription = useSubscriptions();
   const [theme] = useTheme();
   const [controllerState, setControllerState] = React.useState(ControllerState.NO_DATA);
@@ -204,8 +203,7 @@ export const JFRMetricsChartCard: DashboardCardFC<JFRMetricsChartCardProps> = (p
   }, [props.actions, props.chartKind, props.duration, props.period, t, controllerState, actions]);
 
   const handleCreateRecording = React.useCallback(() => {
-    history.push({
-      pathname: '/recordings/create',
+    navigate('/recordings/create', {
       state: {
         name: RECORDING_NAME,
         template: {
@@ -222,9 +220,9 @@ export const JFRMetricsChartCard: DashboardCardFC<JFRMetricsChartCardProps> = (p
         maxAgeUnit: 1, // seconds
         maxSize: 100 * 1024 * 1024,
         maxSizeUnit: 1, // bytes
-      } as Partial<CustomRecordingFormData>,
+      },
     });
-  }, [history]);
+  }, [navigate]);
 
   return (
     <DashboardCard

src/app/Dashboard/Dashboard.tsx

@@ -30,7 +30,7 @@ import { Grid, GridItem } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { AddCard } from './AddCard';
 import { ChartContext } from './Charts/context';
 import { JFRMetricsChartController } from './Charts/jfr/JFRMetricsChartController';
@@ -43,7 +43,7 @@ import { getCardDescriptorByName, validateCardConfig } from './utils';
 export interface DashboardComponentProps {}
 
 export const Dashboard: React.FC<DashboardComponentProps> = (_) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const serviceContext = React.useContext(ServiceContext);
   const dispatch = useDispatch<StateDispatch>();
   const { t } = useTranslation();
@@ -130,7 +130,7 @@ export const Dashboard: React.FC<DashboardComponentProps> = (_) => {
                       key={`${cfg.name}-actions`}
                       onRemove={() => handleRemove(idx)}
                       onResetSize={() => handleResetSize(idx)}
-                      onView={() => history.push(`/d-solo?layout=${currLayout.name}&cardId=${cfg.id}`)}
+                      onView={() => navigate(`/d-solo?layout=${currLayout.name}&cardId=${cfg.id}`)}
                     />,
                   ],
                 })