From 0eb1cf68bc7da3a374432048a4511554b5b9da3e Mon Sep 17 00:00:00 2001
From: souissimai <133104748+souissimai@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:17:05 +0200
Subject: [PATCH] Unify description for different elements gridexplore (#551)

* Unify description for diffrenet elements gridexplore

---------

Signed-off-by: maissa SOUISSI <maissa.souissi@rte-france.com>
---
 src/components/filter/filter-form.tsx         | 12 +---
 .../react-hook-form/description-field.tsx     | 62 +++++++++++++++++++
 src/index.ts                                  |  1 +
 3 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 src/components/inputs/react-hook-form/description-field.tsx

diff --git a/src/components/filter/filter-form.tsx b/src/components/filter/filter-form.tsx
index fcc3f23c..059d3fc7 100644
--- a/src/components/filter/filter-form.tsx
+++ b/src/components/filter/filter-form.tsx
@@ -14,11 +14,10 @@ import CriteriaBasedFilterForm from './criteria-based/criteria-based-filter-form
 import ExplicitNamingFilterForm from './explicit-naming/explicit-naming-filter-form';
 import ExpertFilterForm from './expert/expert-filter-form';
 import { FilterType } from './constants/filter-constants';
-import ExpandableGroup from '../ExpandableGroup';
 import RadioInput from '../inputs/react-hook-form/radio-input';
 import { ElementExistsType, ElementType } from '../../utils/ElementType';
-import ExpandingTextField from '../inputs/react-hook-form/ExpandingTextField';
 import UniqueNameInput from '../inputs/react-hook-form/unique-name-input';
+import DescriptionField from '../inputs/react-hook-form/description-field';
 
 interface FilterFormProps {
     creation?: boolean;
@@ -62,14 +61,7 @@ function FilterForm(props: FilterFormProps) {
             {creation && (
                 <>
                     <Grid item xs={12}>
-                        <ExpandableGroup renderHeader="Description">
-                            <ExpandingTextField
-                                name={FieldConstants.DESCRIPTION}
-                                label="descriptionProperty"
-                                minRows={3}
-                                rows={5}
-                            />
-                        </ExpandableGroup>
+                        <DescriptionField />
                     </Grid>
                     {!sourceFilterForExplicitNamingConversion && (
                         <Grid item>
diff --git a/src/components/inputs/react-hook-form/description-field.tsx b/src/components/inputs/react-hook-form/description-field.tsx
new file mode 100644
index 00000000..10618e00
--- /dev/null
+++ b/src/components/inputs/react-hook-form/description-field.tsx
@@ -0,0 +1,62 @@
+/**
+ * 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 { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Box, Button } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useFormContext } from 'react-hook-form'; // Import useFormContext
+import FieldConstants from '../../../utils/field-constants';
+import ExpandingTextField from './ExpandingTextField';
+
+function DescriptionField() {
+    const [isDescriptionFieldVisible, setIsDescriptionFieldVisible] = useState(false);
+    const { setValue } = useFormContext();
+
+    const handleOpenDescription = () => {
+        setIsDescriptionFieldVisible(true);
+        setValue(FieldConstants.DESCRIPTION, '');
+    };
+
+    const handleCloseDescription = () => {
+        setIsDescriptionFieldVisible(false);
+    };
+
+    return (
+        <Box>
+            {!isDescriptionFieldVisible ? (
+                <Button startIcon={<AddIcon />} onClick={handleOpenDescription}>
+                    <FormattedMessage id="AddDescription" />
+                </Button>
+            ) : (
+                <Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
+                    <ExpandingTextField
+                        name={FieldConstants.DESCRIPTION}
+                        label="descriptionProperty"
+                        minRows={3}
+                        rows={3}
+                        sx={{ flexGrow: 1 }}
+                    />
+                    <Button
+                        sx={{
+                            alignSelf: 'flex-end',
+                            marginLeft: 1,
+                            padding: 1,
+                            marginBottom: 2,
+                        }}
+                        onClick={handleCloseDescription}
+                    >
+                        <DeleteIcon />
+                    </Button>
+                </Box>
+            )}
+        </Box>
+    );
+}
+
+export default DescriptionField;
diff --git a/src/index.ts b/src/index.ts
index a70f42c9..7eb6355d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -27,6 +27,7 @@ export { default as ExpandableGroup } from './components/ExpandableGroup';
 export { default as MultipleSelectionDialog } from './components/MultipleSelectionDialog';
 export { default as CustomMuiDialog } from './components/dialogs/custom-mui-dialog';
 export { default as DescriptionModificationDialog } from './components/dialogs/description-modification-dialog';
+export { default as DescriptionField } from './components/inputs/react-hook-form/description-field';
 export { default as ModifyElementSelection } from './components/dialogs/modify-element-selection';
 export { default as CriteriaBasedForm } from './components/filter/criteria-based/criteria-based-form';
 export { default as PopupConfirmationDialog } from './components/dialogs/popup-confirmation-dialog';