Add description modification

src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx

@@ -19,7 +19,7 @@ interface ICustomMuiDialog {
     onSave: (data: any) => void;
     onValidationError?: (errors: FieldErrors) => void;
     titleId: string;
-    disabledSave: boolean;
+    disabledSave?: boolean;
     removeOptional?: boolean;
     onCancel?: () => void;
     children: React.ReactNode;

src/components/dialogs/description-modification/description-modification-dialogue.tsx

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023, 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, useCallback } from 'react';
+import yup from '../../utils/yup-config';
+import { DESCRIPTION } from '../../utils/field-constants';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { updateElement } from '../../../utils/rest-api';
+import { TextInput, useSnackMessage } from '@gridsuite/commons-ui';
+import CustomMuiDialog from '../commons/custom-mui-dialog/custom-mui-dialog';
+import React from 'react';
+
+interface IDescriptionModificationDialogue {
+    elementUuid: string;
+    description: string;
+    open: boolean;
+    onClose: () => void;
+}
+
+const schema = yup.object().shape({
+    [DESCRIPTION]: yup.string().nullable(),
+});
+
+const DescriptionModificationDialogue: FunctionComponent<
+    IDescriptionModificationDialogue
+> = ({ elementUuid, description, open, onClose }) => {
+    const { snackError } = useSnackMessage();
+
+    const emptyFormData = {
+        [DESCRIPTION]: description ?? '',
+    };
+
+    const methods = useForm({
+        defaultValues: emptyFormData,
+        resolver: yupResolver(schema),
+    });
+
+    const { reset } = methods;
+
+    const onCancel = () => {
+        reset({
+            [DESCRIPTION]: '',
+        });
+        onClose();
+    };
+
+    const onSubmit = useCallback(
+        (data: { description: string }) => {
+            updateElement(elementUuid, {
+                [DESCRIPTION]: data[DESCRIPTION].trim(),
+            }).catch((error) => {
+                snackError({
+                    messageTxt: error.message,
+                    headerId: 'descriptionModificationError',
+                });
+            });
+        },
+        [elementUuid, snackError]
+    );
+
+    return (
+        <CustomMuiDialog
+            open={open}
+            onClose={onCancel}
+            onSave={onSubmit}
+            formSchema={schema}
+            formMethods={methods}
+            titleId={'descriptionModificationDialog'}
+        >
+            <TextInput
+                name={DESCRIPTION}
+                formProps={{
+                    multiline: true,
+                }}
+            />
+        </CustomMuiDialog>
+    );
+};
+
+export default DescriptionModificationDialogue;

src/components/directory-content.js

@@ -17,6 +17,8 @@ import Tooltip from '@mui/material/Tooltip';
 import CircularProgress from '@mui/material/CircularProgress';
 import SettingsIcon from '@mui/icons-material/Settings';
 import FolderOpenRoundedIcon from '@mui/icons-material/FolderOpenRounded';
+import StickyNote2Icon from '@mui/icons-material/StickyNote2';
+import StickyNote2IconOutlined from '@mui/icons-material/StickyNote2Outlined';
 
 import VirtualizedTable from './virtualized-table';
 import {
@@ -46,6 +48,7 @@ import CriteriaBasedEditionDialog from './dialogs/contingency-list/edition/crite
 import ExplicitNamingEditionDialog from './dialogs/contingency-list/edition/explicit-naming/explicit-naming-edition-dialog';
 import ScriptEditionDialog from './dialogs/contingency-list/edition/script/script-edition-dialog';
 import ExpertFilterEditionDialog from './dialogs/filter/expert/expert-filter-edition-dialog';
+import DescriptionModificationDialogue from './dialogs/description-modification/description-modification-dialogue';
 
 const circularProgressSize = '70px';
 
@@ -93,6 +96,14 @@ const styles = {
     tooltip: {
         maxWidth: '1000px',
     },
+    descriptionTooltip: {
+        display: 'inline-block',
+        whiteSpace: 'pre',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        maxWidth: '250px',
+        maxHeight: '50px',
+    },
 };
 
 const initialMousePosition = {
@@ -415,6 +426,41 @@ const DirectoryContent = () => {
         }
     }
 
+    const [openDescModificationDialog, setOpenDescModificationDialog] =
+        useState(false);
+    function descriptionCellRender(cellData) {
+        const description = cellData.rowData['description'];
+
+        const handleClick = (e) => {
+            setActiveElement(cellData.rowData);
+            setOpenDescModificationDialog(true);
+            e.stopPropagation();
+        };
+
+        const icon = description ? (
+            <Tooltip
+                title={
+                    <Box
+                        children={description}
+                        sx={styles.descriptionTooltip}
+                    />
+                }
+                placement="right"
+            >
+                <StickyNote2Icon onClick={handleClick} />
+            </Tooltip>
+        ) : (
+            <StickyNote2IconOutlined onClick={handleClick} />
+        );
+        return (
+            <>
+                {isElementCaseOrStudy(cellData.rowData['type']) && (
+                    <Box sx={styles.cell}>{icon}</Box>
+                )}
+            </>
+        );
+    }
+
     function getElementIcon(objectType) {
         if (objectType === ElementType.STUDY) {
             return <PhotoLibraryIcon sx={styles.icon} />;
@@ -705,6 +751,14 @@ const DirectoryContent = () => {
                             cellRenderer: nameCellRender,
                             minWidth: '36%',
                         },
+                        {
+                            label: intl.formatMessage({
+                                id: 'description',
+                            }),
+                            dataKey: 'description',
+                            minWidth: '10%',
+                            cellRenderer: descriptionCellRender,
+                        },
                         {
                             minWidth: '20%',
                             label: intl.formatMessage({
@@ -774,6 +828,19 @@ const DirectoryContent = () => {
     };
 
     const renderDialog = (name) => {
+        if (openDescModificationDialog && activeElement) {
+            return (
+                <DescriptionModificationDialogue
+                    open={true}
+                    description={activeElement.description}
+                    elementUuid={activeElement.elementUuid}
+                    onClose={() => {
+                        setActiveElement(null);
+                        setOpenDescModificationDialog(false);
+                    }}
+                />
+            );
+        }
         // 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) {

src/translations/en.json

@@ -5,6 +5,7 @@
   "paramsRetrievingError": "An error occurred while retrieving the parameters",
   "elementUuid": "Element Uuid",
   "elementName": "Name",
+  "description": "Description",
   "creator": "Created by",
   "type": "Type",
   "created": "Created",
@@ -238,5 +239,8 @@
   "emptyRule": "Filter contains an empty field",
   "incorrectRule": "Filter contains an incorrect field",
   "emptyGroup": "Filter contains an empty group. Consider removing it or adding rules to this group",
-  "downloadCases": "Download Case(s)"
+  "downloadCases": "Download Case(s)",
+
+  "descriptionModificationError": "An error when modifying the description",
+  "descriptionModificationDialog": "Description modification"
 }

src/translations/fr.json

@@ -5,6 +5,7 @@
   "paramsRetrievingError": "Une erreur est survenue lors de la récupération des paramètres",
   "elementUuid": "Uuid de l'élément",
   "elementName": "Nom",
+  "description": "Description",
   "creator": "Créé par",
   "type": "Type",
   "created": "Créé",
@@ -253,5 +254,8 @@
   "emptyRule": "Le filtre contient un champ vide",
   "incorrectRule": "Le filtre contient un champ incorrect",
   "emptyGroup": "Le filtre contient un groupe vide. Supprimez le ou ajoutez des règles à ce groupe",
-  "downloadCases": "Télécharger la(les) situation(s)"
+  "downloadCases": "Télécharger la(les) situation(s)",
+
+  "descriptionModificationError": "Erreur lors de la modification de la description",
+  "descriptionModificationDialog": "Modification de la description"
 }

src/utils/rest-api.js

@@ -296,6 +296,21 @@ export function updateAccessRights(elementUuid, isPrivate) {
     });
 }
 
+export function updateElement(elementUuid, element) {
+    console.log('element : ', element);
+    console.info('Updating element info for ' + elementUuid);
+    const updateAccessRightUrl =
+        PREFIX_DIRECTORY_SERVER_QUERIES + `/v1/elements/${elementUuid}`;
+    return backendFetch(updateAccessRightUrl, {
+        method: 'put',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(element),
+    });
+}
+
 export function insertDirectory(directoryName, parentUuid, isPrivate, owner) {
     console.info("Inserting a new folder '%s'", directoryName);
     const insertDirectoryUrl =