Visualize composite modifications

src/components/app-wrapper.tsx

@@ -38,6 +38,8 @@ import {
     LIGHT_THEME,
     loginEn,
     loginFr,
+    networkModificationsLocaleEn,
+    networkModificationsLocaleFr,
     multipleSelectionDialogEn,
     multipleSelectionDialogFr,
     SnackbarProvider,
@@ -53,8 +55,6 @@ import { BrowserRouter } from 'react-router-dom';
 import { Provider, useSelector } from 'react-redux';
 import messages_en from '../translations/en.json';
 import messages_fr from '../translations/fr.json';
-import network_modification_locale_en from '../translations/dynamic/network-modifications-locale-en';
-import network_modification_locale_fr from '../translations/dynamic/network-modifications-locale-fr';
 import messages_plugins from '../plugins/translations';
 import aggrid_locale_fr from '../translations/external/aggrid-locale-fr';
 import backend_locale_fr from '../translations/external/backend-locale-fr';
@@ -185,7 +185,7 @@ function getMuiTheme(theme: GsTheme, locale: GsLangUser) {
 const messages: Record<GsLangUser, IntlConfig['messages']> = {
     en: {
         ...messages_en,
-        ...network_modification_locale_en,
+        ...networkModificationsLocaleEn,
         ...loginEn,
         ...topBarEn,
         ...tableEn,
@@ -207,7 +207,7 @@ const messages: Record<GsLangUser, IntlConfig['messages']> = {
     },
     fr: {
         ...messages_fr,
-        ...network_modification_locale_fr,
+        ...networkModificationsLocaleFr,
         ...loginFr,
         ...topBarFr,
         ...tableFr,

src/components/dialogs/network-modification/composite-modification/composite-modification-edition-dialog.tsx

@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2024, 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 { FunctionComponent, SyntheticEvent, useEffect, useState } from 'react';
+import { useParameterState } from '../../use-parameters-dialog';
+import { PARAM_LANGUAGE } from '../../../../utils/config-params';
+import {
+    CustomMuiDialog,
+    FieldConstants,
+    NetworkModificationMetadata,
+    NO_SELECTION_FOR_COPY,
+    unscrollableDialogStyles,
+    useModificationLabelComputer,
+    useSnackMessage,
+    yupConfig as yup,
+} from '@gridsuite/commons-ui';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { getCompositeModificationContent, saveCompositeModification } from '../../../../utils/rest-api';
+import CompositeModificationEditionForm from './composite-modification-edition-form';
+import { List, ListItem } from '@mui/material';
+import { useIntl } from 'react-intl';
+import Divider from '@mui/material/Divider';
+import Box from '@mui/material/Box';
+import { setSelectionForCopy } from '../../../../redux/actions';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppState } from '../../../../redux/reducer';
+
+const schema = yup.object().shape({
+    [FieldConstants.NAME]: yup.string().trim().required('nameEmpty'),
+});
+
+const emptyFormData = (name?: string) => ({
+    [FieldConstants.NAME]: name,
+});
+
+interface FormData {
+    [FieldConstants.NAME]: string;
+}
+
+interface CompositeModificationEditionDialogProps {
+    compositeModificationId: string;
+    open: boolean;
+    onClose: (event?: SyntheticEvent) => void;
+    titleId: string;
+    name: string;
+    broadcastChannel: BroadcastChannel;
+}
+
+export const CompositeModificationEditionDialog: FunctionComponent<CompositeModificationEditionDialogProps> = ({
+    compositeModificationId,
+    open,
+    onClose,
+    titleId,
+    name,
+    broadcastChannel,
+}: Readonly<CompositeModificationEditionDialogProps>) => {
+    const intl = useIntl();
+    const [languageLocal] = useParameterState(PARAM_LANGUAGE);
+    const [isFetching, setIsFetching] = useState(!!compositeModificationId);
+    const { snackError } = useSnackMessage();
+    const selectionForCopy = useSelector((state: AppState) => state.selectionForCopy);
+    const [modifications, setModifications] = useState<NetworkModificationMetadata[]>([]);
+    const dispatch = useDispatch();
+
+    const methods = useForm<FormData>({
+        defaultValues: emptyFormData(name),
+        resolver: yupResolver(schema),
+    });
+
+    const { computeLabel } = useModificationLabelComputer();
+    const getModificationLabel = (modif: NetworkModificationMetadata) => {
+        if (!modif) {
+            return null;
+        }
+        return intl.formatMessage(
+            { id: 'network_modifications.' + modif.type },
+            {
+                ...modif,
+                ...computeLabel(modif),
+            }
+        );
+    };
+
+    const renderNetworkModificationsList = () => {
+        return (
+            <>
+                {modifications && (
+                    <List sx={unscrollableDialogStyles.scrollableContent}>
+                        {modifications.map((modification: NetworkModificationMetadata) => (
+                            <>
+                                <ListItem key={modification.uuid}>
+                                    <Box>{getModificationLabel(modification)}</Box>
+                                </ListItem>
+                                <Divider component="li" />
+                            </>
+                        ))}
+                    </List>
+                )}
+            </>
+        );
+    };
+
+    useEffect(() => {
+        setIsFetching(true);
+        getCompositeModificationContent(compositeModificationId)
+            .then((response) => {
+                if (response) {
+                    setModifications(response);
+                }
+            })
+            .catch((error) => {
+                snackError({
+                    messageTxt: error.message,
+                    headerId: 'cannotRetrieveCompositeModification',
+                });
+            })
+            .finally(() => setIsFetching(false));
+    }, [compositeModificationId, name, snackError]);
+
+    const closeAndClear = (event?: SyntheticEvent) => {
+        onClose(event);
+    };
+
+    const onSubmit = (formData: FormData) => {
+        saveCompositeModification(compositeModificationId, formData[FieldConstants.NAME])
+            .then(() => {
+                if (selectionForCopy.sourceItemUuid === compositeModificationId) {
+                    dispatch(setSelectionForCopy(NO_SELECTION_FOR_COPY));
+                    broadcastChannel.postMessage({
+                        NO_SELECTION_FOR_COPY,
+                    });
+                }
+                closeAndClear();
+            })
+            .catch((errorMessage) => {
+                snackError({
+                    messageTxt: errorMessage,
+                    headerId: 'contingencyListEditingError',
+                    headerValues: { name },
+                });
+            });
+    };
+
+    return (
+        <CustomMuiDialog
+            open={open}
+            onClose={closeAndClear}
+            titleId={titleId}
+            onSave={onSubmit}
+            removeOptional={true}
+            isDataFetching={isFetching}
+            language={languageLocal}
+            formSchema={schema}
+            formMethods={methods}
+            unscrollableFullHeight
+        >
+            {!isFetching && (
+                <Box sx={unscrollableDialogStyles.unscrollableContainer}>
+                    <CompositeModificationEditionForm />
+                    {renderNetworkModificationsList()}
+                </Box>
+            )}
+        </CustomMuiDialog>
+    );
+};

src/components/dialogs/network-modification/composite-modification/composite-modification-edition-form.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2024, 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 { UniqueNameInput, ElementType, FieldConstants } from '@gridsuite/commons-ui';
+import { elementExists } from 'utils/rest-api';
+import { useSelector } from 'react-redux';
+import { AppState } from 'redux/reducer';
+import Box from '@mui/material/Box';
+
+const CompositeModificationEditionForm = () => {
+    const activeDirectory = useSelector((state: AppState) => state.activeDirectory);
+    return (
+        <Box>
+            <UniqueNameInput
+                name={FieldConstants.NAME}
+                label={'nameProperty'}
+                elementType={ElementType.MODIFICATION}
+                activeDirectory={activeDirectory}
+                elementExists={elementExists}
+            />
+        </Box>
+    );
+};
+
+export default CompositeModificationEditionForm;

src/components/directory-content.tsx

@@ -13,7 +13,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import * as constants from '../utils/UIconstants';
 import CircularProgress from '@mui/material/CircularProgress';
 
-import { ContingencyListType, FilterType } from '../utils/elementType';
+import { ContingencyListType, FilterType, NetworkModificationType } from '../utils/elementType';
 import {
     CriteriaBasedFilterEditionDialog,
     DescriptionModificationDialog,
@@ -54,6 +54,7 @@ import AddIcon from '@mui/icons-material/Add';
 import { AppState } from '../redux/reducer';
 import { AgGridReact } from 'ag-grid-react';
 import { SelectionForCopy } from '@gridsuite/commons-ui/dist/components/filter/filter.type';
+import CompositeModificationEditionDialog from './dialogs/network-modification/composite-modification/composite-modification-edition-dialog';
 
 const circularProgressSize = '70px';
 
@@ -209,6 +210,14 @@ const DirectoryContent = () => {
     };
     const [currentExplicitNamingFilterId, setCurrentExplicitNamingFilterId] = useState(null);
 
+    const handleCloseCompositeModificationDialog = () => {
+        setOpenDialog(constants.DialogsId.NONE);
+        setCurrentNetworkModificationId(null);
+        setActiveElement(null);
+        setElementName('');
+    };
+    const [currentNetworkModificationId, setCurrentNetworkModificationId] = useState(null);
+
     /**
      * Filters dialog: window status value to edit Expert filters
      */
@@ -392,6 +401,12 @@ const DirectoryContent = () => {
                             setOpenDialog(subtype);
                         }
                         break;
+                    case ElementType.MODIFICATION:
+                        if (subtype === NetworkModificationType.COMPOSITE.id) {
+                            setCurrentNetworkModificationId(event.data.elementUuid);
+                            setOpenDialog(subtype);
+                        }
+                        break;
                     default:
                         break;
                 }
@@ -529,6 +544,18 @@ const DirectoryContent = () => {
         // TODO openDialog should also be aware of the dialog's type, not only its subtype, because
         // if/when two different dialogs have the same subtype, this function will display the wrong dialog.
         switch (openDialog) {
+            case NetworkModificationType.COMPOSITE.id:
+                return (
+                    <CompositeModificationEditionDialog
+                        open={true}
+                        titleId={'compositeModification'}
+                        // @ts-expect-error TODO: manage null case(s) here
+                        compositeModificationId={currentNetworkModificationId}
+                        onClose={handleCloseCompositeModificationDialog}
+                        name={name}
+                        broadcastChannel={broadcastChannel}
+                    />
+                );
             case ContingencyListType.CRITERIA_BASED.id:
                 return (
                     <CriteriaBasedEditionDialog