fix: node detail route in RB

Author: Elessar1802

src/components/ClusterNodes/NodeDetails.tsx

@@ -41,8 +41,11 @@ import {
     Button,
     ButtonVariantType,
     ButtonStyleType,
+    RESOURCE_BROWSER_ROUTES,
+    getUrlWithSearchParams,
+    ResourceBrowserActionMenuEnum,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { useParams, useLocation, useHistory } from 'react-router-dom'
+import { useParams, useLocation, useHistory, generatePath } from 'react-router-dom'
 import YAML from 'yaml'
 import * as jsonpatch from 'fast-json-patch'
 import { applyPatch } from 'fast-json-patch'
@@ -78,7 +81,7 @@ import { importComponentFromFELibrary } from '@Components/common'
 
 const REDFISH_NODE_UI_TABS = importComponentFromFELibrary('REDFISH_NODE_UI_TABS', [], 'function')
 
-const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }: ClusterListType) => {
+const NodeDetails = ({ lowercaseKindToResourceGroupMap, updateTabUrl }: ClusterListType) => {
     const { clusterId, name } = useParams<{ clusterId: string; nodeType: string; name: string }>()
     const [loader, setLoader] = useState(true)
     const [apiInProgress, setApiInProgress] = useState(false)
@@ -673,9 +676,13 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
     const openDebugTerminal = () => {
         const queryParams = new URLSearchParams(location.search)
         queryParams.set('node', nodeDetail.name)
-        const url = location.pathname
         push(
-            `${url.split('/').slice(0, -3).join('/')}/${AppDetailsTabs.terminal}/${K8S_EMPTY_GROUP}?${queryParams.toString()}`,
+            getUrlWithSearchParams(
+                generatePath(RESOURCE_BROWSER_ROUTES.TERMINAL, {
+                    clusterId,
+                }),
+                { node: nodeDetail.name },
+            ),
         )
     }
 
@@ -711,17 +718,19 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
     }
 
     const handleResourceClick = (e) => {
-        const { name, tab, namespace } = e.currentTarget.dataset
-        let _nodeSelectionData
-        let _group
-        _group = selectedResource?.gvk.Group.toLowerCase() || K8S_EMPTY_GROUP
-        _nodeSelectionData = { name: `pod` + `_${name}`, namespace, isFromNodeDetails: true }
-        const _url = `${URLS.RESOURCE_BROWSER}/${clusterId}/${namespace}/pod/${_group}/${name}${
-            tab ? `/${tab.toLowerCase()}` : ''
-        }`
-        addTab({ idPrefix: `${_group}_${namespace}`, kind: 'pod', name, url: _url }).then(() => {
-            push(_url)
-        })
+        const { name, tab = ResourceBrowserActionMenuEnum.manifest, namespace } = e.currentTarget.dataset
+        push(
+            getUrlWithSearchParams(
+                generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_DETAIL, {
+                    clusterId,
+                    group: selectedResource?.gvk.Group.toLowerCase() || K8S_EMPTY_GROUP,
+                    kind: 'pod',
+                    name,
+                    namespace,
+                }),
+                { tab },
+            ),
+        )
     }
 
     const getTriggerSortingHandler =

src/components/ClusterNodes/types.ts

@@ -135,7 +135,6 @@ export interface ColumnMetadataType {
 }
 
 export interface ClusterListType extends Pick<K8SResourceListType, 'lowercaseKindToResourceGroupMap'> {
-    addTab?: UseTabsReturnType['addTab']
     updateTabUrl: (params: Omit<UpdateTabUrlParamsType, 'id'>) => void
 }
 

src/components/ResourceBrowser/ResourceList/K8SResourceList.tsx

@@ -161,7 +161,8 @@ export const K8SResourceList = ({
         [selectedResource, clusterId, selectedNamespace, JSON.stringify(resourceFilters)],
     )
 
-    const isResourceListLoading = resourceListLoader || getIsRequestAborted(resourceListError)
+    const isResourceListLoadingWithoutNullState = resourceListLoader || getIsRequestAborted(resourceListError)
+    const isResourceListLoading = !resourceList || isResourceListLoadingWithoutNullState
 
     useEffect(
         () => () => {
@@ -237,7 +238,7 @@ export const K8SResourceList = ({
         return columns.some(({ field }) => field === 'namespace') ? 'namespace' : 'name'
     }
 
-    if (resourceListError && !isResourceListLoading) {
+    if (resourceListError && !isResourceListLoadingWithoutNullState) {
         return (
             <div className="flexbox-col flex-grow-1 border__primary--left">
                 <ErrorScreenManager

src/components/ResourceBrowser/ResourceList/NodeDetailWrapper.tsx

@@ -8,11 +8,10 @@ import { K8S_EMPTY_GROUP } from '../Constants'
 import { NodeDetailURLParams } from './types'
 
 const NodeDetailWrapper = ({
-    addTab,
     getTabId,
     updateTabUrl,
     lowercaseKindToResourceGroupMap,
-}: Omit<ClusterListType, 'updateTabUrl'> & Pick<UseTabsReturnType, 'addTab' | 'getTabId' | 'updateTabUrl'>) => {
+}: Omit<ClusterListType, 'updateTabUrl'> & Pick<UseTabsReturnType, 'getTabId' | 'updateTabUrl'>) => {
     const { name } = useParams<NodeDetailURLParams>()
 
     const id = getTabId(K8S_EMPTY_GROUP, name, 'node')
@@ -23,7 +22,6 @@ const NodeDetailWrapper = ({
         <NodeDetails
             updateTabUrl={updateTabUrlHandler}
             lowercaseKindToResourceGroupMap={lowercaseKindToResourceGroupMap}
-            addTab={addTab}
         />
     )
 }

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -392,7 +392,6 @@ const ResourceList = () => {
                 <Route path={RESOURCE_BROWSER_ROUTES.NODE_DETAIL} exact>
                     <DynamicTabComponentWrapper type="dynamic" {...DynamicTabComponentWrapperBaseProps} addTab={addTab}>
                         <NodeDetailWrapper
-                            addTab={addTab}
                             getTabId={getTabId}
                             lowercaseKindToResourceGroupMap={lowercaseKindToResourceGroupMap}
                             updateTabUrl={updateTabUrl}