Restore convert filters to explicit naming feature

src/components/DirectoryItemSelector/directory-item-selector.tsx

@@ -165,8 +165,9 @@ const DirectoryItemSelector: FunctionComponent<DirectoryItemSelectorProps> = ({
 
     const fetchDirectory = useCallback(
         (nodeId: UUID): void => {
+            const typeList = types.includes(ElementType.DIRECTORY) ? [] : types;
             fetchDirectoryContent &&
-                fetchDirectoryContent(nodeId, types)
+                fetchDirectoryContent(nodeId, typeList)
                     .then((children) => {
                         const childrenMatchedTypes = children.filter(
                             (item: any) => contentFilter().has(item.type)

src/components/dialogs/modify-element-selection.tsx

@@ -0,0 +1,135 @@
+/**
+ * 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 React, { useContext, useEffect, useState } from 'react';
+import { Button, Grid, Typography } from '@mui/material';
+import { FormattedMessage, useIntl } from 'react-intl';
+import {
+    DirectoryItemSelector,
+    TreeViewFinderNodeProps,
+    FieldConstants,
+} from '@gridsuite/commons-ui';
+import { useController } from 'react-hook-form';
+import { ElementType } from '@gridsuite/commons-ui';
+import { UUID } from 'crypto';
+import { FilterContext } from '../filter/filter-context.ts';
+
+export interface ModifyElementSelectionProps {
+    elementType: ElementType;
+    dialogOpeningButtonLabel: string;
+    dialogTitleLabel: string;
+    dialogMessageLabel: string;
+    noElementMessageLabel?: string;
+    onElementValidated?: (elementId: UUID) => void;
+}
+
+const ModifyElementSelection: React.FunctionComponent<
+    ModifyElementSelectionProps
+> = (props) => {
+    const intl = useIntl();
+
+    const [open, setOpen] = useState<boolean>(false);
+    const [activeDirectoryName, setActiveDirectoryName] = useState('');
+
+    const {
+        fetchDirectoryContent,
+        fetchRootFolders,
+        fetchElementsInfos,
+        fetchPath,
+    } = useContext(FilterContext);
+
+    const {
+        field: { onChange, value: directory },
+    } = useController({
+        name: FieldConstants.DIRECTORY,
+    });
+
+    useEffect(() => {
+        if (directory) {
+            fetchPath &&
+                fetchPath(directory).then((res: any) => {
+                    setActiveDirectoryName(
+                        res
+                            .map((element: any) => element.elementName.trim())
+                            .reverse()
+                            .join('/')
+                    );
+                });
+        }
+    }, [directory, fetchPath]);
+
+    const handleSelectFolder = () => {
+        setOpen(true);
+    };
+
+    const handleClose = (nodes: TreeViewFinderNodeProps[]) => {
+        if (nodes.length) {
+            onChange(nodes[0].id);
+            if (props.onElementValidated) {
+                props.onElementValidated(nodes[0].id as UUID);
+            }
+        }
+        setOpen(false);
+    };
+
+    return (
+        <Grid
+            sx={{
+                marginTop: '10px',
+                display: 'flex',
+                alignItems: 'center',
+            }}
+        >
+            <Button
+                onClick={handleSelectFolder}
+                variant="contained"
+                sx={{
+                    padding: '10px 30px',
+                }}
+                color="primary"
+                component="label"
+            >
+                <FormattedMessage id={props.dialogOpeningButtonLabel} />
+            </Button>
+            <Typography
+                sx={{
+                    marginLeft: '10px',
+                    fontWeight: 'bold',
+                }}
+            >
+                {activeDirectoryName
+                    ? activeDirectoryName
+                    : props?.noElementMessageLabel
+                    ? intl.formatMessage({
+                          id: props.noElementMessageLabel,
+                      })
+                    : ''}
+            </Typography>
+            <DirectoryItemSelector
+                open={open}
+                onClose={handleClose}
+                types={[props.elementType]}
+                onlyLeaves={props.elementType !== ElementType.DIRECTORY}
+                multiSelect={false}
+                validationButtonText={intl.formatMessage({
+                    id: 'confirmDirectoryDialog',
+                })}
+                title={intl.formatMessage({
+                    id: props.dialogTitleLabel,
+                })}
+                contentText={intl.formatMessage({
+                    id: props.dialogMessageLabel,
+                })}
+                fetchDirectoryContent={fetchDirectoryContent}
+                fetchRootFolders={fetchRootFolders}
+                fetchElementsInfos={fetchElementsInfos}
+            />
+        </Grid>
+    );
+};
+
+export default ModifyElementSelection;

src/components/filter/explicit-naming/explicit-naming-filter-form.tsx

@@ -4,7 +4,7 @@
  * 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, useMemo } from 'react';
+import { FunctionComponent, useCallback, useEffect, useMemo } from 'react';
 import { FieldConstants } from '../../../utils/field-constants';
 import yup from '../../../utils/yup-config';
 import CustomAgGridTable, {
@@ -22,6 +22,10 @@ import { v4 as uuid4 } from 'uuid';
 import { toFloatOrNullValue } from '../../inputs/react-hook-form/utils/functions';
 import { DISTRIBUTION_KEY, FilterType } from '../constants/filter-constants';
 import { FILTER_EQUIPMENTS } from '../utils/filter-form-utils';
+import { UUID } from 'crypto';
+import { useSnackMessage } from '../../../hooks/useSnackMessage.ts';
+import { ElementType } from '../../../utils/ElementType.ts';
+import ModifyElementSelection from '../../dialogs/modify-element-selection.tsx';
 
 export const FILTER_EQUIPMENTS_ATTRIBUTES = 'filterEquipmentsAttributes';
 
@@ -106,8 +110,20 @@ export function getExplicitNamingFilterEmptyFormData() {
     };
 }
 
-const ExplicitNamingFilterForm: FunctionComponent = () => {
+export interface FilterForExplicitConversionProps {
+    id: UUID;
+    equipmentType: String;
+}
+
+interface ExplicitNamingFilterFormProps {
+    sourceFilterForExplicitNamingConversion?: FilterForExplicitConversionProps;
+}
+
+const ExplicitNamingFilterForm: FunctionComponent<
+    ExplicitNamingFilterFormProps
+> = ({ sourceFilterForExplicitNamingConversion }) => {
     const intl = useIntl();
+    const { snackError } = useSnackMessage();
 
     const { getValues, setValue } = useFormContext();
 
@@ -117,6 +133,15 @@ const ExplicitNamingFilterForm: FunctionComponent = () => {
 
     const forGeneratorOrLoad = isGeneratorOrLoad(watchEquipmentType);
 
+    useEffect(() => {
+        if (sourceFilterForExplicitNamingConversion) {
+            setValue(
+                FieldConstants.EQUIPMENT_TYPE,
+                sourceFilterForExplicitNamingConversion.equipmentType
+            );
+        }
+    }, [sourceFilterForExplicitNamingConversion, setValue]);
+
     const columnDefs = useMemo(() => {
         const columnDefs: any[] = [
             ...ROW_DRAGGING_SELECTION_COLUMN_DEF,
@@ -186,6 +211,26 @@ const ExplicitNamingFilterForm: FunctionComponent = () => {
         setValue(FILTER_EQUIPMENTS_ATTRIBUTES, makeDefaultTableRows());
     };
 
+    const onStudySelected = (studyUuid: UUID) => {
+        exportFilter(studyUuid, sourceFilterForExplicitNamingConversion?.id)
+            .then((matchingEquipments: any) => {
+                setValue(
+                    FILTER_EQUIPMENTS_ATTRIBUTES,
+                    matchingEquipments.map((equipment: any) => ({
+                        [FieldConstants.AG_GRID_ROW_UUID]: uuid4(),
+                        [FieldConstants.EQUIPMENT_ID]: equipment.id,
+                        [DISTRIBUTION_KEY]: equipment.distributionKey,
+                    }))
+                );
+            })
+            .catch((error: any) =>
+                snackError({
+                    messageTxt: error.message,
+                    headerId: 'convertIntoExplicitNamingFilterError',
+                })
+            );
+    };
+
     return (
         <Grid container item spacing={2}>
             <Grid item xs={12}>
@@ -199,6 +244,16 @@ const ExplicitNamingFilterForm: FunctionComponent = () => {
                     message={'changeTypeMessage'}
                     validateButtonLabel={'button.changeType'}
                 />
+                {sourceFilterForExplicitNamingConversion && (
+                    <ModifyElementSelection
+                        elementType={ElementType.STUDY}
+                        onElementValidated={onStudySelected}
+                        dialogOpeningButtonLabel={'selectStudyDialogButton'}
+                        dialogTitleLabel={'selectStudyDialogTitle'}
+                        dialogMessageLabel={'selectStudyText'}
+                        noElementMessageLabel={'noSelectedStudyText'}
+                    />
+                )}
             </Grid>
             {watchEquipmentType && (
                 <Grid item xs={12}>

src/components/filter/filter-context.ts

@@ -21,10 +21,12 @@ interface FilterContextProps {
         equipmentTypes?: string[]
     ) => Promise<ElementAttributes[]>;
     fetchAppsAndUrls?: () => Promise<StudyMetadata[]>;
+    fetchPath?: (element: UUID) => Promise<ElementAttributes[]>;
 }
 export const FilterContext = createContext<FilterContextProps>({
     fetchDirectoryContent: undefined,
     fetchRootFolders: undefined,
     fetchElementsInfos: undefined,
     fetchAppsAndUrls: undefined,
+    fetchPath: undefined,
 });

src/components/filter/filter-creation-dialog.tsx

@@ -83,6 +83,10 @@ export interface FilterCreationDialogProps {
         elementTypes?: string[],
         equipmentTypes?: string[]
     ) => Promise<ElementAttributes[]>;
+    sourceFilterForExplicitNamingConversion?: {
+        id: UUID;
+        equipmentType: string;
+    };
 }
 
 const FilterCreationDialog: FunctionComponent<FilterCreationDialogProps> = ({
@@ -95,6 +99,7 @@ const FilterCreationDialog: FunctionComponent<FilterCreationDialogProps> = ({
     fetchDirectoryContent,
     fetchRootFolders,
     fetchElementsInfos,
+    sourceFilterForExplicitNamingConversion = undefined,
 }) => {
     const { snackError } = useSnackMessage();
 
@@ -192,6 +197,9 @@ const FilterCreationDialog: FunctionComponent<FilterCreationDialogProps> = ({
                     creation
                     activeDirectory={activeDirectory}
                     elementExists={elementExists}
+                    sourceFilterForExplicitNamingConversion={
+                        sourceFilterForExplicitNamingConversion
+                    }
                 />
             </FilterContext.Provider>
         </CustomMuiDialog>

src/components/filter/filter-form.tsx

@@ -9,7 +9,7 @@ import { UniqueNameInput } from '../inputs/react-hook-form/unique-name-input.tsx
 import { FieldConstants } from '../../utils/field-constants';
 import CriteriaBasedFilterForm from './criteria-based/criteria-based-filter-form';
 import ExplicitNamingFilterForm from './explicit-naming/explicit-naming-filter-form';
-import React, { FunctionComponent } from 'react';
+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';
@@ -24,6 +24,10 @@ interface FilterFormProps {
     creation?: boolean;
     activeDirectory?: UUID;
     elementExists?: elementExistsType;
+    sourceFilterForExplicitNamingConversion?: {
+        id: UUID;
+        equipmentType: string;
+    };
 }
 
 export const FilterForm: FunctionComponent<FilterFormProps> = (props) => {
@@ -39,6 +43,12 @@ export const FilterForm: FunctionComponent<FilterFormProps> = (props) => {
         setValue(FieldConstants.FILTER_TYPE, value);
     };
 
+    useEffect(() => {
+        if (props.sourceFilterForExplicitNamingConversion) {
+            setValue(FieldConstants.FILTER_TYPE, FilterType.EXPLICIT_NAMING.id);
+        }
+    }, [props.sourceFilterForExplicitNamingConversion, setValue]);
+
     return (
         <Grid container spacing={2}>
             <Grid item xs={12}>
@@ -63,20 +73,26 @@ export const FilterForm: FunctionComponent<FilterFormProps> = (props) => {
                             />
                         </Box>
                     </Grid>
-                    <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>
+                    {!props.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>
+                    )}
                 </>
             )}
             {filterType === FilterType.CRITERIA_BASED.id && (
                 <CriteriaBasedFilterForm />
             )}
             {filterType === FilterType.EXPLICIT_NAMING.id && (
-                <ExplicitNamingFilterForm />
+                <ExplicitNamingFilterForm
+                    sourceFilterForExplicitNamingConversion={
+                        props.sourceFilterForExplicitNamingConversion
+                    }
+                />
             )}
             {filterType === FilterType.EXPERT.id && <ExpertFilterForm />}
         </Grid>

src/index.d.ts

@@ -128,6 +128,7 @@ export { default as CriteriaBasedFilterEditionDialog } from './components/filter
 export { default as ExpandingTextField } from './components/inputs/react-hook-form/ExpandingTextField';
 export { default as CustomMuiDialog } from './components/dialogs/custom-mui-dialog';
 export { default as DescriptionModificationDialog } from './components/dialogs/description-modification-dialog';
+export { default as ModifyElementSelection } from './components/dialogs/modify-element-selection';
 export {
     genHelperPreviousValue,
     genHelperError,

src/index.js

@@ -23,6 +23,7 @@ export { default as FlatParameters } from './components/FlatParameters';
 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 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';
 export { default as BottomRightButtons } from './components/inputs/react-hook-form/ag-grid-table/bottom-right-buttons';