fix: review comments

Author: Elessar1802

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfo.tsx

@@ -29,6 +29,7 @@ import {
     Table,
     TableColumnType,
     TableProps,
+    URL_FILTER_KEYS,
     useSearchString,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -152,11 +153,7 @@ const ClusterUpgradeCompatibilityInfo = ({
 
     const clearFilters = () => {
         const searchParams = new URLSearchParams(location.search)
-        Array.from(searchParams.keys()).forEach((key) => {
-            if (key !== TARGET_K8S_VERSION_SEARCH_KEY) {
-                searchParams.delete(key)
-            }
-        })
+        searchParams.delete(URL_FILTER_KEYS.SEARCH_KEY)
         push({ search: searchParams.toString() })
     }
 

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfoTableCellComponent.tsx

@@ -94,11 +94,7 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
         ).gvk
 
         return {
-            gvk: {
-                Group: gvkFromRawData.Group,
-                Kind: gvkFromRawData.Kind,
-                Version: gvkFromRawData.Version,
-            },
+            gvk: gvkFromRawData,
         }
     }
 
@@ -151,10 +147,7 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
                     clusterId={clusterId}
                     resourceData={resourceData as K8sResourceDetailDataType}
                     getResourceListData={reloadResourceListData as () => Promise<void>}
-                    selectedResource={{
-                        ...getSelectedResourceKindOverride((resourceData.kind as string).toLowerCase()),
-                        namespaced: !!resourceData.namespace,
-                    }}
+                    selectedResource={selectedResource}
                     hideDeleteResource
                     handleResourceClick={handleResourceClick}
                     handleClearBulkSelection={noop}

src/components/ResourceBrowser/ResourceList/K8SResourceTabComponent.tsx

@@ -41,7 +41,6 @@ const K8SResourceTabComponent = ({
     const abortControllerRef = useRef(new AbortController())
 
     useEffect(() => {
-        // TODO: once we get tab retention logic, we can remove this
         updateTabLastSyncMoment(ResourceBrowserTabsId.k8s_Resources)
     }, [])
 

src/components/ResourceBrowser/ResourceList/K8sResourceListTableCellComponent.tsx

@@ -29,14 +29,13 @@ import {
     AI_BUTTON_CONFIG_MAP,
     DUMMY_RESOURCE_GVK_VERSION,
     K8S_EMPTY_GROUP,
-    RESOURCE_ACTION_MENU,
     RESOURCE_BROWSER_ROUTES,
 } from '../Constants'
 import { ClusterDetailBaseParams } from '../Types'
 import { getRenderInvolvedObjectButton, getRenderNodeButton, renderResourceValue } from '../Utils'
 import NodeActionsMenu from './NodeActionsMenu'
 import ResourceBrowserActionMenu from './ResourceBrowserActionMenu'
-import { K8sResourceListTableCellComponentProps } from './types'
+import { K8sResourceListTableCellComponentProps, ResourceBrowserActionMenuEnum } from './types'
 import { getClassNameForColumn, getFirstResourceFromKindResourceMap, getShowAIButton, getStatusClass } from './utils'
 
 const ExplainWithAIButton = importComponentFromFELibrary('ExplainWithAIButton', null, 'function')
@@ -84,7 +83,7 @@ const K8sResourceListTableCellComponent = ({
             namespace = ALL_NAMESPACE_OPTION.value,
             kind,
             group: _group,
-            tab = RESOURCE_ACTION_MENU.manifest,
+            tab = ResourceBrowserActionMenuEnum.manifest,
         } = e.currentTarget.dataset
 
         const url = generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_DETAIL, {
@@ -162,6 +161,34 @@ const K8sResourceListTableCellComponent = ({
         )
     }
 
+    const onClickHandler = isNodeListing ? handleNodeClick : handleResourceClick
+
+    const renderActionMenu = () =>
+        !isNodeListing ? (
+            <ResourceBrowserActionMenu
+                ref={contextMenuRef}
+                clusterId={clusterId}
+                resourceData={resourceData as K8sResourceDetailDataType}
+                getResourceListData={reloadResourceListData as () => Promise<void>}
+                selectedResource={selectedResource}
+                handleResourceClick={handleResourceClick}
+                handleClearBulkSelection={noop}
+            />
+        ) : (
+            <NodeActionsMenu
+                ref={contextMenuRef}
+                getNodeListData={reloadResourceListData as () => Promise<void>}
+                addTab={addTab}
+                nodeData={resourceData as K8sResourceDetailDataType}
+                handleClearBulkSelection={noop}
+            />
+        )
+
+    const getConditionalWrap = () =>
+        columnName === 'node'
+            ? getRenderNodeButton(resourceData as K8sResourceDetailDataType, columnName, handleNodeClick)
+            : getRenderInvolvedObjectButton(resourceData[columnName] as string, handleEventInvolvedObjectClick)
+
     if (columnName === 'type' && isEventListing) {
         const iconName: IconName =
             (resourceData.type as string).toLowerCase() === 'normal' ? 'ic-info-filled-color' : 'ic-warning'
@@ -190,7 +217,7 @@ const K8sResourceListTableCellComponent = ({
                                 data-namespace={resourceData.namespace || ALL_NAMESPACE_OPTION.value}
                                 data-kind={selectedResource.gvk.Kind}
                                 data-group={selectedResource.gvk.Group || K8S_EMPTY_GROUP}
-                                onClick={isNodeListing ? handleNodeClick : handleResourceClick}
+                                onClick={onClickHandler}
                                 ref={nameButtonRef}
                             >
                                 <span
@@ -214,25 +241,7 @@ const K8sResourceListTableCellComponent = ({
                             iconSize={16}
                         />
                     </div>
-                    {!isNodeListing ? (
-                        <ResourceBrowserActionMenu
-                            ref={contextMenuRef}
-                            clusterId={clusterId}
-                            resourceData={resourceData as K8sResourceDetailDataType}
-                            getResourceListData={reloadResourceListData as () => Promise<void>}
-                            selectedResource={selectedResource}
-                            handleResourceClick={handleResourceClick}
-                            handleClearBulkSelection={noop}
-                        />
-                    ) : (
-                        <NodeActionsMenu
-                            ref={contextMenuRef}
-                            getNodeListData={reloadResourceListData as () => Promise<void>}
-                            addTab={addTab}
-                            nodeData={resourceData as K8sResourceDetailDataType}
-                            handleClearBulkSelection={noop}
-                        />
-                    )}
+                    {renderActionMenu()}
                 </div>
             ) : (
                 <div
@@ -244,18 +253,7 @@ const K8sResourceListTableCellComponent = ({
                 >
                     <ConditionalWrap
                         condition={columnName === 'node' || columnName === 'involved object'}
-                        wrap={
-                            columnName === 'node'
-                                ? getRenderNodeButton(
-                                      resourceData as K8sResourceDetailDataType,
-                                      columnName,
-                                      handleNodeClick,
-                                  )
-                                : getRenderInvolvedObjectButton(
-                                      resourceData[columnName] as string,
-                                      handleEventInvolvedObjectClick,
-                                  )
-                        }
+                        wrap={getConditionalWrap()}
                     >
                         {columnName === 'errors' && isNodeListingAndNodeHasErrors && (
                             <ICErrorExclamation className="icon-dim-16 dc__no-shrink mr-4" />

src/components/ResourceBrowser/ResourceList/Sidebar.tsx

@@ -25,6 +25,7 @@ import {
     highlightSearchText,
     Nodes,
     ReactSelectInputAction,
+    URL_FILTER_KEYS,
     useRegisterShortcut,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -116,9 +117,9 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
         const _selectedGroup = e.currentTarget.dataset.group.toLowerCase()
 
         const params = new URLSearchParams(location.search)
-        params.delete('pageNumber')
-        params.delete('sortBy')
-        params.delete('sortOrder')
+        params.delete(URL_FILTER_KEYS.PAGE_NUMBER)
+        params.delete(URL_FILTER_KEYS.SORT_BY)
+        params.delete(URL_FILTER_KEYS.SORT_ORDER)
         if (_selectedKind !== Nodes.Event.toLowerCase()) {
             params.delete('eventType')
         }

src/components/ResourceBrowser/ResourceList/utils.tsx

@@ -20,6 +20,7 @@ import { generatePath } from 'react-router-dom'
 import {
     ALL_NAMESPACE_OPTION,
     ClusterDetail,
+    getGroupVersionFromApiVersion,
     logExceptionToSentry,
     numberComparatorBySortOrder,
     stringComparatorBySortOrder,
@@ -35,15 +36,14 @@ import {
     K8S_EMPTY_GROUP,
     NODE_K8S_VERSION_FILTER_KEY,
     NODE_SEARCH_KEYS_TO_OBJECT_KEYS,
-    RESOURCE_ACTION_MENU,
     RESOURCE_BROWSER_ROUTES,
     ResourceBrowserRouteToTabIdMap,
     SIDEBAR_KEYS,
     TARGET_K8S_VERSION_SEARCH_KEY,
     UPGRADE_CLUSTER_CONSTANTS,
 } from '../Constants'
 import { ClusterOptionType, K8SResourceListType, NODE_SEARCH_KEYS, ShowAIButtonConfig } from '../Types'
-import { K8sResourceListFilterType, ResourceListUrlFiltersType } from './types'
+import { K8sResourceListFilterType, ResourceBrowserActionMenuEnum, ResourceListUrlFiltersType } from './types'
 
 const getFilterOptionsFromSearchParams = importComponentFromFELibrary(
     'getFilterOptionsFromSearchParams',
@@ -332,22 +332,18 @@ export const getTabIdForTab = (
 }
 
 export const getResourceRecommenderResourceDetailURL = (e: MouseEvent<HTMLButtonElement>) => {
-    const {
-        name,
-        namespace = ALL_NAMESPACE_OPTION.value,
-        kind,
-        group: _group,
-        tab = RESOURCE_ACTION_MENU.manifest,
-    } = e.currentTarget.dataset
+    const { name, namespace = ALL_NAMESPACE_OPTION.value, kind, apiVersion } = e.currentTarget.dataset
+
+    const group = getGroupVersionFromApiVersion(apiVersion).group.toLowerCase() || K8S_EMPTY_GROUP
 
     const url = generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_DETAIL, {
         clusterId,
         namespace,
         name,
         kind: kind.toLowerCase(),
-        group: _group || K8S_EMPTY_GROUP,
+        group,
         version: DUMMY_RESOURCE_GVK_VERSION,
     })
 
-    return `${url}/${tab}`
+    return `${url}/${ResourceBrowserActionMenuEnum.manifest}`
 }