[frontend] Monochromatic itemColor

OpenCTI-Platform · Oct 21, 2024 · a1ff176 · a1ff176
1 parent 21fa66d
commit a1ff176
Show file tree

Hide file tree

Showing 26 changed files with 1,807 additions and 845 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ItemColor.ts b/opencti-platform/opencti-front/src/components/ItemColor.ts
diff --git a/opencti-platform/opencti-front/src/components/ItemEntityType.tsx b/opencti-platform/opencti-front/src/components/ItemEntityType.tsx
@@ -2,12 +2,12 @@ import Chip from '@mui/material/Chip';
 import React, { FunctionComponent } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material';
-import { itemColor } from '../utils/Colors';
 import { useFormatter } from './i18n';
 import ThemeLight from './ThemeLight';
 import ThemeDark from './ThemeDark';
 import ItemIcon from './ItemIcon';
 import { truncate } from '../utils/String';
+import itemColor from './ItemColor';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.

diff --git a/opencti-platform/opencti-front/src/components/ItemIcon.jsx b/opencti-platform/opencti-front/src/components/ItemIcon.jsx
@@ -99,7 +99,7 @@ import {
   Target,
 } from 'mdi-material-ui';
 import TableViewIcon from '@mui/icons-material/TableView';
-import { itemColor } from '../utils/Colors';
+import itemColor from './ItemColor';
 
 const iconSelector = (type, variant, fontSize, color, isReversed) => {
   let style;

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetTimeline.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetTimeline.tsx
@@ -12,8 +12,8 @@ import React from 'react';
 import { getSecondaryRepresentative, getMainRepresentative } from '../../utils/defaultRepresentatives';
 import MarkdownDisplay from '../MarkdownDisplay';
 import ItemIcon from '../ItemIcon';
-import { itemColor } from '../../utils/Colors';
 import { useFormatter } from '../i18n';
+import itemColor from '../ItemColor';
 
 interface WidgetTimelineProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/opencti-platform/opencti-front/src/private/components/SearchBulk.jsx b/opencti-platform/opencti-front/src/private/components/SearchBulk.jsx
@@ -27,10 +27,11 @@ import { resolveLink } from '../../utils/Entity';
 import StixCoreObjectLabels from './common/stix_core_objects/StixCoreObjectLabels';
 import StixCoreObjectsExports from './common/stix_core_objects/StixCoreObjectsExports';
 import useGranted, { KNOWLEDGE_KNGETEXPORT } from '../../utils/hooks/useGranted';
-import { hexToRGB, itemColor } from '../../utils/Colors';
+import { hexToRGB } from '../../utils/Colors';
 import ItemMarkings from '../../components/ItemMarkings';
 import { export_max_size } from '../../utils/utils';
 import Breadcrumbs from '../../components/Breadcrumbs';
+import itemColor from '../../components/ItemColor';
 
 const SEARCH$ = new Subject().pipe(debounce(() => timer(500)));
 
@@ -530,6 +531,7 @@ const SearchBulk = () => {
                 const inPlatform = entity.in_platform;
                 const link = inPlatform && `${resolveLink(entity.type)}/${entity.id}`;
                 const linkAnalyses = `${link}/analyses`;
+                const chipColor = itemColor(entity.type);
                 return (
                   <ListItem
                     key={entity.id}
@@ -554,11 +556,11 @@ const SearchBulk = () => {
                                 classes={{ root: classes.chipInList }}
                                 style={{
                                   backgroundColor: hexToRGB(
-                                    itemColor(entity.type),
+                                    chipColor,
                                     0.08,
                                   ),
-                                  color: itemColor(entity.type),
-                                  border: `1px solid ${itemColor(entity.type)}`,
+                                  color: chipColor,
+                                  border: `1px solid ${chipColor}`,
                                 }}
                                 label={t_i18n(`entity_${entity.type}`)}
                               />

diff --git a/...latform/opencti-front/src/private/components/analyses/reports/ReportKnowledgeTimeLine.jsx b/...latform/opencti-front/src/private/components/analyses/reports/ReportKnowledgeTimeLine.jsx
@@ -15,8 +15,8 @@ import { getSecondaryRepresentative, getMainRepresentative } from '../../../../u
 import ItemIcon from '../../../../components/ItemIcon';
 import { resolveLink } from '../../../../utils/Entity';
 import { useFormatter } from '../../../../components/i18n';
-import { itemColor } from '../../../../utils/Colors';
 import MarkdownDisplay from '../../../../components/MarkdownDisplay';
+import itemColor from '../../../../components/ItemColor';
 
 export const reportKnowledgeTimeLineQuery = graphql`
   query ReportKnowledgeTimeLineQuery(

diff --git a/...m/opencti-front/src/private/components/cases/case_incidents/IncidentKnowledgeTimeLine.jsx b/...m/opencti-front/src/private/components/cases/case_incidents/IncidentKnowledgeTimeLine.jsx
@@ -15,8 +15,8 @@ import { getSecondaryRepresentative, getMainRepresentative } from '../../../../u
 import ItemIcon from '../../../../components/ItemIcon';
 import { resolveLink } from '../../../../utils/Entity';
 import { useFormatter } from '../../../../components/i18n';
-import { itemColor } from '../../../../utils/Colors';
 import MarkdownDisplay from '../../../../components/MarkdownDisplay';
+import itemColor from '../../../../components/ItemColor';
 
 export const incidentKnowledgeTimeLineQuery = graphql`
   query IncidentKnowledgeTimeLineCaseQuery(

diff --git a/...latform/opencti-front/src/private/components/cases/case_rfis/CaseRfiKnowledgeTimeLine.jsx b/...latform/opencti-front/src/private/components/cases/case_rfis/CaseRfiKnowledgeTimeLine.jsx
@@ -15,8 +15,8 @@ import { getSecondaryRepresentative, getMainRepresentative } from '../../../../u
 import ItemIcon from '../../../../components/ItemIcon';
 import { resolveLink } from '../../../../utils/Entity';
 import { useFormatter } from '../../../../components/i18n';
-import { itemColor } from '../../../../utils/Colors';
 import MarkdownDisplay from '../../../../components/MarkdownDisplay';
+import itemColor from '../../../../components/ItemColor';
 
 export const caseRfiKnowledgeTimeLineQuery = graphql`
   query CaseRfiKnowledgeTimeLineCaseQuery(

diff --git a/...latform/opencti-front/src/private/components/cases/case_rfts/CaseRftKnowledgeTimeLine.jsx b/...latform/opencti-front/src/private/components/cases/case_rfts/CaseRftKnowledgeTimeLine.jsx
@@ -15,8 +15,8 @@ import { getSecondaryRepresentative, getMainRepresentative } from '../../../../u
 import ItemIcon from '../../../../components/ItemIcon';
 import { resolveLink } from '../../../../utils/Entity';
 import { useFormatter } from '../../../../components/i18n';
-import { itemColor } from '../../../../utils/Colors';
 import MarkdownDisplay from '../../../../components/MarkdownDisplay';
+import itemColor from '../../../../components/ItemColor';
 
 export const caseRftKnowledgeTimeLineQuery = graphql`
   query CaseRftKnowledgeTimeLineCaseQuery(

diff --git a/opencti-platform/opencti-front/src/private/components/common/bulk/EntityRelationshipCard.tsx b/opencti-platform/opencti-front/src/private/components/common/bulk/EntityRelationshipCard.tsx
@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from 'react';
 import { useTheme } from '@mui/styles';
-import { itemColor } from 'src/utils/Colors';
 import ItemIcon from '../../../../components/ItemIcon';
 import type { Theme } from '../../../../components/Theme';
 import { useFormatter } from '../../../../components/i18n';
+import itemColor from '../../../../components/ItemColor';
 
 interface EntityRelationshipCardProps {
   entityName: string;

diff --git a/...src/private/components/common/containers/ContainerStixCoreObjectsSuggestedMappingLine.tsx b/...src/private/components/common/containers/ContainerStixCoreObjectsSuggestedMappingLine.tsx
@@ -19,8 +19,9 @@ import { useFormatter } from '../../../../components/i18n';
 import ItemIcon from '../../../../components/ItemIcon';
 import { resolveLink } from '../../../../utils/Entity';
 import ItemMarkings from '../../../../components/ItemMarkings';
-import { hexToRGB, itemColor } from '../../../../utils/Colors';
+import { hexToRGB } from '../../../../utils/Colors';
 import { DataColumns } from '../../../../components/list_lines';
+import itemColor from '../../../../components/ItemColor';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -98,6 +99,7 @@ ContainerStixCoreObjectsSuggestedMappingLineComponentProps
   const { t_i18n } = useFormatter();
   const mappedEntityData = useFragment(ContainerStixCoreObjectsSuggestedMappingFragment, node);
   const { matchedString, matchedEntity } = mappedEntityData;
+  const chipColor = itemColor(matchedEntity.entity_type);
   return (
     <ListItem
       classes={{ root: classes.item }}
@@ -119,9 +121,9 @@ ContainerStixCoreObjectsSuggestedMappingLineComponentProps
               <Chip
                 classes={{ root: classes.chipInList }}
                 style={{
-                  backgroundColor: hexToRGB(itemColor(matchedEntity.entity_type), 0.08),
-                  color: itemColor(matchedEntity.entity_type),
-                  border: `1px solid ${itemColor(matchedEntity.entity_type)}`,
+                  backgroundColor: hexToRGB(chipColor, 0.08),
+                  color: chipColor,
+                  border: `1px solid ${chipColor}`,
                 }}
                 label={t_i18n(`entity_${matchedEntity.entity_type}`)}
               />

diff --git a/...nt/src/private/components/common/stix_core_objects/StixCoreObjectsMultiHorizontalBars.jsx b/...nt/src/private/components/common/stix_core_objects/StixCoreObjectsMultiHorizontalBars.jsx
@@ -12,8 +12,8 @@ import { useFormatter } from '../../../../components/i18n';
 import { horizontalBarsChartOptions } from '../../../../utils/Charts';
 import { simpleNumberFormat } from '../../../../utils/Number';
 import { getMainRepresentative, isFieldForIdentifier } from '../../../../utils/defaultRepresentatives';
-import { itemColor } from '../../../../utils/Colors';
 import { buildFiltersAndOptionsForWidgets } from '../../../../utils/filters/filtersUtils';
+import itemColor from '../../../../components/ItemColor';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.

diff --git a/...e/components/common/stix_core_relationships/EntityStixCoreRelationshipsHorizontalBars.jsx b/...e/components/common/stix_core_relationships/EntityStixCoreRelationshipsHorizontalBars.jsx
@@ -9,10 +9,10 @@ import { useTheme } from '@mui/styles';
 import Chart from '../charts/Chart';
 import { QueryRenderer } from '../../../../relay/environment';
 import { useFormatter } from '../../../../components/i18n';
-import { itemColor } from '../../../../utils/Colors';
 import { horizontalBarsChartOptions } from '../../../../utils/Charts';
 import { simpleNumberFormat } from '../../../../utils/Number';
 import { getMainRepresentative } from '../../../../utils/defaultRepresentatives';
+import itemColor from '../../../../components/ItemColor';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.