fix: remove data hazard in local storage for useTabs

package.json

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

src/components/common/DynamicTabs/constants.ts

@@ -18,4 +18,4 @@ export const FALLBACK_TAB = 1
 
 export const TAB_DATA_LOCAL_STORAGE_KEY = 'persisted-tabs-data'
 
-export const TAB_DATA_VERSION = 'v1'
+export const TAB_DATA_VERSION = 'v2'

src/components/common/DynamicTabs/types.ts

@@ -72,9 +72,14 @@ export interface TimerType {
     format?: (start: Dayjs, now: Dayjs) => string
 }
 
-export type ParsedTabsData = {
+export type ParsedTabsDataV1 = {
     key: string
     data: DynamicTabType[]
+    version: 'v1'
+}
+
+export type ParsedTabsData = {
+    data: Record<string, DynamicTabType[]>
     version: typeof TAB_DATA_VERSION
 }
 

src/components/common/DynamicTabs/useTabs.ts

@@ -19,6 +19,7 @@ import dayjs from 'dayjs'
 import { noop, InitTabType, DynamicTabType } from '@devtron-labs/devtron-fe-common-lib'
 import { AddTabParamsType, ParsedTabsData, PopulateTabDataPropsType, UseTabsReturnType } from './types'
 import { FALLBACK_TAB, TAB_DATA_LOCAL_STORAGE_KEY, TAB_DATA_VERSION } from './constants'
+import { convertV1TabsDataToV2 } from './utils'
 
 export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB): UseTabsReturnType {
     const [tabs, setTabs] = useState<DynamicTabType[]>([])
@@ -104,17 +105,15 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
         } else {
             const persistedTabsData = getTabDataFromLocalStorage()
             try {
-                _parsedTabsData = JSON.parse(persistedTabsData)
+                _parsedTabsData = convertV1TabsDataToV2(JSON.parse(persistedTabsData))
             } catch {
                 noop()
             }
         }
 
         return JSON.stringify({
-            ..._parsedTabsData,
-            key: persistenceKey,
             version: TAB_DATA_VERSION,
-            data: _tabs,
+            data: { ..._parsedTabsData?.data, [persistenceKey]: _tabs },
         })
     }
 
@@ -170,46 +169,27 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
         overrideSelectionStatus = false,
     ) => {
         let _tabs: DynamicTabType[] = []
-        let tabDataVersion = TAB_DATA_VERSION
         let parsedTabsData: ParsedTabsData
 
         setTabs((prevTabs) => {
             if (!reInit) {
                 const persistedTabsData = getTabDataFromLocalStorage()
                 try {
-                    parsedTabsData = JSON.parse(persistedTabsData)
-                    _tabs = persistedTabsData ? parsedTabsData.data : prevTabs
-                    tabDataVersion = parsedTabsData?.version
+                    parsedTabsData = convertV1TabsDataToV2(JSON.parse(persistedTabsData))
+                    _tabs = parsedTabsData ? parsedTabsData.data[persistenceKey] : prevTabs
                 } catch {
                     _tabs = prevTabs
                 }
             }
             if (_tabs.length > 0) {
-                _tabs = _tabs.map((_tab) => {
-                    // Backward compatibility with position
-                    const type =
-                        _tab.type ??
-                        ('position' in _tab && _tab.position === Number.MAX_SAFE_INTEGER ? 'dynamic' : 'fixed')
-
-                    return {
-                        ..._tab,
-                        // NOTE: if reInit && overrideSelectionStatus is false, we need to retain the current selection
-                        // if reInit is true, we need to remove old selection and use the provided initTabs' selection
-                        // or fallback if user has sent all initTabs with isSelected false
-                        ...(reInit || overrideSelectionStatus ? { isSelected: false } : {}),
-                        /* NOTE: following lines migrate old tab data to new */
-                        lastSyncMoment: dayjs(),
-                        ...(_tab.componentKey
-                            ? { componentKey: _tab.componentKey }
-                            : { componentKey: getNewTabComponentKey(_tab.id) }),
-                        ...(_tab.isAlive ? { isAlive: _tab.isAlive } : { isAlive: false }),
-                        type,
-                        id:
-                            tabDataVersion !== TAB_DATA_VERSION && type === 'fixed' && _tab.id
-                                ? _tab.id.split('-')[0]
-                                : _tab.id,
-                    }
-                })
+                _tabs = _tabs.map((_tab) => ({
+                    ..._tab,
+                    // NOTE: if reInit && overrideSelectionStatus is false, we need to retain the current selection
+                    // if reInit is true, we need to remove old selection and use the provided initTabs' selection
+                    // or fallback if user has sent all initTabs with isSelected false
+                    ...(reInit || overrideSelectionStatus ? { isSelected: false } : {}),
+                    lastSyncMoment: dayjs(),
+                }))
                 if (tabsToRemove?.length) {
                     _tabs = _tabs.filter((_tab) => tabsToRemove.indexOf(_tab.id) === -1)
                 }

src/components/common/DynamicTabs/utils.ts

@@ -16,7 +16,8 @@
 
 import { Dayjs } from 'dayjs'
 import { MARK_AS_STALE_DATA_CUT_OFF_MINS } from '../../ResourceBrowser/Constants'
-import { DynamicTabsVariantType } from './types'
+import { DynamicTabsVariantType, ParsedTabsData, ParsedTabsDataV1 } from './types'
+import { TAB_DATA_VERSION } from './constants'
 
 export const checkIfDataIsStale = (start: Dayjs, now: Dayjs): boolean =>
     now.diff(start, 'minutes') > MARK_AS_STALE_DATA_CUT_OFF_MINS
@@ -33,3 +34,14 @@ export const getClassNameForVariant = (variant: DynamicTabsVariantType) => {
             return ''
     }
 }
+
+export const convertV1TabsDataToV2 = (tabsData: ParsedTabsDataV1 | ParsedTabsData): ParsedTabsData => {
+    if (tabsData.version === TAB_DATA_VERSION) {
+        return tabsData
+    }
+
+    return {
+        data: { [tabsData.key]: tabsData.data },
+        version: TAB_DATA_VERSION,
+    }
+}

src/components/common/navigation/NavigationRoutes.tsx

@@ -67,6 +67,7 @@ import 'monaco-editor'
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import YamlWorker from '../../../yaml.worker.js?worker'
 import { TAB_DATA_LOCAL_STORAGE_KEY } from '../DynamicTabs/constants'
+import { ParsedTabsData, ParsedTabsDataV1 } from '../DynamicTabs/types'
 
 // Monaco Editor worker initialization
 self.MonacoEnvironment = {
@@ -304,12 +305,21 @@ export default function NavigationRoutes() {
         const persistedTabs = localStorage.getItem(TAB_DATA_LOCAL_STORAGE_KEY)
         if (persistedTabs) {
             try {
-                const parsedTabsData = JSON.parse(persistedTabs)
-                if (
-                    location.pathname === parsedTabsData.key ||
-                    !location.pathname.startsWith(`${parsedTabsData.key}/`)
-                ) {
-                    localStorage.removeItem(TAB_DATA_LOCAL_STORAGE_KEY)
+                const parsedTabsData: ParsedTabsData | ParsedTabsDataV1 = JSON.parse(persistedTabs)
+                if (parsedTabsData.version === 'v1') {
+                    if (
+                        location.pathname === parsedTabsData.key ||
+                        !location.pathname.startsWith(`${parsedTabsData.key}/`)
+                    ) {
+                        localStorage.removeItem(TAB_DATA_LOCAL_STORAGE_KEY)
+                    }
+                } else {
+                    const keys = Object.keys(parsedTabsData.data)
+                    if (
+                        keys.every((key) => location.pathname !== key && !location.pathname.startsWith(`${key}/`))
+                    ) {
+                        localStorage.removeItem(TAB_DATA_LOCAL_STORAGE_KEY)
+                    }
                 }
             } catch {
                 localStorage.removeItem(TAB_DATA_LOCAL_STORAGE_KEY)

yarn.lock

@@ -1105,10 +1105,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/[email protected].6":
-  version "1.7.6"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.7.6.tgz#59c85b4a7408d8606044191f3931b56ff759196f"
-  integrity sha512-vEy7EgLQu3gI0SPRSvQ3Y7GAvjRjhFAk12Rq88p+cJmilg+fHEjVRmmcUapqkB9Cmc1dIq3LkWuOkQ9rNyYLfA==
+"@devtron-labs/[email protected].7":
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.7.7.tgz#4ca45cb7e1e5721d0c6ece2040c764bb613a4208"
+  integrity sha512-caCJaAllzaV3Qr9ehx3SnHe9XsYBn1NzXZzkXP32wgquAchdoI8I1N35Ywleo5rpbT1NagC7py0qv9oeSa3MCQ==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"