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

src/components/filter/expert/expertFilterUtils.ts

@@ -29,7 +29,7 @@ import {
     RuleGroupTypeExport,
     RuleTypeExport,
 } from './expertFilter.type';
-import { FIELDS_OPTIONS, OPERATOR_OPTIONS, RULES } from './expertFilterConstants';
+import { EXPERT_FILTER_EQUIPMENTS, FIELDS_OPTIONS, OPERATOR_OPTIONS, RULES } from './expertFilterConstants';
 import { convertInputValue, convertOutputValue, isBlankOrEmpty } from '../../../utils/conversionUtils';
 import { FieldType } from '../../../utils/types/fieldType';
 
@@ -524,3 +524,10 @@ export function recursiveRemove(query: RuleGroupTypeAny, path: number[]): RuleGr
 
     return remove(query, path);
 }
+
+export function getFilterEquipmentTypeLabel(equipmentType: string | undefined): string {
+    if (!equipmentType) {
+        return '';
+    }
+    return EXPERT_FILTER_EQUIPMENTS[equipmentType as keyof typeof EXPERT_FILTER_EQUIPMENTS]?.label ?? '';
+}

src/components/inputs/reactHookForm/DirectoryItemsInput.tsx

@@ -5,26 +5,25 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Chip, FormControl, Grid, IconButton, Tooltip } from '@mui/material';
+import { Box, Chip, FormControl, FormHelperText, Grid, IconButton, 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, type MuiStyles } from '../../../utils/styles';
+import { type MuiStyles } 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 { ElementAttributes, mergeSx } from '../../../utils';
 import { NAME } from './constants';
+import { getFilterEquipmentTypeLabel } from '../../filter/expert/expertFilterUtils';
 
 const styles = {
     formDirectoryElements1: {
@@ -67,6 +66,7 @@ export interface DirectoryItemsInputProps {
     disable?: boolean;
     allowMultiSelect?: boolean;
     labelRequiredFromContext?: boolean;
+    equipmentColorsMap?: Map<string, string>;
 }
 
 export function DirectoryItemsInput({
@@ -82,6 +82,7 @@ export function DirectoryItemsInput({
     disable = false,
     allowMultiSelect = true,
     labelRequiredFromContext = true,
+    equipmentColorsMap,
 }: Readonly<DirectoryItemsInputProps>) {
     const { snackError } = useSnackMessage();
     const intl = useIntl();
@@ -90,13 +91,10 @@ export function DirectoryItemsInput({
     const [multiSelect, setMultiSelect] = useState(allowMultiSelect);
     const types = useMemo(() => [elementType], [elementType]);
     const [directoryItemSelectorOpen, setDirectoryItemSelectorOpen] = useState(false);
-    const {
-        fields: elements,
-        append,
-        remove,
-    } = useFieldArray({
+    const { fields, append, remove } = useFieldArray({
         name,
     });
+    const elements: TreeViewFinderNodeProps[] = fields as unknown as TreeViewFinderNodeProps[];
 
     const formContext = useCustomFormContext();
     const { getValues, validationSchema } = formContext;
@@ -189,18 +187,39 @@ export function DirectoryItemsInput({
                 {elements?.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%' }}
-                                    />
-                                }
-                            />
+                            <Box key={item.id} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                                <Chip
+                                    size="small"
+                                    sx={{
+                                        backgroundColor:
+                                            item?.specificMetadata?.equipmentType &&
+                                            equipmentColorsMap?.get(item?.specificMetadata?.equipmentType),
+                                    }}
+                                    onDelete={() => removeElements(index)}
+                                    onClick={() => handleChipClick(index)}
+                                    label={
+                                        <OverflowableText
+                                            text={
+                                                getValues(`${name}.${index}.${NAME}`) ? (
+                                                    <RawReadOnlyInput name={`${name}.${index}.${NAME}`} />
+                                                ) : (
+                                                    intl.formatMessage({ id: 'elementNotFound' })
+                                                )
+                                            }
+                                            sx={{ width: '100%' }}
+                                        />
+                                    }
+                                />
+                                <FormHelperText>
+                                    {item?.specificMetadata?.equipmentType ? (
+                                        <FormattedMessage
+                                            id={getFilterEquipmentTypeLabel(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/filterEn.ts

@@ -57,4 +57,5 @@ export const filterEn = {
     nameAlreadyUsed: 'This name is already used',
     nameValidityCheckErrorMsg: 'Error while checking name validity',
     cantSubmitWhileValidating: 'Impossible to submit the form while validating a field',
+    elementNotFound: 'element not found',
 };

src/translations/fr/filterFr.ts

@@ -57,4 +57,5 @@ export const filterFr = {
     nameAlreadyUsed: 'Ce nom est déjà utilisé',
     nameValidityCheckErrorMsg: 'Erreur lors de la vérification de la validité du nom',
     cantSubmitWhileValidating: "Impossible de soumettre le formulaire durant la validation d'un champ",
+    elementNotFound: 'Élément inexistant',
 };

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',