Enhance description field in filter form proposed

src/components/ExpendableGroup/expendable-group.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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 {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Theme,
+    Typography,
+} from '@mui/material';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
+import { ExpandCircleDown, ExpandMore } from '@mui/icons-material';
+import { FormattedMessage } from 'react-intl';
+
+export const styles = {
+    accordion: (theme: Theme) => ({
+        '&:before': {
+            display: 'none',
+        },
+        background: 'none',
+    }),
+    accordionSummary: (theme: Theme) => ({
+        flexDirection: 'row-reverse', // place icon at the left
+        padding: 0, // reset default left right space in summary
+        '.MuiAccordionSummary-content': {
+            paddingLeft: 1, // align text label
+        },
+        '&:not(.Mui-expanded)': {
+            // show a fake divider at the bottom of summary
+            borderBottom: '1px solid',
+            borderColor: theme.palette.divider,
+        },
+
+        '& .MuiAccordionSummary-expandIconWrapper': {
+            transform: 'rotate(-90deg)',
+        },
+        '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+            transform: 'rotate(0deg)',
+        },
+    }),
+    accordionDetails: (theme: Theme) => ({
+        padding: 0, // reset default left right space in details
+    }),
+};
+
+interface ExpandableGroupProps extends PropsWithChildren {
+    renderHeader: ReactNode;
+}
+
+const ExpendableGroup = ({ renderHeader, children }: ExpandableGroupProps) => {
+    const [mouseHover, setMouseHover] = useState(false);
+
+    return (
+        <Accordion sx={styles.accordion} disableGutters elevation={0}>
+            <AccordionSummary
+                sx={styles.accordionSummary}
+                expandIcon={mouseHover ? <ExpandCircleDown /> : <ExpandMore />}
+                onMouseEnter={(event) => setMouseHover(true)}
+                onMouseLeave={(event) => setMouseHover(false)}
+            >
+                {typeof renderHeader === 'string' ? (
+                    <Typography>
+                        <FormattedMessage id={renderHeader} />
+                    </Typography>
+                ) : (
+                    renderHeader
+                )}
+            </AccordionSummary>
+            <AccordionDetails sx={styles.accordionDetails}>
+                {children}
+            </AccordionDetails>
+        </Accordion>
+    );
+};
+
+export default ExpendableGroup;

src/components/ExpendableGroup/index.ts

@@ -0,0 +1,8 @@
+/**
+ * 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/.
+ */
+
+export { default } from './expendable-group';

src/components/filter/filter-form.tsx

@@ -12,13 +12,14 @@ import ExplicitNamingFilterForm from './explicit-naming/explicit-naming-filter-f
 import React, { FunctionComponent, useEffect } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import ExpertFilterForm from './expert/expert-filter-form';
-import { Box, Grid } from '@mui/material';
-import RadioInput from '../inputs/react-hook-form/radio-input';
+import { Grid } from '@mui/material';
 import { ElementType } from '../../utils/ElementType';
 import { UUID } from 'crypto';
 import { elementExistsType } from './criteria-based/criteria-based-filter-edition-dialog';
-import ExpandingTextField from '../inputs/react-hook-form/ExpandingTextField';
 import { FilterType } from './constants/filter-constants';
+import ExpendableGroup from '../ExpendableGroup';
+import RadioInput from '../inputs/react-hook-form/radio-input';
+import ExpandingTextField from '../inputs/react-hook-form/ExpandingTextField';
 
 interface FilterFormProps {
     creation?: boolean;
@@ -64,14 +65,13 @@ export const FilterForm: FunctionComponent<FilterFormProps> = (props) => {
             {props.creation && (
                 <>
                     <Grid item xs={12}>
-                        <Box>
+                        <ExpendableGroup renderHeader={'Description'}>
                             <ExpandingTextField
                                 name={FieldConstants.DESCRIPTION}
-                                label={'descriptionProperty'}
                                 minRows={3}
                                 rows={5}
                             />
-                        </Box>
+                        </ExpendableGroup>
                     </Grid>
                     {!props.sourceFilterForExplicitNamingConversion && (
                         <Grid item>

src/index.ts

@@ -20,6 +20,7 @@ export { default as ReportViewerDialog } from './components/ReportViewerDialog';
 export { default as OverflowableText } from './components/OverflowableText';
 export { default as ElementSearchDialog } from './components/ElementSearchDialog';
 export { default as FlatParameters } from './components/FlatParameters';
+export { default as ExpandableGroup } from './components/ExpendableGroup';
 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';