refacto to use voltageLevelOptions hook

gridsuite · Jul 18, 2024 · 8e8031d · 8e8031d
1 parent 6b18203
commit 8e8031d
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 223 deletions.
diff --git a/src/components/dialogs/connectivity/connectivity-form.jsx b/src/components/dialogs/connectivity/connectivity-form.jsx
@@ -7,7 +7,7 @@
 
 import ExploreOffOutlinedIcon from '@mui/icons-material/ExploreOffOutlined';
 import ExploreOutlinedIcon from '@mui/icons-material/ExploreOutlined';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, TextField, Tooltip } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import {
     BUS_OR_BUSBAR_SECTION,
@@ -20,7 +20,7 @@ import {
     VOLTAGE_LEVEL,
 } from 'components/utils/field-constants';
 import { areIdsEqual, getObjectId } from 'components/utils/utils';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 import PositionDiagramPane from '../../diagrams/singleLineDiagram/position-diagram-pane';
@@ -42,6 +42,7 @@ import {
     fetchBusesForVoltageLevel,
 } from '../../../services/study/network';
 import CheckboxNullableInput from '../../utils/rhf-inputs/boolean-nullable-input.jsx';
+import { filledTextField } from '../dialogUtils.jsx';
 
 /**
  * Hook to handle a 'connectivity value' (voltage level, bus or bus bar section)
@@ -55,8 +56,8 @@ import CheckboxNullableInput from '../../utils/rhf-inputs/boolean-nullable-input
  * @param studyUuid the study we are currently working on
  * @param currentNode the currently selected tree node
  * @param onVoltageLevelChangeCallback callback to be called when the voltage level changes
- * @param isEquipmentModification
- * @param previousValues
+ * @param isEquipmentModification connectivity form is used in a modification form or not
+ * @param previousValues previous values of connectivity form's fields
  * @returns JSX.Element
  */
 export const ConnectivityForm = ({
@@ -179,22 +180,27 @@ export const ConnectivityForm = ({
         />
     );
 
-    const previousConnected = useMemo(() => {
-        if (previousValues?.terminalConnected) {
-            return intl.formatMessage({ id: 'On' });
-        } else if (
-            previousValues?.terminalConnected === false ||
-            (previousValues && previousValues?.terminalConnected === undefined)
-        ) {
-            return intl.formatMessage({ id: 'Off' });
-        }
-    }, [intl, previousValues]);
+    const readyOnlyVoltageLevelField = (
+        <TextField
+            value={previousValues?.voltageLevelId}
+            InputProps={{
+                readOnly: true,
+                ...filledTextField,
+            }}
+            disabled
+            size={'small'}
+        />
+    );
 
     const connectedField = isEquipmentModification ? (
         <CheckboxNullableInput
             name={`${id}.${CONNECTED}`}
             label="Connected"
-            previousValue={previousConnected}
+            previousValue={
+                previousValues?.terminalConnected
+                    ? intl.formatMessage({ id: 'Connected' })
+                    : intl.formatMessage({ id: 'Disconnected' })
+            }
         />
     ) : (
         <SwitchInput name={`${id}.${CONNECTED}`} label="Connected" />
@@ -228,6 +234,18 @@ export const ConnectivityForm = ({
         />
     );
 
+    const readyOnlyBusOrBusbarSectionField = (
+        <TextField
+            value={previousValues?.busOrBusbarSectionId}
+            InputProps={{
+                readOnly: true,
+                ...filledTextField,
+            }}
+            disabled
+            size={'small'}
+        />
+    );
+
     const newConnectionNameField = (
         <TextInput
             name={`${id}.${CONNECTION_NAME}`}
@@ -315,10 +333,14 @@ export const ConnectivityForm = ({
                 columns={24}
             >
                 <Grid item xs={conditionalSize} align="start">
-                    {newVoltageLevelField}
+                    {!isEquipmentModification
+                        ? newVoltageLevelField
+                        : readyOnlyVoltageLevelField}
                 </Grid>
                 <Grid item xs={conditionalSize} align="start">
-                    {newBusOrBusbarSectionField}
+                    {!isEquipmentModification
+                        ? newBusOrBusbarSectionField
+                        : readyOnlyBusOrBusbarSectionField}
                 </Grid>
 
                 {withDirectionsInfos && (

diff --git a/src/components/dialogs/network-modifications/battery/creation/battery-creation-form.jsx b/src/components/dialogs/network-modifications/battery/creation/battery-creation-form.jsx
@@ -5,13 +5,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { TextInput } from '@gridsuite/commons-ui';
+import { FloatInput, TextInput } from '@gridsuite/commons-ui';
 import {
+    ACTIVE_POWER_SET_POINT,
     EQUIPMENT_ID,
     EQUIPMENT_NAME,
     MAXIMUM_ACTIVE_POWER,
     MINIMUM_ACTIVE_POWER,
-    ACTIVE_POWER_SET_POINT,
     REACTIVE_POWER_SET_POINT,
 } from 'components/utils/field-constants';
 import {
@@ -22,28 +22,18 @@ import {
     ReactivePowerAdornment,
 } from '../../../dialogUtils';
 import Grid from '@mui/material/Grid';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { ConnectivityForm } from '../../../connectivity/connectivity-form';
-import { FloatInput } from '@gridsuite/commons-ui';
 import ReactiveLimitsForm from '../../../reactive-limits/reactive-limits-form';
 import FrequencyRegulation from '../../../set-points/frequency-regulation';
-import { fetchVoltageLevelsListInfos } from '../../../../../services/study/network';
 import PropertiesForm from '../../common/properties/properties-form';
-const BatteryCreationForm = ({ studyUuid, currentNode }) => {
-    const [voltageLevelOptions, setVoltageLevelOptions] = useState([]);
-    const currentNodeUuid = currentNode?.id;
+import useVoltageLevelsListInfos from '../../../../../hooks/use-voltage-levels-list-infos';
 
-    useEffect(() => {
-        if (studyUuid && currentNodeUuid) {
-            fetchVoltageLevelsListInfos(studyUuid, currentNodeUuid).then(
-                (values) => {
-                    setVoltageLevelOptions(
-                        values.sort((a, b) => a.id.localeCompare(b.id))
-                    );
-                }
-            );
-        }
-    }, [studyUuid, currentNodeUuid]);
+const BatteryCreationForm = ({ studyUuid, currentNode }) => {
+    const voltageLevelOptions = useVoltageLevelsListInfos(
+        studyUuid,
+        currentNode.id
+    );
 
     const batteryIdField = (
         <TextInput

diff --git a/...mponents/dialogs/network-modifications/battery/modification/battery-modification-form.jsx b/...mponents/dialogs/network-modifications/battery/modification/battery-modification-form.jsx
@@ -20,15 +20,15 @@ import {
     ReactivePowerAdornment,
 } from '../../../dialogUtils';
 import Grid from '@mui/material/Grid';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { FloatInput, TextInput } from '@gridsuite/commons-ui';
 import ReactiveLimitsForm from '../../../reactive-limits/reactive-limits-form';
 import { TextField } from '@mui/material';
 import FrequencyRegulation from '../../../set-points/frequency-regulation';
 import { FormattedMessage } from 'react-intl';
 import PropertiesForm from '../../common/properties/properties-form';
 import { ConnectivityForm } from '../../../connectivity/connectivity-form.jsx';
-import { fetchVoltageLevelsListInfos } from '../../../../../services/study/network.js';
+import useVoltageLevelsListInfos from '../../../../../hooks/use-voltage-levels-list-infos';
 
 const BatteryModificationForm = ({
     studyUuid,
@@ -37,20 +37,11 @@ const BatteryModificationForm = ({
     updatePreviousReactiveCapabilityCurveTable,
     equipmentId,
 }) => {
-    const [voltageLevelOptions, setVoltageLevelOptions] = useState([]);
-    const currentNodeUuid = currentNode?.id;
+    const voltageLevelOptions = useVoltageLevelsListInfos(
+        studyUuid,
+        currentNode?.id
+    );
 
-    useEffect(() => {
-        if (studyUuid && currentNodeUuid) {
-            fetchVoltageLevelsListInfos(studyUuid, currentNodeUuid).then(
-                (values) => {
-                    setVoltageLevelOptions(
-                        values.sort((a, b) => a.id.localeCompare(b.id))
-                    );
-                }
-            );
-        }
-    }, [studyUuid, currentNodeUuid]);
     const batteryIdField = (
         <TextField
             size="small"

diff --git a/src/components/dialogs/network-modifications/generator/creation/generator-creation-form.jsx b/src/components/dialogs/network-modifications/generator/creation/generator-creation-form.jsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { TextInput } from '@gridsuite/commons-ui';
+import { FloatInput, SelectInput, TextInput } from '@gridsuite/commons-ui';
 import {
     ENERGY_SOURCE,
     EQUIPMENT_ID,
@@ -29,32 +29,21 @@ import {
     MVAPowerAdornment,
     OhmAdornment,
 } from '../../../dialogUtils';
-import { SelectInput } from '@gridsuite/commons-ui';
 import { ENERGY_SOURCES } from 'components/network/constants';
 import Grid from '@mui/material/Grid';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { ConnectivityForm } from '../../../connectivity/connectivity-form';
-import { FloatInput } from '@gridsuite/commons-ui';
 import ReactiveLimitsForm from '../../../reactive-limits/reactive-limits-form';
 import SetPointsForm from '../../../set-points/set-points-form';
-import { fetchVoltageLevelsListInfos } from '../../../../../services/study/network';
 import PropertiesForm from '../../common/properties/properties-form';
+import useVoltageLevelsListInfos from '../../../../../hooks/use-voltage-levels-list-infos';
 
 const GeneratorCreationForm = ({ studyUuid, currentNode }) => {
-    const [voltageLevelOptions, setVoltageLevelOptions] = useState([]);
     const currentNodeUuid = currentNode?.id;
-
-    useEffect(() => {
-        if (studyUuid && currentNodeUuid) {
-            fetchVoltageLevelsListInfos(studyUuid, currentNodeUuid).then(
-                (values) => {
-                    setVoltageLevelOptions(
-                        values.sort((a, b) => a.id.localeCompare(b.id))
-                    );
-                }
-            );
-        }
-    }, [studyUuid, currentNodeUuid]);
+    const voltageLevelOptions = useVoltageLevelsListInfos(
+        studyUuid,
+        currentNodeUuid
+    );
 
     const generatorIdField = (
         <TextInput

diff --git a/...ents/dialogs/network-modifications/generator/modification/generator-modification-form.jsx b/...ents/dialogs/network-modifications/generator/modification/generator-modification-form.jsx
@@ -32,14 +32,14 @@ import {
     getEnergySourceLabel,
 } from 'components/network/constants';
 import Grid from '@mui/material/Grid';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import ReactiveLimitsForm from '../../../reactive-limits/reactive-limits-form';
 import SetPointsForm from '../../../set-points/set-points-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { TextField } from '@mui/material';
-import { fetchVoltageLevelsListInfos } from '../../../../../services/study/network';
 import PropertiesForm from '../../common/properties/properties-form';
 import { ConnectivityForm } from '../../../connectivity/connectivity-form.jsx';
+import useVoltageLevelsListInfos from '../../../../../hooks/use-voltage-levels-list-infos';
 
 const GeneratorModificationForm = ({
     studyUuid,
@@ -48,21 +48,12 @@ const GeneratorModificationForm = ({
     updatePreviousReactiveCapabilityCurveTable,
     equipmentId,
 }) => {
-    const [voltageLevelOptions, setVoltageLevelOptions] = useState([]);
     const currentNodeUuid = currentNode?.id;
     const intl = useIntl();
-
-    useEffect(() => {
-        if (studyUuid && currentNodeUuid) {
-            fetchVoltageLevelsListInfos(studyUuid, currentNodeUuid).then(
-                (values) => {
-                    setVoltageLevelOptions(
-                        values.sort((a, b) => a.id.localeCompare(b.id))
-                    );
-                }
-            );
-        }
-    }, [studyUuid, currentNodeUuid]);
+    const voltageLevelOptions = useVoltageLevelsListInfos(
+        studyUuid,
+        currentNodeUuid
+    );
 
     const energySourceLabelId = getEnergySourceLabel(
         generatorToModify?.energySource

diff --git a/...nts/dialogs/network-modifications/line/characteristics-pane/line-characteristics-pane.jsx b/...nts/dialogs/network-modifications/line/characteristics-pane/line-characteristics-pane.jsx
@@ -15,20 +15,20 @@ import {
 import { FloatInput } from '@gridsuite/commons-ui';
 import { ConnectivityForm } from '../../../connectivity/connectivity-form';
 import {
+    B1,
+    B2,
     CHARACTERISTICS,
     CONNECTIVITY_1,
     CONNECTIVITY_2,
-    R,
     G1,
     G2,
-    B1,
-    B2,
+    R,
     X,
 } from 'components/utils/field-constants';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { unitToMicroUnit } from 'utils/unit-converter';
-import { fetchVoltageLevelsListInfos } from '../../../../../services/study/network';
 import PropertiesForm from '../../common/properties/properties-form';
+import useVoltageLevelsListInfos from '../../../../../hooks/use-voltage-levels-list-infos';
 
 const styles = {
     h3: {
@@ -47,18 +47,10 @@ const LineCharacteristicsPane = ({
     isModification = false,
 }) => {
     const currentNodeUuid = currentNode.id;
-    const [voltageLevelOptions, setVoltageLevelOptions] = useState([]);
-    useEffect(() => {
-        if (studyUuid && currentNodeUuid) {
-            fetchVoltageLevelsListInfos(studyUuid, currentNodeUuid).then(
-                (values) => {
-                    setVoltageLevelOptions(
-                        values.sort((a, b) => a.id.localeCompare(b.id))
-                    );
-                }
-            );
-        }
-    }, [studyUuid, currentNodeUuid]);
+    const voltageLevelOptions = useVoltageLevelsListInfos(
+        studyUuid,
+        currentNodeUuid
+    );
 
     const seriesResistanceField = (
         <FloatInput

diff --git a/...gs/network-modifications/lines-attach-to-split-lines/lines-attach-to-split-lines-form.jsx b/...gs/network-modifications/lines-attach-to-split-lines/lines-attach-to-split-lines-form.jsx
@@ -7,7 +7,7 @@
 
 import Grid from '@mui/material/Grid';
 import { Box } from '@mui/system';
-import { AutocompleteInput } from '@gridsuite/commons-ui';
+import { AutocompleteInput, TextInput } from '@gridsuite/commons-ui';
 import {
     ATTACHED_LINE_ID,
     LINE_TO_ATTACH_TO_1_ID,
@@ -19,27 +19,18 @@ import {
 } from 'components/utils/field-constants';
 import React, { useEffect, useState } from 'react';
 import { gridItem, GridSection } from 'components/dialogs/dialogUtils';
-import { TextInput } from '@gridsuite/commons-ui';
 import { ConnectivityForm } from '../../connectivity/connectivity-form';
-import { fetchVoltageLevelsListInfos } from '../../../../services/study/network';
 import { fetchEquipmentsIds } from '../../../../services/study/network-map';
+import useVoltageLevelsListInfos from '../../../../hooks/use-voltage-levels-list-infos';
 
 const LinesAttachToSplitLinesForm = ({ currentNode, studyUuid }) => {
     const currentNodeUuid = currentNode?.id;
-    const [voltageLevelOptions, setVoltageLevelOptions] = useState([]);
     const [linesIds, setLinesIds] = useState([]);
 
-    useEffect(() => {
-        if (studyUuid && currentNodeUuid) {
-            fetchVoltageLevelsListInfos(studyUuid, currentNodeUuid).then(
-                (values) => {
-                    setVoltageLevelOptions(
-                        values.sort((a, b) => a.id.localeCompare(b.id))
-                    );
-                }
-            );
-        }
-    }, [studyUuid, currentNodeUuid]);
+    const voltageLevelOptions = useVoltageLevelsListInfos(
+        studyUuid,
+        currentNodeUuid
+    );
 
     useEffect(() => {
         fetchEquipmentsIds(