[frontend] fix tab highlight

OpenCTI-Platform · May 29, 2024 · a6492b1 · a6492b1
1 parent ac5a363
commit a6492b1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/opencti-platform/opencti-front/src/private/components/analyses/groupings/Root.tsx b/opencti-platform/opencti-front/src/private/components/analyses/groupings/Root.tsx
@@ -87,6 +87,13 @@ const RootGrouping = () => {
   const enableReferences = useIsEnforceReference('Grouping') && !useGranted([BYPASSREFERENCE]);
   const { t_i18n } = useFormatter();
   useSubscription(subConfig);
+
+  const getCurrentTab = (location, grouping) => {
+    if (location.pathname.includes(`/dashboard/analyses/groupings/${grouping.id}/knowledge`)) return `/dashboard/analyses/groupings/${grouping.id}/knowledge`;
+    if (location.pathname.includes(`/dashboard/analyses/groupings/${grouping.id}/content`)) return `/dashboard/analyses/groupings/${grouping.id}/content`;
+    return location;
+  };
+
   return (
     <>
       <QueryRenderer
@@ -138,13 +145,7 @@ const RootGrouping = () => {
                     }}
                   >
                     <Tabs
-                      value={
-                                location.pathname.includes(
-                                  `/dashboard/analyses/groupings/${grouping.id}/knowledge`,
-                                )
-                                  ? `/dashboard/analyses/groupings/${grouping.id}/knowledge`
-                                  : location.pathname
-                              }
+                      value={getCurrentTab(location, grouping)}
                     >
                       <Tab
                         component={Link}

diff --git a/...cti-front/src/private/components/common/stix_core_objects/StixCoreObjectContentHeader.tsx b/...cti-front/src/private/components/common/stix_core_objects/StixCoreObjectContentHeader.tsx
@@ -4,7 +4,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import { Link } from 'react-router-dom';
 import { DifferenceOutlined } from '@mui/icons-material';
 import { VectorPolygon } from 'mdi-material-ui';
-import Box from '@mui/material/Box';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { useFormatter } from '../../../../components/i18n';
 
 interface StixCoreObjectContentHeaderProps {
@@ -20,11 +20,12 @@ const StixCoreObjectContentHeader: FunctionComponent<StixCoreObjectContentHeader
 
   return (
     <div style={{
-      margin: '-80px 0 0 0',
+      margin: '-75px 0 0 0',
       float: 'right',
     }}
     >
-      {modes.includes('content') && (
+      <ToggleButtonGroup size="small" exclusive={true}>
+        {modes.includes('content') && (
         <Tooltip title={t_i18n('Content view')}>
           <ToggleButton
             component={Link}
@@ -38,8 +39,8 @@ const StixCoreObjectContentHeader: FunctionComponent<StixCoreObjectContentHeader
             />
           </ToggleButton>
         </Tooltip>
-      )}
-      {modes.includes('mapping') && (
+        )}
+        {modes.includes('mapping') && (
         <Tooltip title={t_i18n('Content mapping view')}>
           <ToggleButton
             component={Link}
@@ -53,7 +54,8 @@ const StixCoreObjectContentHeader: FunctionComponent<StixCoreObjectContentHeader
             />
           </ToggleButton>
         </Tooltip>
-      )}
+        )}
+      </ToggleButtonGroup>
     </div>
   );
 };