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,85 @@
+/**
+ * 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, { SetStateAction, 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 { setModificationDescription } from '../../../../services/study/network-modifications';
+
+export interface DescriptionRendererProps extends ICellRendererParams<NetworkModificationMetadata> {
+    setModifications: React.Dispatch<SetStateAction<NetworkModificationMetadata[]>>;
+    hoveredRowIndex: number;
+}
+
+const DescriptionRenderer = (props: DescriptionRendererProps) => {
+    const { 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: string | undefined = data?.description;
+    const empty: boolean = !description;
+
+    const updateModification = useCallback(
+        async (uuid: UUID, descriptionRecord: Record<string, string>) => {
+            setIsLoading(true);
+
+            return setModificationDescription(studyUuid, currentNode?.id, uuid, descriptionRecord.description).finally(
+                () => {
+                    setIsLoading(false);
+                }
+            );
+        },
+        [studyUuid, currentNode?.id]
+    );
+
+    const handleDescDialogClose = useCallback(() => {
+        setOpenDescModificationDialog(false);
+        api.stopEditing();
+    }, [api]);
+
+    const handleModifyDescription = () => {
+        if (isLoading) {
+            return;
+        }
+        setOpenDescModificationDialog(true);
+    };
+
+    return (
+        <>
+            {openDescModificationDialog && modificationUuid && (
+                <DescriptionModificationDialog
+                    open
+                    description={description ?? ''}
+                    elementUuid={modificationUuid}
+                    onClose={handleDescDialogClose}
+                    updateElement={updateModification}
+                />
+            )}
+            <Tooltip title={description} arrow>
+                <IconButton
+                    color="primary"
+                    onClick={handleModifyDescription}
+                    disabled={isLoading || isAnyNodeBuilding || mapDataLoading}
+                >
+                    <EditNoteIcon empty={empty} hidden={node.rowIndex !== props.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>();
 
     const intl = useIntl();
     const { computeLabel } = useModificationLabelComputer();
@@ -143,6 +146,15 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
                 flex: 1,
                 cellStyle: { cursor: 'pointer' },
             },
+            {
+                colId: 'modificationDescription',
+                cellRenderer: DescriptionRenderer,
+                cellRendererParams: {
+                    setModifications: setModifications,
+                    hoveredRowIndex: hoveredRowIndex,
+                },
+                width: 30,
+            },
             {
                 cellRenderer: SwitchCellRenderer,
                 cellRendererParams: {
@@ -199,6 +211,7 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
         currentRootNetworkUuid,
         modificationsToExclude,
         setModificationsToExclude,
+        hoveredRowIndex,
     ]);
 
     const getRowId = (params: GetRowIdParams<NetworkModificationMetadata>) => params.data.uuid;
@@ -245,6 +258,10 @@ const NetworkModificationsTable: React.FC<NetworkModificationsTableProps> = ({
                     checkboxes: true,
                     headerCheckbox: true,
                 }}
+                onCellMouseOver={(event: CellMouseOverEvent<NetworkModificationMetadata>) =>
+                    setHoveredRowIndex(event.rowIndex ?? -1)
+                }
+                onCellMouseOut={() => setHoveredRowIndex(-1)}
                 defaultColDef={defaultColumnDefinition}
                 onCellClicked={handleCellClick}
                 onRowSelected={onRowSelected}

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

@@ -116,6 +116,23 @@ export function setModificationActivated(
     });
 }
 
+export function setModificationDescription(
+    studyUuid: UUID | null,
+    nodeUuid: UUID | undefined,
+    modificationUuid: UUID,
+    description: string
+): Promise<Response> {
+    const urlSearchParams = new URLSearchParams();
+    urlSearchParams.append('description', description);
+    urlSearchParams.append('uuid', String(modificationUuid));
+    const modificationUpdateActiveUrl =
+        getNetworkModificationUrl(studyUuid, nodeUuid) + '?' + urlSearchParams.toString();
+    console.debug(modificationUpdateActiveUrl);
+    return backendFetch(modificationUpdateActiveUrl, {
+        method: 'PUT',
+    });
+}
+
 export function updateModificationStatusByRootNetwork(
     studyUuid: UUID,
     nodeUuid: UUID,