Add possibility to associate a color by type and HelperText in DirectoryItemsInput (#839)

Signed-off-by: basseche <[email protected]>

Author: basseche

src/components/customAGGrid/index.ts

@@ -7,3 +7,4 @@
 
 export * from './customAggrid.style';
 export * from './customAggrid';
+export * from './separatorCellRenderer';

src/components/customAGGrid/separatorCellRenderer.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Theme, Typography } from '@mui/material';
+
+const styles = {
+    separator: (theme: Theme) => ({
+        fontWeight: 'bold',
+        fontSize: '1rem',
+        width: '100%',
+        marginTop: theme.spacing(1),
+    }),
+};
+
+type SeparatorCellRendererProps = {
+    value: string;
+};
+
+export function SeparatorCellRenderer({ value }: Readonly<SeparatorCellRendererProps>) {
+    return (
+        <Typography variant="subtitle1" color="primary" sx={styles.separator}>
+            {value}
+        </Typography>
+    );
+}

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();
@@ -94,7 +95,7 @@ export function DirectoryItemsInput({
         fields: elements,
         append,
         remove,
-    } = useFieldArray({
+    } = useFieldArray<{ [key: string]: TreeViewFinderNodeProps[] }>({
         name,
     });
 
@@ -189,18 +190,44 @@ export function DirectoryItemsInput({
                 {elements?.length > 0 && (
                     <FormControl sx={styles.formDirectoryElements2}>
                         {elements.map((item, index) => (
-                            <Chip
+                            <Box
                                 key={item.id}
-                                size="small"
-                                onDelete={() => removeElements(index)}
-                                onClick={() => handleChipClick(index)}
-                                label={
-                                    <OverflowableText
-                                        text={<RawReadOnlyInput name={`${name}.${index}.${NAME}`} />}
-                                        sx={{ width: '100%' }}
-                                    />
-                                }
-                            />
+                                sx={{ display: 'flex', alignItems: 'center', 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%' }}
+                                        />
+                                    }
+                                />
+                                {equipmentColorsMap && (
+                                    <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',