[frontend] prevent re-rending of settings right menu (#15339)

Author: frapuks

opencti-platform/opencti-front/src/private/components/settings/KillChainPhases.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { graphql } from 'react-relay';
 import { useFormatter } from '../../../components/i18n';
 import KillChainPhaseCreation from './kill_chain_phases/KillChainPhaseCreation';
-import LabelsVocabulariesMenu from './LabelsVocabulariesMenu';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import { usePaginationLocalStorage } from '../../../utils/hooks/useLocalStorage';
 import DataTable from '../../../components/dataGrid/DataTable';
@@ -147,7 +146,6 @@ const KillChainPhases = () => {
 
   return (
     <div style={{ marginRight: 200 }} data-testid="kill-chain-phases-page">
-      <LabelsVocabulariesMenu />
       <Breadcrumbs elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Taxonomies') }, { label: t_i18n('Kill chain phases'), current: true }]} />
       {queryRef && (
         <DataTable

opencti-platform/opencti-front/src/private/components/settings/Labels.jsx

@@ -4,7 +4,6 @@ import { graphql } from 'react-relay';
 import makeStyles from '@mui/styles/makeStyles';
 import LabelPopover from './labels/LabelPopover';
 import LabelCreation from './labels/LabelCreation';
-import LabelsVocabulariesMenu from './LabelsVocabulariesMenu';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import { usePaginationLocalStorage } from '../../../utils/hooks/useLocalStorage';
 import { useFormatter } from '../../../components/i18n';
@@ -157,7 +156,6 @@ const Labels = () => {
 
   return (
     <div className={classes.container} data-testid="labels-page">
-      <LabelsVocabulariesMenu />
       <Breadcrumbs elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Taxonomies') }, { label: t_i18n('Labels'), current: true }]} />
       {queryRef && (
         <DataTable

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

@@ -11,7 +11,6 @@ import { NotifierLine_node$data } from './notifiers/__generated__/NotifierLine_n
 import { NotifierLineDummy } from './notifiers/NotifierLine';
 import NotifierCreation from './notifiers/NotifierCreation';
 import { useFormatter } from '../../../components/i18n';
-import CustomizationMenu from './CustomizationMenu';
 import { emptyFilterGroup } from '../../../utils/filters/filtersUtils';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import useConnectedDocumentModifier from '../../../utils/hooks/useConnectedDocumentModifier';
@@ -73,7 +72,6 @@ const Notifiers = () => {
   );
   return (
     <div className={classes.container} data-testid="notifiers-page">
-      <CustomizationMenu />
       <Breadcrumbs elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Customization') }, { label: t_i18n('Notifiers'), current: true }]} />
       <ListLines
         helpers={storageHelpers}

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

@@ -10,7 +10,6 @@ import useAuth from '../../../utils/hooks/useAuth';
 import { usePaginationLocalStorage } from '../../../utils/hooks/useLocalStorage';
 import { useFormatter } from '../../../components/i18n';
 import { RETENTION_MANAGER } from '../../../utils/platformModulesHelper';
-import CustomizationMenu from './CustomizationMenu';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import useQueryLoading from '../../../utils/hooks/useQueryLoading';
 import { DataColumns } from '../../../components/list_lines';
@@ -81,14 +80,12 @@ const Retention = () => {
         <Alert severity="info">
           {t_i18n(platformModuleHelpers.generateDisableMessage(RETENTION_MANAGER))}
         </Alert>
-        <CustomizationMenu />
       </div>
     );
   }
   const queryRef = useQueryLoading<RetentionLinesPaginationQuery>(RetentionLinesQuery, paginationOptions);
   return (
     <div className={classes.container} data-testid="retention-page">
-      <CustomizationMenu />
       <Breadcrumbs elements={[{ label: t_i18n('Settings') }, { label: t_i18n('Customization') }, { label: t_i18n('Retention'), current: true }]} />
       <ListLines
         dataColumns={dataColumns}

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

@@ -1,6 +1,6 @@
 import React, { Suspense, lazy } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import useGranted, {
+import {
   SETTINGS_SETCUSTOMIZATION,
   SETTINGS_SETLABELS,
   SETTINGS_SECURITYACTIVITY,
@@ -22,49 +22,17 @@ import Loader from '../../../components/Loader';
 import useSettingsFallbackUrl from '../../../utils/hooks/useSettingsFallbackUrl';
 
 const Security = lazy(() => import('../../../utils/Security'));
-const CaseTemplates = lazy(() => import('./case_templates/CaseTemplates'));
-const CaseTemplateTasks = lazy(() => import('./case_templates/CaseTemplateTasks'));
-const KillChainPhases = lazy(() => import('./KillChainPhases'));
-const Labels = lazy(() => import('./Labels'));
-const Notifiers = lazy(() => import('./Notifiers'));
-const Retention = lazy(() => import('./Retention'));
-const Rules = lazy(() => import('./rules/Rules'));
 const Settings = lazy(() => import('./Settings'));
 const FileIndexing = lazy(() => import('./file_indexing/FileIndexing'));
-const StatusTemplates = lazy(() => import('./status_templates/StatusTemplates'));
-const RootSubType = lazy(() => import('./sub_types/Root'));
-const SubTypes = lazy(() => import('./sub_types/SubTypes'));
-const Vocabularies = lazy(() => import('./Vocabularies'));
-const VocabularyCategories = lazy(() => import('./VocabularyCategories'));
-const Audit = lazy(() => import('./activity/audit/Root'));
-const Configuration = lazy(() => import('./activity/configuration/Configuration'));
-const Alerting = lazy(() => import('./activity/alerting/Alerting'));
-const DecayRuleTabs = lazy(() => import('./decay/DecayRuleTabs'));
-const DecayRule = lazy(() => import('./decay/DecayRule'));
-const ExclusionLists = lazy(() => import('./exclusion_lists/ExclusionLists'));
-const FintelDesigns = lazy(() => import('./fintel_design/FintelDesigns'));
-const FintelDesign = lazy(() => import('./fintel_design/FintelDesign'));
 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'));
 
 const Root = () => {
-  const isGrantedToLabels = useGranted([SETTINGS_SETLABELS]);
-  const isGrantedToVocabularies = useGranted([SETTINGS_SETVOCABULARIES]);
-  const isGrantedToKillChainPhases = useGranted([SETTINGS_SETKILLCHAINPHASES]);
-  const isGrantedToCaseTemplates = useGranted([SETTINGS_SETCASETEMPLATES]);
-  const isGrantedToStatusTemplates = useGranted([SETTINGS_SETSTATUSTEMPLATES]);
-
   const fallbackUrl = useSettingsFallbackUrl();
 
-  const generateTaxonomyLink = () => {
-    if (isGrantedToLabels) return '/dashboard/settings/vocabularies/labels';
-    if (isGrantedToKillChainPhases) return '/dashboard/settings/vocabularies/kill_chain_phases';
-    if (isGrantedToCaseTemplates) return '/dashboard/settings/vocabularies/case_templates';
-    if (isGrantedToStatusTemplates) return '/dashboard/settings/vocabularies/status_templates';
-    if (isGrantedToVocabularies) return '/dashboard/settings/vocabularies/fields';
-    return '/dashboard';
-  };
-
   return (
     <div data-testid="settings-page">
       <Suspense fallback={<Loader />}>
@@ -92,34 +60,10 @@ const Root = () => {
             )}
           />
           <Route
-            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"
+            path="/activity/*"
             element={(
               <Security needs={[SETTINGS_SECURITYACTIVITY]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Alerting />
+                <RootActivity />
               </Security>
             )}
           />
@@ -140,168 +84,21 @@ const Root = () => {
             )}
           />
           <Route
-            path="/customization"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Navigate to="/dashboard/settings/customization/entity_types" replace={true} />
-              </Security>
-            )}
-          />
-          <Route
-            path="/customization/entity_types"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <SubTypes />
-              </Security>
-            )}
-          />
-          <Route
-            path="/customization/retention"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Retention />
-              </Security>
-            )}
-          />
-          <Route
-            path="/customization/entity_types/:subTypeId/*"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <RootSubType />
-              </Security>
-            )}
-          />
-          <Route
-            path="/customization/rules"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Rules />
-              </Security>
-            )}
-          />
-          <Route
-            path="customization/decay"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <DecayRuleTabs />
-              </Security>
-            )}
-          />
-          <Route
-            path="customization/decay/:decayRuleId/*"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <DecayRule />
-              </Security>
-            )}
-          />
-          <Route
-            path="customization/exclusion_lists"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <ExclusionLists />
-              </Security>
-            )}
-          />
-          <Route
-            path="customization/fintel_designs"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <FintelDesigns />
-              </Security>
-            )}
-          />
-          <Route
-            path="customization/fintel_designs/:fintelDesignId/*"
-            element={(
-              <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <FintelDesign />
-              </Security>
-            )}
-          />
-          <Route
-            path="/customization/notifiers"
+            path="/customization/*"
             element={(
               <Security needs={[SETTINGS_SETCUSTOMIZATION]} placeholder={<Navigate to={fallbackUrl} />}>
-                <Notifiers />
-              </Security>
-            )}
-          />
-          <Route path="/vocabularies" element={<Navigate to={generateTaxonomyLink()} />} />
-          <Route
-            path="/vocabularies/labels"
-            element={(
-              <Security
-                needs={[SETTINGS_SETLABELS]}
-                placeholder={<Navigate to={fallbackUrl} />}
-              >
-                <Labels />
-              </Security>
-            )}
-          />
-          <Route
-            path="/vocabularies/kill_chain_phases"
-            element={(
-              <Security
-                needs={[SETTINGS_SETKILLCHAINPHASES]}
-                placeholder={<Navigate to={fallbackUrl} />}
-              >
-                <KillChainPhases />
-              </Security>
-            )}
-          />
-          <Route
-            path="/vocabularies/status_templates"
-            element={(
-              <Security
-                needs={[SETTINGS_SETSTATUSTEMPLATES]}
-                placeholder={<Navigate to={fallbackUrl} />}
-              >
-                <StatusTemplates />
-              </Security>
-            )}
-          />
-          <Route
-            path="/vocabularies/case_templates"
-            element={(
-              <Security
-                needs={[SETTINGS_SETCASETEMPLATES]}
-                placeholder={<Navigate to={fallbackUrl} />}
-              >
-                <CaseTemplates />
-              </Security>
-            )}
-          />
-          <Route
-            path="/vocabularies/case_templates/:caseTemplateId/*"
-            element={(
-              <Security
-                needs={[SETTINGS_SETCASETEMPLATES]}
-                placeholder={<Navigate to={fallbackUrl} />}
-              >
-                <CaseTemplateTasks />
-              </Security>
-            )}
-          />
-          <Route
-            path="/vocabularies/fields"
-            element={(
-              <Security
-                needs={[SETTINGS_SETVOCABULARIES]}
-                placeholder={<Navigate to={fallbackUrl} />}
-              >
-                <VocabularyCategories />
+                <RootCustomization />
               </Security>
             )}
           />
           <Route
-            path="/vocabularies/fields/:category"
+            path="/vocabularies/*"
             element={(
               <Security
-                needs={[SETTINGS_SETVOCABULARIES]}
+                needs={[SETTINGS_SETLABELS, SETTINGS_SETKILLCHAINPHASES, SETTINGS_SETSTATUSTEMPLATES, SETTINGS_SETCASETEMPLATES, SETTINGS_SETVOCABULARIES]}
                 placeholder={<Navigate to={fallbackUrl} />}
               >
-                <Vocabularies />
+                <RootVocabularies />
               </Security>
             )}
           />

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

@@ -9,7 +9,6 @@ import { usePaginationLocalStorage } from '../../../utils/hooks/useLocalStorage'
 import useQueryLoading from '../../../utils/hooks/useQueryLoading';
 import { useVocabularyCategory_Vocabularynode$data } from '../../../utils/hooks/__generated__/useVocabularyCategory_Vocabularynode.graphql';
 import { useFormatter } from '../../../components/i18n';
-import LabelsVocabulariesMenu from './LabelsVocabulariesMenu';
 import VocabularyCreation from './attributes/VocabularyCreation';
 import useVocabularyCategory, { vocabFragment } from '../../../utils/hooks/useVocabularyCategory';
 import { emptyFilterGroup, isFilterGroupNotEmpty } from '../../../utils/filters/filtersUtils';
@@ -167,7 +166,6 @@ const Vocabularies = () => {
 
   return (
     <div style={{ marginRight: 200 }}>
-      <LabelsVocabulariesMenu />
       <Breadcrumbs elements={[
         { label: t_i18n('Settings') },
         { label: t_i18n('Taxonomies') },

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

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material';
 import { useFormatter } from '../../../components/i18n';
-import LabelsVocabulariesMenu from './LabelsVocabulariesMenu';
 import { useVocabularyCategoryAsQuery, VocabularyDefinition } from '../../../utils/hooks/useVocabularyCategory';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import useConnectedDocumentModifier from '../../../utils/hooks/useConnectedDocumentModifier';
@@ -68,7 +67,6 @@ const VocabularyCategories = () => {
 
   return (
     <div style={{ paddingRight: 200 }} data-testid="vocabularies-page">
-      <LabelsVocabulariesMenu />
       <Breadcrumbs
         elements={[
           { label: t_i18n('Settings') },