Migrate twt creation

src/components/dialogs/limits/limits-pane-utils.ts

@@ -36,6 +36,7 @@ import {
     AttributeModification,
     CurrentLimits,
     OperationalLimitsGroup,
+    OperationalLimitsGroupModificationInfos,
     OperationType,
     TemporaryLimit,
 } from '../../../services/network-modification-types';
@@ -142,6 +143,8 @@ const limitsValidationSchemaCreation = (id: string) => {
     return { [id]: yup.object().shape(completeLimitsGroupSchema) };
 };
 
+export type LimitsFormSchema = yup.InferType<ReturnType<typeof limitsValidationSchemaCreation>[typeof LIMITS]>;
+
 export const getLimitsValidationSchema = (id: string = LIMITS) => {
     return limitsValidationSchemaCreation(id);
 };
@@ -162,31 +165,31 @@ export const getLimitsEmptyFormData = (isModification = true, id = LIMITS) => {
 };
 
 export const formatOpLimitGroupsToFormInfos = (
-    limitGroups: OperationalLimitsGroup[]
+    limitGroups?: OperationalLimitsGroup[] | OperationalLimitsGroupModificationInfos[] | null
 ): OperationalLimitsGroupFormSchema[] => {
     if (!limitGroups) {
         return [];
     }
 
     return limitGroups
         .filter(
-            (opLimitGroup: OperationalLimitsGroup) =>
+            (opLimitGroup: OperationalLimitsGroup | OperationalLimitsGroupModificationInfos) =>
                 opLimitGroup.modificationType !== LIMIT_SETS_MODIFICATION_TYPE.DELETE
         )
-        .map((opLimitGroup: OperationalLimitsGroup) => {
+        .map((opLimitGroup: OperationalLimitsGroup | OperationalLimitsGroupModificationInfos) => {
             return {
                 id: opLimitGroup.id + opLimitGroup.applicability,
                 name: opLimitGroup.id,
                 applicability: opLimitGroup.applicability,
                 limitsProperties: opLimitGroup.limitsProperties,
                 currentLimits: {
-                    permanentLimit: opLimitGroup.currentLimits.permanentLimit,
+                    permanentLimit: opLimitGroup?.currentLimits?.permanentLimit,
                     temporaryLimits: formatTemporaryLimitsModificationToFormSchema(
-                        opLimitGroup.currentLimits.temporaryLimits
+                        opLimitGroup?.currentLimits?.temporaryLimits as TemporaryLimit[]
                     ),
                 },
             };
-        });
+        }) as OperationalLimitsGroupFormSchema[];
 };
 
 export const getAllLimitsFormData = (

src/components/dialogs/network-modifications/two-windings-transformer/characteristics-pane/two-windings-transformer-characteristics-pane-utils.js → src/components/dialogs/network-modifications/two-windings-transformer/characteristics-pane/two-windings-transformer-characteristics-pane-utils.ts

@@ -7,8 +7,12 @@
 
 import { CHARACTERISTICS, G, B, RATED_S, RATED_U1, RATED_U2, R, X } from 'components/utils/field-constants';
 import yup from 'components/utils/yup-config';
+import { CharacteristicsFormSchema } from '../two-windings-transformer.types';
 
-const characteristicsValidationSchema = (isModification, additionalFields) => ({
+type AdditionalValidationFields = Record<string, yup.AnySchema>;
+type AdditionalDataFields = Record<string, unknown>;
+
+const characteristicsValidationSchema = (isModification: boolean, additionalFields: AdditionalValidationFields) => ({
     [CHARACTERISTICS]: yup.object().shape({
         [R]: isModification
             ? yup.number().nullable().min(0, 'mustBeGreaterOrEqualToZero')
@@ -33,7 +37,7 @@ export const getCharacteristicsValidationSchema = (isModification = false, addit
     return characteristicsValidationSchema(isModification, additionalFields);
 };
 
-const characteristicsEmptyFormData = (additionalFields) => ({
+const characteristicsEmptyFormData = (additionalFields: AdditionalDataFields) => ({
     [CHARACTERISTICS]: {
         [R]: null,
         [X]: null,
@@ -51,7 +55,15 @@ export const getCharacteristicsEmptyFormData = (additionalFields = {}) => {
 };
 
 export const getCharacteristicsFormData = (
-    { r = null, x = null, g = null, b = null, ratedS = null, ratedU1 = null, ratedU2 = null },
+    {
+        r = null,
+        x = null,
+        g = null,
+        b = null,
+        ratedS = null,
+        ratedU1 = null,
+        ratedU2 = null,
+    }: CharacteristicsFormSchema,
     additionalFields = {}
 ) => {
     return {

src/components/dialogs/network-modifications/two-windings-transformer/characteristics-pane/two-windings-transformer-characteristics-pane.jsx → src/components/dialogs/network-modifications/two-windings-transformer/characteristics-pane/two-windings-transformer-characteristics-pane.tsx

@@ -19,9 +19,20 @@ import { Grid } from '@mui/material';
 import { B, CHARACTERISTICS, G, R, RATED_S, RATED_U1, RATED_U2, X } from 'components/utils/field-constants';
 import { FormattedMessage } from 'react-intl';
 import GridItem from '../../../commons/grid-item';
+import { TwoWindingsTransformerMapInfos } from '../two-windings-transformer.types';
 import GridSection from '../../../commons/grid-section';
 
-const TwoWindingsTransformerCharacteristicsPane = ({ id = CHARACTERISTICS, twtToModify, isModification = false }) => {
+export interface TwoWindingsTransformerCharacteristicsPaneProps {
+    id?: string;
+    twtToModify?: TwoWindingsTransformerMapInfos | null;
+    isModification?: boolean;
+}
+
+const TwoWindingsTransformerCharacteristicsPane = ({
+    id = CHARACTERISTICS,
+    twtToModify,
+    isModification = false,
+}: TwoWindingsTransformerCharacteristicsPaneProps) => {
     const width = isModification ? 12 : 8;
 
     const seriesResistanceField = (

src/components/dialogs/network-modifications/two-windings-transformer/creation/characteristics-pane/two-windings-transformer-creation-characteristics-pane-utils.js → src/components/dialogs/network-modifications/two-windings-transformer/creation/characteristics-pane/two-windings-transformer-creation-characteristics-pane-utils.ts

@@ -15,6 +15,7 @@ import {
     getCharacteristicsFormData,
     getCharacteristicsValidationSchema,
 } from '../../characteristics-pane/two-windings-transformer-characteristics-pane-utils';
+import { CharacteristicsFormSchema } from '../../two-windings-transformer.types';
 
 const twoWindingsTransformerValidationSchema = () =>
     getCharacteristicsValidationSchema(false, {
@@ -46,6 +47,9 @@ export const getTwoWindingsTransformerFormData = ({
     ratedU2 = null,
     connectivity1 = null,
     connectivity2 = null,
+}: CharacteristicsFormSchema & {
+    connectivity1?: Record<string, unknown> | null;
+    connectivity2?: Record<string, unknown> | null;
 }) =>
     getCharacteristicsFormData(
         {

src/components/dialogs/network-modifications/two-windings-transformer/creation/characteristics-pane/two-windings-transformer-creation-characteristics-pane.jsx → src/components/dialogs/network-modifications/two-windings-transformer/creation/characteristics-pane/two-windings-transformer-creation-characteristics-pane.tsx

@@ -15,7 +15,9 @@ import useVoltageLevelsListInfos from '../../../../../../hooks/use-voltage-level
 import GridSection from '../../../../commons/grid-section';
 import GridItem from '../../../../commons/grid-item';
 import { TwoWindingsTransformerCreationDialogTab } from '../../two-windings-transformer-utils';
-import { LimitsPane } from '../../../../limits/limits-pane.tsx';
+import { LimitsPane } from '../../../../limits/limits-pane';
+import { UUID } from 'node:crypto';
+import { CurrentTreeNode } from 'components/graph/tree-node.type';
 
 const styles = {
     h3: {
@@ -25,13 +27,21 @@ const styles = {
     },
 };
 
+export interface TwoWindingsTransformerCreationCharacteristicsPaneProps {
+    id?: string;
+    studyUuid: UUID;
+    currentNode: CurrentTreeNode;
+    currentRootNetworkUuid: UUID;
+    tabIndex: number;
+}
+
 const TwoWindingsTransformerCreationCharacteristicsPane = ({
     id = CHARACTERISTICS,
     studyUuid,
     currentNode,
     currentRootNetworkUuid,
     tabIndex,
-}) => {
+}: TwoWindingsTransformerCreationCharacteristicsPaneProps) => {
     const voltageLevelOptions = useVoltageLevelsListInfos(studyUuid, currentNode?.id, currentRootNetworkUuid);
     const connectivity1Field = (
         <ConnectivityForm
@@ -59,15 +69,15 @@ const TwoWindingsTransformerCreationCharacteristicsPane = ({
         <>
             <Box hidden={tabIndex !== TwoWindingsTransformerCreationDialogTab.CHARACTERISTICS_TAB} p={1}>
                 <GridSection title="Connectivity" customStyle={styles.h3} />
-                <GridSection title="Side1" heading={4} size="6" />
+                <GridSection title="Side1" heading={4} size={6} />
                 <Grid container spacing={2}>
                     <Grid item container direction="column">
                         <Grid container direction="column" spacing={2}>
                             <GridItem>{connectivity1Field}</GridItem>
                         </Grid>
                     </Grid>
                 </Grid>
-                <GridSection title="Side2" heading={4} size="6" />
+                <GridSection title="Side2" heading={4} size={6} />
                 <Grid container spacing={2}>
                     <Grid item container>
                         <Grid container direction="column" spacing={2}>

src/components/dialogs/network-modifications/two-windings-transformer/creation/two-windings-transformer-creation-dialog-tabs.jsx → src/components/dialogs/network-modifications/two-windings-transformer/creation/two-windings-transformer-creation-dialog-tabs.tsx

@@ -5,14 +5,27 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, Tab, Tabs } from '@mui/material';
+import { Breakpoint, Grid, Tab, Tabs } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { useWatch } from 'react-hook-form';
 import { ENABLED, PHASE_TAP_CHANGER, RATIO_TAP_CHANGER } from 'components/utils/field-constants';
 import { getTabIndicatorStyle, getTabStyle } from '../../../../utils/tab-utils';
 import { TwoWindingsTransformerCreationDialogTab } from '../two-windings-transformer-utils';
+import { Dispatch, SetStateAction } from 'react';
 
-const TwoWindingsTransformerCreationDialogTabs = ({ tabIndex, tabIndexesWithError, setTabIndex, setDialogWidth }) => {
+export interface TwoWindingsTransformerCreationDialogTabsProps {
+    tabIndex: number;
+    tabIndexesWithError: number[];
+    setTabIndex: Dispatch<SetStateAction<number>>;
+    setDialogWidth: Dispatch<SetStateAction<Breakpoint>>;
+}
+
+const TwoWindingsTransformerCreationDialogTabs = ({
+    tabIndex,
+    tabIndexesWithError,
+    setTabIndex,
+    setDialogWidth,
+}: TwoWindingsTransformerCreationDialogTabsProps) => {
     const ratioTapChangerEnabledWatch = useWatch({
         name: `${RATIO_TAP_CHANGER}.${ENABLED}`,
     });