[frontend] New filters UI (#3165)

Co-authored-by: Cathia Archidoit <cathia.archidoit@filigran.io>
OpenCTI-Platform · Dec 1, 2023 · f709eb9 · f709eb9
1 parent cc2ede9
commit f709eb9
Show file tree

Hide file tree

Showing 168 changed files with 8,678 additions and 7,326 deletions.
diff --git a/opencti-platform/opencti-front/src/components/FilterIconButton.tsx b/opencti-platform/opencti-front/src/components/FilterIconButton.tsx
@@ -1,54 +1,19 @@
 import React, { FunctionComponent } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import { ChipOwnProps } from '@mui/material/Chip/Chip';
 import { DataColumns } from './list_lines';
 import {
   Filter,
   FilterGroup,
   GqlFilterGroup,
   initialFilterGroup,
+  removeIdFromFilterObject,
 } from '../utils/filters/filtersUtils';
 import { filterIconButtonContentQuery } from './FilterIconButtonContent';
 import useQueryLoading from '../utils/hooks/useQueryLoading';
+import Loader from './Loader';
 import { FilterIconButtonContentQuery } from './__generated__/FilterIconButtonContentQuery.graphql';
 import FilterIconButtonContainer from './FilterIconButtonContainer';
-
-const useStyles = makeStyles(() => ({
-  filters1: {
-    float: 'left',
-    margin: '5px 0 0 10px',
-  },
-  filters2: {
-    marginTop: 20,
-  },
-  filters3: {
-    height: 20,
-    fontSize: 13,
-    float: 'left',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    paddingRight: 10,
-  },
-  filters4: {
-    margin: '0 0 20px 0',
-  },
-  filters5: {
-    float: 'left',
-    margin: '2px 0 0 10px',
-  },
-  filters6: {
-    float: 'left',
-    margin: '2px 0 0 15px',
-  },
-  filters7: {
-    marginTop: 10,
-  },
-  filters8: {
-    float: 'left',
-    margin: '3px 0 0 5px',
-  },
-}));
+import { UseLocalStorageHelpers } from '../utils/hooks/useLocalStorage';
 
 interface FilterIconButtonProps {
   availableFilterKeys?: string[];
@@ -62,6 +27,7 @@ interface FilterIconButtonProps {
   dataColumns?: DataColumns;
   disabledPossible?: boolean;
   redirection?: boolean;
+  helpers?: UseLocalStorageHelpers;
 }
 
 const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
@@ -70,62 +36,42 @@ const FilterIconButton: FunctionComponent<FilterIconButtonProps> = ({
   handleRemoveFilter,
   handleSwitchGlobalMode,
   handleSwitchLocalMode,
-  classNameNumber,
   styleNumber,
-  dataColumns,
   disabledPossible,
   redirection,
   chipColor,
+  helpers,
 }) => {
-  const classes = useStyles();
-  let finalClassName = classes.filters1;
-  if (classNameNumber === 2) {
-    finalClassName = classes.filters2;
-  } else if (classNameNumber === 3) {
-    finalClassName = classes.filters3;
-  } else if (classNameNumber === 4) {
-    finalClassName = classes.filters4;
-  } else if (classNameNumber === 5) {
-    finalClassName = classes.filters5;
-  } else if (classNameNumber === 6) {
-    finalClassName = classes.filters6;
-  } else if (classNameNumber === 7) {
-    finalClassName = classes.filters7;
-  } else if (classNameNumber === 8) {
-    finalClassName = classes.filters8;
-  }
   const displayedFilters = {
     ...filters,
     filters:
-      filters.filters.filter(
-        (f) => !availableFilterKeys || availableFilterKeys?.some((k) => f.key === k),
-      ) || [],
+            filters.filters.filter(
+              (f) => !availableFilterKeys || availableFilterKeys?.some((k) => f.key === k),
+            ) || [],
   };
   const filtersRepresentativesQueryRef = useQueryLoading<FilterIconButtonContentQuery>(
     filterIconButtonContentQuery,
-    { filters: displayedFilters as unknown as GqlFilterGroup },
+    { filters: removeIdFromFilterObject(displayedFilters) as unknown as GqlFilterGroup },
   );
   return (
-    <div
-      className={finalClassName}
-      style={{ width: dataColumns?.filters.width }}
-    >
-      {filtersRepresentativesQueryRef && (
-        <React.Suspense fallback={<div />}>
-          <FilterIconButtonContainer
-            handleRemoveFilter={handleRemoveFilter}
-            handleSwitchGlobalMode={handleSwitchGlobalMode}
-            handleSwitchLocalMode={handleSwitchLocalMode}
-            styleNumber={styleNumber}
-            chipColor={chipColor}
-            disabledPossible={disabledPossible}
-            redirection={redirection}
-            filters={displayedFilters}
-            filtersRepresentativesQueryRef={filtersRepresentativesQueryRef}
-          />
-        </React.Suspense>
-      )}
-    </div>
+        <>
+            {filtersRepresentativesQueryRef && (
+                <React.Suspense fallback={<Loader/>}>
+                    <FilterIconButtonContainer
+                        handleRemoveFilter={handleRemoveFilter}
+                        handleSwitchGlobalMode={handleSwitchGlobalMode}
+                        handleSwitchLocalMode={handleSwitchLocalMode}
+                        styleNumber={styleNumber}
+                        chipColor={chipColor}
+                        disabledPossible={disabledPossible}
+                        redirection={redirection}
+                        filters={displayedFilters}
+                        filtersRepresentativesQueryRef={filtersRepresentativesQueryRef}
+                        helpers={helpers}
+                    ></FilterIconButtonContainer>
+                </React.Suspense>)
+            }
+        </>
   );
 };