[frontend/backend] New filters fixes #6 (#2686)

Co-authored-by: Laurent Bonnet <laurent.bonnet@filigran.io> Co-authored-by: Jean-Philippe Kha <jean-philippe.kha@filigran.io> Co-authored-by: Samuel Hassine <samuel.hassine@filigran.io>
OpenCTI-Platform · Dec 4, 2023 · 668b0f8 · 668b0f8
1 parent 4b54fdc
commit 668b0f8
Show file tree

Hide file tree

Showing 20 changed files with 864 additions and 674 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ExportButtons.jsx b/opencti-platform/opencti-front/src/components/ExportButtons.jsx
@@ -180,11 +180,12 @@ class ExportButtons extends Component {
       investigationAddFromContainer,
       history,
       handleDashboardDuplication,
+      variant,
     } = this.props;
     return (
       <div className={classes.exportButtons} id="export-buttons">
         <ToggleButtonGroup size="small" color="secondary" exclusive={true}>
-          {handleDashboardDuplication && (
+          {handleDashboardDuplication && variant === 'dashboard' && (
             <Tooltip title={t('Duplicate the dashboard')}>
               <ToggleButton
                 sx={{ padding: '2px' }}

diff --git a/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx b/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx
@@ -24,44 +24,77 @@ const useStyles = makeStyles<Theme>((theme) => ({
   filter3: {
     fontSize: 12,
     height: 20,
-    marginRight: 7,
     borderRadius: 10,
     lineHeight: '32px',
   },
   operator1: {
     borderRadius: 5,
     fontFamily: 'Consolas, monaco, monospace',
     backgroundColor: theme.palette.action?.selected,
-    padding: '5px 8px 0 8px',
+    padding: '0 8px',
+    display: 'flex',
+    alignItems: 'center',
     cursor: 'pointer',
     '&:hover': {
       backgroundColor: theme.palette.action?.disabled,
       textDecorationLine: 'underline',
     },
   },
+  operator1ReadOnly: {
+    borderRadius: 5,
+    fontFamily: 'Consolas, monaco, monospace',
+    backgroundColor: theme.palette.action?.selected,
+    padding: '0 8px',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
   operator2: {
     borderRadius: 5,
     fontFamily: 'Consolas, monaco, monospace',
     backgroundColor: theme.palette.action?.selected,
-    padding: '5px 8px 0 8px',
+    padding: '0 8px',
+    display: 'flex',
+    alignItems: 'center',
     cursor: 'pointer',
     '&:hover': {
       backgroundColor: theme.palette.action?.disabled,
       textDecorationLine: 'underline',
     },
   },
+  operator2ReadOnly: {
+    borderRadius: 5,
+    fontFamily: 'Consolas, monaco, monospace',
+    backgroundColor: theme.palette.action?.selected,
+    padding: '0 8px',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
   operator3: {
     borderRadius: 5,
     fontFamily: 'Consolas, monaco, monospace',
     backgroundColor: theme.palette.action?.selected,
-    padding: '5px 8px 0 8px',
+    height: 20,
+    padding: '0 8px',
     marginRight: 10,
+    marginLeft: 10,
     cursor: 'pointer',
     '&:hover': {
       backgroundColor: theme.palette.action?.disabled,
       textDecorationLine: 'underline',
     },
   },
+  operator3ReadOnly: {
+    borderRadius: 5,
+    fontFamily: 'Consolas, monaco, monospace',
+    backgroundColor: theme.palette.action?.selected,
+    height: 20,
+    padding: '0 8px',
+    marginRight: 10,
+    marginLeft: 10,
+    cursor: 'pointer',
+  },
   chipLabel: {
     lineHeight: '32px',
     maxWidth: 400,
@@ -116,14 +149,6 @@ FilterIconButtonContainerProps
   const displayedFilters = filters.filters;
   const globalMode = filters.mode;
   let classFilter = classes.filter1;
-  let classOperator = classes.operator1;
-  if (styleNumber === 2) {
-    classFilter = classes.filter2;
-    classOperator = classes.operator2;
-  } else if (styleNumber === 3) {
-    classFilter = classes.filter3;
-    classOperator = classes.operator3;
-  }
   const latestItemRef = useRef(null);
   const nbDisplayFilter = useRef(0);
 
@@ -199,15 +224,31 @@ FilterIconButtonContainerProps
         return null;
     }
   };
-  const isReadonlyFilter = helpers || handleRemoveFilter;
+  const isReadWriteFilter = !!(helpers || handleRemoveFilter);
+  let classOperator = classes.operator1;
+  if (!isReadWriteFilter) {
+    classOperator = classes.operator1ReadOnly;
+    if (styleNumber === 2) {
+      classFilter = classes.filter2;
+      classOperator = classes.operator2ReadOnly;
+    } else if (styleNumber === 3) {
+      classFilter = classes.filter3;
+      classOperator = classes.operator3ReadOnly;
+    }
+  } else if (styleNumber === 2) {
+    classFilter = classes.filter2;
+    classOperator = classes.operator2;
+  } else if (styleNumber === 3) {
+    classFilter = classes.filter3;
+    classOperator = classes.operator3;
+  }
   return (
     <Box
       sx={
-        !isReadonlyFilter
+        !isReadWriteFilter
           ? {
             display: 'flex',
             overflow: 'hidden',
-            marginRight: '30px',
           }
           : {
             marginTop: displayedFilters.length === 0 ? 0 : '10px',
@@ -265,6 +306,7 @@ FilterIconButtonContainerProps
               <Chip
                 color={chipColor}
                 ref={isNotLastFilter ? null : latestItemRef}
+                classes={{ root: classFilter, label: classes.chipLabel }}
                 variant={
                   currentFilter.values.length === 0
                   && !['nil', 'not_nil'].includes(filterOperator)
@@ -282,13 +324,14 @@ FilterIconButtonContainerProps
                     helpers={helpers}
                     onClickLabel={(event) => handleChipClick(event, currentFilter?.id)
                     }
+                    isReadWriteFilter={isReadWriteFilter}
                   />
                 }
                 disabled={
                   disabledPossible ? displayedFilters.length === 1 : undefined
                 }
                 onDelete={
-                  isReadonlyFilter
+                  isReadWriteFilter
                     ? () => manageRemoveFilter(
                       currentFilter.id,
                       filterKey,

diff --git a/opencti-platform/opencti-front/src/components/ItemCopy.tsx b/opencti-platform/opencti-front/src/components/ItemCopy.tsx
@@ -9,7 +9,7 @@ import { truncate } from '../utils/String';
 const useStyles = makeStyles<Theme>((theme) => ({
   containerInline: {
     position: 'relative',
-    padding: '2px 12px 2px 5px',
+    padding: '2px 25px 2px 5px',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -34,7 +34,8 @@ const useStyles = makeStyles<Theme>((theme) => ({
   },
   iconInline: {
     position: 'absolute',
-    right: 10,
+    right: 5,
+    top: 4,
     cursor: 'pointer',
     '&:hover': {
       color: theme.palette.primary.main,