Add color map to DirectoryItemInput so we can give different color by equipmentType and add Fields needed for contingency list by filter

src/components/inputs/reactHookForm/DirectoryItemsInput.tsx

@@ -5,25 +5,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Chip, FormControl, Grid, IconButton, Theme, Tooltip } from '@mui/material';
+import { Box, Chip, FormControl, FormHelperText, Grid, IconButton, Theme, Tooltip } from '@mui/material';
 import { Folder as FolderIcon } from '@mui/icons-material';
 import { useCallback, useMemo, useState } from 'react';
 import { FieldValues, useController, useFieldArray } from 'react-hook-form';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { UUID } from 'crypto';
 import { RawReadOnlyInput } from './RawReadOnlyInput';
-import { FieldLabel } from './utils/FieldLabel';
-import { useCustomFormContext } from './provider/useCustomFormContext';
-import { isFieldRequired } from './utils/functions';
-import { ErrorInput } from './errorManagement/ErrorInput';
-import { useSnackMessage } from '../../../hooks/useSnackMessage';
+import { FieldLabel, isFieldRequired } from './utils';
+import { useCustomFormContext } from './provider';
+import { ErrorInput, MidFormError } from './errorManagement';
+import { useSnackMessage } from '../../../hooks';
 import { TreeViewFinderNodeProps } from '../../treeViewFinder';
-import { mergeSx } from '../../../utils/styles';
 import { OverflowableText } from '../../overflowableText';
-import { MidFormError } from './errorManagement/MidFormError';
-import { DirectoryItemSelector } from '../../directoryItemSelector/DirectoryItemSelector';
+import { DirectoryItemSelector } from '../../directoryItemSelector';
 import { fetchDirectoryElementPath } from '../../../services';
-import { ElementAttributes } from '../../../utils';
+import { getBasicEquipmentLabel, ElementAttributes, mergeSx } from '../../../utils';
 import { NAME } from './constants';
 
 const styles = {
@@ -67,6 +64,7 @@ export interface DirectoryItemsInputProps {
     disable?: boolean;
     allowMultiSelect?: boolean;
     labelRequiredFromContext?: boolean;
+    equipmentColorsMap?: Map<string, string>;
 }
 
 export function DirectoryItemsInput({
@@ -82,6 +80,7 @@ export function DirectoryItemsInput({
     disable = false,
     allowMultiSelect = true,
     labelRequiredFromContext = true,
+    equipmentColorsMap,
 }: Readonly<DirectoryItemsInputProps>) {
     const { snackError } = useSnackMessage();
     const intl = useIntl();
@@ -97,6 +96,7 @@ export function DirectoryItemsInput({
     } = useFieldArray({
         name,
     });
+    const elementsWithMetaData: TreeViewFinderNodeProps[] = elements as unknown as TreeViewFinderNodeProps[];
 
     const formContext = useCustomFormContext();
     const { getValues, validationSchema } = formContext;
@@ -180,27 +180,45 @@ export function DirectoryItemsInput({
                 )}
                 error={!!error?.message}
             >
-                {elements?.length === 0 && label && (
+                {elementsWithMetaData?.length === 0 && label && (
                     <FieldLabel
                         label={label}
                         optional={labelRequiredFromContext && !isFieldRequired(name, validationSchema, getValues())}
                     />
                 )}
-                {elements?.length > 0 && (
+                {elementsWithMetaData?.length > 0 && (
                     <FormControl sx={styles.formDirectoryElements2}>
-                        {elements.map((item, index) => (
-                            <Chip
-                                key={item.id}
-                                size="small"
-                                onDelete={() => removeElements(index)}
-                                onClick={() => handleChipClick(index)}
-                                label={
-                                    <OverflowableText
-                                        text={<RawReadOnlyInput name={`${name}.${index}.${NAME}`} />}
-                                        sx={{ width: '100%' }}
-                                    />
-                                }
-                            />
+                        {elementsWithMetaData.map((item, index) => (
+                            <Box key={`Box${item.id}`} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                                <Chip
+                                    key={item.id}
+                                    size="small"
+                                    sx={{
+                                        backgroundColor:
+                                            item.specificMetadata?.equipmentType &&
+                                            equipmentColorsMap?.has(item.specificMetadata?.equipmentType)
+                                                ? equipmentColorsMap.get(item.specificMetadata.equipmentType)
+                                                : undefined,
+                                    }}
+                                    onDelete={() => removeElements(index)}
+                                    onClick={() => handleChipClick(index)}
+                                    label={
+                                        <OverflowableText
+                                            text={<RawReadOnlyInput name={`${name}.${index}.${NAME}`} />}
+                                            sx={{ width: '100%' }}
+                                        />
+                                    }
+                                />
+                                <FormHelperText>
+                                    {item?.specificMetadata?.equipmentType ? (
+                                        <FormattedMessage
+                                            id={getBasicEquipmentLabel(item.specificMetadata.equipmentType)}
+                                        />
+                                    ) : (
+                                        ''
+                                    )}
+                                </FormHelperText>
+                            </Box>
                         ))}
                     </FormControl>
                 )}

src/components/treeViewFinder/TreeViewFinder.tsx

@@ -82,6 +82,9 @@ export interface TreeViewFinderNodeProps {
     childrenCount?: number;
     children?: TreeViewFinderNodeProps[];
     parents?: TreeViewFinderNodeProps[];
+    specificMetadata?: {
+        equipmentType: string;
+    };
 }
 
 interface TreeViewFinderNodeMapProps {

src/translations/en/equipmentsEn.ts

@@ -24,4 +24,5 @@ export const equipmentsEn = {
     LccConverterStations: 'LCC converter stations',
     VscConverterStations: 'VSC converter stations',
     StaticVarCompensators: 'Static var compensators',
+    HvdcLines: 'HVDC lines',
 };

src/translations/fr/equipmentsFr.ts

@@ -24,4 +24,5 @@ export const equipmentsFr = {
     LccConverterStations: 'Stations de conversion LCC',
     VscConverterStations: 'Stations de conversion VSC',
     StaticVarCompensators: 'CSPR',
+    HvdcLines: 'lignes HVDC',
 };

src/utils/constants/fieldConstants.ts

@@ -27,6 +27,7 @@ export enum FieldConstants {
     EQUIPMENT_TABLE = 'equipmentTable',
     EQUIPMENT_TYPE = 'equipmentType',
     FILTER_TYPE = 'filterType',
+    FILTERS = 'filters',
     FOLDER_ID = 'folderId',
     FOLDER_NAME = 'folderName',
     FORMATTED_CASE_PARAMETERS = 'formattedCaseParameters',
@@ -37,6 +38,7 @@ export enum FieldConstants {
     NOMINAL_VOLTAGE_3 = 'nominalVoltage3',
     NOMINAL_VOLTAGE = 'nominalVoltage',
     OPERATION_TYPE = 'type',
+    TYPE = 'type',
     PROPERTY_NAME = 'propertyName',
     PROPERTY_OPERATOR = 'propertyOperator',
     PROPERTY = 'PROPERTY',

src/utils/types/equipmentType.ts

@@ -136,6 +136,15 @@ export const BASE_EQUIPMENTS: Partial<Record<EquipmentType, { id: EquipmentType;
     },
 };
 
+export function getBasicEquipmentLabel(equipmentType: string | undefined): string {
+    if (!equipmentType) {
+        return '';
+    }
+    return equipmentType !== EquipmentType.HVDC_LINE
+        ? (BASE_EQUIPMENTS[equipmentType as EquipmentType]?.label ?? '')
+        : 'HvdcLines';
+}
+
 export const EQUIPMENT_TYPE: Partial<
     Record<
         EquipmentType | ExtendedEquipmentType,