[frontend] activity menu (#15339)

Author: frapuks

opencti-platform/opencti-front/src/private/components/settings/Root.tsx

@@ -24,11 +24,9 @@ import useSettingsFallbackUrl from '../../../utils/hooks/useSettingsFallbackUrl'
 const Security = lazy(() => import('../../../utils/Security'));
 const Settings = lazy(() => import('./Settings'));
 const FileIndexing = lazy(() => import('./file_indexing/FileIndexing'));
-const Audit = lazy(() => import('./activity/audit/Root'));
-const Configuration = lazy(() => import('./activity/configuration/Configuration'));
-const Alerting = lazy(() => import('./activity/alerting/Alerting'));
 const Experience = lazy(() => import('./Experience'));
 const RootAccesses = lazy(() => import('./accesses/Root'));
+const RootActivity = lazy(() => import('./activity/Root'));
 const RootCustomization = lazy(() => import('./customization/Root'));
 const RootVocabularies = lazy(() => import('./vocabularies/Root'));
 
@@ -62,34 +60,10 @@ const Root = () => {
             )}
           />
           <Route
-            path="/activity"
+            path="/activity/*"
             element={(
               <Security needs={[SETTINGS_SECURITYACTIVITY]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Navigate to="/dashboard/settings/activity/audit" replace={true} />
-              </Security>
-            )}
-          />
-          <Route
-            path="/activity/audit"
-            element={(
-              <Security needs={[SETTINGS_SECURITYACTIVITY]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Audit />
-              </Security>
-            )}
-          />
-          <Route
-            path="/activity/configuration"
-            element={(
-              <Security needs={[SETTINGS_SECURITYACTIVITY]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Configuration />
-              </Security>
-            )}
-          />
-          <Route
-            path="/activity/alerting"
-            element={(
-              <Security needs={[SETTINGS_SECURITYACTIVITY]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Alerting />
+                <RootActivity />
               </Security>
             )}
           />

opencti-platform/opencti-front/src/private/components/settings/activity/Root.tsx

@@ -0,0 +1,56 @@
+import React, { Suspense, lazy } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import Loader from '../../../../components/Loader';
+import ActivityMenu from '../ActivityMenu';
+import { SETTINGS_SECURITYACTIVITY } from '../../../../utils/hooks/useGranted';
+import useSettingsFallbackUrl from '../../../../utils/hooks/useSettingsFallbackUrl';
+
+const Security = lazy(() => import('../../../../utils/Security'));
+const Audit = lazy(() => import('./audit/Root'));
+const Configuration = lazy(() => import('./configuration/Configuration'));
+const Alerting = lazy(() => import('./alerting/Alerting'));
+
+const RootActivity = () => {
+  const fallbackUrl = useSettingsFallbackUrl();
+
+  return (
+    <>
+      <ActivityMenu />
+      <Suspense fallback={<Loader />}>
+        <Routes>
+          <Route
+            path="/"
+            element={<Navigate to="/dashboard/settings/activity/audit" replace={true} />}
+          />
+          <Route
+            path="/audit"
+            element={(
+              <Security needs={[SETTINGS_SECURITYACTIVITY]} placeholder={<Navigate to={fallbackUrl} />}>
+                <Audit />
+              </Security>
+            )}
+          />
+          <Route
+            path="/configuration"
+            element={(
+              <Security needs={[SETTINGS_SECURITYACTIVITY]} placeholder={<Navigate to={fallbackUrl} />}>
+                <Configuration />
+              </Security>
+            )}
+          />
+          <Route
+            path="/alerting"
+            element={(
+              <Security needs={[SETTINGS_SECURITYACTIVITY]} placeholder={<Navigate to={fallbackUrl} />}>
+                <Alerting />
+              </Security>
+            )}
+          />
+        </Routes>
+      </Suspense>
+    </>
+  );
+};
+
+export default RootActivity;
+

opencti-platform/opencti-front/src/private/components/settings/activity/alerting/Alerting.tsx

@@ -9,7 +9,6 @@ import usePreloadedPaginationFragment from '../../../../../utils/hooks/usePreloa
 import ListLinesContent from '../../../../../components/list_lines/ListLinesContent';
 import { AlertingPaginationQuery, AlertingPaginationQuery$variables } from './__generated__/AlertingPaginationQuery.graphql';
 import AlertCreation from './AlertCreation';
-import ActivityMenu from '../../ActivityMenu';
 import { AlertingLines_data$key } from './__generated__/AlertingLines_data.graphql';
 import { AlertingLineComponent, AlertingLineDummy } from './AlertingLine';
 import type { Theme } from '../../../../../components/Theme';
@@ -221,7 +220,6 @@ const Alerting: FunctionComponent = () => {
 
   return (
     <div className={classes.container} data-testid="alerting-page">
-      <ActivityMenu />
       <Breadcrumbs elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Activity') }, { label: t_i18n('Alerting'), current: true }]} />
       {renderLines()}
     </div>

opencti-platform/opencti-front/src/private/components/settings/activity/audit/Audit.tsx

@@ -20,7 +20,6 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Alert from '@mui/material/Alert';
 import { CSVLink } from 'react-csv';
 import { graphql } from 'react-relay';
-import ActivityMenu from '../../ActivityMenu';
 import type { Theme } from '../../../../../components/Theme';
 import ListLines from '../../../../../components/list_lines/ListLines';
 import { usePaginationLocalStorage } from '../../../../../utils/hooks/useLocalStorage';
@@ -220,7 +219,6 @@ const Audit = () => {
   ) : <></>;
   return (
     <div className={classes.container} data-testid="audit-page">
-      <ActivityMenu />
       <Breadcrumbs elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Activity') }, {
         label: t_i18n('Events'),
         current: true,

opencti-platform/opencti-front/src/private/components/settings/activity/configuration/Configuration.tsx

@@ -28,7 +28,6 @@ import Alert from '@mui/material/Alert';
 import { useTheme } from '@mui/styles';
 import { ListItemButton } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
-import ActivityMenu from '../../ActivityMenu';
 import type { Theme } from '../../../../../components/Theme';
 import { useFormatter } from '../../../../../components/i18n';
 import CreatorField from '../../../common/form/CreatorField';
@@ -139,7 +138,6 @@ const ConfigurationComponent: FunctionComponent<
         )}
       >
         <div className={classes.container}>
-          <ActivityMenu />
           <Breadcrumbs elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Activity') }, { label: t_i18n('Configuration'), current: true }]} />
           <Grid container={true} spacing={3}>
             <Grid item xs={12}>