Improve filter IHM (by using box with flex system)

src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx

@@ -30,6 +30,7 @@ export interface CustomMuiDialogProps {
     isDataFetching?: boolean;
     language?: string;
     confirmationMessageKey?: string;
+    unscrollableFullHeight?: boolean;
 }
 
 const styles = {
@@ -40,6 +41,20 @@ const styles = {
             margin: 'auto',
         },
     },
+    dialogPaperFullHeight: {
+        '.MuiDialog-paper': {
+            width: 'auto',
+            minWidth: '1000px',
+            margin: 'auto',
+            height: '95vh',
+            overflowY: 'hidden',
+        },
+    },
+    unscrollable: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflowY: 'hidden',
+    },
 };
 
 export function CustomMuiDialog({
@@ -57,6 +72,7 @@ export function CustomMuiDialog({
     children,
     language,
     confirmationMessageKey,
+    unscrollableFullHeight = false,
 }: Readonly<CustomMuiDialogProps>) {
     const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
     const [validatedData, setValidatedData] = useState(undefined);
@@ -113,14 +129,19 @@ export function CustomMuiDialog({
             removeOptional={removeOptional}
             language={language}
         >
-            <Dialog sx={styles.dialogPaper} open={open} onClose={handleClose} fullWidth>
+            <Dialog
+                sx={unscrollableFullHeight ? styles.dialogPaperFullHeight : styles.dialogPaper}
+                open={open}
+                onClose={handleClose}
+                fullWidth
+            >
                 {isDataFetching && <LinearProgress />}
                 <DialogTitle>
                     <Grid item xs={11}>
                         <FormattedMessage id={titleId} />
                     </Grid>
                 </DialogTitle>
-                <DialogContent>{children}</DialogContent>
+                <DialogContent sx={unscrollableFullHeight ? styles.unscrollable : null}>{children}</DialogContent>
                 <DialogActions>
                     <CancelButton onClick={handleCancel} />
                     <SubmitButton

src/components/filter/FilterCreationDialog.tsx

@@ -139,6 +139,7 @@ export function FilterCreationDialog({
             removeOptional
             disabledSave={!!nameError || !!isValidating}
             language={language}
+            unscrollableFullHeight
         >
             <FilterForm
                 creation

src/components/filter/FilterForm.tsx

@@ -5,82 +5,45 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { Grid } from '@mui/material';
-import { UUID } from 'crypto';
+import { Box } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { FilterFormProps, HeaderFilterForm } from './HeaderFilterForm';
 import { FieldConstants } from '../../utils/constants/fieldConstants';
 import { CriteriaBasedFilterForm } from './criteriaBased/CriteriaBasedFilterForm';
 import { ExplicitNamingFilterForm } from './explicitNaming/ExplicitNamingFilterForm';
 import { ExpertFilterForm } from './expert/ExpertFilterForm';
 import { FilterType } from './constants/FilterConstants';
-import { RadioInput } from '../inputs/reactHookForm/booleans/RadioInput';
-import { ElementExistsType, ElementType } from '../../utils/types/elementType';
-import { UniqueNameInput } from '../inputs/reactHookForm/text/UniqueNameInput';
-import { DescriptionField } from '../inputs/reactHookForm/text/DescriptionField';
-
-export interface FilterFormProps {
-    creation?: boolean;
-    activeDirectory?: UUID;
-    elementExists?: ElementExistsType;
-    sourceFilterForExplicitNamingConversion?: {
-        id: UUID;
-        equipmentType: string;
-    };
-}
-
-export function FilterForm(props: FilterFormProps) {
-    const { sourceFilterForExplicitNamingConversion, creation, activeDirectory, elementExists } = props;
-    const { setValue } = useFormContext();
 
+export function FilterForm({
+    sourceFilterForExplicitNamingConversion,
+    creation,
+    activeDirectory,
+    elementExists,
+}: Readonly<FilterFormProps>) {
     const filterType = useWatch({ name: FieldConstants.FILTER_TYPE });
 
-    // We do this because setValue don't set the field dirty
-    const handleChange = (_event: React.ChangeEvent<HTMLInputElement>, value: string) => {
-        setValue(FieldConstants.FILTER_TYPE, value);
-    };
-
-    useEffect(() => {
-        if (sourceFilterForExplicitNamingConversion) {
-            setValue(FieldConstants.FILTER_TYPE, FilterType.EXPLICIT_NAMING.id);
-        }
-    }, [sourceFilterForExplicitNamingConversion, setValue]);
-
     return (
-        <Grid container spacing={2}>
-            <Grid item xs={12}>
-                <UniqueNameInput
-                    name={FieldConstants.NAME}
-                    label="nameProperty"
-                    elementType={ElementType.FILTER}
-                    autoFocus={creation}
+        <>
+            <Box
+                sx={{
+                    flex: 'none',
+                    padding: 1,
+                }}
+            >
+                <HeaderFilterForm
+                    creation={creation}
                     activeDirectory={activeDirectory}
                     elementExists={elementExists}
+                    sourceFilterForExplicitNamingConversion={sourceFilterForExplicitNamingConversion}
                 />
-            </Grid>
-            {creation && (
-                <>
-                    <Grid item xs={12}>
-                        <DescriptionField />
-                    </Grid>
-                    {!sourceFilterForExplicitNamingConversion && (
-                        <Grid item>
-                            <RadioInput
-                                name={FieldConstants.FILTER_TYPE}
-                                options={Object.values(FilterType)}
-                                formProps={{ onChange: handleChange }} // need to override this in order to do not activate the validate button when changing the filter type
-                            />
-                        </Grid>
-                    )}
-                </>
-            )}
+            </Box>
             {filterType === FilterType.CRITERIA_BASED.id && <CriteriaBasedFilterForm />}
             {filterType === FilterType.EXPLICIT_NAMING.id && (
                 <ExplicitNamingFilterForm
                     sourceFilterForExplicitNamingConversion={sourceFilterForExplicitNamingConversion}
                 />
             )}
             {filterType === FilterType.EXPERT.id && <ExpertFilterForm />}
-        </Grid>
+        </>
     );
 }

src/components/filter/HeaderFilterForm.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 { useFormContext } from 'react-hook-form';
+import React, { useEffect } from 'react';
+import { Grid } from '@mui/material';
+import { UUID } from 'crypto';
+import { FieldConstants } from '../../utils/constants/fieldConstants';
+import { FilterType } from './constants/FilterConstants';
+import { UniqueNameInput } from '../inputs/reactHookForm/text/UniqueNameInput';
+import { ElementExistsType, ElementType } from '../../utils/types/elementType';
+import { DescriptionField } from '../inputs/reactHookForm/text/DescriptionField';
+import { RadioInput } from '../inputs/reactHookForm/booleans/RadioInput';
+
+export interface FilterFormProps {
+    creation?: boolean;
+    activeDirectory?: UUID;
+    elementExists?: ElementExistsType;
+    sourceFilterForExplicitNamingConversion?: {
+        id: UUID;
+        equipmentType: string;
+    };
+}
+
+export function HeaderFilterForm({
+    sourceFilterForExplicitNamingConversion,
+    creation,
+    activeDirectory,
+    elementExists,
+}: Readonly<FilterFormProps>) {
+    const { setValue } = useFormContext();
+
+    useEffect(() => {
+        if (sourceFilterForExplicitNamingConversion) {
+            setValue(FieldConstants.FILTER_TYPE, FilterType.EXPLICIT_NAMING.id);
+        }
+    }, [sourceFilterForExplicitNamingConversion, setValue]);
+
+    // We do this because setValue don't set the field dirty
+    const handleChange = (_event: React.ChangeEvent<HTMLInputElement>, value: string) => {
+        setValue(FieldConstants.FILTER_TYPE, value);
+    };
+
+    return (
+        <Grid container spacing={2}>
+            <Grid item xs={12}>
+                <UniqueNameInput
+                    name={FieldConstants.NAME}
+                    label="nameProperty"
+                    elementType={ElementType.FILTER}
+                    autoFocus={creation}
+                    activeDirectory={activeDirectory}
+                    elementExists={elementExists}
+                />
+            </Grid>
+            {creation && (
+                <>
+                    <Grid item xs={12}>
+                        <DescriptionField />
+                    </Grid>
+                    {!sourceFilterForExplicitNamingConversion && (
+                        <Grid item>
+                            <RadioInput
+                                name={FieldConstants.FILTER_TYPE}
+                                options={Object.values(FilterType)}
+                                formProps={{ onChange: handleChange }} // need to override this in order to do not activate the validate button when changing the filter type
+                            />
+                        </Grid>
+                    )}
+                </>
+            )}
+        </Grid>
+    );
+}

src/components/filter/criteriaBased/CriteriaBasedFilterEditionDialog.tsx

@@ -134,6 +134,7 @@ export function CriteriaBasedFilterEditionDialog({
             disabledSave={!!nameError || !!isValidating}
             isDataFetching={dataFetchStatus === FetchStatus.FETCHING}
             language={language}
+            unscrollableFullHeight
         >
             {isDataReady && <FilterForm activeDirectory={activeDirectory} elementExists={elementExists} />}
         </CustomMuiDialog>

src/components/filter/criteriaBased/CriteriaBasedFilterForm.tsx

@@ -4,7 +4,6 @@
  * 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 Grid from '@mui/material/Grid';
 import { FilterProperties, filterPropertiesYupSchema } from './FilterProperties';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import yup from '../../../utils/yupConfig';
@@ -26,12 +25,11 @@ export const criteriaBasedFilterEmptyFormData = getCriteriaBasedFormData(null, {
 
 export function CriteriaBasedFilterForm() {
     return (
-        <Grid container item spacing={1}>
-            <CriteriaBasedForm
-                equipments={FILTER_EQUIPMENTS}
-                defaultValues={criteriaBasedFilterEmptyFormData[FieldConstants.CRITERIA_BASED]}
-            />
+        <CriteriaBasedForm
+            equipments={FILTER_EQUIPMENTS}
+            defaultValues={criteriaBasedFilterEmptyFormData[FieldConstants.CRITERIA_BASED]}
+        >
             <FilterProperties />
-        </Grid>
+        </CriteriaBasedForm>
     );
 }

src/components/filter/criteriaBased/CriteriaBasedForm.tsx

@@ -6,8 +6,8 @@
  */
 
 import { useFormContext, useWatch } from 'react-hook-form';
-import { Grid } from '@mui/material';
-import { useEffect } from 'react';
+import { Box, Grid } from '@mui/material';
+import { ReactElement, useEffect } from 'react';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { SelectInput } from '../../inputs/reactHookForm/selectInputs/SelectInput';
 import { InputWithPopupConfirmation } from '../../inputs/reactHookForm/selectInputs/InputWithPopupConfirmation';
@@ -17,9 +17,10 @@ import { useSnackMessage } from '../../../hooks/useSnackMessage';
 export interface CriteriaBasedFormProps {
     equipments: Record<string, FormEquipment>;
     defaultValues: Record<string, any>;
+    children?: ReactElement;
 }
 
-export function CriteriaBasedForm({ equipments, defaultValues }: CriteriaBasedFormProps) {
+export function CriteriaBasedForm({ equipments, defaultValues, children }: CriteriaBasedFormProps) {
     const { getValues, setValue } = useFormContext();
     const { snackError } = useSnackMessage();
 
@@ -46,8 +47,13 @@ export function CriteriaBasedForm({ equipments, defaultValues }: CriteriaBasedFo
     };
 
     return (
-        <Grid container item spacing={2}>
-            <Grid item xs={12}>
+        <>
+            <Box
+                sx={{
+                    flex: 'none',
+                    padding: 1,
+                }}
+            >
                 <InputWithPopupConfirmation
                     Input={SelectInput}
                     name={FieldConstants.EQUIPMENT_TYPE}
@@ -58,18 +64,29 @@ export function CriteriaBasedForm({ equipments, defaultValues }: CriteriaBasedFo
                     message="changeTypeMessage"
                     validateButtonLabel="button.changeType"
                 />
-            </Grid>
-            {watchEquipmentType &&
-                equipments[watchEquipmentType] &&
-                equipments[watchEquipmentType].fields.map((equipment: any, index: number) => {
-                    const EquipmentForm = equipment.renderer;
-                    const uniqueKey = `${watchEquipmentType}-${index}`;
-                    return (
-                        <Grid item xs={12} key={uniqueKey} flexGrow={1}>
-                            <EquipmentForm {...equipment.props} />
-                        </Grid>
-                    );
-                })}
-        </Grid>
+            </Box>
+            <Box
+                sx={{
+                    flex: 'auto',
+                    overflowY: 'auto',
+                    padding: 1,
+                }}
+            >
+                <Grid container spacing={2}>
+                    {watchEquipmentType &&
+                        equipments[watchEquipmentType] &&
+                        equipments[watchEquipmentType].fields.map((equipment: any, index: number) => {
+                            const EquipmentForm = equipment.renderer;
+                            const uniqueKey = `${watchEquipmentType}-${index}`;
+                            return (
+                                <Grid item xs={12} key={uniqueKey} flexGrow={1}>
+                                    <EquipmentForm {...equipment.props} />
+                                </Grid>
+                            );
+                        })}
+                    {children}
+                </Grid>
+            </Box>
+        </>
     );
 }

src/components/filter/expert/ExpertFilterEditionDialog.tsx

@@ -143,6 +143,7 @@ export function ExpertFilterEditionDialog({
             disabledSave={!!nameError || !!isValidating}
             isDataFetching={dataFetchStatus === FetchStatus.FETCHING}
             language={language}
+            unscrollableFullHeight
         >
             {isDataReady && <FilterForm activeDirectory={activeDirectory} elementExists={elementExists} />}
         </CustomMuiDialog>