fix: cluster upgrade clear filters

Author: Elessar1802

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfo.tsx

@@ -15,18 +15,20 @@
  */
 
 import { useMemo } from 'react'
-import { useParams } from 'react-router-dom'
+import { useHistory, useLocation, useParams } from 'react-router-dom'
 
 import {
     CollapsibleList,
     ErrorScreenManager,
     FiltersTypeEnum,
     GenericEmptyState,
     ImageType,
+    LARGE_PAGE_SIZE_OPTIONS,
     PaginationEnum,
     Progressing,
     Table,
     TableColumnType,
+    TableProps,
     useSearchString,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -55,6 +57,8 @@ const ClusterUpgradeCompatibilityInfo = ({
 }: ClusterUpgradeCompatibilityInfoProps) => {
     const { clusterId } = useParams<ClusterDetailBaseParams>()
     const targetK8sVersion = useSearchString().queryParams.get(TARGET_K8S_VERSION_SEARCH_KEY)
+    const { push } = useHistory()
+    const location = useLocation()
 
     const {
         isLoading,
@@ -136,6 +140,26 @@ const ClusterUpgradeCompatibilityInfo = ({
         )
     }
 
+    const tableFilter: TableProps['filter'] = (row, filterData) =>
+        !filterData.searchKey ||
+        Object.entries(row.data).some(
+            ([key, value]) =>
+                key !== 'id' &&
+                value !== null &&
+                value !== undefined &&
+                String(value).toLowerCase().includes(filterData.searchKey.toLowerCase()),
+        )
+
+    const clearFilters = () => {
+        const searchParams = new URLSearchParams(location.search)
+        Array.from(searchParams.keys()).forEach((key) => {
+            if (key !== TARGET_K8S_VERSION_SEARCH_KEY) {
+                searchParams.delete(key)
+            }
+        })
+        push({ search: searchParams.toString() })
+    }
+
     return (
         <div className="flexbox h-100 dc__overflow-hidden">
             <div className="dc__overflow-auto p-8 w-220 dc__no-shrink">
@@ -156,9 +180,16 @@ const ClusterUpgradeCompatibilityInfo = ({
                 id="table__cluster-upgrade-compatibility-info"
                 paginationVariant={PaginationEnum.PAGINATED}
                 ViewWrapper={ClusterUpgradeCompatibilityInfoTableWrapper}
+                additionalFilterProps={{
+                    initialSortKey: 'namespace',
+                    defaultPageSize: LARGE_PAGE_SIZE_OPTIONS[0].value,
+                }}
+                filter={tableFilter}
                 additionalProps={{
                     lowercaseKindToResourceGroupMap,
                 }}
+                pageSizeOptions={LARGE_PAGE_SIZE_OPTIONS}
+                clearFilters={clearFilters}
             />
         </div>
     )

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfoTableCellComponent.tsx

@@ -67,6 +67,7 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
 
         const openContextMenuCallback = ({ detail: { activeRowData } }) => {
             if (activeRowData.id === id) {
+                contextMenuRef.current?.focus()
                 contextMenuRef.current?.click()
             }
         }
@@ -140,7 +141,7 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
                     </button>
                 </Tooltip>
                 {!shouldHideContextMenu && (
-                    <ClipboardButton content={String(resourceData.name)} rootClassName="p-4 dc__visible-hover--child" />
+                    <ClipboardButton content={String(resourceData.name)} rootClassName="p-2 dc__visible-hover--child" />
                 )}
             </div>
 

src/components/ResourceBrowser/ResourceList/DynamicTabComponentWrapper.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactElement, useEffect } from 'react'
+import { cloneElement, ReactElement, useEffect } from 'react'
 import { useLocation, useParams, useRouteMatch } from 'react-router-dom'
 
 import { logExceptionToSentry, noop } from '@devtron-labs/devtron-fe-common-lib'
@@ -12,8 +12,9 @@ export const DynamicTabComponentWrapper = ({
     markTabActiveById,
     getTabId,
     addTab,
+    getTabById,
     children,
-}: PropsWithChildren<DynamicTabComponentWrapperProps>) => {
+}: DynamicTabComponentWrapperProps) => {
     const { pathname, search } = useLocation()
     const { path } = useRouteMatch()
     const params = useParams<Record<string, string>>()
@@ -60,5 +61,5 @@ export const DynamicTabComponentWrapper = ({
         updateTabUrl({ id: tabId, url: `${pathname}${search}` })
     }, [pathname, search])
 
-    return children as ReactElement
+    return cloneElement(children, { ...children.props, key: getTabById(tabId)?.componentKey }) as ReactElement
 }

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -248,11 +248,9 @@ const ResourceList = () => {
         () =>
             tabs.reduce(
                 (acc, tab) => {
-                    if (tab.id === ResourceBrowserTabsId.k8s_Resources) {
-                        acc[tab.id] = {
-                            reload: refreshData,
-                            showTimeSinceLastSync: true,
-                        }
+                    acc[tab.id] = {
+                        reload: refreshData,
+                        showTimeSinceLastSync: tab.id === ResourceBrowserTabsId.k8s_Resources,
                     }
 
                     return acc
@@ -330,7 +328,7 @@ const ResourceList = () => {
 
         return (
             <div className={!tab?.isSelected ? 'cluster-terminal-hidden' : 'flexbox-col flex-grow-1'}>
-                <AdminTerminal updateTerminalTabUrl={updateTerminalTabUrl} />
+                <AdminTerminal updateTerminalTabUrl={updateTerminalTabUrl} key={tab.componentKey} />
             </div>
         )
     }
@@ -377,11 +375,7 @@ const ResourceList = () => {
                 />
                 <Route path={RESOURCE_BROWSER_ROUTES.OVERVIEW} exact>
                     <DynamicTabComponentWrapper type="fixed" {...DynamicTabComponentWrapperBaseProps}>
-                        <ClusterOverview
-                            selectedCluster={selectedCluster}
-                            addTab={addTab}
-                            key={getTabById(ResourceBrowserTabsId.cluster_overview).componentKey}
-                        />
+                        <ClusterOverview selectedCluster={selectedCluster} addTab={addTab} />
                     </DynamicTabComponentWrapper>
                 </Route>
                 <Route path={RESOURCE_BROWSER_ROUTES.MONITORING_DASHBOARD} exact>
@@ -462,7 +456,6 @@ const ResourceList = () => {
                             clusterName={selectedCluster.label}
                             lowercaseKindToResourceGroupMap={lowercaseKindToResourceGroupMap}
                             updateTabLastSyncMoment={updateTabLastSyncMoment}
-                            key={getTabById(ResourceBrowserTabsId.k8s_Resources).componentKey}
                         />
                     </DynamicTabComponentWrapper>
                 </Route>

src/components/ResourceBrowser/ResourceList/Sidebar.tsx

@@ -23,6 +23,7 @@ import DOMPurify from 'dompurify'
 import {
     ApiResourceGroupType,
     highlightSearchText,
+    Nodes,
     ReactSelectInputAction,
     useRegisterShortcut,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -118,6 +119,9 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
         params.delete('pageNumber')
         params.delete('sortBy')
         params.delete('sortOrder')
+        if (_selectedKind !== Nodes.Event.toLowerCase()) {
+            params.delete('eventType')
+        }
         const _url = `${generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_LIST, {
             clusterId,
             kind: _selectedKind,

src/components/ResourceBrowser/ResourceList/types.ts

@@ -101,4 +101,6 @@ export type DynamicTabComponentWrapperProps = Pick<
     UseTabsReturnType,
     'updateTabUrl' | 'markTabActiveById' | 'getTabId' | 'getTabById'
 > &
-    ({ type: 'fixed'; addTab?: never } | { type: 'dynamic'; addTab: UseTabsReturnType['addTab'] })
+    ({ type: 'fixed'; addTab?: never } | { type: 'dynamic'; addTab: UseTabsReturnType['addTab'] }) & {
+        children: React.ReactElement
+    }