add field description to modification

src/components/app-wrapper.jsx

@@ -53,6 +53,8 @@ import {
     commonButtonFr,
     componentsFr,
     componentsEn,
+    descriptionFr,
+    descriptionEn,
     dndTableFr,
     dndTableEn,
     equipmentsEn,
@@ -403,6 +405,7 @@ const messages = {
         ...multipleSelectionDialogEn,
         ...commonButtonEn,
         ...componentsEn,
+        ...descriptionEn,
         ...dndTableEn,
         ...equipmentsEn,
         ...grid_en,
@@ -446,6 +449,7 @@ const messages = {
         ...componentsFr,
         ...dndTableFr,
         ...equipmentsFr,
+        ...descriptionFr,
         ...grid_fr,
         ...backend_locale_fr,
         ...dynamic_mapping_models_fr,

src/components/dialogs/restore-modification-dialog.tsx

@@ -11,6 +11,7 @@ import {
     CancelButton,
     CheckBoxList,
     type MuiStyles,
+    NetworkModificationMetadata,
     snackWithFallback,
     useModificationLabelComputer,
     useSnackMessage,
@@ -19,7 +20,6 @@ import { deleteModifications, restoreModifications } from 'services/study/networ
 import { CustomDialog } from 'components/utils/custom-dialog';
 import { useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
-import { NetworkModificationMetadata } from 'components/graph/menus/network-modifications/network-modification-menu.type';
 import { toggleElementFromList } from 'components/utils/utils';
 
 const styles = {

src/components/graph/menus/network-modifications/DescriptionRenderer.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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 { ICellRendererParams } from 'ag-grid-community';
+import { DescriptionModificationDialog, EditNoteIcon, NetworkModificationMetadata } from '@gridsuite/commons-ui';
+import React, { useCallback, useState } from 'react';
+import { Tooltip } from '@mui/material';
+import { useIsAnyNodeBuilding } from '../../../utils/is-any-node-building-hook';
+import { useSelector } from 'react-redux';
+import { AppState } from '../../../../redux/reducer';
+import IconButton from '@mui/material/IconButton';
+import type { UUID } from 'node:crypto';
+import { setModificationMetadata } from '../../../../services/study/network-modifications';
+
+export interface DescriptionRendererProps extends ICellRendererParams<NetworkModificationMetadata> {
+    hoveredRowIndex: number;
+}
+
+const DescriptionRenderer = (props: DescriptionRendererProps) => {
+    const { hoveredRowIndex, data, api, node } = props;
+    const studyUuid = useSelector((state: AppState) => state.studyUuid);
+    const currentNode = useSelector((state: AppState) => state.currentTreeNode);
+    const [isLoading, setIsLoading] = useState(false);
+    const isAnyNodeBuilding = useIsAnyNodeBuilding();
+    const mapDataLoading = useSelector((state: AppState) => state.mapDataLoading);
+    const [openDescModificationDialog, setOpenDescModificationDialog] = useState(false);
+
+    const modificationUuid = data?.uuid;
+    const description = data?.description;
+    const empty = !description;
+
+    const updateModification = useCallback(
+        async (uuid: UUID, descriptionRecord: Record<string, string>) => {
+            setIsLoading(true);
+
+            return setModificationMetadata(studyUuid, currentNode?.id, uuid, {
+                description: descriptionRecord.description,
+                type: data?.type,
+            }).finally(() => {
+                setIsLoading(false);
+            });
+        },
+        [studyUuid, currentNode?.id, data?.type]
+    );
+
+    const handleDescDialogClose = useCallback(() => {
+        setOpenDescModificationDialog(false);
+        api.stopEditing();
+    }, [api, setOpenDescModificationDialog]);
+
+    const handleModifyDescription = useCallback(() => {
+        setOpenDescModificationDialog(true);
+    }, [setOpenDescModificationDialog]);
+
+    return (
+        <>
+            {openDescModificationDialog && modificationUuid && (
+                <DescriptionModificationDialog
+                    open
+                    description={description ?? ''}
+                    elementUuid={modificationUuid}
+                    onClose={handleDescDialogClose}
+                    updateElement={updateModification}
+                />
+            )}
+            <Tooltip title={description} arrow placement="right">
+                <IconButton
+                    color="primary"
+                    onClick={handleModifyDescription}
+                    disabled={isLoading || isAnyNodeBuilding || mapDataLoading}
+                >
+                    <EditNoteIcon empty={empty} hidden={node.rowIndex !== hoveredRowIndex} />
+                </IconButton>
+            </Tooltip>
+        </>
+    );
+};
+
+export default DescriptionRenderer;

src/components/graph/menus/network-modifications/network-modification-menu.type.ts

@@ -38,16 +38,6 @@ export interface ExcludedNetworkModifications {
     modificationUuidsToExclude: UUID[];
 }
 
-export interface NetworkModificationMetadata {
-    uuid: UUID;
-    type: string;
-    date: Date;
-    stashed: boolean;
-    activated: boolean;
-    messageType: string;
-    messageValues: string;
-}
-
 export enum NetworkModificationCopyType {
     COPY = 'COPY',
     MOVE = 'MOVE',

src/components/graph/menus/network-modifications/network-modifications-table.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { SetStateAction, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     CustomAGGrid,
     type MuiStyles,
@@ -15,6 +15,7 @@ import {
 } from '@gridsuite/commons-ui';
 import type {
     CellClickedEvent,
+    CellMouseOverEvent,
     ColDef,
     GetRowIdParams,
     IRowDragItem,
@@ -39,6 +40,7 @@ import SwitchCellRenderer from './switch-cell-renderer';
 import { AGGRID_LOCALES } from '../../../../translations/not-intl/aggrid-locales';
 import { ExcludedNetworkModifications } from './network-modification-menu.type';
 import { AgGridReact } from 'ag-grid-react';
+import DescriptionRenderer from './DescriptionRenderer';
 
 const styles = {
     container: (theme) => ({
@@ -89,6 +91,7 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
     const rootNetworks = useSelector((state: AppState) => state.rootNetworks);
     const isMonoRootStudy = useSelector((state: AppState) => state.isMonoRootStudy);
     const highlightedModificationUuid = useSelector((state: AppState) => state.highlightedModificationUuid);
+    const [hoveredRowIndex, setHoveredRowIndex] = useState<number | null>();
 
     const intl = useIntl();
     const { computeLabel } = useModificationLabelComputer();
@@ -143,6 +146,14 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
                 flex: 1,
                 cellStyle: { cursor: 'pointer' },
             },
+            {
+                colId: 'modificationDescription',
+                cellRenderer: DescriptionRenderer,
+                cellRendererParams: {
+                    hoveredRowIndex: hoveredRowIndex,
+                },
+                width: 30,
+            },
             {
                 cellRenderer: SwitchCellRenderer,
                 cellRendererParams: {
@@ -199,6 +210,7 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
         currentRootNetworkUuid,
         modificationsToExclude,
         setModificationsToExclude,
+        hoveredRowIndex,
     ]);
 
     const getRowId = (params: GetRowIdParams<NetworkModificationMetadata>) => params.data.uuid;
@@ -245,6 +257,10 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
                     checkboxes: true,
                     headerCheckbox: true,
                 }}
+                onCellMouseOver={(event: CellMouseOverEvent<NetworkModificationMetadata>) =>
+                    setHoveredRowIndex(event.rowIndex ?? null)
+                }
+                onCellMouseOut={() => setHoveredRowIndex(null)}
                 defaultColDef={defaultColumnDefinition}
                 onCellClicked={handleCellClick}
                 onRowSelected={onRowSelected}

src/components/graph/menus/network-modifications/switch-cell-renderer.tsx

@@ -8,7 +8,7 @@
 import React, { useState, useCallback, SetStateAction } from 'react';
 import { Switch, Tooltip } from '@mui/material';
 import { NetworkModificationMetadata, snackWithFallback, useSnackMessage } from '@gridsuite/commons-ui';
-import { setModificationActivated } from 'services/study/network-modifications';
+import { setModificationMetadata } from 'services/study/network-modifications';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { AppState } from 'redux/reducer';
@@ -37,15 +37,18 @@ const SwitchCellRenderer = (props: SwitchCellRendererProps) => {
             if (!modificationUuid) {
                 return;
             }
-            setModificationActivated(studyUuid, currentNode?.id, modificationUuid, activated)
+            setModificationMetadata(studyUuid, currentNode?.id, modificationUuid, {
+                activated: activated,
+                type: data?.type,
+            })
                 .catch((error) => {
                     snackWithFallback(snackError, error, { headerId: 'networkModificationActivationError' });
                 })
                 .finally(() => {
                     setIsLoading(false);
                 });
         },
-        [studyUuid, currentNode?.id, modificationUuid, snackError]
+        [modificationUuid, studyUuid, currentNode?.id, data?.type, snackError]
     );
 
     const toggleModificationActive = useCallback(() => {

src/components/workspace/constants/workspace.constants.tsx

@@ -101,7 +101,7 @@ export const DEFAULT_PANEL_CONFIGS: Record<PanelType, PanelConfig> = {
     [PanelType.NODE_EDITOR]: {
         title: 'modifications',
         defaultSize: { width: 0.2, height: 0.6 },
-        minSize: { width: 300, height: 300 },
+        minSize: { width: 340, height: 300 },
         defaultPosition: { x: 0.05, y: 0 },
         icon: <Tune fontSize="inherit" />,
     },

src/services/study/network-modifications.ts

@@ -99,20 +99,22 @@ export function stashModifications(studyUuid: UUID | null, nodeUuid: UUID | unde
     });
 }
 
-export function setModificationActivated(
+export function setModificationMetadata(
     studyUuid: UUID | null,
     nodeUuid: UUID | undefined,
     modificationUuid: UUID,
-    activated: boolean
-) {
+    metadata: Partial<NetworkModificationMetadata>
+): Promise<Response> {
     const urlSearchParams = new URLSearchParams();
-    urlSearchParams.append('activated', String(activated));
     urlSearchParams.append('uuids', String([modificationUuid]));
-    const modificationUpdateActiveUrl =
-        getNetworkModificationUrl(studyUuid, nodeUuid) + '?' + urlSearchParams.toString();
-    console.debug(modificationUpdateActiveUrl);
-    return backendFetch(modificationUpdateActiveUrl, {
+    const modificationUpdateUrl = getNetworkModificationUrl(studyUuid, nodeUuid) + '?' + urlSearchParams.toString();
+    return backendFetch(modificationUpdateUrl, {
         method: 'PUT',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(metadata),
     });
 }