Merge pull request #2923 from devtron-labs/fix/kubeconfig-modal-loading

fix: kubeconfig modal loading state

Author: AbhishekA1509

src/components/ClusterNodes/ClusterList/ClusterListView.tsx

@@ -92,7 +92,8 @@ const ClusterListView = (props: ClusterViewType) => {
                 }
                 acc[cluster.name] = cluster
                 return acc
-            }, {} as ClusterDetail) ?? {},
+            }, {} as BulkSelectionIdentifiersType<ClusterDetail>) ??
+            ({} as BulkSelectionIdentifiersType<ClusterDetail>),
         [filteredList],
     )
 
@@ -149,7 +150,7 @@ const ClusterListView = (props: ClusterViewType) => {
                 )}
             </div>
 
-            <ClusterSelectionBody {...props} filteredList={filteredList} />
+            <ClusterSelectionBody {...props} filteredList={filteredList} identifierMap={allOnThisPageIdentifiers} />
         </BulkSelectionProvider>
     )
 }

src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx

@@ -52,6 +52,8 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
     filteredList,
     refreshData,
     parentRef,
+    isClusterDetailListLoading,
+    identifierMap,
 }) => {
     const [showKubeConfigModal, setShowKubeConfigModal] = useState(false)
     const [selectedClusterName, setSelectedClusterName] = useState('')
@@ -136,6 +138,8 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
                         clusterName={selectedClusterName || identifierCount === 0}
                         handleModalClose={onChangeCloseKubeConfigModal}
                         isSingleClusterButton={!!selectedClusterName}
+                        isClusterDetailListLoading={isClusterDetailListLoading}
+                        identifierMap={identifierMap}
                     />
                 )}
             </div>

src/components/ClusterNodes/ClusterList/types.ts

@@ -16,14 +16,15 @@
 
 import { MutableRefObject } from 'react'
 
-import { ClusterDetail } from '@devtron-labs/devtron-fe-common-lib'
+import { BulkSelectionIdentifiersType, ClusterDetail } from '@devtron-labs/devtron-fe-common-lib'
 
 export interface ClusterViewType {
     clusterOptions: ClusterDetail[]
     clusterListLoader: boolean
     initialLoading: boolean
     refreshData: () => void
     parentRef: MutableRefObject<HTMLDivElement>
+    isClusterDetailListLoading: boolean
 }
 
 export interface ClusterListTypes {
@@ -39,4 +40,5 @@ export interface ClusterListRowTypes extends Omit<ClusterListTypes, 'filteredLis
 
 export interface ClusterSelectionBodyTypes extends ClusterViewType {
     filteredList: ClusterDetail[]
+    identifierMap: BulkSelectionIdentifiersType<ClusterDetail>
 }

src/components/ResourceBrowser/ResourceBrowser.tsx

@@ -39,7 +39,9 @@ const ResourceBrowser: React.FC = () => {
     const [detailClusterListLoading, detailClusterList, , reloadDetailClusterList] = useAsync(() =>
         getClusterListing(false, abortControllerRef),
     )
-    const [initialLoading, clusterListMinData, error] = useAsync(() => getClusterListing(true, abortControllerRef))
+    const [initialLoading, clusterListMinData, error, reloadMinClusterListing] = useAsync(() =>
+        getClusterListing(true, abortControllerRef),
+    )
 
     useEffect(
         () => () => {
@@ -53,7 +55,7 @@ const ResourceBrowser: React.FC = () => {
         [detailClusterList, clusterListMinData],
     )
 
-    const filteredSortedCluserList = useMemo(
+    const filteredSortedClusterList = useMemo(
         () =>
             sortedClusterList.filter(
                 (option) =>
@@ -65,16 +67,17 @@ const ResourceBrowser: React.FC = () => {
 
     const renderContent = () => {
         if (error) {
-            return <ErrorScreenManager code={error.code} />
+            return <ErrorScreenManager code={error.code} reload={reloadMinClusterListing} />
         }
 
         return (
             <ClusterListView
                 parentRef={parentRef}
-                clusterOptions={filteredSortedCluserList}
+                clusterOptions={filteredSortedClusterList}
                 clusterListLoader={detailClusterListLoading}
                 initialLoading={initialLoading}
                 refreshData={reloadDetailClusterList}
+                isClusterDetailListLoading={detailClusterListLoading}
             />
         )
     }