separate creation of expert and explicit naming filter (#737)

EtienneLt · web-flow · commit ad01c20cc657 · 2025-04-11T11:22:18.000+02:00
Signed-off-by: Etienne LESOT &lt;etienne.lesot@rte-france.com&gt;
diff --git a/src/components/filter/FilterCreationDialog.tsx b/src/components/filter/FilterCreationDialog.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FieldValues, Resolver, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { UUID } from 'crypto';
@@ -28,7 +28,6 @@ import { FILTER_EQUIPMENTS_ATTRIBUTES } from './explicitNaming/ExplicitNamingFil
 const emptyFormData = {
     [FieldConstants.NAME]: '',
     [FieldConstants.DESCRIPTION]: '',
-    [FieldConstants.FILTER_TYPE]: FilterType.EXPERT.id,
     [FieldConstants.EQUIPMENT_TYPE]: null,
     ...getExplicitNamingFilterEmptyFormData(),
     ...getExpertFilterEmptyFormData(),
@@ -40,7 +39,6 @@ const formSchema = yup
     .shape({
         [FieldConstants.NAME]: yup.string().trim().required('nameEmpty'),
         [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, 'descriptionLimitError'),
-        [FieldConstants.FILTER_TYPE]: yup.string().required(),
         [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
         ...explicitNamingFilterSchema,
         ...expertFilterSchema,
@@ -56,6 +54,7 @@ export interface FilterCreationDialogProps {
         id: UUID;
         equipmentType: string;
     };
+    filterType: { id: string; label: string };
 }
 
 export function FilterCreationDialog({
@@ -64,6 +63,7 @@ export function FilterCreationDialog({
     activeDirectory,
     language,
     sourceFilterForExplicitNamingConversion = undefined,
+    filterType,
 }: FilterCreationDialogProps) {
     const { snackError } = useSnackMessage();
 
@@ -81,7 +81,7 @@ export function FilterCreationDialog({
 
     const onSubmit = useCallback(
         (filterForm: FieldValues) => {
-            if (filterForm[FieldConstants.FILTER_TYPE] === FilterType.EXPLICIT_NAMING.id) {
+            if (filterType?.id === FilterType.EXPLICIT_NAMING.id) {
                 saveExplicitNamingFilter(
                     filterForm[FILTER_EQUIPMENTS_ATTRIBUTES],
                     true,
@@ -97,7 +97,7 @@ export function FilterCreationDialog({
                     onClose,
                     activeDirectory
                 );
-            } else if (filterForm[FieldConstants.FILTER_TYPE] === FilterType.EXPERT.id) {
+            } else if (filterType?.id === FilterType.EXPERT.id) {
                 saveExpertFilter(
                     null,
                     filterForm[EXPERT_FILTER_QUERY],
@@ -115,17 +115,25 @@ export function FilterCreationDialog({
                 );
             }
         },
-        [activeDirectory, snackError, onClose]
+        [activeDirectory, snackError, onClose, filterType]
     );
-
+    const titleId = useMemo(() => {
+        if (sourceFilterForExplicitNamingConversion) {
+            return 'convertIntoExplicitNamingFilter';
+        }
+        if (filterType?.id === FilterType.EXPERT.id) {
+            return 'createNewCriteriaFilter';
+        }
+        return 'createNewExplicitNamingFilter';
+    }, [sourceFilterForExplicitNamingConversion, filterType]);
     return (
         <CustomMuiDialog
             open={open}
             onClose={onClose}
             onSave={onSubmit}
             formSchema={formSchema}
             formMethods={formMethods}
-            titleId={sourceFilterForExplicitNamingConversion ? 'convertIntoExplicitNamingFilter' : 'createNewFilter'}
+            titleId={titleId}
             removeOptional
             disabledSave={!!nameError || !!isValidating}
             language={language}
@@ -134,6 +142,7 @@ export function FilterCreationDialog({
             <FilterForm
                 creation
                 activeDirectory={activeDirectory}
+                filterType={filterType}
                 sourceFilterForExplicitNamingConversion={sourceFilterForExplicitNamingConversion}
             />
         </CustomMuiDialog>
diff --git a/src/components/filter/FilterForm.tsx b/src/components/filter/FilterForm.tsx
@@ -6,10 +6,7 @@
  */
 
 import { Box } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form';
-import React, { useEffect } from 'react';
-import { HeaderFilterForm, FilterFormProps } from './HeaderFilterForm';
-import { FieldConstants } from '../../utils/constants/fieldConstants';
+import { FilterFormProps, HeaderFilterForm } from './HeaderFilterForm';
 import { ExplicitNamingFilterForm } from './explicitNaming/ExplicitNamingFilterForm';
 import { ExpertFilterForm } from './expert/ExpertFilterForm';
 import { FilterType } from './constants/FilterConstants';
@@ -19,38 +16,23 @@ export function FilterForm({
     sourceFilterForExplicitNamingConversion,
     creation,
     activeDirectory,
+    filterType,
 }: Readonly<FilterFormProps>) {
-    const { setValue } = useFormContext();
-
-    const filterType = useWatch({ name: FieldConstants.FILTER_TYPE });
-
-    // We do this because setValue don't set the field dirty
-    const handleFilterTypeChange = (_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 (
         <>
             <Box sx={unscrollableDialogStyles.unscrollableHeader}>
                 <HeaderFilterForm
                     creation={creation}
                     activeDirectory={activeDirectory}
                     sourceFilterForExplicitNamingConversion={sourceFilterForExplicitNamingConversion}
-                    handleFilterTypeChange={handleFilterTypeChange}
                 />
             </Box>
-            {filterType === FilterType.EXPLICIT_NAMING.id && (
+            {filterType?.id === FilterType.EXPLICIT_NAMING.id && (
                 <ExplicitNamingFilterForm
                     sourceFilterForExplicitNamingConversion={sourceFilterForExplicitNamingConversion}
                 />
             )}
-            {filterType === FilterType.EXPERT.id && <ExpertFilterForm />}
+            {filterType?.id === FilterType.EXPERT.id && <ExpertFilterForm />}
         </>
     );
 }
diff --git a/src/components/filter/HeaderFilterForm.tsx b/src/components/filter/HeaderFilterForm.tsx
@@ -7,9 +7,8 @@
 
 import { Grid } from '@mui/material';
 import { UUID } from 'crypto';
-import { FieldConstants, ElementType, MAX_CHAR_DESCRIPTION } from '../../utils';
-import { FilterType } from './constants/FilterConstants';
-import { UniqueNameInput, DescriptionField, RadioInput } from '../inputs';
+import { ElementType, FieldConstants, MAX_CHAR_DESCRIPTION } from '../../utils';
+import { DescriptionField, UniqueNameInput } from '../inputs';
 import yup from '../../utils/yupConfig';
 
 export const filterStyles = {
@@ -26,28 +25,20 @@ export const filterStyles = {
 export interface FilterFormProps {
     creation?: boolean;
     activeDirectory?: UUID;
+    filterType?: { id: string; label: string };
     sourceFilterForExplicitNamingConversion?: {
         id: UUID;
         equipmentType: string;
     };
-    handleFilterTypeChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
 }
 
 export const HeaderFilterSchema = {
     [FieldConstants.NAME]: yup.string().trim().required('nameEmpty'),
-    [FieldConstants.FILTER_TYPE]: yup.string().required(),
     [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
     [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, 'descriptionLimitError'),
 };
 
-export function HeaderFilterForm({
-    sourceFilterForExplicitNamingConversion,
-    creation,
-    activeDirectory,
-    handleFilterTypeChange,
-}: Readonly<FilterFormProps>) {
-    const filterTypes = Object.values(FilterType);
-
+export function HeaderFilterForm({ creation, activeDirectory }: Readonly<FilterFormProps>) {
     return (
         <Grid container spacing={2}>
             <Grid item xs={12}>
@@ -61,20 +52,9 @@ export function HeaderFilterForm({
                     fullWidth={false}
                 />
             </Grid>
-            <>
-                <Grid item xs={12}>
-                    <DescriptionField expandingTextSx={filterStyles.description} />
-                </Grid>
-                {creation && !sourceFilterForExplicitNamingConversion && (
-                    <Grid item>
-                        <RadioInput
-                            name={FieldConstants.FILTER_TYPE}
-                            options={filterTypes}
-                            formProps={{ onChange: handleFilterTypeChange }} // need to override this in order to do not activate the validate button when changing the filter type
-                        />
-                    </Grid>
-                )}
-            </>
+            <Grid item xs={12}>
+                <DescriptionField expandingTextSx={filterStyles.description} />
+            </Grid>
         </Grid>
     );
 }
diff --git a/src/components/filter/expert/ExpertFilterEditionDialog.tsx b/src/components/filter/expert/ExpertFilterEditionDialog.tsx
@@ -71,7 +71,6 @@ export function ExpertFilterEditionDialog({
                     reset({
                         [FieldConstants.NAME]: name,
                         [FieldConstants.DESCRIPTION]: description,
-                        [FieldConstants.FILTER_TYPE]: FilterType.EXPERT.id,
                         [FieldConstants.EQUIPMENT_TYPE]: response[FieldConstants.EQUIPMENT_TYPE],
                         [EXPERT_FILTER_QUERY]: importExpertRules(response[EXPERT_FILTER_QUERY]!),
                     });
@@ -129,7 +128,7 @@ export function ExpertFilterEditionDialog({
             language={language}
             unscrollableFullHeight
         >
-            {isDataReady && <FilterForm activeDirectory={activeDirectory} />}
+            {isDataReady && <FilterForm activeDirectory={activeDirectory} filterType={FilterType.EXPERT} />}
         </CustomMuiDialog>
     );
 }
diff --git a/src/components/filter/explicitNaming/ExplicitNamingFilterEditionDialog.tsx b/src/components/filter/explicitNaming/ExplicitNamingFilterEditionDialog.tsx
@@ -73,7 +73,6 @@ export function ExplicitNamingFilterEditionDialog({
                     reset({
                         [FieldConstants.NAME]: name,
                         [FieldConstants.DESCRIPTION]: description,
-                        [FieldConstants.FILTER_TYPE]: FilterType.EXPLICIT_NAMING.id,
                         [FieldConstants.EQUIPMENT_TYPE]: response[FieldConstants.EQUIPMENT_TYPE],
                         [FILTER_EQUIPMENTS_ATTRIBUTES]: response[FILTER_EQUIPMENTS_ATTRIBUTES]?.map((row: any) => ({
                             [FieldConstants.AG_GRID_ROW_UUID]: uuid4(),
@@ -131,7 +130,7 @@ export function ExplicitNamingFilterEditionDialog({
             language={language}
             unscrollableFullHeight
         >
-            {isDataReady && <FilterForm activeDirectory={activeDirectory} />}
+            {isDataReady && <FilterForm activeDirectory={activeDirectory} filterType={FilterType.EXPLICIT_NAMING} />}
         </CustomMuiDialog>
     );
 }
diff --git a/src/translations/en/filterEn.ts b/src/translations/en/filterEn.ts
@@ -46,6 +46,8 @@ export const filterEn = {
     missingDistributionKeyError: 'Missing distribution key',
     filterCsvFileName: 'filterCreation',
     createNewFilter: 'Create a filter',
+    createNewCriteriaFilter: 'Create a criteria based filter',
+    createNewExplicitNamingFilter: 'Create an explicit naming filter',
     nameProperty: 'Name',
     Countries: 'Countries',
     Countries1: 'Countries 1',
diff --git a/src/translations/fr/filterFr.ts b/src/translations/fr/filterFr.ts
@@ -46,6 +46,8 @@ export const filterFr = {
     missingDistributionKeyError: 'Clé de répartition manquante',
     filterCsvFileName: 'creationFiltre',
     createNewFilter: 'Créer un filtre',
+    createNewCriteriaFilter: 'Créer un filtre par critères',
+    createNewExplicitNamingFilter: 'Créer un filtre par nommage',
     nameProperty: 'Nom',
     Countries: 'Pays',
     Countries1: 'Pays 1',
