[Rework] split ParameterLine component with the four children. (#2168)

Signed-off-by: capyq <[email protected]>
gridsuite · Jul 19, 2024 · 144eed8 · 144eed8
1 parent 738cf9e
commit 144eed8
Show file tree

Hide file tree

Showing 12 changed files with 320 additions and 343 deletions.
diff --git a/src/components/dialogs/parameters/load-flow-parameters.jsx b/src/components/dialogs/parameters/load-flow-parameters.jsx
@@ -5,33 +5,34 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { Autocomplete, Chip, Grid, TextField, Box } from '@mui/material';
-import {
-    DropDown,
-    LabelledButton,
-    SwitchWithLabel,
-    useParameterState,
-    styles,
-} from './parameters';
-import { LineSeparator } from '../dialogUtils';
 import {
+    DirectoryItemSelector,
     ElementType,
     FlatParameters,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
-import { useLocalizedCountries } from '../../utils/localized-countries-hook';
-import { replaceAllDefaultValues } from '../../utils/utils';
+import { Autocomplete, Box, Chip, Grid, TextField } from '@mui/material';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { fetchLoadFlowParameters } from '../../../services/loadflow';
 import {
     PARAM_DEVELOPER_MODE,
     PARAM_LIMIT_REDUCTION,
 } from '../../../utils/config-params';
-import { ParameterType, ParamLine, ParameterGroup } from './widget';
 import { mergeSx } from '../../utils/functions';
+import { useLocalizedCountries } from '../../utils/localized-countries-hook';
+import { replaceAllDefaultValues } from '../../utils/utils';
+import { LineSeparator } from '../dialogUtils';
 import CreateParameterDialog from './common/parameters-creation-dialog';
-import { DirectoryItemSelector } from '@gridsuite/commons-ui';
-import { fetchLoadFlowParameters } from '../../../services/loadflow';
+import {
+    DropDown,
+    LabelledButton,
+    SwitchWithLabel,
+    styles,
+    useParameterState,
+} from './parameters';
+import { ParameterGroup } from './widget';
+import ParameterLineSlider from './widget/parameter-line-slider';
 
 const CountrySelector = ({ value, label, callback }) => {
     const { translate, countryCodes } = useLocalizedCountries();
@@ -45,7 +46,7 @@ const CountrySelector = ({ value, label, callback }) => {
                 <Autocomplete
                     size="small"
                     value={value}
-                    multiple={true}
+                    multiple
                     onChange={(event, newValues) => callback(newValues)}
                     options={countryCodes}
                     getOptionLabel={(countryCode) => translate(countryCode)}
@@ -638,9 +639,8 @@ export const LoadFlowParameters = ({ parametersBackend }) => {
                     >
                         <LineSeparator />
                         <Grid container spacing={1} paddingTop={1}>
-                            <ParamLine
-                                type={ParameterType.Slider}
-                                param_name_id={PARAM_LIMIT_REDUCTION}
+                            <ParameterLineSlider
+                                paramNameId={PARAM_LIMIT_REDUCTION}
                                 label="LimitReduction"
                                 marks={alertThresholdMarks}
                                 minValue={MIN_VALUE_ALLOWED_FOR_LIMIT_REDUCTION}

diff --git a/...nts/dialogs/parameters/map-parameters.jsx → ...nts/dialogs/parameters/map-parameters.tsx b/...nts/dialogs/parameters/map-parameters.jsx → ...nts/dialogs/parameters/map-parameters.tsx
@@ -4,25 +4,26 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-
 import { Grid } from '@mui/material';
-import { LineFlowMode, LineFlowColorMode } from '@powsybl/diagram-viewer';
+import { LineFlowColorMode, LineFlowMode } from '@powsybl/diagram-viewer';
+import { useState } from 'react';
 import {
+    MAP_BASEMAP_CARTO,
+    MAP_BASEMAP_CARTO_NOLABEL,
+    MAP_BASEMAP_MAPBOX,
     PARAM_LINE_FLOW_ALERT_THRESHOLD,
     PARAM_LINE_FLOW_COLOR_MODE,
     PARAM_LINE_FLOW_MODE,
     PARAM_LINE_FULL_PATH,
     PARAM_LINE_PARALLEL_PATH,
-    PARAM_MAP_MANUAL_REFRESH,
     PARAM_MAP_BASEMAP,
-    MAP_BASEMAP_MAPBOX,
-    MAP_BASEMAP_CARTO,
-    MAP_BASEMAP_CARTO_NOLABEL,
+    PARAM_MAP_MANUAL_REFRESH,
 } from '../../../utils/config-params';
-import { useParameterState, styles } from './parameters';
 import { LineSeparator } from '../dialogUtils';
-import { ParamLine, ParameterType } from './widget';
-import { useState } from 'react';
+import { styles, useParameterState } from './parameters';
+import ParameterLineDropdown from './widget/parameter-line-dropdown';
+import ParameterLineSlider from './widget/parameter-line-slider';
+import ParameterLineSwitch from './widget/parameter-line-switch';
 
 export const MapParameters = () => {
     const alertThresholdMarks = [
@@ -55,21 +56,18 @@ export const MapParameters = () => {
                 marginTop={-3}
                 justifyContent={'space-between'}
             >
-                <ParamLine
-                    type={ParameterType.Switch}
-                    param_name_id={PARAM_LINE_FULL_PATH}
+                <ParameterLineSwitch
+                    paramNameId={PARAM_LINE_FULL_PATH}
                     label="lineFullPath"
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.Switch}
-                    param_name_id={PARAM_LINE_PARALLEL_PATH}
+                <ParameterLineSwitch
+                    paramNameId={PARAM_LINE_PARALLEL_PATH}
                     label="lineParallelPath"
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.DropDown}
-                    param_name_id={PARAM_LINE_FLOW_MODE}
+                <ParameterLineDropdown
+                    paramNameId={PARAM_LINE_FLOW_MODE}
                     labelTitle="LineFlowMode"
                     labelValue="line-flow-mode-select-label"
                     values={{
@@ -79,9 +77,8 @@ export const MapParameters = () => {
                     }}
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.DropDown}
-                    param_name_id={PARAM_LINE_FLOW_COLOR_MODE}
+                <ParameterLineDropdown
+                    paramNameId={PARAM_LINE_FLOW_COLOR_MODE}
                     labelTitle="LineFlowColorMode"
                     labelValue="line-flow-color-mode-select-label"
                     values={{
@@ -96,24 +93,20 @@ export const MapParameters = () => {
                     }}
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.Slider}
-                    param_name_id={PARAM_LINE_FLOW_ALERT_THRESHOLD}
+                <ParameterLineSlider
+                    paramNameId={PARAM_LINE_FLOW_ALERT_THRESHOLD}
                     label="AlertThresholdLabel"
                     disabled={isLineFlowNominal}
                     marks={alertThresholdMarks}
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.Switch}
-                    param_name_id={PARAM_MAP_MANUAL_REFRESH}
+                <ParameterLineSwitch
+                    paramNameId={PARAM_MAP_MANUAL_REFRESH}
                     label="MapManualRefresh"
-                    marks={alertThresholdMarks}
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.DropDown}
-                    param_name_id={PARAM_MAP_BASEMAP}
+                <ParameterLineDropdown
+                    paramNameId={PARAM_MAP_BASEMAP}
                     labelTitle="MapBaseMap"
                     labelValue="map-base-map-select-label"
                     values={{

diff --git a/src/components/dialogs/parameters/network-parameters.jsx b/src/components/dialogs/parameters/network-parameters.jsx
@@ -5,18 +5,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FormattedMessage } from 'react-intl';
 import { Grid } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import { FormattedMessage } from 'react-intl';
+import { fetchDefaultParametersValues } from '../../../services/utils';
 import {
     PARAM_DEVELOPER_MODE,
     PARAM_FLUX_CONVENTION,
 } from '../../../utils/config-params';
-import { LabelledButton, useParameterState, styles } from './parameters';
-import { LineSeparator } from '../dialogUtils';
-import Alert from '@mui/material/Alert';
-import { fetchDefaultParametersValues } from '../../../services/utils';
-import { ParamLine, ParameterType } from './widget';
 import { mergeSx } from '../../utils/functions';
+import { LineSeparator } from '../dialogUtils';
+import { LabelledButton, styles, useParameterState } from './parameters';
+import ParameterLineDropdown from './widget/parameter-line-dropdown';
+import ParameterLineSwitch from './widget/parameter-line-switch';
 
 export const FluxConventions = {
     IIDM: 'iidm',
@@ -54,9 +55,8 @@ export const NetworkParameters = () => {
                     marginTop={-3}
                     justifyContent={'space-between'}
                 >
-                    <ParamLine
-                        type={ParameterType.DropDown}
-                        param_name_id={PARAM_FLUX_CONVENTION}
+                    <ParameterLineDropdown
+                        paramNameId={PARAM_FLUX_CONVENTION}
                         labelTitle="FluxConvention"
                         labelValue="flux-convention-select-label"
                         values={{
@@ -66,9 +66,8 @@ export const NetworkParameters = () => {
                     />
                     <LineSeparator />
                     <Grid item container xs={12}>
-                        <ParamLine
-                            type={ParameterType.Switch}
-                            param_name_id={PARAM_DEVELOPER_MODE}
+                        <ParameterLineSwitch
+                            paramNameId={PARAM_DEVELOPER_MODE}
                             label="EnableDeveloperMode"
                         />
                         {enableDeveloperMode && (

diff --git a/src/components/dialogs/parameters/single-line-diagram-parameters.jsx b/src/components/dialogs/parameters/single-line-diagram-parameters.jsx
@@ -5,19 +5,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect, useMemo, useState } from 'react';
 import { Grid } from '@mui/material';
-import { SubstationLayout } from '../../diagrams/diagram-common';
+import { useEffect, useMemo, useState } from 'react';
+import { getAvailableComponentLibraries } from '../../../services/study';
 import {
     PARAM_CENTER_LABEL,
+    PARAM_COMPONENT_LIBRARY,
     PARAM_DIAGONAL_LABEL,
     PARAM_SUBSTATION_LAYOUT,
-    PARAM_COMPONENT_LIBRARY,
 } from '../../../utils/config-params';
-import { styles } from './parameters';
+import { SubstationLayout } from '../../diagrams/diagram-common';
 import { LineSeparator } from '../dialogUtils';
-import { getAvailableComponentLibraries } from '../../../services/study';
-import { ParamLine, ParameterType } from './widget';
+import { styles } from './parameters';
+import ParameterLineDropdown from './widget/parameter-line-dropdown';
+import ParameterLineSwitch from './widget/parameter-line-switch';
 
 export const useGetAvailableComponentLibraries = (user) => {
     const [componentLibraries, setComponentLibraries] = useState([]);
@@ -53,21 +54,18 @@ export const SingleLineDiagramParameters = ({ componentLibraries }) => {
                 marginTop={-3}
                 justifyContent={'space-between'}
             >
-                <ParamLine
-                    type={ParameterType.Switch}
-                    param_name_id={PARAM_DIAGONAL_LABEL}
+                <ParameterLineSwitch
+                    paramNameId={PARAM_DIAGONAL_LABEL}
                     label="diagonalLabel"
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.Switch}
-                    param_name_id={PARAM_CENTER_LABEL}
+                <ParameterLineSwitch
+                    paramNameId={PARAM_CENTER_LABEL}
                     label="centerLabel"
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.DropDown}
-                    param_name_id={PARAM_SUBSTATION_LAYOUT}
+                <ParameterLineDropdown
+                    paramNameId={PARAM_SUBSTATION_LAYOUT}
                     labelTitle="SubstationLayout"
                     labelValue="substation-layout-select-label"
                     defaultValueIfNull={true}
@@ -84,9 +82,8 @@ export const SingleLineDiagramParameters = ({ componentLibraries }) => {
                     }}
                 />
                 <LineSeparator />
-                <ParamLine
-                    type={ParameterType.DropDown}
-                    param_name_id={PARAM_COMPONENT_LIBRARY}
+                <ParameterLineDropdown
+                    paramNameId={PARAM_COMPONENT_LIBRARY}
                     labelTitle="ComponentLibrary"
                     labelValue="component-library-select-label"
                     values={componentLibsRenderCache}

diff --git a/...geinit/equipment-selection-parameters.jsx → ...geinit/equipment-selection-parameters.tsx b/...geinit/equipment-selection-parameters.jsx → ...geinit/equipment-selection-parameters.tsx
@@ -13,38 +13,30 @@ import {
     VARIABLE_SHUNT_COMPENSATORS,
     VARIABLE_TRANSFORMERS,
 } from 'components/utils/field-constants';
-import React from 'react';
-import { ParameterType, ParamLine } from '../widget';
-
+import ParameterLineDirectoryItemsInput from '../widget/parameter-line-directory-items-input';
 const EquipmentSelectionParameters = () => {
     return (
         <DialogContent>
-            <ParamLine
-                type={ParameterType.DirectoryItems}
-                param_name_id={null}
+            <ParameterLineDirectoryItemsInput
                 name={FIXED_GENERATORS}
                 equipmentTypes={[EQUIPMENT_TYPES.GENERATOR]}
                 elementType={ElementType.FILTER}
                 label={'FixedGenerators'}
-                hideErrorMessage={true}
+                hideErrorMessage
             />
-            <ParamLine
-                type={ParameterType.DirectoryItems}
-                param_name_id={null}
+            <ParameterLineDirectoryItemsInput
                 name={VARIABLE_TRANSFORMERS}
                 equipmentTypes={[EQUIPMENT_TYPES.TWO_WINDINGS_TRANSFORMER]}
                 elementType={ElementType.FILTER}
                 label={'VariableTransformers'}
-                hideErrorMessage={true}
+                hideErrorMessage
             />
-            <ParamLine
-                type={ParameterType.DirectoryItems}
-                param_name_id={null}
+            <ParameterLineDirectoryItemsInput
                 name={VARIABLE_SHUNT_COMPENSATORS}
                 equipmentTypes={[EQUIPMENT_TYPES.SHUNT_COMPENSATOR]}
                 elementType={ElementType.FILTER}
                 label={'VariableShuntCompensators'}
-                hideErrorMessage={true}
+                hideErrorMessage
             />
         </DialogContent>
     );