show first tab's content when any tab is deleted

Signed-off-by: Natasha Tikhonova <[email protected]>

next-tavla/src/Admin/scenarios/TilesOverview/index.tsx

@@ -1,5 +1,5 @@
 import { TTile } from 'types/tile'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { TileSettings } from 'Admin/scenarios/TileSettings'
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@entur/tab'
 import Image from 'next/image'
@@ -8,6 +8,12 @@ import classes from './styles.module.css'
 import { Heading2, LeadParagraph } from '@entur/typography'
 
 function TilesOverview({ tiles }: { tiles: TTile[] }) {
+    const [activeTab, setActiveTab] = useState(0)
+
+    useEffect(() => {
+        setActiveTab(0)
+    }, [tiles.length])
+
     if (tiles.length === 0)
         return (
             <div className={classes.info}>
@@ -23,7 +29,11 @@ function TilesOverview({ tiles }: { tiles: TTile[] }) {
         )
 
     return (
-        <Tabs className={classes.tabs}>
+        <Tabs
+            className={classes.tabs}
+            index={activeTab}
+            onChange={(newIndex) => setActiveTab(newIndex)}
+        >
             <TabList data-cy="tiles">
                 {tiles.map((tile) => (
                     <Tab key={tile.uuid}>{tile.name ?? tile.placeId}</Tab>