[frontend] fix report knowledge

[frontend] report route + change props.history to props.navigate

[frontend] work on Report route

[frontend] fix navigation error

[frontend] WIP Index.tsx rework route

[frontend] migrate withRouter hoc

[frontend] remove compat, change Switch to Routes

opencti-platform/opencti-front/package.json

@@ -68,7 +68,6 @@
     "react-relay": "16.1.0",
     "react-relay-network-modern": "6.2.2",
     "react-router-dom": "6.21.3",
-    "react-router-dom-v5-compat": "6.21.3",
     "react-syntax-highlighter": "15.5.0",
     "react-timeline-range-slider": "1.4.1",
     "react-virtualized": "9.22.5",

opencti-platform/opencti-front/src/__tests__/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,5 +1,4 @@
-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';
@@ -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: {

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/SwitchField.jsx

@@ -3,7 +3,6 @@ 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 { useFormatter } from './i18n';

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'));
@@ -33,7 +34,6 @@ 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 useStyles = makeStyles((theme: Theme) => ({
   toolbar: theme.mixins.toolbar,
@@ -96,71 +96,63 @@ 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}
+            <Routes>
+              <Route path="/" Component={boundaryWrapper(Dashboard)}/>
+
+              {/* Searhc need to be rework */}
+              <Route path="/search/*" Component={boundaryWrapper(SearchRoot)} />
+              <Route
+                path="/id/:id"
+                Component={boundaryWrapper(StixObjectOrStixRelationship)}
               />
-              <BoundaryRoute
-                exact
-                path="/dashboard/search_bulk"
-                component={SearchBulk}
+              <Route
+                path="/search_bulk"
+                Component={boundaryWrapper(SearchBulk)}
               />
-              <BoundaryRoute
-                path="/dashboard/analyses"
-                component={RootAnalyses}
+              {/* Need to refactor below */}
+              <Route
+                path="/analyses/*"
+                Component={boundaryWrapper(RootAnalyses)}
               />
-              <BoundaryRoute path="/dashboard/cases" component={RootCases} />
-              <BoundaryRoute path="/dashboard/events" component={RootEvents} />
+              <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="/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="/techniques"
+                Component={boundaryWrapper(RootTechnique)}
               />
-              <BoundaryRoute path="/dashboard/threats" component={RootThreats} />
-              <BoundaryRoute path="/dashboard/arsenal" component={RootArsenal} />
-              <BoundaryRoute
-                path="/dashboard/techniques"
-                component={RootTechnique}
+              <Route
+                path="/entities"
+                Component={boundaryWrapper(RootEntities)}
               />
-              <BoundaryRoute
-                path="/dashboard/entities"
-                component={RootEntities}
+              <Route
+                path="/locations"
+                Component={boundaryWrapper(RootLocation)}
               />
-              <BoundaryRoute
-                path="/dashboard/locations"
-                component={RootLocation}
+              <Route path="/data" Component={boundaryWrapper(RootData)} />
+              <Route
+                path="/workspaces"
+                Component={boundaryWrapper(RootWorkspaces)}
               />
-              <BoundaryRoute path="/dashboard/data" component={RootData} />
-              <BoundaryRoute
-                path="/dashboard/workspaces"
-                component={RootWorkspaces}
+              <Route
+                path="/settings"
+                Component={boundaryWrapper(RootSettings)}
               />
-              <BoundaryRoute
-                path="/dashboard/settings"
-                component={RootSettings}
+              <Route path="/audits" Component={boundaryWrapper(RootActivity)} />
+              <Route
+                path="/profile"
+                Component={boundaryWrapper(RootProfile)}
               />
-              <BoundaryRoute path="/dashboard/audits" component={RootActivity} />
-              <BoundaryRoute
-                path="/dashboard/profile"
-                component={RootProfile}
+              <Route
+                path="/observations"
+                Component={ 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) {