Update dependency react-router-dom to v6 (#5575)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jean-Philippe Kha <jean-philippe.kha@filigran.io>
Co-authored-by: Celine Sebe <celine.sebe@filigran.io>
Co-authored-by: FrancoisGrunert <francois.grunert@filigran.io>

opencti-platform/opencti-front/package.json

@@ -69,8 +69,7 @@
     "react-rectangle-selection": "1.0.4",
     "react-relay": "16.2.0",
     "react-relay-network-modern": "6.2.2",
-    "react-router-dom": "5.3.4",
-    "react-router-dom-v5-compat": "6.22.3",
+    "react-router-dom": "6.22.3",
     "react-syntax-highlighter": "15.5.0",
     "react-timeline-range-slider": "1.4.1",
     "react-virtualized": "9.22.5",
@@ -91,9 +90,9 @@
   "devDependencies": {
     "@playwright/test": "1.42.1",
     "@rollup/plugin-graphql": "2.0.4",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.2",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "14.5.2",
     "@types/node": "20.12.3",
     "@types/qrcode": "1.5.5",
     "@types/ramda": "0.29.11",

opencti-platform/opencti-front/src/app.test.tsx

@@ -5,7 +5,6 @@ import { OperationDescriptor, RelayEnvironmentProvider } from 'react-relay/hooks
 import { createMockEnvironment, MockPayloadGenerator as MockGen } from 'relay-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { BrowserRouter } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
 import { describe, afterEach, it, expect } from 'vitest';
 import AppIntlProvider from './components/AppIntlProvider';
 import Profile, { profileQuery } from './private/components/profile/Profile';
@@ -53,15 +52,13 @@ describe('App', () => {
     const { getByDisplayValue } = render(
       <RelayEnvironmentProvider environment={environment}>
         <BrowserRouter basename={APP_BASE_PATH}>
-          <CompatRouter>
-            <AppIntlProvider settings={{ platform_language: 'auto' }}>
-              <ThemeProvider theme={createTheme()}>
-                <UserContext.Provider value={UserContextValue}>
-                  <Profile/>
-                </UserContext.Provider>
-              </ThemeProvider>
-            </AppIntlProvider>
-          </CompatRouter>
+          <AppIntlProvider settings={{ platform_language: 'auto' }}>
+            <ThemeProvider theme={createTheme()}>
+              <UserContext.Provider value={UserContextValue}>
+                <Profile/>
+              </UserContext.Provider>
+            </ThemeProvider>
+          </AppIntlProvider>
         </BrowserRouter>
       </RelayEnvironmentProvider>,
     );

opencti-platform/opencti-front/src/app.tsx

@@ -1,8 +1,7 @@
-import { BrowserRouter } from 'react-router-dom';
-import { CompatRouter, Route, Routes, Navigate } from 'react-router-dom-v5-compat';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
 import React, { Suspense, lazy } from 'react';
 import { APP_BASE_PATH } from './relay/environment';
-import RedirectManager from './components/RedirectManager';
+import { RedirectManager } from './components/RedirectManager';
 import AuthBoundaryComponent from './private/components/AuthBoundary';
 import Loader from './components/Loader';
 
@@ -11,23 +10,21 @@ const PrivateRoot = lazy(() => import('./private/Root'));
 
 const App = () => (
   <BrowserRouter basename={APP_BASE_PATH}>
-    <CompatRouter>
-      <AuthBoundaryComponent>
-        <RedirectManager>
-          <Suspense fallback={<Loader />}>
-            <Routes>
-              <Route path="/dashboard/*" Component={PrivateRoot} />
-              <Route path="/public/*" Component={PublicRoot} />
-              {/* By default, redirect to dashboard */}
-              <Route
-                path="/*"
-                element={<Navigate to="/dashboard" replace={true} />}
-              />
-            </Routes>
-          </Suspense>
-        </RedirectManager>
-      </AuthBoundaryComponent>
-    </CompatRouter>
+    <AuthBoundaryComponent>
+      <RedirectManager>
+        <Suspense fallback={<Loader />}>
+          <Routes>
+            <Route path="/dashboard/*" Component={PrivateRoot} />
+            <Route path="/public/*" Component={PublicRoot} />
+            {/* By default, redirect to dashboard */}
+            <Route
+              path="/*"
+              element={<Navigate to="/dashboard" replace={true} />}
+            />
+          </Routes>
+        </Suspense>
+      </RedirectManager>
+    </AuthBoundaryComponent>
   </BrowserRouter>
 );
 

opencti-platform/opencti-front/src/components/ExportButtons.jsx

@@ -11,14 +11,14 @@ import Dialog from '@mui/material/Dialog';
 import Tooltip from '@mui/material/Tooltip';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
-import { withRouter } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
 import themeLight from './ThemeLight';
 import themeDark from './ThemeDark';
 import { commitLocalUpdate } from '../relay/environment';
 import { exportImage, exportPdf } from '../utils/Image';
 import inject18n from './i18n';
 import Loader from './Loader';
+import withRouter from '../utils/compat-router/withRouter';
 
 const styles = () => ({
   exportButtons: {
@@ -169,7 +169,7 @@ class ExportButtons extends Component {
       handleDownloadAsStixReport,
       handleExportDashboard,
       investigationAddFromContainer,
-      history,
+      navigate,
       handleDashboardDuplication,
       variant,
     } = this.props;
@@ -220,7 +220,7 @@ class ExportButtons extends Component {
                 onClick={investigationAddFromContainer.bind(
                   this,
                   containerId,
-                  history,
+                  navigate,
                 )}
               >
                 <ExploreOutlined fontSize="small" color="primary" />

opencti-platform/opencti-front/src/components/RedirectManager.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { MESSAGING$ } from '../relay/environment';
+
+export const RedirectManager = (props) => {
+  const navigate = useNavigate();
+  MESSAGING$.redirect.subscribe({
+    next: (url) => navigate(url),
+  });
+
+  return <>{props.children}</>;
+};
+
+export default RedirectManager;

opencti-platform/opencti-front/src/components/SearchInput.jsx

@@ -3,7 +3,7 @@ import TextField from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
 import { BiotechOutlined, ContentPasteSearchOutlined, Search } from '@mui/icons-material';
 import IconButton from '@mui/material/IconButton';
-import { Link, useLocation } from 'react-router-dom-v5-compat';
+import { Link, useLocation } from 'react-router-dom';
 import makeStyles from '@mui/styles/makeStyles';
 import Tooltip from '@mui/material/Tooltip';
 import { useFormatter } from './i18n';

opencti-platform/opencti-front/src/components/SwitchField.jsx

@@ -3,9 +3,9 @@ import MuiSwitch from '@mui/material/Switch';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import FormHelperText from '@mui/material/FormHelperText';
-import { fieldToSwitch } from 'formik-mui';
 import Tooltip from '@mui/material/Tooltip';
 import { InformationOutline } from 'mdi-material-ui';
+import { fieldToSwitch } from 'formik-mui';
 import { useFormatter } from './i18n';
 
 const SwitchField = (props) => {

opencti-platform/opencti-front/src/components/dashboard/WidgetHorizontalBars.tsx

@@ -1,7 +1,7 @@
 import Chart from '@components/common/charts/Chart';
 import React from 'react';
 import { useTheme } from '@mui/styles';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { ApexOptions } from 'apexcharts';
 import { horizontalBarsChartOptions } from '../../utils/Charts';
 import { simpleNumberFormat } from '../../utils/Number';

opencti-platform/opencti-front/src/private/Index.tsx

@@ -1,9 +1,9 @@
 import React, { Suspense, lazy, useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
 import { useTheme, makeStyles } from '@mui/styles';
-import { BoundaryRoute, NoMatch } from '@components/Error';
+import { boundaryWrapper, NoMatch } from '@components/Error';
 import PlatformCriticalAlertDialog from '@components/settings/platform_alerts/PlatformCriticalAlertDialog';
 import TopBar from './components/nav/TopBar';
 import LeftBar from './components/nav/LeftBar';
@@ -24,6 +24,7 @@ const RootAnalyses = lazy(() => import('./components/analyses/Root'));
 const RootCases = lazy(() => import('./components/cases/Root'));
 const RootEvents = lazy(() => import('./components/events/Root'));
 const RootObservations = lazy(() => import('./components/observations/Root'));
+const RootProfile = lazy(() => import('./components/profile/Root'));
 const RootThreats = lazy(() => import('./components/threats/Root'));
 const RootArsenal = lazy(() => import('./components/arsenal/Root'));
 const RootTechnique = lazy(() => import('./components/techniques/Root'));
@@ -32,8 +33,7 @@ const RootLocation = lazy(() => import('./components/locations/Root'));
 const RootData = lazy(() => import('./components/data/Root'));
 const RootWorkspaces = lazy(() => import('./components/workspaces/Root'));
 const RootSettings = lazy(() => import('./components/settings/Root'));
-const RootActivity = lazy(() => import('./components/settings/activity/Root'));
-const RootProfile = lazy(() => import('./components/profile/Root'));
+const RootAudit = lazy(() => import('./components/settings/activity/audit/Root'));
 
 const useStyles = makeStyles((theme: Theme) => ({
   toolbar: theme.mixins.toolbar,
@@ -96,71 +96,55 @@ const Index = ({ settings }: IndexProps) => {
             style={{ marginTop: settingsMessagesBannerHeight }}
           />
           <Suspense fallback={<Loader />}>
-            <Switch>
-              <BoundaryRoute exact path="/dashboard" component={Dashboard} />
-              <BoundaryRoute exact path="/dashboard/search" component={SearchRoot} />
-              <BoundaryRoute exact path="/dashboard/search/:scope" component={SearchRoot} />
-              <BoundaryRoute exact path="/dashboard/search/:scope/:keyword" component={SearchRoot} />
-              <BoundaryRoute
-                exact
-                path="/dashboard/id/:id"
-                component={StixObjectOrStixRelationship}
-              />
-              <BoundaryRoute
-                exact
-                path="/dashboard/search_bulk"
-                component={SearchBulk}
-              />
-              <BoundaryRoute
-                path="/dashboard/analyses"
-                component={RootAnalyses}
+            <Routes>
+              <Route path="/" Component={boundaryWrapper(Dashboard)}/>
+
+              {/* Search need to be rework */}
+              <Route path="/search/*" Component={boundaryWrapper(SearchRoot)} />
+              <Route path="/id/:id" Component={boundaryWrapper(StixObjectOrStixRelationship)} />
+              <Route path="/search_bulk" Component={boundaryWrapper(SearchBulk)} />
+              <Route path="/analyses/*" Component={boundaryWrapper(RootAnalyses)} />
+              <Route path="/cases/*" Component={boundaryWrapper(RootCases)} />
+              <Route path="/events/*" Component={boundaryWrapper(RootEvents)} />
+              <Route path="/threats/*" Component={boundaryWrapper(RootThreats)} />
+              <Route path="/arsenal/*" Component={boundaryWrapper(RootArsenal)} />
+              <Route path="/techniques/*" Component={boundaryWrapper(RootTechnique)} />
+              {/* Need to refactor below */}
+              <Route
+                path="/entities/*"
+                Component={boundaryWrapper(RootEntities)}
               />
-              <BoundaryRoute path="/dashboard/cases" component={RootCases} />
-              <BoundaryRoute path="/dashboard/events" component={RootEvents} />
               <Route
-                path="/dashboard/observations"
-              // Because mismatch of types between react-router v5 and v6.
-              // It uses types of v6, but we are using v5 here and compiler is lost.
-              /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-              /* @ts-ignore */
-                component={RootObservations}
+                path="/locations/*"
+                Component={boundaryWrapper(RootLocation)}
               />
-              <BoundaryRoute path="/dashboard/threats" component={RootThreats} />
-              <BoundaryRoute path="/dashboard/arsenal" component={RootArsenal} />
-              <BoundaryRoute
-                path="/dashboard/techniques"
-                component={RootTechnique}
+              <Route path="/data/*"
+                Component={boundaryWrapper(RootData)}
               />
-              <BoundaryRoute
-                path="/dashboard/entities"
-                component={RootEntities}
+              <Route
+                path="/workspaces/*"
+                Component={boundaryWrapper(RootWorkspaces)}
               />
-              <BoundaryRoute
-                path="/dashboard/locations"
-                component={RootLocation}
+              <Route
+                path="/settings/*"
+                Component={boundaryWrapper(RootSettings)}
               />
-              <BoundaryRoute path="/dashboard/data" component={RootData} />
-              <BoundaryRoute
-                path="/dashboard/workspaces"
-                component={RootWorkspaces}
+              <Route
+                path="/audits/*"
+                Component={boundaryWrapper(RootAudit)}
               />
-              <BoundaryRoute
-                path="/dashboard/settings"
-                component={RootSettings}
+              <Route
+                path="/profile/*"
+                Component={boundaryWrapper(RootProfile)}
               />
-              <BoundaryRoute path="/dashboard/audits" component={RootActivity} />
-              <BoundaryRoute
-                path="/dashboard/profile"
-                component={RootProfile}
+              <Route
+                path="/observations/*"
+                Component={boundaryWrapper(RootObservations)}
               />
               <Route
-              // Because mismatch of types between react-router v5 and v6.
-              // It uses types of v6, but we are using v5 here and compiler is lost.
-              /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-              /* @ts-ignore */
-                component={NoMatch}
+                element={<NoMatch/>}
               />
-            </Switch>
+            </Routes>
           </Suspense>
         </Box>
       </Box>

opencti-platform/opencti-front/src/private/components/AuthBoundary.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { compose, includes, map } from 'ramda';
 import * as PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
 import LoginRoot from '../../public/LoginRoot';
+import withRouter from '../../utils/compat-router/withRouter';
 
 class AuthBoundaryComponent extends React.Component {
   constructor(props) {