feat: Update resource recommender tab handling and retain search params

Author: AbhishekA1509

src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx

@@ -182,6 +182,10 @@ const ResourceFilterOptions = ({
             newSearchParams.set(GVK_FILTER_KIND_QUERY_PARAM_KEY, kind)
         }
 
+        updateK8sResourceTab({
+            url: `${location.pathname}?${newSearchParams.toString()}`,
+        })
+
         replace({
             pathname: location.pathname,
             search: newSearchParams.toString(),

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -545,7 +545,7 @@ const ResourceList = () => {
         },
         clusterName: selectedCluster.label,
         handleResourceClick,
-        updateK8sResourceTab: noop,
+        updateK8sResourceTab: getUpdateTabUrlForId(RESOURCE_RECOMMENDER_TAB_ID),
         nodeType: null,
         group: K8S_EMPTY_GROUP,
         isLoading: isResourceListLoading,

src/components/ResourceBrowser/ResourceList/Sidebar.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react'
-import { useHistory, useLocation, useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import ReactSelect, { GroupBase, InputActionMeta } from 'react-select'
 import Select, { FormatOptionLabelMeta } from 'react-select/base'
 import DOMPurify from 'dompurify'
@@ -49,7 +49,6 @@ const Sidebar = ({
     isOpen,
 }: SidebarType) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
-    const location = useLocation()
     const { push } = useHistory()
     const { clusterId, namespace, nodeType } = useParams<URLParams>()
     const [searchText, setSearchText] = useState('')
@@ -125,8 +124,8 @@ const Sidebar = ({
         }
         setSelectedResource(_selectedResource)
         updateK8sResourceTabLastSyncMoment()
-        const _url = `${URLS.RESOURCE_BROWSER}/${clusterId}/${namespace}/${_selectedKind}/${_selectedGroup || K8S_EMPTY_GROUP}${location.search}`
-        updateK8sResourceTab({ url: _url, dynamicTitle: e.currentTarget.dataset.kind })
+        const _url = `${URLS.RESOURCE_BROWSER}/${clusterId}/${namespace}/${_selectedKind}/${_selectedGroup || K8S_EMPTY_GROUP}`
+        updateK8sResourceTab({ url: _url, dynamicTitle: e.currentTarget.dataset.kind, retainSearchParams: true })
         if (shouldPushUrl) {
             push(_url)
         }

src/components/ResourceBrowser/Utils.tsx

@@ -24,10 +24,14 @@ import {
     ApiResourceGroupType,
     DATE_TIME_FORMAT_STRING,
     FeatureTitleWithInfo,
+    getUrlWithSearchParams,
+    GVK_FILTER_API_VERSION_QUERY_PARAM_KEY,
+    GVK_FILTER_KIND_QUERY_PARAM_KEY,
     GVKType,
     InitTabType,
     K8sResourceDetailDataType,
     K8sResourceDetailType,
+    Nodes,
     ResponseType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -329,7 +333,13 @@ export const getTabsBasedOnRole = ({
         ...(canRenderResourceRecommender && getResourceRecommenderTabConfig
             ? [
                   getResourceRecommenderTabConfig(
-                      getURLBasedOnSidebarGVK(SIDEBAR_KEYS.resourceRecommenderGVK.Kind, clusterId, namespace),
+                      `${getURLBasedOnSidebarGVK(SIDEBAR_KEYS.resourceRecommenderGVK.Kind, clusterId, namespace)}${getUrlWithSearchParams(
+                          '',
+                          {
+                              [GVK_FILTER_API_VERSION_QUERY_PARAM_KEY]: 'apps/v1',
+                              [GVK_FILTER_KIND_QUERY_PARAM_KEY]: Nodes.Deployment,
+                          },
+                      )}`,
                       isResourceRecommenderSelected,
                       RESOURCE_RECOMMENDER_TAB_ID,
                   ),

src/components/common/DynamicTabs/types.ts

@@ -94,7 +94,7 @@ export interface PopulateTabDataPropsType
             | 'hideName'
             | 'id'
         >,
-        Required<Pick<DynamicTabType, 'shouldRemainMounted' | 'title' | 'showNameOnSelect'>> {}
+        Required<Pick<DynamicTabType, 'shouldRemainMounted' | 'title' | 'showNameOnSelect' | 'isAlpha'>> {}
 
 export interface AddTabParamsType
     extends Pick<PopulateTabDataPropsType, 'name' | 'url' | 'tippyConfig'>,

src/components/common/DynamicTabs/useTabs.ts

@@ -72,6 +72,7 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
         tippyConfig,
         lastActiveTabId,
         shouldRemainMounted,
+        isAlpha,
     }: PopulateTabDataPropsType): DynamicTabType => ({
         id,
         name,
@@ -88,6 +89,7 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
         tippyConfig,
         lastActiveTabId,
         shouldRemainMounted,
+        isAlpha: isAlpha || false,
     })
 
     const getTabDataFromLocalStorage = () => localStorage.getItem(TAB_DATA_LOCAL_STORAGE_KEY)
@@ -131,10 +133,12 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
      * @returns {DynamicTabType} - Tab data for initialization
      */
     const populateInitTab = (_initTab: InitTabType): DynamicTabType => {
-        const title = getTitleFromKindAndName({
-            kind: _initTab.kind,
-            name: _initTab.name,
-        })
+        const title =
+            _initTab.title ||
+            getTitleFromKindAndName({
+                kind: _initTab.kind,
+                name: _initTab.name,
+            })
 
         const _id =
             _initTab.id ??
@@ -157,6 +161,7 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
             tippyConfig: _initTab.tippyConfig,
             lastActiveTabId: null,
             shouldRemainMounted: _initTab.shouldRemainMounted,
+            isAlpha: _initTab.isAlpha,
         })
     }
 
@@ -180,6 +185,10 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
 
                 try {
                     parsedTabsData = JSON.parse(persistedTabsData)
+                    const storedResourceRecommenderTab = (parsedTabsData.data[persistenceKey] ?? []).find(
+                        (tab) => tab.id === RESOURCE_RECOMMENDER_TAB_ID,
+                    )
+
                     parsedTabsData.data[persistenceKey] = (parsedTabsData.data[persistenceKey] ?? []).filter(
                         (tab) => tab.id !== RESOURCE_RECOMMENDER_TAB_ID,
                     )
@@ -199,7 +208,7 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
                             parsedTabsData.data[persistenceKey].splice(
                                 monitoringTabIndex + 1,
                                 0,
-                                resourceRecommenderInitTab,
+                                storedResourceRecommenderTab || resourceRecommenderInitTab,
                             )
                         }
                     }
@@ -325,6 +334,7 @@ export function useTabs(persistenceKey: string, fallbackTabIndex = FALLBACK_TAB)
                             tippyConfig,
                             lastActiveTabId: getLastActiveTabIdFromTabs(prevTabs, _id),
                             shouldRemainMounted: false,
+                            isAlpha: false,
                         }),
                     )
                 }