@gridsuite/commons-ui 0.239.0 → 0.241.0

package/dist/features/parameters/pcc-min/pcc-min-parameters-inline.js

@@ -1,7 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
-import { useIntl, FormattedMessage } from "react-intl";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import "react-intl";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import { ElementType } from "../../../utils/types/elementType.js";
@@ -9,35 +8,33 @@ import "../../../utils/types/equipmentType.js";
 import { mapPccMinParameters } from "../../../utils/types/pcc-min.type.js";
 import "@mui/icons-material";
 import { updatePccMinParameters, fetchPccMinParameters } from "../../../services/pcc-min.js";
+import "@mui/material";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
-import "../../../components/ui/overflowableText/OverflowableText.js";
+import { ParameterLayout } from "../common/parameter-layout/parameter-layout.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
 import "react-hook-form";
-import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import { SubmitButton } from "../../../components/ui/reactHookForm/utils/SubmitButton.js";
+import { CustomFormProvider } from "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/overflowableText/OverflowableText.js";
 import "yup";
-import { DirectoryItemSelector } from "../../../components/ui/directoryItemSelector/DirectoryItemSelector.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
-import { PopupConfirmationDialog } from "../../../components/ui/dialogs/popupConfirmationDialog/PopupConfirmationDialog.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
-import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
 import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
-import "@hello-pangea/dnd";
-import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
-import { LabelledButton } from "../common/parameters.js";
-import { CreateParameterDialog } from "../common/parameters-creation-dialog.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
@@ -59,12 +56,8 @@ function PccMinParametersInLine({
     studyUuid,
     parameters: pccMinParameters
   });
-  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
   const { snackError } = useSnackMessage();
-  const intl = useIntl();
-  const [openSelectParameterDialog, setOpenSelectParameterDialog] = useState(false);
   const { formState, handleSubmit, reset, getValues } = pccMinMethods.formMethods;
-  const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
   const resetPccMinParameters = useCallback(() => {
     updatePccMinParameters(studyUuid, null).catch((error) => {
       snackError({
@@ -72,21 +65,13 @@ function PccMinParametersInLine({
         headerId: "updatePccMinParametersError"
       });
     });
-    setOpenResetConfirmation(false);
   }, [studyUuid, snackError]);
-  const handleResetClick = useCallback(() => {
-    setOpenResetConfirmation(true);
-  }, []);
-  const handleCancelReset = useCallback(() => {
-    setOpenResetConfirmation(false);
-  }, []);
   useEffect(() => {
     setHaveDirtyFields(formState.isDirty);
   }, [formState, setHaveDirtyFields]);
   const handleLoadParameters = useCallback(
     (newParams) => {
       if (newParams?.length) {
-        setOpenSelectParameterDialog(false);
         const parametersUuid = newParams[0].id;
         fetchPccMinParameters(parametersUuid).then((params) => {
           reset(fromPccMinParamsDataToFormValues(params), {
@@ -96,68 +81,26 @@ function PccMinParametersInLine({
           snackWithFallback(snackError, error, { headerId: "paramsRetrievingError" });
         });
       }
-      setOpenSelectParameterDialog(false);
     },
     [reset, snackError]
   );
-  return /* @__PURE__ */ jsx(
-    PccMinParametersForm,
+  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: pccMinMethods.formSchema, ...pccMinMethods.formMethods, removeOptional: true, children: /* @__PURE__ */ jsx(
+    ParameterLayout,
     {
-      pccMinMethods,
-      renderActions: () => {
-        return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
-            /* @__PURE__ */ jsx(
-              LabelledButton,
-              {
-                callback: () => setOpenSelectParameterDialog(true),
-                label: "settings.button.chooseSettings"
-              }
-            ),
-            /* @__PURE__ */ jsx(LabelledButton, { callback: () => setOpenCreateParameterDialog(true), label: "save" }),
-            /* @__PURE__ */ jsx(LabelledButton, { callback: handleResetClick, label: "resetToDefault" }),
-            /* @__PURE__ */ jsx(SubmitButton, { onClick: handleSubmit(pccMinMethods.onSaveInline), variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" }) })
-          ] }),
-          openCreateParameterDialog && /* @__PURE__ */ jsx(
-            CreateParameterDialog,
-            {
-              studyUuid,
-              open: openCreateParameterDialog,
-              onClose: () => setOpenCreateParameterDialog(false),
-              parameterValues: getValues,
-              parameterFormatter: (params) => mapPccMinParameters(fromPccMinParametersFormToParamValuesEnriched(params)),
-              parameterType: ElementType.PCC_MIN_PARAMETERS
-            }
-          ),
-          openSelectParameterDialog && /* @__PURE__ */ jsx(
-            DirectoryItemSelector,
-            {
-              open: openSelectParameterDialog,
-              onClose: handleLoadParameters,
-              types: [ElementType.PCC_MIN_PARAMETERS],
-              title: intl.formatMessage({
-                id: "showSelectParameterDialog"
-              }),
-              multiSelect: false,
-              validationButtonText: intl.formatMessage({
-                id: "validate"
-              })
-            }
-          ),
-          openResetConfirmation && /* @__PURE__ */ jsx(
-            PopupConfirmationDialog,
-            {
-              message: "resetParamsConfirmation",
-              validateButtonLabel: "validate",
-              openConfirmationPopup: openResetConfirmation,
-              setOpenConfirmationPopup: handleCancelReset,
-              handlePopupConfirmation: resetPccMinParameters
-            }
-          )
-        ] });
-      }
+      title: "PccMin",
+      isLoading: pccMinMethods.paramsLoading,
+      parameterType: ElementType.PCC_MIN_PARAMETERS,
+      createParameter: {
+        studyUuid,
+        getParameterValues: getValues,
+        parameterFormatter: (params) => mapPccMinParameters(fromPccMinParametersFormToParamValuesEnriched(params))
+      },
+      selectParameterHandler: handleLoadParameters,
+      resetHandler: resetPccMinParameters,
+      validateHandler: handleSubmit(pccMinMethods.onSaveInline),
+      children: /* @__PURE__ */ jsx(PccMinParametersForm, {})
     }
-  );
+  ) });
 }
 export {
   PccMinParametersInLine

package/dist/features/parameters/security-analysis/columns-definitions.js

@@ -1,35 +1,36 @@
 import * as yup from "yup";
-import "../../../utils/conversionUtils.js";
-import "../../../utils/types/equipmentType.js";
 import "react/jsx-runtime";
-import "@mui/icons-material";
-import { PARAM_SA_PROVIDER, PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_LOW_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_LOW_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_FLOW_PROPORTIONAL_THRESHOLD } from "../common/constants.js";
 import "@mui/material";
-import "react-intl";
+import "@mui/icons-material";
 import "react";
+import "react-intl";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "react-hook-form";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
-import "react-hook-form";
 import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
-import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
-import "@hello-pangea/dnd";
-import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
 import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import { PARAM_SA_PROVIDER, PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_HIGH_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_LOW_VOLTAGE_ABSOLUTE_THRESHOLD, PARAM_SA_LOW_VOLTAGE_PROPORTIONAL_THRESHOLD, PARAM_SA_FLOW_PROPORTIONAL_THRESHOLD } from "../common/constants.js";
 import "../common/widget/parameter-line-slider.js";
 import { getLimitReductionsFormSchema, toFormValuesLimitReductions } from "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";

package/dist/features/parameters/security-analysis/security-analysis-parameters-dialog.js

@@ -1,4 +1,5 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid2 } from "@mui/material";
 import "react";
 import "react-intl";
 import "../../../utils/conversionUtils.js";
@@ -7,7 +8,6 @@ import "../../../utils/types/equipmentType.js";
 import { ComputingType } from "../../../utils/types/computing-type.js";
 import "@mui/icons-material";
 import { getSecurityAnalysisDefaultLimitReductions, fetchSecurityAnalysisProviders, fetchSecurityAnalysisParameters, updateSecurityAnalysisParameters } from "../../../services/security-analysis.js";
-import "@mui/material";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
@@ -66,7 +66,7 @@ function SecurityAnalysisParametersDialog({
     formState: { errors, dirtyFields }
   } = securityAnalysisMethods.formMethods;
   const disableSave = Object.keys(errors).length > 0 || Object.keys(dirtyFields).length === 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     CustomMuiDialog,
     {
       open,
@@ -86,24 +86,24 @@ function SecurityAnalysisParametersDialog({
           // we want the dialog height to be fixed even when switching tabs
         }
       },
-      children: /* @__PURE__ */ jsx(
-        SecurityAnalysisParametersForm,
-        {
-          securityAnalysisMethods,
-          showContingencyCount: false,
-          isDeveloperMode,
-          renderTitleFields: () => {
-            return /* @__PURE__ */ jsx(
-              NameElementEditorForm,
-              {
-                initialElementName: name,
-                activeDirectory,
-                elementType: ElementType.LOADFLOW_PARAMETERS
-              }
-            );
+      children: [
+        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+          NameElementEditorForm,
+          {
+            initialElementName: name,
+            activeDirectory,
+            elementType: ElementType.LOADFLOW_PARAMETERS
           }
-        }
-      )
+        ) }),
+        /* @__PURE__ */ jsx(
+          SecurityAnalysisParametersForm,
+          {
+            securityAnalysisMethods,
+            showContingencyCount: false,
+            isDeveloperMode
+          }
+        )
+      ]
     }
   );
 }

package/dist/features/parameters/security-analysis/security-analysis-parameters-form.d.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, ReactNode } from 'react';
+import { ForwardedRef } from 'react';
 import { UUID } from 'node:crypto';
 import { ContingencyTableApi } from '../common';
 import { UseSecurityAnalysisParametersFormReturn } from './use-security-analysis-parameters-form';
@@ -9,8 +9,6 @@ export type SecurityAnalysisParametersFormProps = {
     fetchContingencyCount?: (contingencyListIds: UUID[] | null, abortSignal: AbortSignal) => Promise<ContingencyCount>;
     contingencyTableApiRef?: ForwardedRef<ContingencyTableApi>;
     isBuiltCurrentNode?: boolean;
-    renderTitleFields?: () => ReactNode;
-    renderActions?: () => ReactNode;
     isDeveloperMode: boolean;
 };
-export declare function SecurityAnalysisParametersForm({ securityAnalysisMethods, showContingencyCount, fetchContingencyCount, contingencyTableApiRef, isBuiltCurrentNode, renderTitleFields, renderActions, isDeveloperMode, }: Readonly<SecurityAnalysisParametersFormProps>): import("react").JSX.Element;
+export declare function SecurityAnalysisParametersForm({ securityAnalysisMethods, showContingencyCount, fetchContingencyCount, contingencyTableApiRef, isBuiltCurrentNode, isDeveloperMode, }: Readonly<SecurityAnalysisParametersFormProps>): import("react").JSX.Element;

package/dist/features/parameters/security-analysis/security-analysis-parameters-form.js

@@ -1,22 +1,21 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { FormattedMessage } from "react-intl";
-import { Grid, Box, LinearProgress } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Stack, Grid2 } from "@mui/material";
+import { parametersStyles } from "../parameters-style.js";
 import "@mui/icons-material";
+import "react";
+import "react-intl";
 import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
-import { mergeSx } from "../../../utils/styles.js";
-import "react";
 import "react-hook-form";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
-import { CustomFormProvider } from "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
 import "yup";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
-import { MuiSelectInput } from "../../../components/ui/reactHookForm/selectInputs/MuiSelectInput.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
@@ -31,9 +30,10 @@ import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import { parametersStyles } from "../parameters-style.js";
-import { PARAM_SA_PROVIDER, CONTINGENCY_LISTS_INFOS } from "../common/constants.js";
 import { LineSeparator } from "../common/line-separator.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
+import { CONTINGENCY_LISTS_INFOS } from "../common/constants.js";
+import { ProviderParam } from "../common/provider-param.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import { ContingencyTable } from "../common/contingency-table/contingency-table.js";
@@ -41,120 +41,49 @@ import "../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 import "../../../components/composite/filter/HeaderFilterForm.js";
 import { SecurityAnalysisParametersSelector } from "./security-analysis-parameters-selector.js";
-const styles = {
-  securityAnalysisParameters: {
-    flexGrow: 1,
-    paddingLeft: 1,
-    overflow: "auto",
-    display: "flex",
-    flexDirection: "column"
-  },
-  actions: {
-    flexGrow: 0
-  }
-};
 function SecurityAnalysisParametersForm({
   securityAnalysisMethods,
   showContingencyCount,
   fetchContingencyCount,
   contingencyTableApiRef,
   isBuiltCurrentNode,
-  renderTitleFields,
-  renderActions,
   isDeveloperMode
 }) {
-  return /* @__PURE__ */ jsx(
-    CustomFormProvider,
-    {
-      validationSchema: securityAnalysisMethods.formSchema,
-      ...securityAnalysisMethods.formMethods,
-      children: /* @__PURE__ */ jsx(Grid, { item: true, sx: { height: "100%" }, children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          sx: {
-            height: "100%",
-            display: "flex",
-            position: "relative",
-            flexDirection: "column",
-            width: "100%"
-          },
-          children: /* @__PURE__ */ jsxs(Box, { sx: styles.securityAnalysisParameters, children: [
-            renderTitleFields?.(),
-            securityAnalysisMethods.paramsFormInitialized ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                Grid,
-                {
-                  container: true,
-                  spacing: 1,
-                  sx: {
-                    padding: 0,
-                    paddingBottom: 2,
-                    height: "fit-content"
-                  },
-                  justifyContent: "space-between",
-                  children: [
-                    /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
-                    /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
-                      MuiSelectInput,
-                      {
-                        name: PARAM_SA_PROVIDER,
-                        size: "small",
-                        options: Object.values(securityAnalysisMethods.formattedProviders)
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(LineSeparator, {})
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  sx: {
-                    flexGrow: 1,
-                    overflow: "auto",
-                    paddingLeft: 1
-                  },
-                  children: /* @__PURE__ */ jsxs(
-                    Grid,
-                    {
-                      container: true,
-                      sx: mergeSx(parametersStyles.scrollableGrid, {
-                        maxHeight: "100%"
-                      }),
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          ContingencyTable,
-                          {
-                            name: CONTINGENCY_LISTS_INFOS,
-                            showContingencyCount,
-                            fetchContingencyCount,
-                            isBuiltCurrentNode,
-                            ref: contingencyTableApiRef
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Grid, { container: true, paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(LineSeparator, {}) }),
-                        /* @__PURE__ */ jsx(
-                          SecurityAnalysisParametersSelector,
-                          {
-                            params: securityAnalysisMethods.params,
-                            currentProvider: securityAnalysisMethods.watchProvider?.trim(),
-                            isDeveloperMode,
-                            defaultLimitReductions: securityAnalysisMethods.defaultLimitReductions
-                          }
-                        )
-                      ]
-                    },
-                    "securityAnalysisParameters"
-                  )
-                }
-              )
-            ] }) : /* @__PURE__ */ jsx(LinearProgress, {}),
-            renderActions && /* @__PURE__ */ jsx(Box, { sx: styles.actions, children: renderActions() })
-          ] })
-        }
-      ) })
-    }
-  );
+  return /* @__PURE__ */ jsxs(Stack, { sx: parametersStyles.scrollableGrid, children: [
+    /* @__PURE__ */ jsx(ProviderParam, { options: securityAnalysisMethods.formattedProviders, id: "Sa", sx: { paddingBottom: 1 } }),
+    /* @__PURE__ */ jsxs(
+      Grid2,
+      {
+        container: true,
+        sx: {
+          maxHeight: "100%"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            ContingencyTable,
+            {
+              name: CONTINGENCY_LISTS_INFOS,
+              showContingencyCount,
+              fetchContingencyCount,
+              isBuiltCurrentNode,
+              ref: contingencyTableApiRef
+            }
+          ),
+          /* @__PURE__ */ jsx(Grid2, { container: true, paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(LineSeparator, {}) }),
+          /* @__PURE__ */ jsx(
+            SecurityAnalysisParametersSelector,
+            {
+              params: securityAnalysisMethods.params,
+              currentProvider: securityAnalysisMethods.watchProvider?.trim(),
+              isDeveloperMode,
+              defaultLimitReductions: securityAnalysisMethods.defaultLimitReductions
+            }
+          )
+        ]
+      },
+      "securityAnalysisParameters"
+    )
+  ] });
 }
 export {
   SecurityAnalysisParametersForm