[frontend] Addressing PR feedback

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

Hide file tree

Showing 11 changed files with 32 additions and 80 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ItemAccountStatus.tsx b/opencti-platform/opencti-front/src/components/ItemAccountStatus.tsx
@@ -3,8 +3,7 @@ import Chip from '@mui/material/Chip';
 import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material';
 import useAuth from '../utils/hooks/useAuth';
-import ThemeDark from './ThemeDark';
-import ThemeLight from './ThemeLight';
+import type { Theme } from './Theme';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -77,10 +76,7 @@ const ItemAccountStatus: FunctionComponent<ItemAccountStatusProps> = ({
   variant,
 }) => {
   const { me: { monochrome_labels } } = useAuth();
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme<Theme>();
   const classes = useStyles();
   const style = classes.chip;
   const classStyle = computeAccountStatusStyle(account_status);

diff --git a/opencti-platform/opencti-front/src/components/ItemConfidence.tsx b/opencti-platform/opencti-front/src/components/ItemConfidence.tsx
@@ -6,8 +6,7 @@ import { useTheme } from '@mui/material';
 import { useLevel } from '../utils/hooks/useScale';
 import { hexToRGB } from '../utils/Colors';
 import useAuth from '../utils/hooks/useAuth';
-import ThemeDark from './ThemeDark';
-import ThemeLight from './ThemeLight';
+import type { Theme } from './Theme';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -40,37 +39,23 @@ interface ItemConfidenceProps {
 
 const ItemConfidence: FunctionComponent<ItemConfidenceProps> = ({ confidence, variant, entityType }) => {
   const { me: { monochrome_labels } } = useAuth();
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme<Theme>();
   const classes = useStyles();
   const { level: confidenceLevel } = useLevel(entityType, 'confidence', confidence);
   const style = variant === 'inList' ? classes.chipInList : classes.chip;
   return (
     <Tooltip title={confidenceLevel.label}>
-      {monochrome_labels
-        ? (
-          <Chip
-            classes={{ root: style, label: classes.label }}
-            style={{
-              color: theme.palette.chip.main,
-              backgroundColor: theme.palette.background.accent,
-            }}
-            label={confidenceLevel.label}
-          />
-        ) : (
-          <Chip
-            classes={{ root: style, label: classes.label }}
-            style={{
-              color: theme.palette.chip.main,
-              borderColor: confidenceLevel.color,
-              backgroundColor: hexToRGB(confidenceLevel.color),
-            }}
-            label={confidenceLevel.label}
-          />
-        )
-      }
+      <Chip
+        classes={{ root: style, label: classes.label }}
+        style={{
+          color: theme.palette.chip.main,
+          borderColor: monochrome_labels ? undefined : confidenceLevel.color,
+          backgroundColor: monochrome_labels
+            ? theme.palette.background.accent
+            : hexToRGB(confidenceLevel.color),
+        }}
+        label={confidenceLevel.label}
+      />
     </Tooltip>
   );
 };

diff --git a/opencti-platform/opencti-front/src/components/ItemEntityType.tsx b/opencti-platform/opencti-front/src/components/ItemEntityType.tsx
@@ -3,11 +3,10 @@ import React, { FunctionComponent } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material';
 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';
+import type { Theme } from './Theme';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -55,10 +54,7 @@ const ItemEntityType: FunctionComponent<ItemEntityTypeProps> = ({
 
   const isRelationship = t_i18n(`relationship_${entityType}`) !== `relationship_${entityType}`;
 
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme<Theme>();
   const getStyle = () => {
     let width;
     switch (size) {

diff --git a/opencti-platform/opencti-front/src/components/ItemLikelihood.jsx b/opencti-platform/opencti-front/src/components/ItemLikelihood.jsx
@@ -66,12 +66,11 @@ const ItemLikelihood = ({ likelihood, classes, variant, t, theme }) => {
       />
     );
   }
-  let chipStyle;
+  let chipStyle = inlineStyles.white;
   if (likelihood <= 20) chipStyle = inlineStyles.red;
   else if (likelihood <= 50) chipStyle = inlineStyles.orange;
   else if (likelihood <= 75) chipStyle = inlineStyles.blue;
   else if (likelihood <= 100) chipStyle = inlineStyles.green;
-  else chipStyle = inlineStyles.white;
   return (
     <Chip
       classes={{ root: style }}

diff --git a/opencti-platform/opencti-front/src/components/ItemPatternType.tsx b/opencti-platform/opencti-front/src/components/ItemPatternType.tsx
@@ -2,8 +2,7 @@ import React, { FunctionComponent } from 'react';
 import Chip from '@mui/material/Chip';
 import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material';
-import ThemeDark from './ThemeDark';
-import ThemeLight from './ThemeLight';
+import type { Theme } from './Theme';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -99,10 +98,7 @@ const ItemPatternType: FunctionComponent<ItemPatternTypeProps> = ({
 }) => {
   const classes = useStyles();
   const className = variant === 'inList' ? classes.chipInList : classes.chip;
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme<Theme>();
   const hasPredefinedStyle = Object.keys(inlineStyles).includes(label);
   let style: React.CSSProperties = hasPredefinedStyle
     ? inlineStyles[label]

diff --git a/opencti-platform/opencti-front/src/components/ItemStatus.jsx b/opencti-platform/opencti-front/src/components/ItemStatus.jsx
@@ -7,8 +7,6 @@ import { useTheme } from '@mui/material';
 import inject18n from './i18n';
 import { hexToRGB } from '../utils/Colors';
 import useAuth from '../utils/hooks/useAuth';
-import ThemeDark from './ThemeDark';
-import ThemeLight from './ThemeLight';
 
 const styles = () => ({
   chip: {
@@ -41,10 +39,7 @@ const styles = () => ({
 
 const ItemStatus = (props) => {
   const { me: { monochrome_labels } } = useAuth();
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme();
   const { classes, t, status, variant, disabled, onClick } = props;
   let style = classes.chip;
   if (variant === 'inList') {

diff --git a/...rm/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectLabels.tsx b/...rm/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectLabels.tsx
@@ -1,11 +1,10 @@
 import { Chip, Tooltip, useTheme } from '@mui/material';
 import React from 'react';
-import ThemeDark from '../../../../components/ThemeDark';
-import ThemeLight from '../../../../components/ThemeLight';
 import { truncate } from '../../../../utils/String';
 import { useFormatter } from '../../../../components/i18n';
 import useAuth from '../../../../utils/hooks/useAuth';
 import { hexToRGB } from '../../../../utils/Colors';
+import type { Theme } from '../../../../components/Theme';
 
 type Label = {
   id: string,
@@ -35,9 +34,7 @@ const StixCoreObjectLabels: React.FC<StixCoreObjectLabelsProps> = ({
   const { t_i18n } = useFormatter();
   const { me: { monochrome_labels } } = useAuth();
   const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme<Theme>();
   const normalBackground = mode === 'dark' ? 'transparent' : '#ffffff';
   const hasLabels = !revoked && labels && labels.length > 0;
   let style = {};

diff --git a/...mon/stix_core_objects_or_stix_relationships/StixCoreObjectOrCoreRelationshipLabelsView.js b/...mon/stix_core_objects_or_stix_relationships/StixCoreObjectOrCoreRelationshipLabelsView.js
@@ -27,8 +27,6 @@ import useGranted, { KNOWLEDGE_KNUPDATE, SETTINGS_SETLABELS } from '../../../../
 import CommitMessage from '../form/CommitMessage';
 import Transition from '../../../../components/Transition';
 import useAuth from '../../../../utils/hooks/useAuth';
-import ThemeDark from '../../../../components/ThemeDark';
-import ThemeLight from '../../../../components/ThemeLight';
 import { hexToRGB } from '../../../../utils/Colors';
 
 // Deprecated - https://mui.com/system/styles/basics/
@@ -54,10 +52,7 @@ const useStyles = makeStyles(() => ({
 
 const StixCoreObjectOrCoreRelationshipLabelsView = (props) => {
   const { me: { monochrome_labels } } = useAuth();
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme();
   const classes = useStyles();
   const { t_i18n } = useFormatter();
   const {

diff --git a/...tform/opencti-front/src/private/components/entities/organizations/OrganizationDetails.tsx b/...tform/opencti-front/src/private/components/entities/organizations/OrganizationDetails.tsx
@@ -12,19 +12,15 @@ import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
 import MarkdownDisplay from '../../../../components/MarkdownDisplay';
 import { fieldSpacingContainerStyle } from '../../../../utils/field';
 import useAuth from '../../../../utils/hooks/useAuth';
-import ThemeDark from '../../../../components/ThemeDark';
-import ThemeLight from '../../../../components/ThemeLight';
+import type { Theme } from '../../../../components/Theme';
 
 interface OrganizationDetailsComponentProps {
   organization: OrganizationDetails_organization$data;
 }
 
 const OrganizationDetailsComponent: FunctionComponent<OrganizationDetailsComponentProps> = ({ organization }) => {
   const { me: { monochrome_labels } } = useAuth();
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme<Theme>();
   const { t_i18n } = useFormatter();
   return (
     <div style={{ height: '100%' }}>
@@ -35,9 +31,9 @@ const OrganizationDetailsComponent: FunctionComponent<OrganizationDetailsCompone
         className={'paper-for-grid'}
         variant="outlined"
         style={{
-          margin: '10px 0 0 0',
-          padding: '15px',
-          borderRadius: 6,
+          marginTop: theme.spacing(1),
+          padding: theme.spacing(2),
+          borderRadius: 4,
         }}
       >
         <Grid container={true} spacing={3}>

diff --git a/...src/private/components/observations/stix_cyber_observables/StixCyberObservableEdition.tsx b/...src/private/components/observations/stix_cyber_observables/StixCyberObservableEdition.tsx
@@ -6,13 +6,12 @@ import useApiMutation from '../../../../utils/hooks/useApiMutation';
 import { stixCyberObservableEditionOverviewFocus } from './StixCyberObservableEditionOverview';
 import useHelper from '../../../../utils/hooks/useHelper';
 import { useFormatter } from '../../../../components/i18n';
-import ThemeDark from '../../../../components/ThemeDark';
-import ThemeLight from '../../../../components/ThemeLight';
 import { QueryRenderer } from '../../../../relay/environment';
 import StixCyberObservableEditionContainer from './StixCyberObservableEditionContainer';
 import Loader, { LoaderVariant } from '../../../../components/Loader';
 import EditEntityControlledDial from '../../../../components/EditEntityControlledDial';
 import { StixCyberObservableEditionContainerQuery$data } from './__generated__/StixCyberObservableEditionContainerQuery.graphql';
+import type { Theme } from '../../../../components/Theme';
 
 export const stixCyberObservableEditionQuery = graphql`
   query StixCyberObservableEditionContainerQuery($id: String!) {
@@ -39,10 +38,7 @@ const StixCyberObservableEdition: FunctionComponent<StixCyberObservableEditionPr
   const [commit] = useApiMutation(stixCyberObservableEditionOverviewFocus);
   const { isFeatureEnable } = useHelper();
   const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
+  const theme = useTheme<Theme>();
 
   const handleOpen = () => setOpen(true);
   const handleClose = () => {

diff --git a/opencti-platform/opencti-front/src/utils/Colors.js b/opencti-platform/opencti-front/src/utils/Colors.js
@@ -39,6 +39,7 @@ export const stringToColour = (str, reversed = false) => {
  * @param {boolean} reversed
  * @param {boolean} monochrome_labels
  * @returns
+ * @deprecated
  */
 export const itemColor = (type, dark = false, reversed = false, monochrome_labels = false) => {
   if (monochrome_labels) {