@gridsuite/commons-ui 0.202.0 → 0.204.0

package/dist/components/network-modifications/common/connectivity/ConnectivityForm.js

@@ -1,23 +1,19 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { IconButton, Tooltip, Grid } from "@mui/material";
-import { ExploreOutlined, ExploreOffOutlined } from "@mui/icons-material";
-import { useState, useRef, useMemo, useEffect, useCallback } from "react";
-import { useWatch } from "react-hook-form";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid } from "@mui/material";
+import { useMemo } from "react";
 import { useIntl } from "react-intl";
-import { getConnectivityVoltageLevelData, getConnectivityBusBarSectionData } from "./connectivityForm.utils.js";
-import { fetchBusBarSectionsForNewCoupler } from "../../../../services/networkModification.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import { getConnectionDirectionLabel, CONNECTION_DIRECTIONS } from "../../../../utils/types/equipmentType.js";
-import { getObjectId, areIdsEqual } from "../../../../utils/ts-utils.js";
+import "@mui/icons-material";
 import "../../../../utils/yupConfig.js";
 import "../../../overflowableText/OverflowableText.js";
+import "react-hook-form";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
 import "../../../inputs/reactHookForm/provider/CustomFormProvider.js";
-import { useCustomFormContext } from "../../../inputs/reactHookForm/provider/useCustomFormContext.js";
 import "yup";
 import "../../../treeViewFinder/TreeViewFinder.js";
 import "../../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
@@ -25,10 +21,8 @@ import "../../../customAGGrid/customAggrid.js";
 import "ag-grid-community";
 import "react-papaparse";
 import "react-csv-downloader";
-import { AutocompleteInput } from "../../../inputs/reactHookForm/autocompleteInputs/AutocompleteInput.js";
 import { SwitchInput } from "../../../inputs/reactHookForm/booleans/SwitchInput.js";
 import { TextInput } from "../../../inputs/reactHookForm/text/TextInput.js";
-import { IntegerInput } from "../../../inputs/reactHookForm/numbers/IntegerInput.js";
 import "../../../inputs/reactHookForm/numbers/RangeInput.js";
 import { SelectInput } from "../../../inputs/reactHookForm/selectInputs/SelectInput.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
@@ -44,12 +38,11 @@ import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
 import "uuid";
 import "../../../inputs/reactQueryBuilder/PropertyValueEditor.js";
 import "react-querybuilder";
+import { PositionForm } from "./PositionForm.js";
+import { VoltageLevelConnectivityForm } from "./VoltageLevelConnectivityForm.js";
 function ConnectivityForm({
   id = FieldConstants.CONNECTIVITY,
   voltageLevelSelectLabel = "VOLTAGE_LEVEL",
-  direction = "row",
-  withDirectionsInfos = true,
-  withPosition = false,
   onVoltageLevelChangeCallback = void 0,
   isEquipmentModification = false,
   previousValues,
@@ -57,221 +50,65 @@ function ConnectivityForm({
   PositionDiagramPane,
   fetchBusesOrBusbarSections
 }) {
-  const [busOrBusbarSectionOptions, setBusOrBusbarSectionOptions] = useState([]);
-  const [isDiagramPaneOpen, setIsDiagramPaneOpen] = useState(false);
-  const lastFetchedBusesVlIds = useRef(null);
   const intl = useIntl();
-  const { getValues, isNodeBuilt, setValue } = useCustomFormContext();
-  const watchVoltageLevelId = useWatch({
-    name: `${id}.${FieldConstants.VOLTAGE_LEVEL}.${FieldConstants.ID}`
-  });
-  const vlOptions = useMemo(
-    () => voltageLevelOptions.map((item) => ({
-      id: item.id,
-      label: item.name ?? "",
-      exist: item.exist
-    })),
-    [voltageLevelOptions]
-  );
-  useEffect(() => {
-    if (watchVoltageLevelId) {
-      const selectedOption = voltageLevelOptions.find((option) => option.id === watchVoltageLevelId);
-      if (selectedOption) {
-        if (selectedOption.exist === false) {
-          fetchBusBarSectionsForNewCoupler(
-            watchVoltageLevelId,
-            selectedOption.busbarCount,
-            selectedOption.sectionCount,
-            selectedOption.switchKinds
-          ).then((ids) => {
-            lastFetchedBusesVlIds.current = watchVoltageLevelId;
-            setBusOrBusbarSectionOptions(ids.map((bbsId) => ({ id: bbsId, label: "" })));
-          }).catch((error) => {
-            console.error("Failed to fetch busbar sections for new coupler:", error);
-            setBusOrBusbarSectionOptions([]);
-          });
-        } else if (fetchBusesOrBusbarSections) {
-          fetchBusesOrBusbarSections(watchVoltageLevelId).then((busesOrbusbarSections) => {
-            lastFetchedBusesVlIds.current = watchVoltageLevelId;
-            setBusOrBusbarSectionOptions(
-              busesOrbusbarSections?.map((busesOrbusbarSection) => ({
-                id: busesOrbusbarSection.id,
-                label: busesOrbusbarSection?.name ?? ""
-              })) || []
-            );
-          }).catch((error) => {
-            console.error("Failed to fetch buses or busbar sections:", error);
-            setBusOrBusbarSectionOptions([]);
-          });
-        }
-      }
-      if (watchVoltageLevelId !== lastFetchedBusesVlIds.current) {
-        setBusOrBusbarSectionOptions([]);
-      }
-    } else {
-      setBusOrBusbarSectionOptions([]);
-    }
-  }, [fetchBusesOrBusbarSections, voltageLevelOptions, watchVoltageLevelId]);
-  const handleChangeVoltageLevel = useCallback(() => {
-    onVoltageLevelChangeCallback?.();
-    setValue(`${id}.${FieldConstants.BUS_OR_BUSBAR_SECTION}`, null);
-  }, [id, onVoltageLevelChangeCallback, setValue]);
-  useEffect(() => {
-    const currentBusOrBusbarSection = getValues(`${id}.${FieldConstants.BUS_OR_BUSBAR_SECTION}`);
-    if (busOrBusbarSectionOptions?.length > 0 && currentBusOrBusbarSection?.id !== null) {
-      setValue(`${id}.${FieldConstants.BUS_OR_BUSBAR_SECTION}`, currentBusOrBusbarSection);
-    }
-  }, [busOrBusbarSectionOptions, setValue, id, getValues]);
-  const newVoltageLevelField = /* @__PURE__ */ jsx(
-    AutocompleteInput,
-    {
-      isOptionEqualToValue: areIdsEqual,
-      outputTransform: (value) => {
-        if (typeof value === "string") {
-          const data = getConnectivityVoltageLevelData({ voltageLevelId: value });
-          return { id: data?.id ?? "", label: "" };
-        }
-        return value;
-      },
-      previousValue: isEquipmentModification ? previousValues?.voltageLevelId : void 0,
-      onChangeCallback: handleChangeVoltageLevel,
-      allowNewValue: true,
-      forcePopupIcon: true,
-      selectOnFocus: true,
-      name: `${id}.${FieldConstants.VOLTAGE_LEVEL}`,
-      label: voltageLevelSelectLabel,
-      options: vlOptions,
-      getOptionLabel: getObjectId,
-      size: "small"
-    }
-  );
   const previousConnectedField = useMemo(() => {
     if (!isEquipmentModification || previousValues?.terminalConnected == null) {
       return null;
     }
     return previousValues.terminalConnected ? intl.formatMessage({ id: "connected" }) : intl.formatMessage({ id: "disconnected" });
   }, [intl, previousValues, isEquipmentModification]);
-  const connectedField = isEquipmentModification ? /* @__PURE__ */ jsx(
-    CheckboxNullableInput,
-    {
-      name: `${id}.${FieldConstants.CONNECTED}`,
-      label: "connected",
-      previousValue: previousConnectedField ?? void 0
-    }
-  ) : /* @__PURE__ */ jsx(SwitchInput, { name: `${id}.${FieldConstants.CONNECTED}`, label: "connected" });
-  const newBusOrBusbarSectionField = /* @__PURE__ */ jsx(
-    AutocompleteInput,
-    {
-      allowNewValue: true,
-      forcePopupIcon: true,
-      name: `${id}.${FieldConstants.BUS_OR_BUSBAR_SECTION}`,
-      label: "BusBarBus",
-      options: busOrBusbarSectionOptions,
-      previousValue: isEquipmentModification ? previousValues?.busOrBusbarSectionId : void 0,
-      getOptionLabel: getObjectId,
-      isOptionEqualToValue: areIdsEqual,
-      inputTransform: (value) => value ?? "",
-      outputTransform: (value) => {
-        if (typeof value === "string") {
-          const data = getConnectivityBusBarSectionData({ busbarSectionId: value });
-          return { id: data?.id ?? "", label: "" };
-        }
-        return value;
-      },
-      size: "small"
-    }
-  );
-  const newConnectionNameField = /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      name: `${id}.${FieldConstants.CONNECTION_NAME}`,
-      label: "ConnectionName",
-      previousValue: isEquipmentModification ? previousValues?.connectablePosition?.connectionName ?? void 0 : void 0
-    }
-  );
   const previousConnectionDirectionLabel = isEquipmentModification ? getConnectionDirectionLabel(previousValues?.connectablePosition?.connectionDirection) ?? null : null;
-  const newConnectionDirectionField = /* @__PURE__ */ jsx(
-    SelectInput,
-    {
-      name: `${id}.${FieldConstants.CONNECTION_DIRECTION}`,
-      label: "ConnectionDirection",
-      options: Object.values(CONNECTION_DIRECTIONS),
-      previousValue: (previousConnectionDirectionLabel && intl.formatMessage({
-        id: previousConnectionDirectionLabel
-      })) ?? void 0,
-      fullWidth: true,
-      size: "small"
-    }
-  );
-  const handleClickOpenDiagramPane = useCallback(() => {
-    setIsDiagramPaneOpen(true);
-  }, []);
-  const handleCloseDiagramPane = useCallback(() => {
-    setIsDiagramPaneOpen(false);
-  }, []);
-  const newConnectionPositionField = /* @__PURE__ */ jsx(
-    IntegerInput,
-    {
-      name: `${id}.${FieldConstants.CONNECTION_POSITION}`,
-      label: "ConnectionPosition",
-      previousValue: isEquipmentModification ? previousValues?.connectablePosition?.connectionPosition ?? void 0 : void 0,
-      clearable: true
-    }
-  );
-  const voltageLevelForPositionIcon = useMemo(
-    () => watchVoltageLevelId ?? (isEquipmentModification ? previousValues?.voltageLevelId : void 0),
-    [watchVoltageLevelId, isEquipmentModification, previousValues?.voltageLevelId]
-  );
-  const getPositionIconTooltipMessageId = useMemo(() => {
-    if (!isNodeBuilt) {
-      return "NodeNotBuildPositionMessage";
-    }
-    if (voltageLevelForPositionIcon) {
-      return "DisplayTakenPositions";
-    }
-    return "NoVoltageLevelPositionMessage";
-  }, [isNodeBuilt, voltageLevelForPositionIcon]);
-  const newPositionIconField = /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      ...isNodeBuilt && voltageLevelForPositionIcon && { onClick: handleClickOpenDiagramPane },
-      disableRipple: !isNodeBuilt || !voltageLevelForPositionIcon,
-      edge: "start",
-      children: /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          title: intl.formatMessage({
-            id: getPositionIconTooltipMessageId
-          }),
-          children: isNodeBuilt && voltageLevelForPositionIcon ? /* @__PURE__ */ jsx(ExploreOutlined, { color: "action" }) : /* @__PURE__ */ jsx(ExploreOffOutlined, { color: "action" })
-        }
-      )
-    }
-  );
-  const gridSize = direction && (direction === "column" || direction === "column-reverse") ? 24 : 12;
-  const conditionalSize = withPosition && withDirectionsInfos ? 8 : gridSize;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, direction: direction || "row", spacing: 2, columns: 24, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: conditionalSize, sx: { align: "start" }, children: newVoltageLevelField }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: conditionalSize, sx: { align: "start" }, children: newBusOrBusbarSectionField }),
-      withDirectionsInfos && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: conditionalSize, sx: { align: "start" }, children: connectedField }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: conditionalSize, sx: { align: "start" }, children: newConnectionNameField }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: conditionalSize, sx: { align: "start" }, children: newConnectionDirectionField }),
-        withPosition && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Grid, { xs: conditionalSize - 1, item: true, sx: { align: "start" }, children: newConnectionPositionField }),
-          PositionDiagramPane && /* @__PURE__ */ jsx(Grid, { xs: 1, item: true, sx: { align: "start" }, children: newPositionIconField })
-        ] })
-      ] })
-    ] }),
-    PositionDiagramPane && /* @__PURE__ */ jsx(
-      PositionDiagramPane,
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(
+      VoltageLevelConnectivityForm,
+      {
+        id,
+        voltageLevelSelectLabel,
+        onVoltageLevelChangeCallback,
+        isEquipmentModification,
+        previousValues,
+        voltageLevelOptions,
+        fetchBusesOrBusbarSections
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: isEquipmentModification ? /* @__PURE__ */ jsx(
+      CheckboxNullableInput,
+      {
+        name: `${id}.${FieldConstants.CONNECTED}`,
+        label: "connected",
+        previousValue: previousConnectedField ?? void 0
+      }
+    ) : /* @__PURE__ */ jsx(SwitchInput, { name: `${id}.${FieldConstants.CONNECTED}`, label: "connected" }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        name: `${id}.${FieldConstants.CONNECTION_NAME}`,
+        label: "ConnectionName",
+        previousValue: isEquipmentModification ? previousValues?.connectablePosition?.connectionName ?? void 0 : void 0
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      SelectInput,
+      {
+        name: `${id}.${FieldConstants.CONNECTION_DIRECTION}`,
+        label: "ConnectionDirection",
+        options: Object.values(CONNECTION_DIRECTIONS),
+        previousValue: (previousConnectionDirectionLabel && intl.formatMessage({
+          id: previousConnectionDirectionLabel
+        })) ?? void 0,
+        fullWidth: true,
+        size: "small"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      PositionForm,
       {
-        open: isDiagramPaneOpen,
-        onClose: handleCloseDiagramPane,
-        voltageLevelId: voltageLevelForPositionIcon
+        id,
+        PositionDiagramPane,
+        previousValues,
+        isEquipmentModification
       }
-    )
+    ) })
   ] });
 }
 export {

package/dist/components/network-modifications/common/connectivity/PositionForm.d.ts

@@ -0,0 +1,11 @@
+import { ConnectablePositionFormInfos, ConnectivityNetworkProps } from './connectivity.type';
+interface PositionFormProps extends Pick<ConnectivityNetworkProps, 'PositionDiagramPane'> {
+    id?: string;
+    isEquipmentModification?: boolean;
+    previousValues?: {
+        connectablePosition?: ConnectablePositionFormInfos;
+        voltageLevelId?: string;
+    };
+}
+export declare function PositionForm({ id, isEquipmentModification, previousValues, PositionDiagramPane, }: Readonly<PositionFormProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/network-modifications/common/connectivity/PositionForm.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Grid, IconButton, Tooltip } from "@mui/material";
+import { ExploreOutlined, ExploreOffOutlined } from "@mui/icons-material";
+import { useState, useCallback, useMemo } from "react";
+import { useWatch } from "react-hook-form";
+import { useIntl } from "react-intl";
+import "../../../overflowableText/OverflowableText.js";
+import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
+import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import "../../../../utils/yupConfig.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../../inputs/reactHookForm/provider/CustomFormProvider.js";
+import { useCustomFormContext } from "../../../inputs/reactHookForm/provider/useCustomFormContext.js";
+import "yup";
+import "../../../treeViewFinder/TreeViewFinder.js";
+import "../../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
+import "../../../customAGGrid/customAggrid.js";
+import "ag-grid-community";
+import "react-papaparse";
+import "react-csv-downloader";
+import { IntegerInput } from "../../../inputs/reactHookForm/numbers/IntegerInput.js";
+import "../../../inputs/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/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
+import "@react-querybuilder/material";
+import "../../../filter/expert/expertFilterConstants.js";
+import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "uuid";
+import "../../../inputs/reactQueryBuilder/PropertyValueEditor.js";
+import "react-querybuilder";
+function PositionForm({
+  id = FieldConstants.CONNECTIVITY,
+  isEquipmentModification = false,
+  previousValues,
+  PositionDiagramPane
+}) {
+  const intl = useIntl();
+  const [isDiagramPaneOpen, setIsDiagramPaneOpen] = useState(false);
+  const { isNodeBuilt } = useCustomFormContext();
+  const watchVoltageLevelId = useWatch({
+    name: `${id}.${FieldConstants.VOLTAGE_LEVEL}.${FieldConstants.ID}`
+  });
+  const handleClickOpenDiagramPane = useCallback(() => {
+    setIsDiagramPaneOpen(true);
+  }, []);
+  const handleCloseDiagramPane = useCallback(() => {
+    setIsDiagramPaneOpen(false);
+  }, []);
+  const voltageLevelForPositionIcon = useMemo(
+    () => watchVoltageLevelId ?? (isEquipmentModification ? previousValues?.voltageLevelId : void 0),
+    [watchVoltageLevelId, isEquipmentModification, previousValues?.voltageLevelId]
+  );
+  const getPositionIconTooltipMessageId = useMemo(() => {
+    if (!isNodeBuilt) {
+      return "NodeNotBuildPositionMessage";
+    }
+    if (voltageLevelForPositionIcon) {
+      return "DisplayTakenPositions";
+    }
+    return "NoVoltageLevelPositionMessage";
+  }, [isNodeBuilt, voltageLevelForPositionIcon]);
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+      IntegerInput,
+      {
+        name: `${id}.${FieldConstants.CONNECTION_POSITION}`,
+        label: "ConnectionPosition",
+        previousValue: isEquipmentModification ? previousValues?.connectablePosition?.connectionPosition ?? void 0 : void 0,
+        clearable: true
+      }
+    ) }),
+    PositionDiagramPane && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          ...isNodeBuilt && voltageLevelForPositionIcon && { onClick: handleClickOpenDiagramPane },
+          disableRipple: !isNodeBuilt || !voltageLevelForPositionIcon,
+          edge: "start",
+          children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: intl.formatMessage({
+                id: getPositionIconTooltipMessageId
+              }),
+              children: isNodeBuilt && voltageLevelForPositionIcon ? /* @__PURE__ */ jsx(ExploreOutlined, { color: "action" }) : /* @__PURE__ */ jsx(ExploreOffOutlined, { color: "action" })
+            }
+          )
+        }
+      ) }),
+      voltageLevelForPositionIcon && /* @__PURE__ */ jsx(
+        PositionDiagramPane,
+        {
+          open: isDiagramPaneOpen,
+          onClose: handleCloseDiagramPane,
+          voltageLevelId: voltageLevelForPositionIcon
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PositionForm
+};

package/dist/components/network-modifications/common/connectivity/VoltageLevelConnectivityForm.d.ts

@@ -0,0 +1,13 @@
+import { ConnectivityNetworkProps } from './connectivity.type';
+export interface VoltageLevelConnectivityFormPreviousValuesProps {
+    voltageLevelId?: string;
+    busOrBusbarSectionId?: string;
+}
+export interface VoltageLevelConnectivityFormProps extends ConnectivityNetworkProps {
+    id?: string;
+    voltageLevelSelectLabel?: string;
+    onVoltageLevelChangeCallback?: () => void;
+    isEquipmentModification?: boolean;
+    previousValues?: VoltageLevelConnectivityFormPreviousValuesProps;
+}
+export declare function VoltageLevelConnectivityForm({ id, voltageLevelSelectLabel, onVoltageLevelChangeCallback, isEquipmentModification, previousValues, voltageLevelOptions, fetchBusesOrBusbarSections, }: Readonly<VoltageLevelConnectivityFormProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/network-modifications/common/connectivity/VoltageLevelConnectivityForm.js

@@ -0,0 +1,164 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid } from "@mui/material";
+import { useState, useRef, useCallback, useMemo, useEffect } from "react";
+import { useWatch } from "react-hook-form";
+import "react-intl";
+import "../../../overflowableText/OverflowableText.js";
+import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
+import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import { getObjectId, areIdsEqual } from "../../../../utils/ts-utils.js";
+import "../../../../utils/yupConfig.js";
+import { fetchBusBarSectionsForNewCoupler } from "../../../../services/networkModification.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import "../../../inputs/reactHookForm/provider/CustomFormProvider.js";
+import { useCustomFormContext } from "../../../inputs/reactHookForm/provider/useCustomFormContext.js";
+import "yup";
+import "../../../treeViewFinder/TreeViewFinder.js";
+import "../../../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
+import "../../../customAGGrid/customAggrid.js";
+import "ag-grid-community";
+import "react-papaparse";
+import "react-csv-downloader";
+import { AutocompleteInput } from "../../../inputs/reactHookForm/autocompleteInputs/AutocompleteInput.js";
+import "../../../inputs/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/left_panel_close.svg?react";
+import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../inputs/reactHookForm/expandableInput/ExpandableInput.js";
+import "@react-querybuilder/material";
+import "../../../filter/expert/expertFilterConstants.js";
+import "../../../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "uuid";
+import "../../../inputs/reactQueryBuilder/PropertyValueEditor.js";
+import "react-querybuilder";
+import { getConnectivityVoltageLevelData, getConnectivityBusBarSectionData } from "./connectivityForm.utils.js";
+function VoltageLevelConnectivityForm({
+  id = FieldConstants.CONNECTIVITY,
+  voltageLevelSelectLabel = "VOLTAGE_LEVEL",
+  onVoltageLevelChangeCallback = void 0,
+  isEquipmentModification = false,
+  previousValues,
+  voltageLevelOptions = [],
+  fetchBusesOrBusbarSections
+}) {
+  const [busOrBusbarSectionOptions, setBusOrBusbarSectionOptions] = useState([]);
+  const { setValue, getValues } = useCustomFormContext();
+  const lastFetchedBusesVlIds = useRef(null);
+  const watchVoltageLevelId = useWatch({
+    name: `${id}.${FieldConstants.VOLTAGE_LEVEL}.${FieldConstants.ID}`
+  });
+  const handleChangeVoltageLevel = useCallback(() => {
+    onVoltageLevelChangeCallback?.();
+    setValue(`${id}.${FieldConstants.BUS_OR_BUSBAR_SECTION}`, null);
+  }, [id, onVoltageLevelChangeCallback, setValue]);
+  const vlOptions = useMemo(
+    () => voltageLevelOptions.map((item) => ({
+      id: item.id,
+      label: item.name ?? "",
+      exist: item.exist
+    })),
+    [voltageLevelOptions]
+  );
+  useEffect(() => {
+    const currentBusOrBusbarSection = getValues(`${id}.${FieldConstants.BUS_OR_BUSBAR_SECTION}`);
+    if (busOrBusbarSectionOptions?.length > 0 && currentBusOrBusbarSection?.id !== null) {
+      setValue(`${id}.${FieldConstants.BUS_OR_BUSBAR_SECTION}`, currentBusOrBusbarSection);
+    }
+  }, [busOrBusbarSectionOptions, setValue, id, getValues]);
+  useEffect(() => {
+    if (watchVoltageLevelId) {
+      const selectedOption = voltageLevelOptions.find((option) => option.id === watchVoltageLevelId);
+      if (selectedOption) {
+        if (selectedOption.exist === false) {
+          fetchBusBarSectionsForNewCoupler(
+            watchVoltageLevelId,
+            selectedOption.busbarCount,
+            selectedOption.sectionCount,
+            selectedOption.switchKinds
+          ).then((ids) => {
+            lastFetchedBusesVlIds.current = watchVoltageLevelId;
+            setBusOrBusbarSectionOptions(ids.map((bbsId) => ({ id: bbsId, label: "" })));
+          }).catch((error) => {
+            console.error("Failed to fetch busbar sections for new coupler:", error);
+            setBusOrBusbarSectionOptions([]);
+          });
+        } else if (fetchBusesOrBusbarSections) {
+          fetchBusesOrBusbarSections(watchVoltageLevelId).then((busesOrbusbarSections) => {
+            lastFetchedBusesVlIds.current = watchVoltageLevelId;
+            setBusOrBusbarSectionOptions(
+              busesOrbusbarSections?.map((busesOrbusbarSection) => ({
+                id: busesOrbusbarSection.id,
+                label: busesOrbusbarSection?.name ?? ""
+              })) || []
+            );
+          }).catch((error) => {
+            console.error("Failed to fetch buses or busbar sections:", error);
+            setBusOrBusbarSectionOptions([]);
+          });
+        }
+      }
+      if (watchVoltageLevelId !== lastFetchedBusesVlIds.current) {
+        setBusOrBusbarSectionOptions([]);
+      }
+    } else {
+      setBusOrBusbarSectionOptions([]);
+    }
+  }, [fetchBusesOrBusbarSections, voltageLevelOptions, watchVoltageLevelId]);
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        isOptionEqualToValue: areIdsEqual,
+        outputTransform: (value) => {
+          if (typeof value === "string") {
+            const data = getConnectivityVoltageLevelData({ voltageLevelId: value });
+            return { id: data?.id ?? "", label: "" };
+          }
+          return value;
+        },
+        previousValue: isEquipmentModification ? previousValues?.voltageLevelId : void 0,
+        onChangeCallback: handleChangeVoltageLevel,
+        allowNewValue: true,
+        forcePopupIcon: true,
+        selectOnFocus: true,
+        name: `${id}.${FieldConstants.VOLTAGE_LEVEL}`,
+        label: voltageLevelSelectLabel,
+        options: vlOptions,
+        getOptionLabel: getObjectId,
+        size: "small"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        allowNewValue: true,
+        forcePopupIcon: true,
+        name: `${id}.${FieldConstants.BUS_OR_BUSBAR_SECTION}`,
+        label: "BusBarBus",
+        options: busOrBusbarSectionOptions,
+        previousValue: isEquipmentModification ? previousValues?.busOrBusbarSectionId : void 0,
+        getOptionLabel: getObjectId,
+        isOptionEqualToValue: areIdsEqual,
+        inputTransform: (value) => value ?? "",
+        outputTransform: (value) => {
+          if (typeof value === "string") {
+            const data = getConnectivityBusBarSectionData({ busbarSectionId: value });
+            return { id: data?.id ?? "", label: "" };
+          }
+          return value;
+        },
+        size: "small"
+      }
+    ) })
+  ] });
+}
+export {
+  VoltageLevelConnectivityForm
+};

package/dist/components/network-modifications/common/connectivity/connectivityForm.utils.js

@@ -1,6 +1,6 @@
 import { object, bool, number, string } from "yup";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
-import { YUP_NOT_TYPE_NUMBER } from "../../../../utils/constants/translationKeys.js";
+import { YUP_REQUIRED, YUP_NOT_TYPE_NUMBER } from "../../../../utils/constants/translationKeys.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
 import "react/jsx-runtime";
@@ -9,7 +9,7 @@ import "../../../../utils/yupConfig.js";
 const getVoltageLevelAndBusOrBusBarSectionFieldsSchema = (isEquipmentModification, relatedFieldName) => {
   return object().nullable().when({
     is: () => !isEquipmentModification,
-    then: (schema) => schema.required()
+    then: (schema) => schema.required(YUP_REQUIRED)
   }).shape({
     [FieldConstants.ID]: string().when([], {
       is: () => isEquipmentModification,
@@ -39,7 +39,7 @@ const getConnectivityWithPositionSchema = (isEquipmentModification = false) => o
   [FieldConstants.CONNECTION_POSITION]: number().typeError(YUP_NOT_TYPE_NUMBER).nullable(),
   [FieldConstants.CONNECTED]: bool().nullable().when([], {
     is: () => !isEquipmentModification,
-    then: (schema) => schema.required()
+    then: (schema) => schema.required(YUP_REQUIRED)
   }),
   ...getConnectivityPropertiesValidationSchema(isEquipmentModification)
 });

package/dist/components/network-modifications/common/connectivity/index.d.ts

@@ -8,3 +8,4 @@ export * from './connectivity.type';
 export * from './connectivityForm.utils';
 export * from './ConnectivityForm';
 export * from './BranchConnectivityForm';
+export * from './VoltageLevelConnectivityForm';