@gridsuite/commons-ui 0.54.0 → 0.56.0

package/dist/chunks/criteria-based-filter-edition-dialog.DxqH-mLe.js

@@ -0,0 +1,1673 @@
+import '../assets/criteria-based-filter-edition-dialog.css';
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React, { useState, useMemo, useEffect, useCallback, useContext } from "react";
+import { FieldConstants } from "../components/filter/constants/field-constants.js";
+import { backToFrontTweak, frontToBackTweak } from "../components/filter/criteria-based/criteria-based-filter-utils.js";
+import CustomMuiDialog from "../components/dialogs/custom-mui-dialog.js";
+import { useSnackMessage } from "../hooks/useSnackMessage.js";
+import { useWatch, useFormContext, useFieldArray, useController, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import CriteriaBasedFilterForm, { criteriaBasedFilterEmptyFormData, criteriaBasedFilterSchema } from "../components/filter/criteria-based/criteria-based-filter-form.js";
+import "../utils/yup-config.js";
+import { UniqueNameInput } from "../components/react-hook-form/unique-name-input.js";
+import { AgGridReact } from "ag-grid-react";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-alpine.css";
+import { DialogContentText, Grid as Grid$1, Tooltip, useTheme, Box as Box$1 } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import { Upload, ArrowCircleUp, ArrowCircleDown } from "@mui/icons-material";
+import AddIcon from "@mui/icons-material/ControlPoint";
+import DeleteIcon from "@mui/icons-material/Delete";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import { useCSVReader } from "react-papaparse";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import { useIntl, FormattedMessage } from "react-intl";
+import CsvDownloader from "react-csv-downloader";
+import Alert from "@mui/material/Alert";
+import "../components/TreeViewFinder/TreeViewFinder.js";
+import "../components/TopBar/TopBar.js";
+import "../components/TopBar/GridLogo.js";
+import "../components/TopBar/AboutDialog.js";
+import "../components/SnackbarProvider/SnackbarProvider.js";
+import "react-router-dom";
+import "../utils/AuthService.js";
+import "../components/MuiVirtualizedTable/MuiVirtualizedTable.js";
+import "../components/ReportViewer/report-item.js";
+import { v4, validate } from "uuid";
+import "../components/ReportViewer/log-table.js";
+import "../components/ReportViewer/report-tree-view-context.js";
+import "@mui/x-tree-view";
+import "../components/OverflowableText/overflowable-text.js";
+import "../components/ElementSearchDialog/element-search-dialog.js";
+import "../components/ElementSearchDialog/tag-renderer.js";
+import "../components/react-hook-form/utils/submit-button.js";
+import CancelButton from "../components/react-hook-form/utils/cancel-button.js";
+import "../components/react-hook-form/provider/custom-form-provider.js";
+import "../components/dialogs/description-modification-dialog.js";
+import * as yup from "yup";
+import "../components/dialogs/popup-confirmation-dialog.js";
+import { FILTER_EQUIPMENTS } from "../components/filter/utils/criteria-based-utils.js";
+import "autosuggest-highlight/match";
+import "autosuggest-highlight/parse";
+import "clsx";
+import "../components/CardErrorBoundary/card-error-boundary.js";
+import "notistack";
+import "../components/react-hook-form/slider-input.js";
+import "../components/react-hook-form/numbers/integer-input.js";
+import "../components/react-hook-form/booleans/checkbox-input.js";
+import "../components/react-hook-form/booleans/switch-input.js";
+import "@mui/icons-material/Folder";
+import { FilterContext } from "../components/filter/filter-context.js";
+import { saveExplicitNamingFilter, saveCriteriaBasedFilter, saveExpertFilter } from "../components/filter/utils/filters-utils.js";
+import { formatQuery, QueryBuilder } from "react-querybuilder";
+import { getNumberOfSiblings, recursiveRemove, countRules, getOperators, queryValidator, testQuery, importExpertRules } from "../components/filter/expert/expert-filter-utils.js";
+import { COMBINATOR_OPTIONS, RULES, EXPERT_FILTER_EQUIPMENTS, OPERATOR_OPTIONS, fields } from "../components/filter/constants/expert-filter-constants.js";
+import { FieldType, OperatorType, DataType } from "../components/filter/expert/expert-filter.type.js";
+import { QueryBuilderDnD } from "@react-querybuilder/dnd";
+import * as ReactDnD from "react-dnd";
+import * as ReactDndHtml5Backend from "react-dnd-html5-backend";
+import { MaterialValueEditor, QueryBuilderMaterial } from "@react-querybuilder/material";
+import CombinatorSelector from "../components/react-query-builder-inputs/combinator-selector.js";
+import AddButton from "../components/react-query-builder-inputs/add-button.js";
+import CountryValueEditor from "../components/react-query-builder-inputs/country-value-editor.js";
+import TranslatedValueEditor from "../components/react-query-builder-inputs/translated-value-editor.js";
+import TextValueEditor from "../components/react-query-builder-inputs/text-value-editor.js";
+import Box from "@mui/material/Box";
+import { Generator, Load, VoltageLevel, Substation, noSelectionForCopy as noSelectionForCopy$1 } from "../components/filter/constants/equipment-types.js";
+import { useCustomFormContext } from "../components/react-hook-form/provider/use-custom-form-context.js";
+import DirectoryItemsInput from "../components/react-hook-form/directory-items-input.js";
+import { DISTRIBUTION_KEY, FilterType } from "../components/filter/constants/filter-constants.js";
+import { FetchStatus } from "../utils/FetchStatus.js";
+import PropTypes from "prop-types";
+import "./filter-properties.GRon8-ML.js";
+import "../components/react-hook-form/range-input.js";
+import "../components/react-hook-form/select-inputs/mui-select-input.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "@mui/icons-material/Check";
+import "@mui/material/CircularProgress";
+import "@mui/material/TextField";
+import { ElementType } from "../utils/ElementType.js";
+import PropertyValueEditor from "../components/react-query-builder-inputs/property-value-editor.js";
+import ValueSelector from "../components/react-query-builder-inputs/value-selector.js";
+import ErrorInput from "../components/react-hook-form/error-management/error-input.js";
+import FieldErrorAlert from "../components/react-hook-form/error-management/field-error-alert.js";
+import InputWithPopupConfirmation from "../components/react-hook-form/select-inputs/input-with-popup-confirmation.js";
+import SelectInput from "../components/react-hook-form/select-inputs/select-input.js";
+import { styled } from "@mui/material/styles";
+import { NumericEditor } from "../components/react-hook-form/ag-grid-table-rhf/cell-editors/numericEditor.js";
+import { toFloatOrNullValue } from "../components/react-hook-form/utils/functions.js";
+import RadioInput from "../components/react-hook-form/radio-input.js";
+import ExpandingTextField from "../components/react-hook-form/ExpandingTextField.js";
+const CsvUploader = ({
+  name,
+  onClose,
+  open,
+  title,
+  fileHeaders,
+  fileName,
+  csvData,
+  validateData = (_rows) => true,
+  getDataFromCsv,
+  useFieldArrayOutput
+}) => {
+  const watchTableValues = useWatch({ name });
+  const { append, replace } = useFieldArrayOutput;
+  const [createError, setCreateError] = React.useState("");
+  const intl = useIntl();
+  const { CSVReader } = useCSVReader();
+  const [importedData, setImportedData] = useState([]);
+  const [isConfirmationPopupOpen, setOpenConfirmationPopup] = useState(false);
+  const data = useMemo(() => {
+    const data2 = [...[fileHeaders]];
+    if (Array.isArray(csvData)) {
+      csvData.forEach((row) => data2.push([row]));
+    }
+    return data2;
+  }, [csvData, fileHeaders]);
+  const handleClose = () => {
+    onClose();
+    setCreateError("");
+  };
+  const validateCsvFile = (rows) => {
+    if (rows.length === 0) {
+      setCreateError(intl.formatMessage({ id: "noDataInCsvFile" }));
+      return false;
+    }
+    for (let i = 0; i < fileHeaders.length; i++) {
+      if (fileHeaders[i] !== "" && rows[0][i] !== fileHeaders[i]) {
+        setCreateError(
+          intl.formatMessage({ id: "wrongCsvHeadersError" })
+        );
+        return false;
+      }
+    }
+    return validateData(rows);
+  };
+  const getResultsFromImportedData = () => {
+    return importedData.filter((row) => {
+      if (row[0].startsWith("#")) {
+        return false;
+      }
+      return row.some((column) => !!(column == null ? void 0 : column.trim()));
+    });
+  };
+  const handleFileSubmit = (keepTableValues) => {
+    if (importedData.length !== 0) {
+      const result = getResultsFromImportedData();
+      if (validateCsvFile(result)) {
+        result.splice(0, 1);
+        const dataFromCsv = getDataFromCsv(result);
+        if (keepTableValues) {
+          append(dataFromCsv);
+        } else {
+          replace(dataFromCsv);
+        }
+        handleClose();
+      }
+    } else {
+      setCreateError(intl.formatMessage({ id: "noDataInCsvFile" }));
+    }
+  };
+  const handleOpenCSVConfirmationDataDialog = () => {
+    const isValuesInTable = Array.isArray(watchTableValues) && watchTableValues.some(
+      (val) => val && Object.keys(val).filter(
+        (key) => key !== FieldConstants.AG_GRID_ROW_UUID
+      ).some(
+        (e) => val[e] !== void 0 && val[e] !== null && String(val[e]).trim().length > 0
+      )
+    );
+    if (isValuesInTable && getResultsFromImportedData().length > 0) {
+      setOpenConfirmationPopup(true);
+    } else {
+      setOpenConfirmationPopup(false);
+      handleFileSubmit(false);
+    }
+  };
+  const handleAddPopupConfirmation = () => {
+    handleFileSubmit(true);
+    setOpenConfirmationPopup(false);
+  };
+  const handleReplacePopupConfirmation = () => {
+    handleFileSubmit(false);
+    setOpenConfirmationPopup(false);
+  };
+  const handleCancelDialog = () => {
+    setOpenConfirmationPopup(false);
+  };
+  const renderConfirmationCsvData = () => {
+    return /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: isConfirmationPopupOpen,
+        "aria-labelledby": "dialog-confirmation-csv-data",
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { id: "dialog-confirmation-csv-data", children: "Confirmation" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(DialogContentText, { children: intl.formatMessage({ id: "keepCSVDataMessage" }) }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(CancelButton, { onClick: handleCancelDialog }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => handleReplacePopupConfirmation(),
+                variant: "outlined",
+                children: /* @__PURE__ */ jsx(FormattedMessage, { id: "replace" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => handleAddPopupConfirmation(),
+                variant: "outlined",
+                children: /* @__PURE__ */ jsx(FormattedMessage, { id: "add" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Dialog, { open, onClose: handleClose, fullWidth: true, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+          /* @__PURE__ */ jsx(Grid, { container: true, item: true, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
+            CsvDownloader,
+            {
+              datas: data,
+              filename: fileName,
+              separator: ",",
+              children: /* @__PURE__ */ jsx(Button, { variant: "contained", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "GenerateCSV" }) })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(Grid, { container: true, item: true, spacing: 3, children: /* @__PURE__ */ jsx(
+            CSVReader,
+            {
+              onUploadAccepted: (results) => {
+                setImportedData([...results.data]);
+                setCreateError("");
+              },
+              children: ({ getRootProps, acceptedFile }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Grid, { item: true, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ...getRootProps(),
+                    variant: "contained",
+                    children: /* @__PURE__ */ jsx(FormattedMessage, { id: "UploadCSV" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      marginLeft: "10px",
+                      fontWeight: "bold"
+                    },
+                    children: acceptedFile ? acceptedFile.name : intl.formatMessage({
+                      id: "uploadMessage"
+                    })
+                  }
+                )
+              ] }) })
+            }
+          ) })
+        ] }),
+        createError !== "" && /* @__PURE__ */ jsx(Alert, { severity: "error", children: createError })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(CancelButton, { onClick: handleClose }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            onClick: () => handleOpenCSVConfirmationDataDialog(),
+            disabled: createError !== "",
+            children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" })
+          }
+        )
+      ] })
+    ] }),
+    renderConfirmationCsvData()
+  ] });
+};
+const InnerColoredButton = styled(IconButton)(({ theme }) => {
+  return {
+    color: theme.palette.primary.main
+  };
+});
+const BottomRightButtons = ({
+  name,
+  disableUp,
+  disableDown,
+  disableDelete,
+  handleAddRow,
+  handleDeleteRows,
+  handleMoveRowUp,
+  handleMoveRowDown,
+  useFieldArrayOutput,
+  csvProps
+}) => {
+  const [uploaderOpen, setUploaderOpen] = useState(false);
+  const intl = useIntl();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Grid$1, { container: true, paddingTop: 1, paddingLeft: 2, children: [
+      /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 1, children: csvProps && /* @__PURE__ */ jsx(
+        InnerColoredButton,
+        {
+          onClick: () => setUploaderOpen(true),
+          children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: intl.formatMessage({
+                id: "ImportCSV"
+              }),
+              placement: "bottom",
+              children: /* @__PURE__ */ jsx(Upload, {})
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        Grid$1,
+        {
+          item: true,
+          xs: 11,
+          sx: { display: "flex", justifyContent: "right" },
+          children: [
+            /* @__PURE__ */ jsx(
+              InnerColoredButton,
+              {
+                onClick: handleAddRow,
+                children: /* @__PURE__ */ jsx(AddIcon, {})
+              },
+              "addButton"
+            ),
+            /* @__PURE__ */ jsx(
+              InnerColoredButton,
+              {
+                onClick: handleDeleteRows,
+                disabled: disableDelete,
+                children: /* @__PURE__ */ jsx(DeleteIcon, {})
+              },
+              "DeleteButton"
+            ),
+            /* @__PURE__ */ jsx(
+              InnerColoredButton,
+              {
+                disabled: disableUp,
+                onClick: handleMoveRowUp,
+                children: /* @__PURE__ */ jsx(ArrowCircleUp, {})
+              },
+              "upButton"
+            ),
+            /* @__PURE__ */ jsx(
+              InnerColoredButton,
+              {
+                disabled: disableDown,
+                onClick: handleMoveRowDown,
+                children: /* @__PURE__ */ jsx(ArrowCircleDown, {})
+              },
+              "downButton"
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name, InputField: FieldErrorAlert }) }),
+    /* @__PURE__ */ jsx(
+      CsvUploader,
+      {
+        open: uploaderOpen,
+        onClose: () => setUploaderOpen(false),
+        name,
+        useFieldArrayOutput,
+        ...csvProps
+      }
+    )
+  ] });
+};
+const ROW_DRAGGING_SELECTION_COLUMN_DEF = [
+  {
+    rowDrag: true,
+    headerCheckboxSelection: true,
+    checkboxSelection: true,
+    maxWidth: 50
+  }
+];
+const style = (customProps) => ({
+  grid: (theme) => ({
+    width: "auto",
+    height: "100%",
+    position: "relative",
+    // - AG Grid colors override -
+    // It shouldn't be exactly like this, but I couldn't make it works otherwise
+    // https://www.ag-grid.com/react-data-grid/global-style-customisation/
+    "--ag-alpine-active-color": theme.palette.primary.main + " !important",
+    "--ag-checkbox-indeterminate-color": theme.palette.primary.main + " !important",
+    "--ag-background-color": theme.agGridBackground.color + " !important",
+    "--ag-header-background-color": theme.agGridBackground.color + " !important",
+    "--ag-odd-row-background-color": theme.agGridBackground.color + " !important",
+    "--ag-modal-overlay-background-color": theme.agGridBackground.color + " !important",
+    "--ag-selected-row-background-color": "transparent !important",
+    "--ag-range-selection-border-color": "transparent !important",
+    //overrides the default computed max height for ag grid default selector editor to make it more usable
+    //can be removed if a custom selector editor is implemented
+    "& .ag-select-list": {
+      maxHeight: "300px !important"
+    },
+    "& .ag-root-wrapper-body": {
+      maxHeight: "500px"
+    },
+    "& .ag-cell": {
+      boxShadow: "none"
+    },
+    "& .ag-cell-edit-wrapper": {
+      height: "inherit"
+    },
+    "& .ag-row-hover": {
+      cursor: "text"
+    },
+    "& .ag-overlay-loading-center": {
+      border: "none",
+      boxShadow: "none"
+    },
+    "& .numeric-input": {
+      fontSize: "calc(var(--ag-font-size) + 1px)",
+      paddingLeft: "calc(var(--ag-cell-horizontal-padding) - 1px)",
+      width: "100%",
+      height: "100%",
+      border: "inherit",
+      outline: "inherit",
+      backgroundColor: theme.agGridBackground.color
+    },
+    "& .Mui-focused .MuiOutlinedInput-root": {
+      // borders moves row height
+      outline: "var(--ag-borders-input) var(--ag-input-focus-border-color)",
+      outlineOffset: "-1px",
+      backgroundColor: theme.agGridBackground.color
+    },
+    ...customProps
+  })
+});
+const CustomAgGridTable = ({
+  name,
+  columnDefs,
+  makeDefaultRowData: makeDefaultRowData2,
+  csvProps,
+  cssProps,
+  defaultColDef,
+  pagination,
+  paginationPageSize,
+  suppressRowClickSelection,
+  alwaysShowVerticalScroll,
+  stopEditingWhenCellsLoseFocus,
+  ...props
+}) => {
+  var _a, _b;
+  const theme = useTheme();
+  const [gridApi, setGridApi] = useState(null);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [newRowAdded, setNewRowAdded] = useState(false);
+  const { control, getValues, watch } = useFormContext();
+  const useFieldArrayOutput = useFieldArray({
+    control,
+    name
+  });
+  const { append, remove, update, swap, move } = useFieldArrayOutput;
+  const rowData = watch(name);
+  const isFirstSelected = (rowData == null ? void 0 : rowData.length) && ((_a = gridApi == null ? void 0 : gridApi.api.getRowNode(rowData[0][FieldConstants.AG_GRID_ROW_UUID])) == null ? void 0 : _a.isSelected());
+  const isLastSelected = (rowData == null ? void 0 : rowData.length) && ((_b = gridApi == null ? void 0 : gridApi.api.getRowNode(
+    rowData[rowData.length - 1][FieldConstants.AG_GRID_ROW_UUID]
+  )) == null ? void 0 : _b.isSelected());
+  const noRowSelected = selectedRows.length === 0;
+  const handleMoveRowUp = () => {
+    selectedRows.map((row) => getIndex(row)).sort().forEach((idx) => {
+      swap(idx, idx - 1);
+    });
+  };
+  const handleMoveRowDown = () => {
+    selectedRows.map((row) => getIndex(row)).sort().reverse().forEach((idx) => {
+      swap(idx, idx + 1);
+    });
+  };
+  const handleDeleteRows = () => {
+    if (selectedRows.length === rowData.length) {
+      remove();
+    } else {
+      selectedRows.forEach((val) => {
+        const idx = getIndex(val);
+        remove(idx);
+      });
+    }
+  };
+  useEffect(() => {
+    if (gridApi) {
+      gridApi.api.refreshCells({
+        force: true
+      });
+    }
+  }, [gridApi, rowData]);
+  const handleAddRow = () => {
+    append(makeDefaultRowData2());
+    setNewRowAdded(true);
+  };
+  const getIndex = (val) => {
+    return getValues(name).findIndex(
+      (row) => row[FieldConstants.AG_GRID_ROW_UUID] === val[FieldConstants.AG_GRID_ROW_UUID]
+    );
+  };
+  useEffect(() => {
+    if (gridApi) {
+      gridApi.api.sizeColumnsToFit();
+    }
+  }, [columnDefs, gridApi]);
+  const intl = useIntl();
+  const getLocaleText = useCallback(
+    (params) => {
+      const key = "agGrid." + params.key;
+      return intl.messages[key] || params.defaultValue;
+    },
+    [intl]
+  );
+  const onGridReady = (params) => {
+    setGridApi(params);
+  };
+  const onRowDataUpdated = () => {
+    setNewRowAdded(false);
+    if (gridApi == null ? void 0 : gridApi.api) {
+      const lastIndex = rowData.length - 1;
+      gridApi.api.paginationGoToLastPage();
+      gridApi.api.ensureIndexVisible(lastIndex, "bottom");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Grid$1, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(
+      Grid$1,
+      {
+        item: true,
+        xs: 12,
+        className: theme.aggrid,
+        sx: style(cssProps).grid,
+        children: /* @__PURE__ */ jsx(
+          AgGridReact,
+          {
+            rowData: gridApi && (rowData == null ? void 0 : rowData.length) ? rowData : null,
+            onGridReady,
+            getLocaleText,
+            cacheOverflowSize: 10,
+            rowSelection: "multiple",
+            domLayout: "autoHeight",
+            rowDragEntireRow: true,
+            rowDragManaged: true,
+            onRowDragEnd: (e) => move(getIndex(e.node.data), e.overIndex),
+            suppressBrowserResizeObserver: true,
+            columnDefs,
+            detailRowAutoHeight: true,
+            onSelectionChanged: (event) => {
+              setSelectedRows(gridApi.api.getSelectedRows());
+            },
+            onRowDataUpdated: newRowAdded ? onRowDataUpdated : void 0,
+            onCellEditingStopped: (event) => {
+              update(event.rowIndex, event.data);
+            },
+            getRowId: (row) => row.data[FieldConstants.AG_GRID_ROW_UUID],
+            pagination,
+            paginationPageSize,
+            suppressRowClickSelection,
+            alwaysShowVerticalScroll,
+            stopEditingWhenCellsLoseFocus,
+            ...props
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BottomRightButtons,
+      {
+        name,
+        handleAddRow,
+        handleDeleteRows,
+        handleMoveRowDown,
+        handleMoveRowUp,
+        disableUp: noRowSelected || isFirstSelected,
+        disableDown: noRowSelected || isLastSelected,
+        disableDelete: noRowSelected,
+        csvProps,
+        useFieldArrayOutput
+      }
+    )
+  ] });
+};
+const FILTER_EQUIPMENTS_ATTRIBUTES = "filterEquipmentsAttributes";
+const explicitNamingFilterSchema = {
+  [FILTER_EQUIPMENTS_ATTRIBUTES]: yup.array().of(
+    yup.object().shape({
+      [FieldConstants.EQUIPMENT_ID]: yup.string().nullable(),
+      [DISTRIBUTION_KEY]: yup.number().nullable()
+    })
+  ).compact(
+    (row) => !row[DISTRIBUTION_KEY] && !row[FieldConstants.EQUIPMENT_ID]
+  ).when([FieldConstants.FILTER_TYPE], {
+    is: FilterType.EXPLICIT_NAMING.id,
+    then: (schema) => schema.min(1, "emptyFilterError").when([FieldConstants.EQUIPMENT_TYPE], {
+      is: (equipmentType) => isGeneratorOrLoad(equipmentType),
+      then: (schema2) => schema2.test(
+        "noKeyWithoutId",
+        "distributionKeyWithMissingIdError",
+        (array) => {
+          return !array.some(
+            (row) => !row[FieldConstants.EQUIPMENT_ID]
+          );
+        }
+      ).test(
+        "ifOneKeyThenKeyEverywhere",
+        "missingDistributionKeyError",
+        (array) => {
+          return !(array.some(
+            (row) => row[DISTRIBUTION_KEY]
+          ) && array.some(
+            (row) => !row[DISTRIBUTION_KEY]
+          ));
+        }
+      )
+    })
+  })
+};
+function isGeneratorOrLoad(equipmentType) {
+  return equipmentType === Generator.type || equipmentType === Load.type;
+}
+function makeDefaultRowData() {
+  return {
+    [FieldConstants.AG_GRID_ROW_UUID]: v4(),
+    [FieldConstants.EQUIPMENT_ID]: "",
+    [DISTRIBUTION_KEY]: null
+  };
+}
+function makeDefaultTableRows() {
+  return [makeDefaultRowData(), makeDefaultRowData(), makeDefaultRowData()];
+}
+function getExplicitNamingFilterEmptyFormData() {
+  return {
+    [FILTER_EQUIPMENTS_ATTRIBUTES]: makeDefaultTableRows()
+  };
+}
+const ExplicitNamingFilterForm = () => {
+  const intl = useIntl();
+  const { getValues, setValue } = useFormContext();
+  const watchEquipmentType = useWatch({
+    name: FieldConstants.EQUIPMENT_TYPE
+  });
+  const forGeneratorOrLoad = isGeneratorOrLoad(watchEquipmentType);
+  const columnDefs = useMemo(() => {
+    const columnDefs2 = [
+      ...ROW_DRAGGING_SELECTION_COLUMN_DEF,
+      {
+        headerName: intl.formatMessage({
+          id: FieldConstants.EQUIPMENT_ID
+        }),
+        field: FieldConstants.EQUIPMENT_ID,
+        editable: true,
+        singleClickEdit: true,
+        valueParser: (params) => {
+          var _a;
+          return ((_a = params.newValue) == null ? void 0 : _a.trim()) ?? null;
+        }
+      }
+    ];
+    if (forGeneratorOrLoad) {
+      columnDefs2.push({
+        headerName: intl.formatMessage({ id: DISTRIBUTION_KEY }),
+        field: DISTRIBUTION_KEY,
+        editable: true,
+        singleClickEdit: true,
+        cellEditor: NumericEditor,
+        maxWidth: 200
+      });
+    }
+    return columnDefs2;
+  }, [intl, forGeneratorOrLoad]);
+  const defaultColDef = useMemo(
+    () => ({
+      suppressMovable: true
+    }),
+    []
+  );
+  const csvFileHeaders = useMemo(() => {
+    const csvFileHeaders2 = [
+      intl.formatMessage({ id: FieldConstants.EQUIPMENT_ID })
+    ];
+    if (forGeneratorOrLoad) {
+      csvFileHeaders2.push(intl.formatMessage({ id: DISTRIBUTION_KEY }));
+    }
+    return csvFileHeaders2;
+  }, [intl, forGeneratorOrLoad]);
+  const getDataFromCsvFile = useCallback((csvData) => {
+    if (csvData) {
+      return csvData.map((value) => {
+        var _a, _b;
+        return {
+          [FieldConstants.AG_GRID_ROW_UUID]: v4(),
+          [FieldConstants.EQUIPMENT_ID]: (_a = value[0]) == null ? void 0 : _a.trim(),
+          [DISTRIBUTION_KEY]: toFloatOrNullValue((_b = value[1]) == null ? void 0 : _b.trim())
+        };
+      });
+    } else {
+      return [];
+    }
+  }, []);
+  const openConfirmationPopup = () => {
+    return getValues(FILTER_EQUIPMENTS_ATTRIBUTES).some(
+      (row) => row[DISTRIBUTION_KEY] || row[FieldConstants.EQUIPMENT_ID]
+    );
+  };
+  const handleResetOnConfirmation = () => {
+    setValue(FILTER_EQUIPMENTS_ATTRIBUTES, makeDefaultTableRows());
+  };
+  return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+      InputWithPopupConfirmation,
+      {
+        Input: SelectInput,
+        name: FieldConstants.EQUIPMENT_TYPE,
+        options: Object.values(FILTER_EQUIPMENTS),
+        label: "equipmentType",
+        shouldOpenPopup: openConfirmationPopup,
+        resetOnConfirmation: handleResetOnConfirmation,
+        message: "changeTypeMessage",
+        validateButtonLabel: "button.changeType"
+      }
+    ) }),
+    watchEquipmentType && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+      CustomAgGridTable,
+      {
+        name: FILTER_EQUIPMENTS_ATTRIBUTES,
+        columnDefs,
+        defaultColDef,
+        makeDefaultRowData,
+        pagination: true,
+        paginationPageSize: 100,
+        suppressRowClickSelection: true,
+        alwaysShowVerticalScroll: true,
+        stopEditingWhenCellsLoseFocus: true,
+        csvProps: {
+          fileName: intl.formatMessage({
+            id: "filterCsvFileName"
+          }),
+          fileHeaders: csvFileHeaders,
+          getDataFromCsv: getDataFromCsvFile
+        },
+        cssProps: {
+          "& .ag-root-wrapper-body": {
+            maxHeight: "430px"
+          }
+        }
+      }
+    ) })
+  ] });
+};
+const RemoveButton = (props) => {
+  const {
+    field: { value: query, onChange }
+  } = useController({ name: EXPERT_FILTER_QUERY });
+  function handleDelete(e) {
+    onChange(recursiveRemove(query, props.path));
+  }
+  const isLastRuleOrGroup = props.path.toString() === [0].toString() && getNumberOfSiblings(props.path, query) === 1;
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      onClick: handleDelete,
+      className: props.className,
+      children: !isLastRuleOrGroup && /* @__PURE__ */ jsx(DeleteIcon, {})
+    }
+  );
+};
+const ElementValueEditor = (props) => {
+  const { setValue } = useCustomFormContext();
+  const { fetchElementsInfos } = useContext(FilterContext);
+  useEffect(() => {
+    if (props.defaultValue && Array.isArray(props.defaultValue) && props.defaultValue.length > 0 && props.defaultValue[0].length > 0 && validate(props.defaultValue[0])) {
+      fetchElementsInfos && fetchElementsInfos(props.defaultValue).then(
+        (childrenWithMetadata) => {
+          setValue(
+            props.name,
+            childrenWithMetadata.map((v) => {
+              return {
+                id: v.elementUuid,
+                name: v.elementName,
+                specificMetadata: v.specificMetadata
+              };
+            })
+          );
+        }
+      );
+    }
+  }, [
+    props.name,
+    props.defaultValue,
+    props.elementType,
+    setValue,
+    fetchElementsInfos
+  ]);
+  return /* @__PURE__ */ jsx(
+    DirectoryItemsInput,
+    {
+      name: props.name,
+      elementType: props.elementType,
+      equipmentTypes: props.equipmentTypes,
+      titleId: props.titleId,
+      hideErrorMessage: props.hideErrorMessage,
+      label: "filter",
+      itemFilter: props.itemFilter,
+      onChange: props.onChange,
+      labelRequiredFromContext: false
+    }
+  );
+};
+const styles = {
+  noArrows: {
+    "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
+      display: "none"
+    },
+    "& input[type=number]": {
+      MozAppearance: "textfield"
+    }
+  }
+};
+const ValueEditor = (props) => {
+  const formContext = useFormContext();
+  const { getValues } = formContext;
+  const itemFilter = useCallback(
+    (value) => {
+      var _a, _b, _c;
+      if ((value == null ? void 0 : value.type) === ElementType.FILTER) {
+        return (
+          // we do not authorize to use an expert filter in the rules of
+          // another expert filter, to prevent potential cycle problems
+          ((_a = value == null ? void 0 : value.specificMetadata) == null ? void 0 : _a.type) !== FilterType.EXPERT.id && (props.field === FieldType.ID && ((_b = value == null ? void 0 : value.specificMetadata) == null ? void 0 : _b.equipmentType) === getValues(FieldConstants.EQUIPMENT_TYPE) || (props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) && ((_c = value == null ? void 0 : value.specificMetadata) == null ? void 0 : _c.equipmentType) === VoltageLevel.type)
+        );
+      }
+      return true;
+    },
+    [props.field, getValues]
+  );
+  if (props.operator === OperatorType.EXISTS) {
+    return null;
+  }
+  if ([FieldType.COUNTRY, FieldType.COUNTRY_1, FieldType.COUNTRY_2].includes(
+    props.field
+  )) {
+    return /* @__PURE__ */ jsx(CountryValueEditor, { ...props });
+  }
+  if (props.field === FieldType.ENERGY_SOURCE || props.field === FieldType.SHUNT_COMPENSATOR_TYPE || props.field === FieldType.LOAD_TYPE || props.field === FieldType.RATIO_REGULATION_MODE || props.field === FieldType.PHASE_REGULATION_MODE) {
+    return /* @__PURE__ */ jsx(TranslatedValueEditor, { ...props });
+  }
+  if (props.operator === OperatorType.IS_PART_OF || props.operator === OperatorType.IS_NOT_PART_OF) {
+    let equipmentTypes;
+    if (props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
+      equipmentTypes = [VoltageLevel.type];
+    } else if (props.field === FieldType.ID) {
+      equipmentTypes = [getValues(FieldConstants.EQUIPMENT_TYPE)];
+    }
+    return /* @__PURE__ */ jsx(
+      ElementValueEditor,
+      {
+        name: DataType.FILTER_UUID + props.rule.id,
+        elementType: ElementType.FILTER,
+        equipmentTypes,
+        titleId: "selectFilterDialogTitle",
+        hideErrorMessage: true,
+        onChange: (e) => {
+          props.handleOnChange(e.map((v) => v.id));
+        },
+        itemFilter,
+        defaultValue: props.value
+      }
+    );
+  } else if (props.field === FieldType.ID || props.field === FieldType.NAME || props.field === FieldType.VOLTAGE_LEVEL_ID || props.field === FieldType.VOLTAGE_LEVEL_ID_1 || props.field === FieldType.VOLTAGE_LEVEL_ID_2) {
+    return /* @__PURE__ */ jsx(TextValueEditor, { ...props });
+  } else if (props.field === FieldType.PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY_1 || props.field === FieldType.SUBSTATION_PROPERTY_2) {
+    let equipmentType;
+    if (props.field === FieldType.SUBSTATION_PROPERTY || props.field === FieldType.SUBSTATION_PROPERTY_1 || props.field === FieldType.SUBSTATION_PROPERTY_2) {
+      equipmentType = Substation.type;
+    } else {
+      equipmentType = getValues(FieldConstants.EQUIPMENT_TYPE);
+    }
+    return /* @__PURE__ */ jsx(
+      PropertyValueEditor,
+      {
+        equipmentType,
+        valueEditorProps: props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Box, { sx: props.inputType === "number" ? styles.noArrows : void 0, children: /* @__PURE__ */ jsx(
+    MaterialValueEditor,
+    {
+      ...props,
+      title: void 0
+    }
+  ) });
+};
+const CustomReactQueryBuilder = (props) => {
+  const {
+    getValues,
+    setValue,
+    watch,
+    formState: { isSubmitted }
+    // Set to true after the form is submitted. Will remain true until the reset method is invoked.
+  } = useFormContext();
+  const intl = useIntl();
+  const query = watch(props.name);
+  const handleQueryChange = useCallback(
+    (newQuery) => {
+      const oldQuery = getValues(props.name);
+      const hasQueryChanged = formatQuery(oldQuery, "json_without_ids") !== formatQuery(newQuery, "json_without_ids");
+      const hasAddedRules = countRules(newQuery) > countRules(oldQuery);
+      setValue(props.name, newQuery, {
+        shouldDirty: hasQueryChanged,
+        shouldValidate: isSubmitted && hasQueryChanged && !hasAddedRules
+      });
+    },
+    [getValues, setValue, isSubmitted, props.name]
+  );
+  const combinators = useMemo(() => {
+    return Object.values(COMBINATOR_OPTIONS).map((c) => ({
+      name: c.name,
+      label: intl.formatMessage({ id: c.label })
+    }));
+  }, [intl]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(QueryBuilderMaterial, { children: /* @__PURE__ */ jsx(
+      QueryBuilderDnD,
+      {
+        dnd: { ...ReactDnD, ...ReactDndHtml5Backend },
+        children: /* @__PURE__ */ jsx(
+          QueryBuilder,
+          {
+            fields: props.fields,
+            query,
+            addRuleToNewGroups: true,
+            combinators,
+            onQueryChange: handleQueryChange,
+            getOperators: (fieldName) => getOperators(fieldName, intl),
+            validator: queryValidator,
+            controlClassnames: {
+              queryBuilder: "queryBuilder-branches"
+            },
+            controlElements: {
+              addRuleAction: (props2) => /* @__PURE__ */ jsx(AddButton, { ...props2, label: "rule" }),
+              addGroupAction: (props2) => /* @__PURE__ */ jsx(AddButton, { ...props2, label: "subGroup" }),
+              combinatorSelector: CombinatorSelector,
+              removeRuleAction: RemoveButton,
+              removeGroupAction: RemoveButton,
+              valueEditor: ValueEditor,
+              operatorSelector: ValueSelector,
+              fieldSelector: ValueSelector,
+              valueSourceSelector: ValueSelector
+            },
+            listsAsArrays: true
+          }
+        )
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(ErrorInput, { name: props.name, InputField: FieldErrorAlert }) })
+  ] });
+};
+yup.setLocale({
+  mixed: {
+    required: "YupRequired",
+    notType: ({ type }) => {
+      if (type === "number") {
+        return "YupNotTypeNumber";
+      } else {
+        return "YupNotTypeDefault";
+      }
+    }
+  }
+});
+const EXPERT_FILTER_QUERY = "rules";
+const expertFilterSchema = {
+  [EXPERT_FILTER_QUERY]: yup.object().when([FieldConstants.FILTER_TYPE], {
+    is: FilterType.EXPERT.id,
+    then: (schema) => schema.when([FieldConstants.EQUIPMENT_TYPE], {
+      is: (equipmentType) => isSupportedEquipmentType(equipmentType),
+      then: (schema2) => schema2.test(
+        RULES.EMPTY_GROUP,
+        RULES.EMPTY_GROUP,
+        (query) => {
+          return testQuery(
+            RULES.EMPTY_GROUP,
+            query
+          );
+        }
+      ).test(
+        RULES.EMPTY_RULE,
+        RULES.EMPTY_RULE,
+        (query) => {
+          return testQuery(
+            RULES.EMPTY_RULE,
+            query
+          );
+        }
+      ).test(
+        RULES.INCORRECT_RULE,
+        RULES.INCORRECT_RULE,
+        (query) => {
+          return testQuery(
+            RULES.INCORRECT_RULE,
+            query
+          );
+        }
+      ).test(
+        RULES.BETWEEN_RULE,
+        RULES.BETWEEN_RULE,
+        (query) => {
+          return testQuery(
+            RULES.BETWEEN_RULE,
+            query
+          );
+        }
+      )
+    })
+  })
+};
+function isSupportedEquipmentType(equipmentType) {
+  return Object.values(EXPERT_FILTER_EQUIPMENTS).map((equipments) => equipments.id).includes(equipmentType);
+}
+const defaultQuery = {
+  combinator: COMBINATOR_OPTIONS.AND.name,
+  rules: [
+    {
+      id: v4(),
+      field: FieldType.ID,
+      operator: OPERATOR_OPTIONS.CONTAINS.name,
+      value: ""
+    }
+  ]
+};
+function getExpertFilterEmptyFormData() {
+  return {
+    [EXPERT_FILTER_QUERY]: defaultQuery
+  };
+}
+const ExpertFilterForm = () => {
+  const intl = useIntl();
+  const { getValues, setValue } = useFormContext();
+  const openConfirmationPopup = useCallback(() => {
+    return formatQuery(getValues(EXPERT_FILTER_QUERY), "json_without_ids") !== formatQuery(defaultQuery, "json_without_ids");
+  }, [getValues]);
+  const handleResetOnConfirmation = useCallback(() => {
+    setValue(EXPERT_FILTER_QUERY, defaultQuery);
+  }, [setValue]);
+  const watchEquipmentType = useWatch({
+    name: FieldConstants.EQUIPMENT_TYPE
+  });
+  const translatedFields = useMemo(() => {
+    var _a;
+    return (_a = fields[watchEquipmentType]) == null ? void 0 : _a.map((field) => {
+      return {
+        ...field,
+        label: intl.formatMessage({ id: field.label })
+      };
+    });
+  }, [intl, watchEquipmentType]);
+  return /* @__PURE__ */ jsxs(Grid, { container: true, item: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+      InputWithPopupConfirmation,
+      {
+        Input: SelectInput,
+        name: FieldConstants.EQUIPMENT_TYPE,
+        options: Object.values(EXPERT_FILTER_EQUIPMENTS),
+        label: "equipmentType",
+        shouldOpenPopup: openConfirmationPopup,
+        resetOnConfirmation: handleResetOnConfirmation,
+        message: "changeTypeMessage",
+        validateButtonLabel: "button.changeType"
+      }
+    ) }),
+    watchEquipmentType && isSupportedEquipmentType(watchEquipmentType) && /* @__PURE__ */ jsx(
+      CustomReactQueryBuilder,
+      {
+        name: EXPERT_FILTER_QUERY,
+        fields: translatedFields
+      }
+    )
+  ] });
+};
+const FilterForm = (props) => {
+  const { setValue } = useFormContext();
+  const filterType = useWatch({ name: FieldConstants.FILTER_TYPE });
+  const handleChange = (_event, value) => {
+    setValue(FieldConstants.FILTER_TYPE, value);
+  };
+  return /* @__PURE__ */ jsxs(Grid$1, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+      UniqueNameInput,
+      {
+        name: FieldConstants.NAME,
+        label: "nameProperty",
+        elementType: ElementType.FILTER,
+        autoFocus: props.creation,
+        activeDirectory: props.activeDirectory,
+        elementExists: props.elementExists
+      }
+    ) }),
+    props.creation && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Grid$1, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
+        ExpandingTextField,
+        {
+          name: FieldConstants.DESCRIPTION,
+          label: "descriptionProperty",
+          minRows: 3,
+          rows: 5
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Grid$1, { item: true, children: /* @__PURE__ */ jsx(
+        RadioInput,
+        {
+          name: FieldConstants.FILTER_TYPE,
+          options: Object.values(FilterType),
+          formProps: { onChange: handleChange }
+        }
+      ) })
+    ] }),
+    filterType === FilterType.CRITERIA_BASED.id && /* @__PURE__ */ jsx(CriteriaBasedFilterForm, {}),
+    filterType === FilterType.EXPLICIT_NAMING.id && /* @__PURE__ */ jsx(ExplicitNamingFilterForm, {}),
+    filterType === FilterType.EXPERT.id && /* @__PURE__ */ jsx(ExpertFilterForm, {})
+  ] });
+};
+const emptyFormData = {
+  [FieldConstants.NAME]: "",
+  [FieldConstants.DESCRIPTION]: "",
+  [FieldConstants.FILTER_TYPE]: FilterType.CRITERIA_BASED.id,
+  [FieldConstants.EQUIPMENT_TYPE]: null,
+  ...criteriaBasedFilterEmptyFormData,
+  ...getExplicitNamingFilterEmptyFormData(),
+  ...getExpertFilterEmptyFormData()
+};
+const formSchema$3 = yup.object().shape({
+  [FieldConstants.NAME]: yup.string().trim().required("nameEmpty"),
+  [FieldConstants.DESCRIPTION]: yup.string().max(500, "descriptionLimitError"),
+  [FieldConstants.FILTER_TYPE]: yup.string().required(),
+  [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
+  ...criteriaBasedFilterSchema,
+  ...explicitNamingFilterSchema,
+  ...expertFilterSchema
+}).required();
+const FilterCreationDialog = ({
+  open,
+  onClose,
+  activeDirectory,
+  createFilter,
+  saveFilter,
+  fetchAppsAndUrls,
+  elementExists,
+  language,
+  fetchDirectoryContent,
+  fetchRootFolders,
+  fetchElementsInfos
+}) => {
+  var _a;
+  const { snackError } = useSnackMessage();
+  const formMethods = {
+    ...useForm({
+      defaultValues: emptyFormData,
+      resolver: yupResolver(formSchema$3)
+    }),
+    language
+  };
+  const {
+    formState: { errors }
+  } = formMethods;
+  const nameError = errors[FieldConstants.NAME];
+  const isValidating = (_a = errors.root) == null ? void 0 : _a.isValidating;
+  const onSubmit = useCallback(
+    (filterForm) => {
+      if (filterForm[FieldConstants.FILTER_TYPE] === FilterType.EXPLICIT_NAMING.id) {
+        saveExplicitNamingFilter(
+          filterForm[FILTER_EQUIPMENTS_ATTRIBUTES],
+          true,
+          filterForm[FieldConstants.EQUIPMENT_TYPE],
+          filterForm[FieldConstants.NAME],
+          filterForm[FieldConstants.DESCRIPTION],
+          null,
+          (error) => {
+            snackError({
+              messageTxt: error
+            });
+          },
+          onClose,
+          createFilter,
+          saveFilter,
+          activeDirectory
+        );
+      } else if (filterForm[FieldConstants.FILTER_TYPE] === FilterType.CRITERIA_BASED.id) {
+        saveCriteriaBasedFilter(
+          filterForm,
+          activeDirectory,
+          onClose,
+          (error) => {
+            snackError({
+              messageTxt: error
+            });
+          },
+          createFilter
+        );
+      } else if (filterForm[FieldConstants.FILTER_TYPE] === FilterType.EXPERT.id) {
+        saveExpertFilter(
+          null,
+          filterForm[EXPERT_FILTER_QUERY],
+          filterForm[FieldConstants.EQUIPMENT_TYPE],
+          filterForm[FieldConstants.NAME],
+          filterForm[FieldConstants.DESCRIPTION],
+          true,
+          activeDirectory,
+          onClose,
+          (error) => {
+            snackError({
+              messageTxt: error
+            });
+          },
+          createFilter,
+          saveFilter
+        );
+      }
+    },
+    [activeDirectory, snackError, onClose, createFilter, saveFilter]
+  );
+  return /* @__PURE__ */ jsx(
+    CustomMuiDialog,
+    {
+      open,
+      onClose,
+      onSave: onSubmit,
+      formSchema: formSchema$3,
+      formMethods,
+      titleId: "createNewFilter",
+      removeOptional: true,
+      disabledSave: !!nameError || !!isValidating,
+      children: /* @__PURE__ */ jsx(
+        FilterContext.Provider,
+        {
+          value: {
+            fetchDirectoryContent,
+            fetchRootFolders,
+            fetchElementsInfos,
+            fetchAppsAndUrls
+          },
+          children: /* @__PURE__ */ jsx(
+            FilterForm,
+            {
+              creation: true,
+              activeDirectory,
+              elementExists
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const formSchema$2 = yup.object().shape({
+  [FieldConstants.NAME]: yup.string().trim().required("nameEmpty"),
+  [FieldConstants.FILTER_TYPE]: yup.string().required(),
+  [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
+  ...expertFilterSchema
+}).required();
+const ExpertFilterEditionDialog = ({
+  id,
+  name,
+  titleId,
+  open,
+  onClose,
+  broadcastChannel,
+  selectionForCopy,
+  getFilterById,
+  setSelectionForCopy,
+  createFilter,
+  saveFilter,
+  activeDirectory,
+  elementExists,
+  language,
+  fetchDirectoryContent,
+  fetchRootFolders,
+  fetchElementsInfos
+}) => {
+  var _a;
+  const { snackError } = useSnackMessage();
+  const [dataFetchStatus, setDataFetchStatus] = useState(FetchStatus.IDLE);
+  const formMethods = {
+    ...useForm({
+      resolver: yupResolver(formSchema$2)
+    }),
+    language
+  };
+  const {
+    reset,
+    formState: { errors }
+  } = formMethods;
+  const nameError = errors[FieldConstants.NAME];
+  const isValidating = (_a = errors.root) == null ? void 0 : _a.isValidating;
+  useEffect(() => {
+    if (id && open) {
+      setDataFetchStatus(FetchStatus.FETCHING);
+      getFilterById(id).then((response) => {
+        setDataFetchStatus(FetchStatus.FETCH_SUCCESS);
+        reset({
+          [FieldConstants.NAME]: name,
+          [FieldConstants.FILTER_TYPE]: FilterType.EXPERT.id,
+          [FieldConstants.EQUIPMENT_TYPE]: response[FieldConstants.EQUIPMENT_TYPE],
+          [EXPERT_FILTER_QUERY]: importExpertRules(
+            response[EXPERT_FILTER_QUERY]
+          )
+        });
+      }).catch((error) => {
+        setDataFetchStatus(FetchStatus.FETCH_ERROR);
+        snackError({
+          messageTxt: error.message,
+          headerId: "cannotRetrieveFilter"
+        });
+      });
+    }
+  }, [id, name, open, reset, snackError, getFilterById]);
+  const onSubmit = useCallback(
+    (filterForm) => {
+      saveExpertFilter(
+        id,
+        filterForm[EXPERT_FILTER_QUERY],
+        filterForm[FieldConstants.EQUIPMENT_TYPE],
+        filterForm[FieldConstants.NAME],
+        "",
+        // The description can not be edited from this dialog
+        false,
+        null,
+        onClose,
+        (error) => {
+          snackError({
+            messageTxt: error
+          });
+        },
+        createFilter,
+        saveFilter
+      );
+      if (selectionForCopy.sourceItemUuid === id) {
+        setSelectionForCopy(noSelectionForCopy$1);
+        broadcastChannel.postMessage({
+          noSelectionForCopy: noSelectionForCopy$1
+        });
+      }
+    },
+    [
+      broadcastChannel,
+      id,
+      onClose,
+      selectionForCopy.sourceItemUuid,
+      snackError,
+      setSelectionForCopy,
+      saveFilter,
+      createFilter
+    ]
+  );
+  const isDataReady = dataFetchStatus === FetchStatus.FETCH_SUCCESS;
+  return /* @__PURE__ */ jsx(
+    CustomMuiDialog,
+    {
+      open,
+      onClose,
+      onSave: onSubmit,
+      formSchema: formSchema$2,
+      formMethods,
+      titleId,
+      removeOptional: true,
+      disabledSave: !!nameError || !!isValidating,
+      isDataFetching: dataFetchStatus === FetchStatus.FETCHING,
+      children: /* @__PURE__ */ jsx(
+        FilterContext.Provider,
+        {
+          value: {
+            fetchDirectoryContent,
+            fetchRootFolders,
+            fetchElementsInfos
+          },
+          children: isDataReady && /* @__PURE__ */ jsx(
+            FilterForm,
+            {
+              activeDirectory,
+              elementExists
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const formSchema$1 = yup.object().shape({
+  [FieldConstants.NAME]: yup.string().trim().required("nameEmpty"),
+  [FieldConstants.FILTER_TYPE]: yup.string().required(),
+  [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
+  ...explicitNamingFilterSchema
+}).required();
+const ExplicitNamingFilterEditionDialog = ({
+  id,
+  name,
+  titleId,
+  open,
+  onClose,
+  broadcastChannel,
+  selectionForCopy,
+  setSelectionForCopy,
+  getFilterById,
+  createFilter,
+  saveFilter,
+  activeDirectory,
+  elementExists,
+  language
+}) => {
+  var _a;
+  const { snackError } = useSnackMessage();
+  const [dataFetchStatus, setDataFetchStatus] = useState(FetchStatus.IDLE);
+  const formMethods = {
+    ...useForm({
+      resolver: yupResolver(formSchema$1)
+    }),
+    language
+  };
+  const {
+    reset,
+    formState: { errors }
+  } = formMethods;
+  const nameError = errors[FieldConstants.NAME];
+  const isValidating = (_a = errors.root) == null ? void 0 : _a.isValidating;
+  useEffect(() => {
+    if (id && open) {
+      setDataFetchStatus(FetchStatus.FETCHING);
+      getFilterById(id).then((response) => {
+        setDataFetchStatus(FetchStatus.FETCH_SUCCESS);
+        reset({
+          [FieldConstants.NAME]: name,
+          [FieldConstants.FILTER_TYPE]: FilterType.EXPLICIT_NAMING.id,
+          [FieldConstants.EQUIPMENT_TYPE]: response[FieldConstants.EQUIPMENT_TYPE],
+          [FILTER_EQUIPMENTS_ATTRIBUTES]: response[FILTER_EQUIPMENTS_ATTRIBUTES].map((row) => ({
+            [FieldConstants.AG_GRID_ROW_UUID]: v4(),
+            ...row
+          }))
+        });
+      }).catch((error) => {
+        setDataFetchStatus(FetchStatus.FETCH_ERROR);
+        snackError({
+          messageTxt: error.message,
+          headerId: "cannotRetrieveFilter"
+        });
+      });
+    }
+  }, [id, name, open, reset, snackError, getFilterById]);
+  const onSubmit = useCallback(
+    (filterForm) => {
+      saveExplicitNamingFilter(
+        filterForm[FILTER_EQUIPMENTS_ATTRIBUTES],
+        false,
+        filterForm[FieldConstants.EQUIPMENT_TYPE],
+        filterForm[FieldConstants.NAME],
+        "",
+        // The description can not be edited from this dialog
+        id,
+        (error) => {
+          snackError({
+            messageTxt: error
+          });
+        },
+        onClose,
+        createFilter,
+        saveFilter
+      );
+      if (selectionForCopy.sourceItemUuid === id) {
+        setSelectionForCopy(noSelectionForCopy$1);
+        broadcastChannel.postMessage({
+          noSelectionForCopy: noSelectionForCopy$1
+        });
+      }
+    },
+    [
+      broadcastChannel,
+      id,
+      selectionForCopy,
+      onClose,
+      snackError,
+      createFilter,
+      saveFilter,
+      setSelectionForCopy
+    ]
+  );
+  const isDataReady = dataFetchStatus === FetchStatus.FETCH_SUCCESS;
+  return /* @__PURE__ */ jsx(
+    CustomMuiDialog,
+    {
+      open,
+      onClose,
+      onSave: onSubmit,
+      formSchema: formSchema$1,
+      formMethods,
+      titleId,
+      removeOptional: true,
+      disabledSave: !!nameError || !!isValidating,
+      isDataFetching: dataFetchStatus === FetchStatus.FETCHING,
+      children: isDataReady && /* @__PURE__ */ jsx(
+        FilterForm,
+        {
+          activeDirectory,
+          elementExists
+        }
+      )
+    }
+  );
+};
+ExplicitNamingFilterEditionDialog.prototype = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  titleId: PropTypes.string.isRequired,
+  open: PropTypes.bool,
+  onClose: PropTypes.func.isRequired
+};
+const noSelectionForCopy = {
+  sourceItemUuid: null,
+  name: null,
+  description: null,
+  parentDirectoryUuid: null
+};
+const formSchema = yup.object().shape({
+  [FieldConstants.NAME]: yup.string().trim().required("nameEmpty"),
+  [FieldConstants.FILTER_TYPE]: yup.string().required(),
+  [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
+  ...criteriaBasedFilterSchema
+}).required();
+const CriteriaBasedFilterEditionDialog = ({
+  id,
+  name,
+  titleId,
+  open,
+  onClose,
+  broadcastChannel,
+  getFilterById,
+  saveFilter,
+  selectionForCopy,
+  setSelelectionForCopy,
+  activeDirectory,
+  elementExists,
+  language
+}) => {
+  var _a;
+  const { snackError } = useSnackMessage();
+  const [dataFetchStatus, setDataFetchStatus] = useState(FetchStatus.IDLE);
+  const formMethods = {
+    ...useForm({
+      resolver: yupResolver(formSchema)
+    }),
+    language
+  };
+  const {
+    reset,
+    formState: { errors }
+  } = formMethods;
+  const nameError = errors[FieldConstants.NAME];
+  const isValidating = (_a = errors.root) == null ? void 0 : _a.isValidating;
+  useEffect(() => {
+    if (id && open) {
+      setDataFetchStatus(FetchStatus.FETCHING);
+      getFilterById(id).then((response) => {
+        setDataFetchStatus(FetchStatus.FETCH_SUCCESS);
+        reset({
+          [FieldConstants.NAME]: name,
+          [FieldConstants.FILTER_TYPE]: FilterType.CRITERIA_BASED.id,
+          ...backToFrontTweak(response)
+        });
+      }).catch((error) => {
+        setDataFetchStatus(FetchStatus.FETCH_ERROR);
+        snackError({
+          messageTxt: error.message,
+          headerId: "cannotRetrieveFilter"
+        });
+      });
+    }
+  }, [id, name, open, reset, snackError, getFilterById]);
+  const onSubmit = useCallback(
+    (filterForm) => {
+      saveFilter(
+        frontToBackTweak(id, filterForm),
+        filterForm[FieldConstants.NAME]
+      ).then(() => {
+        if (selectionForCopy.sourceItemUuid === id) {
+          setSelelectionForCopy(noSelectionForCopy);
+          broadcastChannel.postMessage({
+            noSelectionForCopy
+          });
+        }
+      }).catch((error) => {
+        snackError({
+          messageTxt: error.message
+        });
+      });
+    },
+    [
+      broadcastChannel,
+      id,
+      selectionForCopy.sourceItemUuid,
+      snackError,
+      saveFilter,
+      setSelelectionForCopy
+    ]
+  );
+  const isDataReady = dataFetchStatus === FetchStatus.FETCH_SUCCESS;
+  return /* @__PURE__ */ jsx(
+    CustomMuiDialog,
+    {
+      open,
+      onClose,
+      onSave: onSubmit,
+      formSchema,
+      formMethods,
+      titleId,
+      removeOptional: true,
+      disabledSave: !!nameError || !!isValidating,
+      isDataFetching: dataFetchStatus === FetchStatus.FETCHING,
+      children: isDataReady && /* @__PURE__ */ jsx(
+        FilterForm,
+        {
+          activeDirectory,
+          elementExists
+        }
+      )
+    }
+  );
+};
+export {
+  BottomRightButtons as B,
+  CustomAgGridTable as C,
+  ExpertFilterEditionDialog as E,
+  FilterCreationDialog as F,
+  ROW_DRAGGING_SELECTION_COLUMN_DEF as R,
+  ValueEditor as V,
+  ExplicitNamingFilterEditionDialog as a,
+  CriteriaBasedFilterEditionDialog as b,
+  CsvUploader as c,
+  FILTER_EQUIPMENTS_ATTRIBUTES as d,
+  explicitNamingFilterSchema as e,
+  ExplicitNamingFilterForm as f,
+  getExplicitNamingFilterEmptyFormData as g,
+  RemoveButton as h,
+  ElementValueEditor as i,
+  CustomReactQueryBuilder as j,
+  EXPERT_FILTER_QUERY as k,
+  expertFilterSchema as l,
+  getExpertFilterEmptyFormData as m,
+  ExpertFilterForm as n,
+  FilterForm as o,
+  noSelectionForCopy as p
+};