[frontend] 'in regards of' filter display in background tasks (#6416)

OpenCTI-Platform · Mar 29, 2024 · 1bf7973 · 1bf7973
1 parent a476caa
commit 1bf7973
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 31 deletions.
diff --git a/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx b/opencti-platform/opencti-front/src/components/FilterIconButtonContainer.tsx
@@ -9,7 +9,7 @@ import { truncate } from '../utils/String';
 import { DataColumns } from './list_lines';
 import { useFormatter } from './i18n';
 import type { Theme } from './Theme';
-import { Filter, FilterGroup, RestrictedFiltersConfig, useFilterDefinition } from '../utils/filters/filtersUtils';
+import { convertOperatorToIcon, Filter, FilterGroup, RestrictedFiltersConfig, useFilterDefinition } from '../utils/filters/filtersUtils';
 import { FilterValuesContentQuery } from './__generated__/FilterValuesContentQuery.graphql';
 import FilterValues from './filters/FilterValues';
 import { FilterChipPopover, FilterChipsParameter } from './filters/FilterChipPopover';
@@ -213,24 +213,6 @@ FilterIconButtonContainerProps
     'eq',
     'not_eq',
   ];
-  const convertOperatorToIcon = (operator: string) => {
-    switch (operator) {
-      case 'lt':
-        return <>&nbsp;&#60;</>;
-      case 'lte':
-        return <>&nbsp;&#8804;</>;
-      case 'gt':
-        return <>&nbsp;&#62;</>;
-      case 'gte':
-        return <>&nbsp;&#8805;</>;
-      case 'eq':
-        return <>&nbsp;=</>;
-      case 'not_eq':
-        return <>&nbsp;&#8800;</>;
-      default:
-        return null;
-    }
-  };
   const isReadWriteFilter = !!(helpers || handleRemoveFilter);
   let classOperator = classes.operator1;
   let margin = '8px';

diff --git a/opencti-platform/opencti-front/src/components/TaskFilterValue.tsx b/opencti-platform/opencti-front/src/components/TaskFilterValue.tsx
@@ -1,12 +1,13 @@
 import * as R from 'ramda';
 import React from 'react';
+import Tooltip from '@mui/material/Tooltip';
 import { PreloadedQuery, usePreloadedQuery } from 'react-relay';
 import Chip from '@mui/material/Chip';
 import makeStyles from '@mui/styles/makeStyles';
 import FilterValuesContent, { filterValuesContentQuery } from './FilterValuesContent';
 import { FilterValuesContentQuery } from './__generated__/FilterValuesContentQuery.graphql';
 import { useFormatter } from './i18n';
-import { FilterGroup } from '../utils/filters/filtersUtils';
+import { convertOperatorToIcon, FilterGroup } from '../utils/filters/filtersUtils';
 import { truncate } from '../utils/String';
 import type { Theme } from './Theme';
 import DisplayFilterGroup from './filters/DisplayFilterGroup';
@@ -74,31 +75,59 @@ const TaskFilterValue = ({
           }
           return null;
         };
+        if (currentFilter.key === 'regardingOf') {
+          const sortedFilterValues = [...currentFilter.values].sort((a, b) => -a.key.localeCompare(b.key)); // display type first, then id
+          return (
+            <span key={currentFilter.key}>
+              <Chip
+                classes={{ root: classes.filter }}
+                label={
+                  <div>
+                    <strong>{label}</strong>:{' '}
+                    <TaskFilterValue filters={{ mode: 'and', filters: sortedFilterValues, filterGroups: [] }} queryRef={queryRef} />
+                  </div>
+              }
+              />
+            </span>
+          );
+        }
         return (
           <span key={currentFilter.key}>
             <Chip
               classes={{ root: classes.filter }}
               label={
                 <div>
-                  <strong>{label}</strong>:{' '}
+                  <strong>{label}</strong>{convertOperatorToIcon(currentFilter.operator ?? 'eq')}{' '}
                   {isOperatorNil ? (
                     <DisplayNilLabel/>
                   ) : (
                     currentFilter.values.map((o) => {
                       const localFilterMode = t_i18n(
-                        (currentFilter.mode ?? 'eq').toUpperCase(),
+                        (currentFilter.mode ?? 'or').toUpperCase(),
                       );
                       return (
-                        <span key={o}>
-                          <FilterValuesContent
-                            filterKey={currentFilter.key}
-                            id={o}
-                            value={filtersRepresentativesMap.get(o)?.value ?? o}
-                          />
-                          {R.last(currentFilter.values) !== o && (
+                        <Tooltip
+                          key={o}
+                          title={
+                            <FilterValuesContent
+                              filterKey={currentFilter.key}
+                              id={o}
+                              value={filtersRepresentativesMap.get(o)?.value ?? o}
+                              isFilterTooltip={true}
+                            />
+                          }
+                        >
+                          <span key={o}>
+                            <FilterValuesContent
+                              filterKey={currentFilter.key}
+                              id={o}
+                              value={filtersRepresentativesMap.get(o)?.value ?? o}
+                            />
+                            {R.last(currentFilter.values) !== o && (
                             <code>{localFilterMode}</code>
-                          )}{' '}
-                        </span>
+                            )}{' '}
+                          </span>
+                        </Tooltip>
                       );
                     })
                   )}

diff --git a/opencti-platform/opencti-front/src/utils/filters/filtersUtils.tsx b/opencti-platform/opencti-front/src/utils/filters/filtersUtils.tsx
@@ -2,6 +2,7 @@ import * as R from 'ramda';
 import { v4 as uuid } from 'uuid';
 import { OptionValue } from '@components/common/lists/FilterAutocomplete';
 import { uniq } from 'ramda';
+import React from 'react';
 import { useFormatter } from '../../components/i18n';
 import type { FilterGroup as GqlFilterGroup } from './__generated__/useSearchEntitiesStixCoreObjectsSearchQuery.graphql';
 import useAuth, { FilterDefinition } from '../hooks/useAuth';
@@ -809,3 +810,22 @@ export const getSelectedOptions = (
   });
   return mapFilterValues.sort((a, b) => a.label.localeCompare(b.label));
 };
+
+export const convertOperatorToIcon = (operator: string) => {
+  switch (operator) {
+    case 'lt':
+      return <>&nbsp;&#60;</>;
+    case 'lte':
+      return <>&nbsp;&#8804;</>;
+    case 'gt':
+      return <>&nbsp;&#62;</>;
+    case 'gte':
+      return <>&nbsp;&#8805;</>;
+    case 'eq':
+      return <>&nbsp;=</>;
+    case 'not_eq':
+      return <>&nbsp;&#8800;</>;
+    default:
+      return null;
+  }
+};