refactor: remove upgrade dialog logic and clean up CommandBar component

Author: arunjaindev

src/Pages/Shared/CommandBar/CommandBar.component.tsx

@@ -1,18 +1,14 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import { handleAnalyticsEvent, useQuery } from '@devtron-labs/devtron-fe-common-lib'
 
 import CommandBarBackdrop from './CommandBarBackdrop'
-import { UPGRADE_DIALOG_LOCAL_STORAGE_KEY } from './constants'
-import NavigationUpgradedDialog from './NavigationUpgradedDialog'
 import { getCommandBarResourceLists } from './service'
 import { CommandBarBackdropProps, CommandBarProps } from './types'
-import { getShowUpgradeDialogFromLocalStorage, hideUpgradeDialogInLocalStorage } from './utils'
 
 import './CommandBar.scss'
 
 const CommandBar = ({ showCommandBar, setShowCommandBar }: CommandBarProps) => {
-    const [showUpgradeDialog, setShowUpgradeDialog] = useState(getShowUpgradeDialogFromLocalStorage)
     const { isLoading: isResourceListLoading, data: resourceList } = useQuery<
         CommandBarBackdropProps['resourceList'],
         CommandBarBackdropProps['resourceList'],
@@ -28,22 +24,10 @@ const CommandBar = ({ showCommandBar, setShowCommandBar }: CommandBarProps) => {
         setShowCommandBar(false)
     }
 
-    const handleCloseUpgradeDialog = () => {
-        setShowUpgradeDialog(false)
-        hideUpgradeDialogInLocalStorage()
-    }
-
     useEffect(() => {
-        const handleStorageEvent = (e: StorageEvent) => {
-            if (e.key === UPGRADE_DIALOG_LOCAL_STORAGE_KEY && e.newValue === 'true') {
-                setShowUpgradeDialog(false)
-            }
-        }
-
         const handleOpen = (e: KeyboardEvent) => {
             if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                 e.preventDefault()
-                handleCloseUpgradeDialog()
                 setShowCommandBar(true)
                 handleAnalyticsEvent({
                     category: 'command-bar-shortcut',
@@ -52,15 +36,13 @@ const CommandBar = ({ showCommandBar, setShowCommandBar }: CommandBarProps) => {
             }
         }
         window.addEventListener('keydown', handleOpen)
-        window.addEventListener('storage', handleStorageEvent)
         return () => {
             window.removeEventListener('keydown', handleOpen)
-            window.removeEventListener('storage', handleStorageEvent)
         }
     }, [])
 
     if (!showCommandBar) {
-        return <NavigationUpgradedDialog isOpen={showUpgradeDialog} onClose={handleCloseUpgradeDialog} />
+        return null
     }
 
     return (

src/Pages/Shared/CommandBar/constants.ts

@@ -40,5 +40,3 @@ export const NAV_SUB_ITEMS_ICON_MAPPING: Partial<Record<NavigationItemID, IconNa
     'application-management-policies': 'ic-gavel',
     'global-configuration-authorization': 'ic-key',
 }
-
-export const UPGRADE_DIALOG_LOCAL_STORAGE_KEY = 'command-bar-upgrade-dialog-closed'

src/Pages/Shared/CommandBar/utils.tsx

@@ -21,7 +21,6 @@ import {
     HELM_APP_LIST_COMMAND_GROUP_ID,
     NAV_SUB_ITEMS_ICON_MAPPING,
     RECENT_NAVIGATION_ITEM_ID_PREFIX,
-    UPGRADE_DIALOG_LOCAL_STORAGE_KEY,
 } from './constants'
 import { CommandBarActionIdType, CommandBarBackdropProps, CommandBarGroupType, CommandBarItemType } from './types'
 
@@ -386,12 +385,3 @@ export const getAdditionalNavGroups = (
         ...getTopFiveClusterListGroup(clusterList, searchText),
     ]
 }
-
-export const getShowUpgradeDialogFromLocalStorage = () => {
-    const hasClosedUpgradeDialog = localStorage.getItem(UPGRADE_DIALOG_LOCAL_STORAGE_KEY)
-    return hasClosedUpgradeDialog !== 'true'
-}
-
-export const hideUpgradeDialogInLocalStorage = () => {
-    localStorage.setItem(UPGRADE_DIALOG_LOCAL_STORAGE_KEY, 'true')
-}

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useEffect, useMemo, useState } from 'react'
-import { Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { generatePath, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import {
     BASE_ROUTES,
@@ -77,8 +77,7 @@ const CLUSTER_DETAILS_ROUTES = BASE_ROUTES.INFRASTRUCTURE_MANAGEMENT.RESOURCE_BR
 const RESOURCE_BROWSER_ROUTES = ROUTER_URLS.RESOURCE_BROWSER.CLUSTER_DETAILS
 
 const ResourceList = ({ selectedCluster, k8SObjectMapRaw }: ResourceListProps) => {
-    const params = useParams<ClusterDetailBaseParams>()
-    const { clusterId } = params
+    const { clusterId } = useParams<ClusterDetailBaseParams>()
     const location = useLocation()
     const {
         tabs,
@@ -92,7 +91,7 @@ const ResourceList = ({ selectedCluster, k8SObjectMapRaw }: ResourceListProps) =
         stopTabByIdentifier,
         getTabId,
         getTabById,
-    } = useTabs(ROUTER_URLS.RESOURCE_BROWSER.CLUSTER_DETAILS.ROOT)
+    } = useTabs(generatePath(ROUTER_URLS.RESOURCE_BROWSER.CLUSTER_DETAILS.ROOT, { clusterId }))
     const [logSearchTerms, setLogSearchTerms] = useState<Record<string, string>>()
     const [isDataStale, setIsDataStale] = useState(false)
     const { setIntelligenceConfig, setAIAgentContext, isResourceRecommendationEnabled } = useMainContext()
@@ -131,13 +130,14 @@ const ResourceList = ({ selectedCluster, k8SObjectMapRaw }: ResourceListProps) =
             setAIAgentContext(null)
         }
     }, [])
+
     useEffectAfterMount(() => initTabsBasedOnRole(true), [clusterId])
 
     useEffect(() => {
         setAIAgentContext({
             path: '',
             context: {
-                ...params,
+                clusterId,
                 clusterName: selectedCluster.label,
                 search: location.search,
             },

src/components/charts/ChartGroupDetails.tsx

@@ -78,11 +78,11 @@ export default function ChartGroupDetails() {
         {
             alias: {
                 ...getInfrastructureManagementBreadcrumb(),
-                'chart-store': {
+                'chart-store': null,
+                discover: {
                     component: <BreadcrumbText heading="Chart Store" />,
                     linked: true,
                 },
-                discover: null,
                 group: 'Chart groups',
                 ':groupId': {
                     component: (

src/components/v2/appDetails/k8Resource/K8Resource.component.tsx

@@ -21,6 +21,7 @@ import {
     ALL_RESOURCE_KIND_FILTER,
     getPodsRootParentNameAndStatus,
     Node,
+    ROUTER_URLS,
     StatusFilterButtonComponent,
     useSearchString,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -174,8 +175,11 @@ export const K8ResourceComponent = ({
 }
 
 export const EmptyK8sResourceComponent = ({ emptyStateMessage }: { emptyStateMessage: string }) => {
-    const location = useLocation()
-    const routeMatchUrl = location.pathname
+    const params = useParams()
+    const routeMatchUrl = generatePath(ROUTER_URLS.DEVTRON_APP_DETAILS.ENV_DETAILS, {
+        appId: params.appId,
+        envId: params.envId,
+    })
     const {
         tabs,
         initTabs,
@@ -184,6 +188,7 @@ export const EmptyK8sResourceComponent = ({ emptyStateMessage }: { emptyStateMes
         stopTabByIdentifier,
         // NOTE: fallback to 0th index since that is the k8s_resource tab
     } = useTabs(routeMatchUrl, APP_DETAILS_DYNAMIC_TABS_FALLBACK_INDEX)
+    const location = useLocation()
 
     useEffect(() => {
         initTabs(getInitialTabs(location.pathname, routeMatchUrl, false), true)

src/components/workflowEditor/workflowEditor.tsx

@@ -396,8 +396,7 @@ class WorkflowEdit extends Component<WorkflowEditProps, WorkflowEditState> {
             {
                 appId: this.props.params.appId,
             },
-        )}
-        }/${CommonURLS.APP_CONFIG}/${
+        )}/${CommonURLS.APP_CONFIG}/${
             URLS.APP_WORKFLOW_CONFIG
         }/${workflowId}/${ciURL}/${URLS.APP_CD_CONFIG}/0/build?parentPipelineType=${parentPipelineType}&addType=${
             addType ?? AddPipelineType.PARALLEL