Merge pull request #2806 from devtron-labs/feat/rb-table

fix: node detail url in RB

Author: Elessar1802

package.json

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

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}

yarn.lock

@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.16.0-pre-9":
-  version: 1.16.0-pre-9
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.16.0-pre-9"
+"@devtron-labs/devtron-fe-common-lib@npm:1.16.0-pre-10":
+  version: 1.16.0-pre-10
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.16.0-pre-10"
   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/73687a79a34ca378d323f4e9d5092420d93184249f198ca048b3c512013d4dd5150234b9a88dba0d93091b6e1cc564956b6aab18598f4513aa594d33e6f14706
+  checksum: 10c0/b02939d8adb7ec1cadf11076ef195a6a2a80c91ca215b3ae298e8a43105e8dc5419fbe3e064ff8b63b7df6f2e1c922a5e119ea23d575c522ec26c30edd2b40d0
   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.16.0-pre-9"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.16.0-pre-10"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"