build(deps): fix peer deps, upgrade react router

.github/workflows/ci.yaml

@@ -32,5 +32,6 @@ jobs:
     - uses: bahmutov/npm-install@v1
     - run: yarn format:check
   # - run: yarn lint
+    - run: yarn dependency:check
     - run: yarn build:notests
     - run: yarn test:ci

jest.config.js

@@ -38,7 +38,7 @@ module.exports = {
   testEnvironment: "jsdom",
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  // snapshotSerializers: ['enzyme-to-json/serializer'],
 
   // The glob patterns Jest uses to detect test files
   testMatch: [
@@ -57,7 +57,7 @@ module.exports = {
     }
   },
 
-  // An array of regexp pattern strings that are matched against all source file paths before transformation. 
+  // An array of regexp pattern strings that are matched against all source file paths before transformation.
   // If the file path matches any of the patterns, it will not be transformed.
   transformIgnorePatterns: ["/node_modules/(?!@patternfly)"]
 };

package.json

@@ -7,7 +7,8 @@
   "license": "UPL",
   "private": true,
   "scripts": {
-    "build": "npm-run-all -l build:notests test",
+    "dependency:check": "check-peer-dependencies --findSolutions --runOnlyOnRootDependencies",
+    "build": "npm-run-all -l dependency:check build:notests test",
     "build:notests": "webpack --config webpack.prod.js",
     "clean": "rimraf dist",
     "start:dev": "webpack serve --hot --color --progress --config webpack.dev.js",
@@ -27,16 +28,13 @@
     "build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
     "build:bundle-analyze": "webpack-bundle-analyzer ./stats.json dist",
     "build:bundle-profile-analyze": "npm-run-all -l build:bundle-profile build:bundle-analyze",
-    "yarn:install": "yarn install",
     "yarn:frzinstall": "yarn install --immutable"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
-    "@types/enzyme": "^3.10.12",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.2",
     "@types/js-base64": "3.3.1",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -45,9 +43,6 @@
     "css-loader": "^6.7.2",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "dotenv-webpack": "^8.0.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -66,8 +61,7 @@
     "prop-types": "^15.7.2",
     "raw-loader": "^4.0.2",
     "react-axe": "^3.4.1",
-    "react-docgen-typescript-loader": "^3.7.2",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "^5.0.0",
     "regenerator-runtime": "^0.13.11",
     "rimraf": "^3.0.2",
     "rxjs": "^7.6.0",
@@ -94,10 +88,16 @@
     "@patternfly/react-table": "^4.111.45",
     "@reduxjs/toolkit": "^1.9.0",
     "@types/lodash": "^4.14.191",
+    "@types/react-router-dom": "^5.0.0",
+    "@types/react-test-renderer": "^17.0.0",
+    "check-peer-dependencies": "^4.1.0",
+    "history": "^5.3.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^17.0.0",
     "react-redux": "^8.0.5",
-    "react-router-last-location": "^2.0.1"
+    "react-router": "^5.0.0",
+    "react-router-dom-v5-compat": "^6.4.5",
+    "react-test-renderer": "^17.0.0"
   },
   "packageManager": "yarn@3.3.0"
 }

src/app/AppLayout/AppLayout.tsx

@@ -66,7 +66,8 @@ import {
 } from '@patternfly/react-core';
 import { BellIcon, CaretDownIcon, CogIcon, HelpIcon, UserIcon } from '@patternfly/react-icons';
 import { map } from 'rxjs/operators';
-import { matchPath, NavLink, useHistory, useLocation } from 'react-router-dom';
+import { Link, matchPath, useLocation } from 'react-router-dom';
+import { NavLink } from 'react-router-dom-v5-compat';
 import { Notification, NotificationsContext } from '@app/Notifications/Notifications';
 import { AuthModal } from './AuthModal';
 import { SslErrorModal } from './SslErrorModal';
@@ -84,7 +85,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   const serviceContext = React.useContext(ServiceContext);
   const notificationsContext = React.useContext(NotificationsContext);
   const addSubscription = useSubscriptions();
-  const routerHistory = useHistory();
   const logoProps = {
     href: '/',
   };
@@ -191,10 +191,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
     [isMobileView, setIsNavOpenMobile]
   );
 
-  const handleSettingsButtonClick = React.useCallback(() => {
-    routerHistory.push('/settings');
-  }, [routerHistory.push]);
-
   const handleNotificationCenterToggle = React.useCallback(() => {
     setNotificationDrawerExpanded((isNotificationDrawerExpanded) => !isNotificationDrawerExpanded);
   }, [setNotificationDrawerExpanded]);
@@ -252,7 +248,9 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
             </NotificationBadge>
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
-            <Button onClick={handleSettingsButtonClick} variant="link" icon={<CogIcon color="white " size="sm" />} />
+            <Button variant="link" component={(props) => <Link {...props} to='/settings' />} >
+              <CogIcon color="white " size="sm" />
+            </Button>
             <Button onClick={handleAboutModalToggle} variant="link" icon={<HelpIcon color="white" size="sm" />} />
           </PageHeaderToolsItem>
           <PageHeaderToolsItem visibility={{ default: showUserIcon ? 'visible' : 'hidden' }}>
@@ -312,7 +310,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
                         id={`${route.label}-${idx}`}
                         isActive={isActiveRoute(route)}
                       >
-                        <NavLink exact to={route.path} activeClassName="pf-m-current">
+                        <NavLink end to={route.path} className={ ({ isActive }) => isActive ? "pf-m-current" : "" }>
                           {route.label}
                         </NavLink>
                       </NavItem>

src/app/AppLayout/SslErrorModal.tsx

@@ -37,19 +37,18 @@
  */
 import * as React from 'react';
 import { Button, Modal, ModalVariant, Text } from '@patternfly/react-core';
-import { useHistory, useRouteMatch } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 
 export interface SslErrorModalProps {
   visible: boolean;
   onDismiss: () => void;
 }
 
 export const SslErrorModal: React.FunctionComponent<SslErrorModalProps> = (props) => {
-  const routerHistory = useHistory();
-  const { url } = useRouteMatch();
+  const navigate = useNavigate();
 
   const handleClick = () => {
-    routerHistory.push('/security');
+    navigate('/security');
     props.onDismiss();
   };
 

src/app/CreateRecording/CreateRecording.tsx

@@ -40,6 +40,7 @@ import { TargetView } from '@app/TargetView/TargetView';
 import { Card, CardBody, Tab, Tabs } from '@patternfly/react-core';
 import { StaticContext } from 'react-router';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { CustomRecordingForm } from './CustomRecordingForm';
 import { SnapshotRecordingForm } from './SnapshotRecordingForm';
 import { TemplateType } from '@app/Shared/Services/Api.service';
@@ -58,15 +59,16 @@ export interface EventTemplate {
 
 const Comp: React.FunctionComponent<RouteComponentProps<{}, StaticContext, CreateRecordingProps>> = (props) => {
   const [activeTab, setActiveTab] = React.useState(0);
+  const location = useLocation();
 
   const onTabSelect = React.useCallback((evt, idx) => setActiveTab(Number(idx)), [setActiveTab]);
 
   const prefilled = React.useMemo(
     () => ({
-      templateName: props.location?.state?.templateName,
-      templateType: props.location?.state?.templateType,
+      templateName: location.state?.templateName,
+      templateType: location.state?.templateType,
     }),
-    [props.location]
+    [location]
   );
 
   return (

src/app/CreateRecording/CustomRecordingForm.tsx

@@ -59,7 +59,7 @@ import {
   ValidatedOptions,
 } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { concatMap, first, filter } from 'rxjs/operators';
 import { EventTemplate } from './CreateRecording';
 import { RecordingOptions, RecordingAttributes } from '@app/Shared/Services/Api.service';
@@ -87,7 +87,7 @@ export const DurationPattern = /^[1-9][0-9]*$/;
 export const CustomRecordingForm: React.FunctionComponent<CustomRecordingFormProps> = ({ prefilled }) => {
   const context = React.useContext(ServiceContext);
   const notifications = React.useContext(NotificationsContext);
-  const history = useHistory();
+  const navigate = useNavigate();
   const addSubscription = useSubscriptions();
 
   const [recordingName, setRecordingName] = React.useState('');
@@ -120,12 +120,12 @@ export const CustomRecordingForm: React.FunctionComponent<CustomRecordingFormPro
           .subscribe((success) => {
             setLoading(false);
             if (success) {
-              history.push('/recordings');
+              navigate('/recordings');
             }
           })
       );
     },
-    [addSubscription, context.api, history, setLoading]
+    [addSubscription, context.api, navigate, setLoading]
   );
 
   const handleContinuousChange = React.useCallback(
@@ -576,7 +576,7 @@ export const CustomRecordingForm: React.FunctionComponent<CustomRecordingFormPro
           >
             {loading ? 'Creating' : 'Create'}
           </Button>
-          <Button variant="secondary" onClick={history.goBack} isDisabled={loading}>
+          <Button variant="secondary" onClick={() => navigate(-1)} isDisabled={loading}>
             Cancel
           </Button>
         </ActionGroup>

src/app/CreateRecording/SnapshotRecordingForm.tsx

@@ -37,7 +37,7 @@
  */
 import * as React from 'react';
 import { ActionGroup, Button, Form, Text, TextVariants } from '@patternfly/react-core';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { first } from 'rxjs';
@@ -47,7 +47,7 @@ import { authFailMessage, ErrorView, isAuthFail, missingSSLMessage } from '@app/
 export interface SnapshotRecordingFormProps {}
 
 export const SnapshotRecordingForm: React.FunctionComponent<SnapshotRecordingFormProps> = (props) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
   const [loading, setLoading] = React.useState(false);
@@ -62,11 +62,11 @@ export const SnapshotRecordingForm: React.FunctionComponent<SnapshotRecordingFor
         .subscribe((success) => {
           setLoading(false);
           if (success) {
-            history.push('/recordings');
+            navigate('/recordings');
           }
         })
     );
-  }, [addSubscription, context.api, history, setLoading]);
+  }, [addSubscription, context.api, navigate, setLoading]);
 
   const createButtonLoadingProps = React.useMemo(
     () =>
@@ -138,7 +138,7 @@ export const SnapshotRecordingForm: React.FunctionComponent<SnapshotRecordingFor
           <Button variant="primary" onClick={handleCreateSnapshot} isDisabled={loading} {...createButtonLoadingProps}>
             {loading ? 'Creating' : 'Create'}
           </Button>
-          <Button variant="secondary" onClick={history.goBack} isDisabled={loading}>
+          <Button variant="secondary" onClick={() => navigate(-1)} isDisabled={loading}>
             Cancel
           </Button>
         </ActionGroup>

src/app/Events/EventTemplates.tsx

@@ -79,15 +79,15 @@ import {
   Tr,
 } from '@patternfly/react-table';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { forkJoin, Observable, of } from 'rxjs';
 import { catchError, concatMap, defaultIfEmpty, filter, first, tap } from 'rxjs/operators';
 
 export interface EventTemplatesProps {}
 
 export const EventTemplates: React.FunctionComponent<EventTemplatesProps> = (props) => {
   const context = React.useContext(ServiceContext);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [templates, setTemplates] = React.useState([] as EventTemplate[]);
   const [filteredTemplates, setFilteredTemplates] = React.useState([] as EventTemplate[]);
@@ -253,8 +253,7 @@ export const EventTemplates: React.FunctionComponent<EventTemplatesProps> = (pro
         {
           title: 'Create Recording...',
           onClick: () =>
-            history.push({
-              pathname: '/recordings/create',
+            navigate('/recordings/create', {
               state: { templateName: t.name, templateType: t.type } as CreateRecordingProps,
             }),
         },
@@ -281,7 +280,7 @@ export const EventTemplates: React.FunctionComponent<EventTemplatesProps> = (pro
       }
       return actions;
     },
-    [context.api, history, handleDeleteButton]
+    [context.api, navigate, handleDeleteButton]
   );
 
   const handleUploadModalClose = React.useCallback(() => {

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -56,7 +56,8 @@ import {
 } from '@patternfly/react-core';
 import { Tbody, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import * as React from 'react';
-import { useHistory, useRouteMatch } from 'react-router-dom';
+import { useRouteMatch } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { combineLatest, forkJoin, merge, Observable } from 'rxjs';
 import { concatMap, filter, first } from 'rxjs/operators';
 import { LabelCell } from '../RecordingMetadata/LabelCell';
@@ -94,7 +95,7 @@ export interface ActiveRecordingsTableProps {
 
 export const ActiveRecordingsTable: React.FunctionComponent<ActiveRecordingsTableProps> = (props) => {
   const context = React.useContext(ServiceContext);
-  const routerHistory = useHistory();
+  const navigate = useNavigate();
   const { url } = useRouteMatch();
   const addSubscription = useSubscriptions();
   const dispatch = useDispatch<StateDispatch>();
@@ -145,8 +146,8 @@ export const ActiveRecordingsTable: React.FunctionComponent<ActiveRecordingsTabl
   );
 
   const handleCreateRecording = React.useCallback(() => {
-    routerHistory.push(`${url}/create`);
-  }, [routerHistory]);
+    navigate(`${url}/create`);
+  }, [navigate]);
 
   const handleEditLabels = React.useCallback(() => {
     setShowDetailsPanel(true);

src/app/Rules/CreateRule.tsx

@@ -55,7 +55,8 @@ import {
   TextVariants,
   ValidatedOptions,
 } from '@patternfly/react-core';
-import { useHistory, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { iif } from 'rxjs';
 import { filter, first, mergeMap, toArray } from 'rxjs/operators';
 import { ServiceContext } from '@app/Shared/Services/Services';
@@ -77,7 +78,7 @@ export const RuleNamePattern = /^[\w_]+$/;
 const Comp: React.FunctionComponent<{}> = () => {
   const context = React.useContext(ServiceContext);
   const notifications = React.useContext(NotificationsContext);
-  const history = useHistory();
+  const navigate = useNavigate();
   const addSubscription = useSubscriptions();
 
   const [name, setName] = React.useState('');
@@ -184,7 +185,7 @@ const Comp: React.FunctionComponent<{}> = () => {
       context.api.createRule(rule).subscribe((success) => {
         setLoading(false);
         if (success) {
-          history.push('/rules');
+          navigate('/rules');
         }
       })
     );
@@ -193,7 +194,7 @@ const Comp: React.FunctionComponent<{}> = () => {
     addSubscription,
     context,
     context.api,
-    history,
+    navigate,
     name,
     nameValid,
     description,
@@ -553,7 +554,7 @@ const Comp: React.FunctionComponent<{}> = () => {
                     >
                       {loading ? 'Creating' : 'Create'}
                     </Button>
-                    <Button variant="secondary" onClick={history.goBack} isAriaDisabled={loading}>
+                    <Button variant="secondary" onClick={() => navigate(-1)} isAriaDisabled={loading}>
                       Cancel
                     </Button>
                   </ActionGroup>