refactor: K8sResouceList & ClusterUpgradeCompatibilityInfo - improve typings

Author: RohitRaj011

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfo.tsx

@@ -23,12 +23,11 @@ import {
     FiltersTypeEnum,
     GenericEmptyState,
     ImageType,
+    K8sResourceDetailDataType,
     LARGE_PAGE_SIZE_OPTIONS,
     PaginationEnum,
     Progressing,
     Table,
-    TableColumnType,
-    TableProps,
     URL_FILTER_KEYS,
     useSearchString,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -42,7 +41,11 @@ import { TARGET_K8S_VERSION_SEARCH_KEY } from '../Constants'
 import { ClusterDetailBaseParams } from '../Types'
 import ClusterUpgradeCompatibilityInfoTableCellComponent from './ClusterUpgradeCompatibilityInfoTableCellComponent'
 import ClusterUpgradeCompatibilityInfoTableWrapper from './ClusterUpgradeCompatibilityInfoTableWrapper'
-import { ClusterUpgradeCompatibilityInfoProps } from './types'
+import {
+    ClusterUpgradeCompatibilityInfoProps,
+    ClusterUpgradeCompatibilityInfoTableAdditionalProps,
+    ClusterUpgradeCompatibilityInfoTableProps,
+} from './types'
 import { dynamicSort } from './utils'
 
 const useClusterUpgradeCompatibilityInfo = importComponentFromFELibrary(
@@ -75,25 +78,25 @@ const ClusterUpgradeCompatibilityInfo = ({
         updateTabUrl,
     })
 
-    const { columns, rows } = useMemo(
+    const { columns, rows } = useMemo<{
+        columns: ClusterUpgradeCompatibilityInfoTableProps['columns']
+        rows: ClusterUpgradeCompatibilityInfoTableProps['rows']
+    }>(
         () => ({
-            columns: resourceListForCurrentData.headers.map(
-                (header: string) =>
-                    ({
-                        field: header,
-                        label: header,
-                        size: {
-                            range: {
-                                maxWidth: 600,
-                                minWidth: header === 'name' ? 200 : 180,
-                                startWidth: header === 'name' ? 300 : 200,
-                            },
-                        },
-                        comparator: dynamicSort(header),
-                        isSortable: true,
-                        CellComponent: ClusterUpgradeCompatibilityInfoTableCellComponent,
-                    }) as TableColumnType,
-            ),
+            columns: resourceListForCurrentData.headers.map((header: string) => ({
+                field: header,
+                label: header,
+                size: {
+                    range: {
+                        maxWidth: 600,
+                        minWidth: header === 'name' ? 200 : 180,
+                        startWidth: header === 'name' ? 300 : 200,
+                    },
+                },
+                comparator: dynamicSort(header),
+                isSortable: true,
+                CellComponent: ClusterUpgradeCompatibilityInfoTableCellComponent,
+            })),
             rows: resourceListForCurrentData.data.map((row: Record<string, string | number | object>) => ({
                 data: row,
                 id: JSON.stringify(row),
@@ -141,7 +144,7 @@ const ClusterUpgradeCompatibilityInfo = ({
         )
     }
 
-    const tableFilter: TableProps['filter'] = (row, filterData) =>
+    const tableFilter: ClusterUpgradeCompatibilityInfoTableProps['filter'] = (row, filterData) =>
         !filterData.searchKey ||
         Object.entries(row.data).some(
             ([key, value]) =>
@@ -163,7 +166,7 @@ const ClusterUpgradeCompatibilityInfo = ({
                 <CollapsibleList tabType="navLink" config={sidebarConfig} onCollapseBtnClick={onCollapseBtnClick} />
             </div>
 
-            <Table
+            <Table<K8sResourceDetailDataType, FiltersTypeEnum.URL, ClusterUpgradeCompatibilityInfoTableAdditionalProps>
                 columns={columns}
                 rows={rows}
                 emptyStateConfig={{
@@ -184,6 +187,7 @@ const ClusterUpgradeCompatibilityInfo = ({
                 filter={tableFilter}
                 additionalProps={{
                     lowercaseKindToResourceGroupMap,
+                    reloadResourceListData: refetchCompatibilityList,
                 }}
                 pageSizeOptions={LARGE_PAGE_SIZE_OPTIONS}
                 clearFilters={clearFilters}

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfoTableCellComponent.tsx

@@ -8,7 +8,6 @@ import {
     DUMMY_RESOURCE_GVK_VERSION,
     GVKType,
     highlightSearchText,
-    K8sResourceDetailDataType,
     Nodes,
     noop,
     RESOURCE_BROWSER_ROUTES,
@@ -142,7 +141,7 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
                 <ResourceBrowserActionMenu
                     ref={contextMenuRef}
                     clusterId={clusterId}
-                    resourceData={resourceData as K8sResourceDetailDataType}
+                    resourceData={resourceData}
                     getResourceListData={reloadResourceListData as () => Promise<void>}
                     selectedResource={selectedResource}
                     hideDeleteResource

src/components/ResourceBrowser/ResourceList/K8SResourceList.tsx

@@ -23,14 +23,13 @@ import {
     FiltersTypeEnum,
     getAIAnalyticsEvents,
     getIsRequestAborted,
+    K8sResourceDetailDataType,
     LARGE_PAGE_SIZE_OPTIONS,
     Nodes,
     PaginationEnum,
     SelectAllDialogStatus,
     ServerErrors,
     Table,
-    TableColumnType,
-    TableProps,
     URLS,
     useAsync,
     useUrlFilters,
@@ -50,7 +49,13 @@ import { K8SResourceListType } from '../Types'
 import K8sResourceListTableCellComponent from './K8sResourceListTableCellComponent'
 import NodeListSearchFilter from './NodeListSearchFilter'
 import ResourceFilterOptions from './ResourceFilterOptions'
-import { K8sResourceListFilterType, K8sResourceListURLParams, K8SResourceListViewWrapperProps } from './types'
+import {
+    K8sResourceListFilterType,
+    K8sResourceListTableAdditionalProps,
+    K8sResourceListTableProps,
+    K8sResourceListURLParams,
+    K8SResourceListViewWrapperProps,
+} from './types'
 import {
     getColumnComparator,
     getColumnSize,
@@ -90,7 +95,7 @@ const K8SResourceListViewWrapper = ({
                 visibleColumns={visibleColumns}
                 setVisibleColumns={setVisibleColumns}
                 allColumns={allColumns}
-                searchParams={restProps as Record<string, string>}
+                searchParams={restProps}
             />
         ) : (
             <ResourceFilterOptions
@@ -174,7 +179,7 @@ export const K8SResourceList = ({
         updateK8sResourceTab({ url: `${location.pathname}${location.search}` })
     }, [location.pathname, location.search])
 
-    const columns: TableColumnType[] = useMemo(
+    const columns: K8sResourceListTableProps['columns'] = useMemo(
         () =>
             resourceList?.headers.map(
                 (header) =>
@@ -187,24 +192,24 @@ export const K8SResourceList = ({
                         isSortable: !isEventListing || (header !== 'message' && header !== 'type'),
                         horizontallySticky:
                             header === 'name' || (isEventListing && (header === 'message' || header === 'type')),
-                    }) as TableColumnType,
+                    }) as K8sResourceListTableProps['columns'][0],
             ) ?? [],
         [resourceList?.headers],
     )
 
-    const rows: TableProps['rows'] = useMemo(
+    const rows: K8sResourceListTableProps['rows'] = useMemo(
         () =>
             resourceList?.data.map((row) => {
                 const { id, ...rest } = row
                 return {
                     data: rest,
                     id,
-                } as TableProps['rows'][number]
+                } as K8sResourceListTableProps['rows'][number]
             }) ?? null,
         [resourceList?.data],
     )
 
-    const tableFilter: TableProps['filter'] = (row, filterData) => {
+    const tableFilter: K8sResourceListTableProps['filter'] = (row, filterData) => {
         if (isNodeListing) {
             return isItemASearchMatchForNodeListing(row.data, filterData)
         }
@@ -251,7 +256,7 @@ export const K8SResourceList = ({
 
     return (
         <>
-            <Table
+            <Table<K8sResourceDetailDataType, FiltersTypeEnum.URL, K8sResourceListTableAdditionalProps>
                 loading={isResourceListLoading}
                 columns={columns}
                 rows={rows}

src/components/ResourceBrowser/ResourceList/K8sResourceListTableCellComponent.tsx

@@ -13,7 +13,6 @@ import {
     highlightSearchText,
     Icon,
     IconName,
-    K8sResourceDetailDataType,
     Nodes,
     noop,
     RESOURCE_BROWSER_ROUTES,
@@ -172,7 +171,7 @@ const K8sResourceListTableCellComponent = ({
             <ResourceBrowserActionMenu
                 ref={contextMenuRef}
                 clusterId={clusterId}
-                resourceData={resourceData as K8sResourceDetailDataType}
+                resourceData={resourceData}
                 getResourceListData={reloadResourceListData as () => Promise<void>}
                 selectedResource={selectedResource}
                 handleResourceClick={handleResourceClick}
@@ -183,14 +182,14 @@ const K8sResourceListTableCellComponent = ({
                 ref={contextMenuRef}
                 getNodeListData={reloadResourceListData as () => Promise<void>}
                 addTab={addTab}
-                nodeData={resourceData as K8sResourceDetailDataType}
+                nodeData={resourceData}
                 handleClearBulkSelection={noop}
             />
         )
 
     const getConditionalWrap = () =>
         columnName === 'node'
-            ? getRenderNodeButton(resourceData as K8sResourceDetailDataType, columnName, handleNodeClick)
+            ? getRenderNodeButton(resourceData, columnName, handleNodeClick)
             : getRenderInvolvedObjectButton(resourceData[columnName] as string, handleEventInvolvedObjectClick)
 
     if (columnName === 'type' && isEventListing) {

src/components/ResourceBrowser/ResourceList/types.ts

@@ -16,8 +16,10 @@
 
 import {
     FiltersTypeEnum,
+    K8sResourceDetailDataType,
     ServerErrors,
     TableCellComponentProps,
+    TableProps,
     TableViewWrapperProps,
     useBreadcrumb,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -66,22 +68,6 @@ export interface K8sResourceListFilterType
     eventType: 'warning' | 'normal'
 }
 
-export interface K8SResourceListViewWrapperProps
-    extends TableViewWrapperProps<FiltersTypeEnum.URL>,
-        Pick<K8SResourceListType, 'selectedCluster' | 'selectedResource' | 'updateK8sResourceTab' | 'renderRefreshBar'>,
-        Pick<K8sResourceListFilterType, 'eventType'> {
-    selectedNamespace: string
-}
-
-export interface K8sResourceListTableCellComponentProps
-    extends TableCellComponentProps<FiltersTypeEnum.URL>,
-        Pick<
-            K8SResourceListType,
-            'selectedCluster' | 'selectedResource' | 'addTab' | 'lowercaseKindToResourceGroupMap' | 'clusterName'
-        > {
-    reloadResourceListData: () => void
-}
-
 export interface AdminTerminalDummyProps
     extends Pick<UseTabsReturnType, 'markTabActiveById' | 'updateTabUrl' | 'getTabById'> {
     clusterName: string
@@ -92,11 +78,68 @@ export interface ResourcePageHeaderProps {
     renderPageHeaderActionButtons?: () => JSX.Element
 }
 
-export interface ClusterUpgradeCompatibilityInfoTableCellComponentProps
-    extends TableCellComponentProps<FiltersTypeEnum.URL>,
-        Pick<K8SResourceListType, 'lowercaseKindToResourceGroupMap'> {}
+// CLUSTER UPGRADE COMPATIBILITY INFO TABLE PROPS --------->
+export type ClusterUpgradeCompatibilityInfoTableAdditionalProps = Pick<
+    K8SResourceListType,
+    'lowercaseKindToResourceGroupMap'
+> & {
+    reloadResourceListData: () => void
+}
 
-export interface ClusterUpgradeCompatibilityInfoTableWrapperProps extends TableViewWrapperProps<FiltersTypeEnum.URL> {}
+export type ClusterUpgradeCompatibilityInfoTableProps = TableProps<
+    K8sResourceDetailDataType,
+    FiltersTypeEnum.URL,
+    ClusterUpgradeCompatibilityInfoTableAdditionalProps
+>
+
+export type ClusterUpgradeCompatibilityInfoTableWrapperProps = TableViewWrapperProps<
+    K8sResourceDetailDataType,
+    FiltersTypeEnum.URL,
+    ClusterUpgradeCompatibilityInfoTableAdditionalProps
+>
+
+export type ClusterUpgradeCompatibilityInfoTableCellComponentProps = TableCellComponentProps<
+    K8sResourceDetailDataType,
+    FiltersTypeEnum.URL,
+    ClusterUpgradeCompatibilityInfoTableAdditionalProps
+>
+// <--------- CLUSTER UPGRADE COMPATIBILITY INFO TABLE PROPS
+
+// K8s RESOURCE LIST TABLE PROPS --------->
+export interface K8sResourceListTableAdditionalProps
+    extends Pick<
+        K8SResourceListType,
+        | 'selectedCluster'
+        | 'selectedResource'
+        | 'addTab'
+        | 'lowercaseKindToResourceGroupMap'
+        | 'clusterName'
+        | 'renderRefreshBar'
+    > {
+    reloadResourceListData: () => void
+    isNodeListing: boolean
+    isEventListing: boolean
+}
+
+export type K8SResourceListViewWrapperProps = TableViewWrapperProps<
+    K8sResourceDetailDataType,
+    FiltersTypeEnum.URL,
+    K8sResourceListTableAdditionalProps
+> &
+    Pick<K8sResourceListFilterType, 'selectedNamespace' | 'eventType'>
+
+export type K8sResourceListTableCellComponentProps = TableCellComponentProps<
+    K8sResourceDetailDataType,
+    FiltersTypeEnum.URL,
+    K8sResourceListTableAdditionalProps
+>
+
+export type K8sResourceListTableProps = TableProps<
+    K8sResourceDetailDataType,
+    FiltersTypeEnum.URL,
+    K8sResourceListTableAdditionalProps
+>
+// <--------- K8s RESOURCE LIST TABLE PROPS
 
 export type DynamicTabComponentWrapperProps = Pick<
     UseTabsReturnType,
@@ -106,7 +149,12 @@ export type DynamicTabComponentWrapperProps = Pick<
         children: React.ReactElement
     }
 
-export interface ResourceRecommenderTableViewWrapperProps extends ResourceFilterOptionsProps, TableViewWrapperProps {
-    resourceListError: ServerErrors
-    reloadResourceListData: () => void
-}
+export interface ResourceRecommenderTableViewWrapperProps
+    extends TableViewWrapperProps<
+        unknown,
+        FiltersTypeEnum.URL,
+        ResourceFilterOptionsProps & {
+            resourceListError: ServerErrors
+            reloadResourceListData: () => void
+        }
+    > {}

src/components/ResourceBrowser/Types.ts

@@ -93,7 +93,7 @@ export interface ClusterOptionType extends OptionType {
 }
 
 export interface ResourceFilterOptionsProps
-    extends Pick<TableViewWrapperProps<FiltersTypeEnum.URL>, 'updateSearchParams' | 'filteredRows'>,
+    extends Pick<TableViewWrapperProps<unknown, FiltersTypeEnum.URL>, 'updateSearchParams' | 'filteredRows'>,
         Partial<Pick<K8sResourceListFilterType, 'eventType'>> {
     selectedResource: ApiResourceGroupType
     selectedCluster?: ClusterOptionType
@@ -269,8 +269,11 @@ export interface NodeRowDetail {
 }
 
 export interface NodeListSearchFilterType
-    extends Pick<TableViewWrapperProps, 'visibleColumns' | 'setVisibleColumns' | 'allColumns'> {
-    searchParams: Record<string, string>
+    extends Pick<
+        TableViewWrapperProps<unknown, FiltersTypeEnum.URL>,
+        'visibleColumns' | 'setVisibleColumns' | 'allColumns'
+    > {
+    searchParams: Record<string, any>
 }
 
 export enum NODE_SEARCH_KEYS {