Merge pull request #2824 from devtron-labs/fix/use-tabs

fix: switch to last active tab on tab close

Author: Elessar1802

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.17.0-pre-10",
+        "@devtron-labs/devtron-fe-common-lib": "1.17.0-pre-11",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/common/DynamicTabs/types.ts

@@ -83,16 +83,7 @@ export type ParsedTabsData = {
 export interface PopulateTabDataPropsType
     extends Pick<
             DynamicTabType,
-            | 'tippyConfig'
-            | 'lastActiveTabId'
-            | 'type'
-            | 'isSelected'
-            | 'url'
-            | 'name'
-            | 'dynamicTitle'
-            | 'isAlive'
-            | 'hideName'
-            | 'id'
+            'tippyConfig' | 'type' | 'isSelected' | 'url' | 'name' | 'dynamicTitle' | 'isAlive' | 'hideName' | 'id'
         >,
         Required<
             Pick<DynamicTabType, 'shouldRemainMounted' | 'title' | 'showNameOnSelect' | 'isAlpha' | 'defaultUrl'>

src/components/common/DynamicTabs/useTabs.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 
 import { DynamicTabType, InitTabType, noop } from '@devtron-labs/devtron-fe-common-lib'
@@ -27,6 +27,8 @@ import { AddTabParamsType, ParsedTabsData, PopulateTabDataPropsType, UseTabsRetu
 export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB): UseTabsReturnType {
     const [tabs, setTabs] = useState<DynamicTabType[]>([])
 
+    const previousActiveTabIdRef = useRef<string>(null)
+
     const tabIdToTabMap = useMemo(
         () =>
             tabs.reduce((acc, tab) => {
@@ -49,15 +51,6 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
     const getTitleFromKindAndName = ({ kind, name }: Pick<InitTabType, 'kind' | 'name'>): string =>
         kind ? `${kind}/${name}` : name
 
-    const getLastActiveTabIdFromTabs = (
-        _tabs: DynamicTabType[],
-        id: DynamicTabType['id'],
-    ): DynamicTabType['lastActiveTabId'] | null => {
-        const selectedTabId = _tabs.find((tab) => tab.isSelected)?.id ?? null
-
-        return selectedTabId !== id ? selectedTabId : null
-    }
-
     const populateTabData = ({
         id,
         name,
@@ -70,7 +63,6 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
         isAlive = false,
         hideName = false,
         tippyConfig,
-        lastActiveTabId,
         shouldRemainMounted,
         isAlpha,
         defaultUrl,
@@ -88,7 +80,6 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
         lastSyncMoment: dayjs(),
         componentKey: getNewTabComponentKey(id),
         tippyConfig,
-        lastActiveTabId,
         shouldRemainMounted,
         isAlpha: isAlpha || false,
         defaultUrl: defaultUrl || null,
@@ -161,7 +152,6 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
             isAlive: !!_initTab.isAlive,
             hideName: _initTab.hideName,
             tippyConfig: _initTab.tippyConfig,
-            lastActiveTabId: null,
             shouldRemainMounted: _initTab.shouldRemainMounted,
             isAlpha: _initTab.isAlpha,
             defaultUrl: _initTab.defaultUrl,
@@ -309,6 +299,11 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
                 const _tabs = prevTabs.map((tab) => {
                     const matched = tab.id === _id
                     found = found || matched
+
+                    if (tab.isSelected && !matched) {
+                        previousActiveTabIdRef.current = tab.id
+                    }
+
                     return matched
                         ? {
                               ...tab,
@@ -335,7 +330,6 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
                             showNameOnSelect,
                             dynamicTitle,
                             tippyConfig,
-                            lastActiveTabId: getLastActiveTabIdFromTabs(prevTabs, _id),
                             shouldRemainMounted: false,
                             isAlpha: false,
                             defaultUrl: null,
@@ -355,12 +349,12 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
                 const tabToBeRemoved = prevTabs.find((tab) => tab.id === id) ?? ({} as DynamicTabType)
 
                 if (tabToBeRemoved.isSelected) {
-                    const switchFromTabIndex = tabs.findIndex((tab) => tab.id === tabToBeRemoved.lastActiveTabId)
+                    const previousSelectedTabIndex = prevTabs.findIndex(
+                        (tab) => tab.id === previousActiveTabIdRef.current,
+                    )
+                    previousActiveTabIdRef.current = null
                     const newSelectedTabIndex =
-                        // The id and lastActiveTabId can be same when the same tab is clicked again
-                        switchFromTabIndex > -1 && tabToBeRemoved.id !== tabToBeRemoved.lastActiveTabId
-                            ? switchFromTabIndex
-                            : fallbackTabIndex
+                        previousSelectedTabIndex > -1 ? previousSelectedTabIndex : fallbackTabIndex
                     // Cannot use structured clone since using it reloads the whole data
                     // eslint-disable-next-line no-param-reassign
                     prevTabs[newSelectedTabIndex].isSelected = true
@@ -415,22 +409,31 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
 
             setTabs((prevTabs) => {
                 let isTabFound = false
+                let previousActiveTab = null
+
                 const _tabs = prevTabs.map((tab) => {
                     const isMatch = tab.id === id
                     isTabFound = isMatch || isTabFound
 
+                    if (tab.isSelected && !isMatch) {
+                        previousActiveTab = tab
+                    }
+
                     return {
                         ...tab,
                         isSelected: isMatch,
                         url: (isMatch && url) || tab.url,
-                        ...(isMatch && {
-                            lastActiveTabId: getLastActiveTabIdFromTabs(prevTabs, tab.id),
-                            ...(tab.showNameOnSelect && {
+                        ...(isMatch &&
+                            tab.showNameOnSelect && {
                                 isAlive: true,
                             }),
-                        }),
                     }
                 })
+
+                if (isTabFound && previousActiveTab) {
+                    previousActiveTabIdRef.current = previousActiveTab.id
+                }
+
                 resolve(isTabFound)
                 updateTabsInLocalStorage(_tabs)
                 return _tabs

yarn.lock

@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.17.0-pre-10":
-  version: 1.17.0-pre-10
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.17.0-pre-10"
+"@devtron-labs/devtron-fe-common-lib@npm:1.17.0-pre-11":
+  version: 1.17.0-pre-11
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.17.0-pre-11"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1773,7 +1773,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/828f5bd3714c5c9d990d1bbf0bf0267ad4b4f1354b214406bf2b2f559517bb864cf864b41a21570bfa6f8a77cc6fadf3d8e81ba5340f15fcbeb0e17d86aa48e7
+  checksum: 10c0/a06781a344bfedcc76d6543fe67e53b2b3c97180884e26b73b3fa691cb9c90c486602481c09326002eba792f9a0bef87062bd4b481600af9614c86a36a7e3b59
   languageName: node
   linkType: hard
 
@@ -5685,7 +5685,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.17.0-pre-10"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.17.0-pre-11"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"