Added more capitalized style

MTorbay-Filigran · MTorbay-Filigran · commit 38eaaa83fee1 · 2026-01-05T11:53:16.000+01:00
diff --git a/opencti-platform/opencti-front/src/components/FilterIconButtonGlobalMode.tsx b/opencti-platform/opencti-front/src/components/FilterIconButtonGlobalMode.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { useFormatter } from './i18n';
+import { capitalizeFirstLetter } from 'src/utils/String';
 
 interface FilterIconButtonGlobalModeProps {
   classOperator: string;
@@ -16,7 +17,7 @@ const FilterIconButtonGlobalMode: FunctionComponent<
   const { t_i18n } = useFormatter();
   return (
     <div className={classOperator} onClick={handleSwitchGlobalMode}>
-      {t_i18n(globalMode.toUpperCase())}
+      {t_i18n(capitalizeFirstLetter(globalMode))}
     </div>
   );
 };
diff --git a/opencti-platform/opencti-front/src/components/ItemAssignees.tsx b/opencti-platform/opencti-front/src/components/ItemAssignees.tsx
@@ -47,7 +47,7 @@ const ItemAssignees: FunctionComponent<Props> = ({ assignees, stixDomainObjectId
             key={assignee.id}
             variant="outlined"
             icon={<PersonOutline color="primary" />}
-            label={truncate(assignee.name, 25).toUpperCase()}
+            label={truncate(assignee.name, 25)}
             style={{
               color: theme.palette.primary.main,
               borderColor: theme.palette.primary.main,
diff --git a/opencti-platform/opencti-front/src/components/ItemParticipants.tsx b/opencti-platform/opencti-front/src/components/ItemParticipants.tsx
@@ -45,7 +45,7 @@ const ItemParticipants: FunctionComponent<ItemParticipantsProps> = ({ participan
             key={participant.id}
             variant="outlined"
             icon={<PersonOutline color="primary" />}
-            label={truncate(participant.name, 25).toUpperCase()}
+            label={truncate(participant.name, 25)}
             style={{
               color: theme.palette.primary.main,
               borderColor: theme.palette.primary.main,
diff --git a/opencti-platform/opencti-front/src/components/TaskFilterValue.tsx b/opencti-platform/opencti-front/src/components/TaskFilterValue.tsx
@@ -9,7 +9,7 @@ import FilterValuesContent, { filterValuesContentQuery } from './FilterValuesCon
 import { FilterValuesContentQuery } from './__generated__/FilterValuesContentQuery.graphql';
 import { useFormatter } from './i18n';
 import { convertOperatorToIcon, filterOperatorsWithIcon, useFilterDefinition } from '../utils/filters/filtersUtils';
-import { truncate } from '../utils/String';
+import { truncate, capitalizeFirstLetter } from '../utils/String';
 import type { Theme } from './Theme';
 import DisplayFilterGroup from './filters/DisplayFilterGroup';
 import { FilterGroup } from '../utils/filters/filtersHelpers-types';
@@ -55,7 +55,7 @@ const TaskFilterValue = ({
   const filtersRepresentativesMap = new Map(
     (filtersRepresentatives ?? []).map((n) => [n?.id, n]),
   );
-  const globalFilterMode = t_i18n(filters.mode.toUpperCase());
+  const globalFilterMode = t_i18n(capitalizeFirstLetter(filters.mode));
   return (
     <>
       {(filters.filters ?? []).map((currentFilter) => {
@@ -101,9 +101,7 @@ const TaskFilterValue = ({
                     ? convertOperatorToIcon(currentFilter.operator ?? 'eq')
                     : currentFilter.values.length > 0 && ': '}
                   {currentFilter.values.map((o) => {
-                    const localFilterMode = t_i18n(
-                      (currentFilter.mode ?? 'or').toUpperCase(),
-                    );
+                    const localFilterMode = t_i18n(capitalizeFirstLetter(currentFilter.mode ?? 'or'));
                     return (
                       <Tooltip
                         key={o}
diff --git a/opencti-platform/opencti-front/src/components/ThemeDark.ts b/opencti-platform/opencti-front/src/components/ThemeDark.ts
@@ -414,6 +414,16 @@ const ThemeDark = (
       styleOverrides: {
         root: {
           color: text_color,
+          textTransform: 'lowercase',
+          '&::first-letter': {
+            textTransform: 'uppercase',
+          },
+        },
+        label: {
+          textTransform: 'lowercase',
+          '&::first-letter': {
+            textTransform: 'uppercase',
+          },
         },
       },
     },
diff --git a/opencti-platform/opencti-front/src/components/ThemeLight.ts b/opencti-platform/opencti-front/src/components/ThemeLight.ts
@@ -418,6 +418,16 @@ const ThemeLight = (
       styleOverrides: {
         root: {
           color: text_color,
+          textTransform: 'lowercase',
+          '&::first-letter': {
+            textTransform: 'uppercase',
+          },
+        },
+        label: {
+          textTransform: 'lowercase',
+          '&::first-letter': {
+            textTransform: 'uppercase',
+          },
         },
       },
     },
diff --git a/opencti-platform/opencti-front/src/components/filters/FilterValues.tsx b/opencti-platform/opencti-front/src/components/filters/FilterValues.tsx
@@ -8,7 +8,7 @@ import { WarningOutlined } from '@mui/icons-material';
 import { Link } from 'react-router-dom';
 import { useFormatter } from '../i18n';
 import { FiltersRestrictions, isFilterEditable, isFilterGroupNotEmpty, isRegardingOfFilterWarning, useFilterDefinition } from '../../utils/filters/filtersUtils';
-import { isDateIntervalTranslatable, translateDateInterval, truncate } from '../../utils/String';
+import { capitalizeFirstLetter, isDateIntervalTranslatable, translateDateInterval, truncate } from '../../utils/String';
 import FilterValuesContent from '../FilterValuesContent';
 import { FilterRepresentative } from './FiltersModel';
 import { Filter } from '../../utils/filters/filtersHelpers-types';
@@ -186,7 +186,7 @@ const FilterValues: FunctionComponent<FilterValuesProps> = ({
                 {last(filterValues) !== id && !isRegardingOfFilter
                   && (
                     <div style={localModeStyle} onClick={operatorOnClick}>
-                      {t_i18n((currentFilter.mode ?? 'or').toUpperCase())}
+                      {t_i18n(capitalizeFirstLetter(currentFilter.mode ?? 'or'))}
                     </div>
                   )
                 }
diff --git a/opencti-platform/opencti-front/src/private/components/analyses/security_coverages/SecurityCoverageAttackPatterns.tsx b/opencti-platform/opencti-front/src/private/components/analyses/security_coverages/SecurityCoverageAttackPatterns.tsx
@@ -26,6 +26,7 @@ import { useFormatter } from '../../../../components/i18n';
 import FieldOrEmpty from '../../../../components/FieldOrEmpty';
 import ItemIcon from '../../../../components/ItemIcon';
 import type { Theme } from '../../../../components/Theme';
+import { capitalizeFirstLetter } from 'src/utils/String';
 
 const securityCoverageAttackPatternsFragment = graphql`
   fragment SecurityCoverageAttackPatternsFragment on SecurityCoverage {
@@ -193,10 +194,10 @@ const SecurityCoverageAttackPatterns = ({
                 {killChains.map((chain) => (
                   <MenuItem key={chain} value={chain}>
                     {(() => {
-                      if (chain === 'mitre-attack') return 'MITRE ATT&CK';
+                      if (chain === 'mitre-attack') return 'Mitre Attack';
                       if (chain === 'capec') return 'CAPEC';
-                      if (chain === 'disarm') return 'DISARM';
-                      return chain.toUpperCase();
+                      if (chain === 'disarm') return 'Disarm';
+                      return capitalizeFirstLetter(chain);
                     })()}
                   </MenuItem>
                 ))}
diff --git a/opencti-platform/opencti-front/src/private/components/analyses/security_coverages/SecurityCoverageInformation.tsx b/opencti-platform/opencti-front/src/private/components/analyses/security_coverages/SecurityCoverageInformation.tsx
@@ -8,6 +8,7 @@ import { useFormatter } from '../../../../components/i18n';
 import { isEmptyField, isNotEmptyField } from '../../../../utils/utils';
 import { donutChartOptions } from '../../../../utils/Charts';
 import type { Theme } from '../../../../components/Theme';
+import { capitalizeFirstLetter } from 'src/utils/String';
 
 const useStyles = makeStyles((theme: Theme) => ({
   charts: {
@@ -119,7 +120,7 @@ const SecurityCoverageInformation: FunctionComponent<SecurityCoverageInformation
                 <Chart options={options} series={series} type="donut" width={chartSize} height={chartSize} />
                 <Tooltip title={`${coverageResult.coverage_name} ${coverageResult.coverage_score}/100`} placement="bottom">
                   <Avatar className={classes.iconOverlay} sx={{ bgcolor: 'transparent', width: iconSize, height: iconSize }} style={{ top: iconPosition, left: iconPosition, fontSize: iconSize - 2 }}>
-                    <span style={{ color: theme.palette.text?.primary }}>{coverageResult.coverage_name.charAt(0).toUpperCase()}</span>
+                    <span style={{ color: theme.palette.text?.primary }}>{capitalizeFirstLetter(coverageResult.coverage_name)}</span>
                   </Avatar>
                 </Tooltip>
               </div>
@@ -172,7 +173,7 @@ const SecurityCoverageInformation: FunctionComponent<SecurityCoverageInformation
                 <Chart options={options} series={series} type="donut" width={70} height={70} />
                 <Tooltip title={coverageResult.coverage_name} placement="top">
                   <Avatar className={classes.iconOverlay} sx={{ bgcolor: 'transparent', width: 24, height: 24 }}>
-                    <span style={{ color: theme.palette.text?.primary, fontSize: 18 }}>{coverageResult.coverage_name.charAt(0).toUpperCase()}</span>
+                    <span style={{ color: theme.palette.text?.primary, fontSize: 18 }}>{capitalizeFirstLetter(coverageResult.coverage_name)}</span>
                   </Avatar>
                 </Tooltip>
               </div>
diff --git a/opencti-platform/opencti-front/src/private/components/settings/retention/RetentionLine.tsx b/opencti-platform/opencti-front/src/private/components/settings/retention/RetentionLine.tsx
@@ -131,7 +131,7 @@ export const RetentionLine: FunctionComponent<RetentionLineProps> = ({ dataColum
               <Chip
                 color={scopeColor as 'warning' | 'secondary' | 'primary'}
                 classes={{ root: classes.chipInList }}
-                label={t_i18n(data.scope.toUpperCase())}
+                label={t_i18n(data.scope)}
                 variant="outlined"
               />
             </div>
diff --git a/opencti-platform/opencti-front/src/private/components/settings/sub_types/entity_setting/EntitySettingAttributeEdition.tsx b/opencti-platform/opencti-front/src/private/components/settings/sub_types/entity_setting/EntitySettingAttributeEdition.tsx
@@ -20,6 +20,7 @@ import { useComputeDefaultValues } from '../../../../../utils/hooks/useDefaultVa
 import { handleErrorInForm } from '../../../../../relay/environment';
 import { DefaultValues, defaultValuesToStringArray } from '../../../../../utils/defaultValues';
 import useApiMutation from '../../../../../utils/hooks/useApiMutation';
+import { capitalizeFirstLetter } from 'src/utils/String';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -162,7 +163,7 @@ const EntitySettingAttributeEdition = ({
   };
   const customScale = (values.scale && isCustomScale(values.scale)) ? values.scale : null;
   const text = attribute.label ?? attribute.name;
-  const attributeName = t_i18n(text.charAt(0).toUpperCase() + text.slice(1));
+  const attributeName = t_i18n(capitalizeFirstLetter(text));
   return (
     <Drawer
       title={`${t_i18n('Update the attribute')} "${attributeName}"`}
diff --git a/opencti-platform/opencti-front/src/private/components/settings/sub_types/entity_setting/EntitySettingAttributes.tsx b/opencti-platform/opencti-front/src/private/components/settings/sub_types/entity_setting/EntitySettingAttributes.tsx
@@ -8,6 +8,7 @@ import { EntitySettingAttributes_entitySetting$key } from './__generated__/Entit
 import EntitySettingAttributeLines, { AttributeNode } from './EntitySettingAttributeLines';
 import { useFormatter } from '../../../../../components/i18n';
 import { isNotEmptyField } from '../../../../../utils/utils';
+import { capitalizeFirstLetter } from 'src/utils/String';
 
 const entitySettingAttributesFragment = graphql`
   fragment EntitySettingAttributes_entitySetting on EntitySetting {
@@ -62,7 +63,7 @@ const EntitySettingAttributes = ({
       isSortable: false,
       render: (data: EntitySettingAttributeLine_attribute$data) => {
         const text = data.label ?? data.name;
-        return t_i18n(text.charAt(0).toUpperCase() + text.slice(1));
+        return t_i18n(capitalizeFirstLetter(text));
       },
     },
     mandatory: {
diff --git a/opencti-platform/opencti-front/src/public/components/SystemBanners.jsx b/opencti-platform/opencti-front/src/public/components/SystemBanners.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import * as R from 'ramda';
 import makeStyles from '@mui/styles/makeStyles';
 import { isEmptyField } from '../../utils/utils';
+import { capitalizeFirstLetter } from 'src/utils/String';
 
 export const SYSTEM_BANNER_HEIGHT = 20;
 const BANNER_Z_INDEX = 2000;
@@ -63,7 +64,7 @@ const bannerColorClassName = (color, prefix = 'banner') => {
     return '';
   }
   let colorName = color.toLowerCase();
-  colorName = colorName.substring(0, 1).toUpperCase() + colorName.substring(1);
+  colorName = capitalizeFirstLetter(colorName);
   return `${prefix}${colorName}`;
 };
 
