use universal usetabs hook

src/features/network-modifications/battery/modification/BatteryDialogTabs.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import { SyntheticEvent } from 'react';
 import { Tab, Tabs } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { BatteryDialogTab } from './batteryTabs.utils';
@@ -14,15 +14,15 @@ import { getTabIndicatorStyle, getTabStyle } from '../../../parameters/parameter
 interface BatteryDialogTabsProps {
     tabIndex: number;
     tabIndexesWithError: number[];
-    setTabIndex: (newTabIndex: number) => void;
+    onTabChange: (event: SyntheticEvent<Element, Event>, newValue: number) => void;
 }
 
-export function BatteryDialogTabs({ tabIndex, tabIndexesWithError, setTabIndex }: Readonly<BatteryDialogTabsProps>) {
+export function BatteryDialogTabs({ tabIndex, tabIndexesWithError, onTabChange }: Readonly<BatteryDialogTabsProps>) {
     return (
         <Tabs
             value={tabIndex}
             variant="scrollable"
-            onChange={(_event: React.SyntheticEvent, newValue: number) => setTabIndex(newValue)}
+            onChange={onTabChange}
             slotProps={{
                 indicator: {
                     sx: getTabIndicatorStyle(tabIndexesWithError, tabIndex),

src/features/network-modifications/battery/modification/BatteryModificationForm.tsx

@@ -10,13 +10,14 @@ import { useWatch } from 'react-hook-form';
 import { BatteryDialogHeader, BatteryDialogHeaderProps } from './BatteryDialogHeader';
 import { BatteryDialogTabs } from './BatteryDialogTabs';
 import { BatteryDialogTabsContent, BatteryDialogTabsContentProps } from './BatteryDialogTabsContent';
-import { BATTERY_TAB_FIELDS, BatteryDialogTab } from './batteryTabs.utils';
+import { BatteryDialogTab } from './batteryTabs.utils';
 import { EquipmentType, FieldConstants, Identifiable } from '../../../../utils';
-import { useTabsWithError } from '../../hooks';
+import { UseTabsReturn } from '../../../../hooks';
 
 interface BatteryModificationFormProps
     extends BatteryDialogHeaderProps, Omit<BatteryDialogTabsContentProps, 'tabIndex'> {
     fetchVoltageLevelEquipments: (voltageLevelId: string) => Promise<(Identifiable & { type: EquipmentType })[]>;
+    useTabsReturn: UseTabsReturn<BatteryDialogTab>;
 }
 
 export function BatteryModificationForm({
@@ -26,11 +27,10 @@ export function BatteryModificationForm({
     fetchBusesOrBusbarSections,
     PositionDiagramPane,
     fetchVoltageLevelEquipments,
+    useTabsReturn,
 }: Readonly<BatteryModificationFormProps>) {
-    const { tabIndex, setTabIndex, tabIndexesWithError } = useTabsWithError<BatteryDialogTab>(
-        BATTERY_TAB_FIELDS,
-        BatteryDialogTab.CONNECTIVITY_TAB
-    );
+    const { selectedTab, tabsWithError, onTabChange } = useTabsReturn;
+
     const equipmentId = useWatch({ name: FieldConstants.EQUIPMENT_ID });
 
     return (
@@ -40,14 +40,14 @@ export function BatteryModificationForm({
             </Grid>
             <Grid>
                 <BatteryDialogTabs
-                    tabIndex={tabIndex}
-                    tabIndexesWithError={tabIndexesWithError}
-                    setTabIndex={setTabIndex}
+                    tabIndex={selectedTab}
+                    tabIndexesWithError={tabsWithError}
+                    onTabChange={onTabChange}
                 />
             </Grid>
             <Grid>
                 <BatteryDialogTabsContent
-                    tabIndex={tabIndex}
+                    tabIndex={selectedTab}
                     batteryToModify={batteryToModify}
                     voltageLevelOptions={voltageLevelOptions}
                     fetchBusesOrBusbarSections={fetchBusesOrBusbarSections}

src/features/network-modifications/generator/modification/GeneratorDialogTabs.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import { SyntheticEvent } from 'react';
 import { Tab, Tabs } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { GeneratorDialogTab } from './generatorTabs.utils';
@@ -14,19 +14,19 @@ import { getTabIndicatorStyle, getTabStyle } from '../../../parameters/parameter
 interface GeneratorDialogTabsProps {
     tabIndex: number;
     tabIndexesWithError: number[];
-    setTabIndex: (newTabIndex: number) => void;
+    onTabChange: (event: SyntheticEvent<Element, Event>, newValue: number) => void;
 }
 
 export function GeneratorDialogTabs({
     tabIndex,
     tabIndexesWithError,
-    setTabIndex,
+    onTabChange,
 }: Readonly<GeneratorDialogTabsProps>) {
     return (
         <Tabs
             value={tabIndex}
             variant="scrollable"
-            onChange={(event: React.SyntheticEvent, newValue: number) => setTabIndex(newValue)}
+            onChange={onTabChange}
             slotProps={{
                 indicator: {
                     sx: getTabIndicatorStyle(tabIndexesWithError, tabIndex),

src/features/network-modifications/generator/modification/GeneratorModificationForm.tsx

@@ -7,16 +7,17 @@
 
 import { Grid, Stack } from '@mui/material';
 import { useWatch } from 'react-hook-form';
-import { GENERATOR_TAB_FIELDS, GeneratorDialogTab } from './generatorTabs.utils';
+import { GeneratorDialogTab } from './generatorTabs.utils';
 import { GeneratorDialogHeader, GeneratorDialogHeaderProps } from './GeneratorDialogHeader';
 import { GeneratorDialogTabs } from './GeneratorDialogTabs';
 import { GeneratorDialogTabsContent, GeneratorDialogTabsContentProps } from './GeneratorDialogTabsContent';
 import { EquipmentType, FieldConstants, Identifiable } from '../../../../utils';
-import { useTabsWithError } from '../../hooks';
+import { UseTabsReturn } from '../../../../hooks';
 
 interface GeneratorModificationFormProps
     extends GeneratorDialogHeaderProps, Omit<GeneratorDialogTabsContentProps, 'tabIndex'> {
     fetchVoltageLevelEquipments: (voltageLevelId: string) => Promise<(Identifiable & { type: EquipmentType })[]>;
+    useTabsReturn: UseTabsReturn<GeneratorDialogTab>;
 }
 
 export function GeneratorModificationForm({
@@ -26,11 +27,10 @@ export function GeneratorModificationForm({
     fetchBusesOrBusbarSections,
     PositionDiagramPane,
     fetchVoltageLevelEquipments,
+    useTabsReturn,
 }: Readonly<GeneratorModificationFormProps>) {
-    const { tabIndex, setTabIndex, tabIndexesWithError } = useTabsWithError<GeneratorDialogTab>(
-        GENERATOR_TAB_FIELDS,
-        GeneratorDialogTab.CONNECTIVITY_TAB
-    );
+    const { selectedTab: tabIndex, tabsWithError: tabIndexesWithError, onTabChange } = useTabsReturn;
+
     const equipmentId = useWatch({ name: FieldConstants.EQUIPMENT_ID });
 
     return (
@@ -42,7 +42,7 @@ export function GeneratorModificationForm({
                 <GeneratorDialogTabs
                     tabIndex={tabIndex}
                     tabIndexesWithError={tabIndexesWithError}
-                    setTabIndex={setTabIndex}
+                    onTabChange={onTabChange}
                 />
             </Grid>
             <Grid>

src/features/network-modifications/index.ts

@@ -7,7 +7,6 @@
 
 export * from './common';
 export * from './equipmentDeletion';
-export * from './hooks';
 export * from './substation';
 export * from './voltageLevel';
 export * from './load';

src/features/network-modifications/line/common/LineDialogTabs.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import { SyntheticEvent } from 'react';
 import { Tab, Tabs } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { LineDialogOptions, LineDialogTab } from './line.utils';
@@ -14,21 +14,21 @@ import { getTabIndicatorStyle, getTabStyle } from '../../../parameters/parameter
 interface LineDialogTabsProps extends LineDialogOptions {
     tabIndex: number;
     tabIndexesWithError: number[];
-    setTabIndex: (newTabIndex: number) => void;
+    onTabChange: (event: SyntheticEvent<Element, Event>, newValue: number) => void;
 }
 
 export function LineDialogTabs({
     tabIndex,
     tabIndexesWithError,
-    setTabIndex,
+    onTabChange,
     isModification = false,
     withConnectivity = true,
 }: Readonly<LineDialogTabsProps>) {
     return (
         <Tabs
             value={tabIndex}
             variant="scrollable"
-            onChange={(event: React.SyntheticEvent, newValue: number) => setTabIndex(newValue)}
+            onChange={onTabChange}
             slotProps={{
                 indicator: { sx: getTabIndicatorStyle(tabIndexesWithError, tabIndex) },
             }}

src/features/network-modifications/line/common/LineForm.tsx

@@ -6,14 +6,16 @@
  */
 
 import { Box, Stack } from '@mui/material';
-import { LINE_TAB_FIELDS, LineDialogTab } from './line.utils';
+import { LineDialogTab } from './line.utils';
 import { LineDialogHeader, LineDialogHeaderProps } from './LineDialogHeader';
 import { LineDialogTabs } from './LineDialogTabs';
 import { LineDialogTabsContent, LineDialogTabsContentProps } from './LineDialogTabsContent';
-import { useTabsWithError } from '../../hooks';
+import { UseTabsReturn } from '../../../../hooks';
 
 interface LineFormProps
-    extends LineDialogHeaderProps, Omit<LineDialogTabsContentProps, 'tabIndex' | 'isModification' | 'lineToModify'> {}
+    extends LineDialogHeaderProps, Omit<LineDialogTabsContentProps, 'tabIndex' | 'isModification' | 'lineToModify'> {
+    useTabsReturn: UseTabsReturn<LineDialogTab>;
+}
 
 export function LineForm({
     lineToModify,
@@ -22,25 +24,23 @@ export function LineForm({
     PositionDiagramPane,
     isModification = false,
     withConnectivity = true,
+    useTabsReturn,
 }: Readonly<LineFormProps>) {
-    const { tabIndex, setTabIndex, tabIndexesWithError } = useTabsWithError<LineDialogTab>(
-        LINE_TAB_FIELDS,
-        withConnectivity ? LineDialogTab.CONNECTIVITY_TAB : LineDialogTab.CHARACTERISTICS_TAB
-    );
+    const { selectedTab, tabsWithError, onTabChange } = useTabsReturn;
 
     return (
         <Stack spacing={2} height="100%">
             <LineDialogHeader lineToModify={lineToModify} isModification={isModification} />
             <LineDialogTabs
-                tabIndex={tabIndex}
-                tabIndexesWithError={tabIndexesWithError}
-                setTabIndex={setTabIndex}
+                tabIndex={selectedTab}
+                tabIndexesWithError={tabsWithError}
+                onTabChange={onTabChange}
                 isModification={isModification}
                 withConnectivity={withConnectivity}
             />
             <Box sx={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden', paddingRight: 3 }}>
                 <LineDialogTabsContent
-                    tabIndex={tabIndex}
+                    tabIndex={selectedTab}
                     lineToModify={lineToModify}
                     voltageLevelOptions={voltageLevelOptions}
                     fetchBusesOrBusbarSections={fetchBusesOrBusbarSections}

src/features/network-modifications/line/common/line.utils.ts

@@ -12,7 +12,7 @@ export interface LineDialogOptions {
     withConnectivity?: boolean;
 }
 
-export const enum LineDialogTab {
+export enum LineDialogTab {
     CONNECTIVITY_TAB = 0,
     CHARACTERISTICS_TAB = 1,
     LIMITS_TAB = 2,

src/features/network-modifications/load/common/LoadDialogTabs.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import { SyntheticEvent } from 'react';
 import { Tab, Tabs } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { LoadDialogTab } from './load.utils';
@@ -14,21 +14,21 @@ import { getTabIndicatorStyle, getTabStyle } from '../../../parameters/parameter
 interface LoadDialogTabsProps {
     tabIndex: number;
     tabIndexesWithError: number[];
-    setTabIndex: (newTabIndex: number) => void;
+    onTabChange: (event: SyntheticEvent<Element, Event>, newValue: number) => void;
     isModification?: boolean;
 }
 
 export function LoadDialogTabs({
     tabIndex,
     tabIndexesWithError,
-    setTabIndex,
+    onTabChange,
     isModification = false,
 }: Readonly<LoadDialogTabsProps>) {
     return (
         <Tabs
             value={tabIndex}
             variant="scrollable"
-            onChange={(event: React.SyntheticEvent, newValue: number) => setTabIndex(newValue)}
+            onChange={onTabChange}
             slotProps={{
                 indicator: {
                     sx: getTabIndicatorStyle(tabIndexesWithError, tabIndex),