Merge pull request #2681 from devtron-labs/fix/kubeconfig-action-widget

fix: bulk selection action widget position in KubeConfig Bulk selection

Author: Elessar1802

src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef, useState } from 'react'
+import React, { useState } from 'react'
 
 import {
     BulkSelectionEvents,
@@ -50,9 +50,8 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
     clusterOptions,
     clusterListLoader,
     filteredList,
+    parentRef,
 }) => {
-    const parentRef = useRef<HTMLDivElement>(null)
-
     const [showKubeConfigModal, setShowKubeConfigModal] = useState(false)
     const [selectedClusterName, setSelectedClusterName] = useState('')
 
@@ -133,17 +132,19 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
     }
 
     return (
-        <div ref={parentRef} className="flexbox-col flex-grow-1">
+        <>
             {renderClusterBulkSelection()}
-            {renderClusterList()}
-            {showKubeConfigModal && KubeConfigModal && (
-                <KubeConfigModal
-                    clusterName={selectedClusterName || identifierCount === 0}
-                    handleModalClose={onChangeCloseKubeConfigModal}
-                    isSingleClusterButton={!!selectedClusterName}
-                />
-            )}
-        </div>
+            <div className="flexbox-col flex-grow-1">
+                {renderClusterList()}
+                {showKubeConfigModal && KubeConfigModal && (
+                    <KubeConfigModal
+                        clusterName={selectedClusterName || identifierCount === 0}
+                        handleModalClose={onChangeCloseKubeConfigModal}
+                        isSingleClusterButton={!!selectedClusterName}
+                    />
+                )}
+            </div>
+        </>
     )
 }
 

src/components/ClusterNodes/ClusterList/types.ts

@@ -1,10 +1,13 @@
+import { MutableRefObject } from 'react'
+
 import { ClusterDetail } from '@devtron-labs/devtron-fe-common-lib'
 
 export interface ClusterViewType {
     clusterOptions: ClusterDetail[]
     clusterListLoader: boolean
     initialLoading: boolean
     refreshData: () => void
+    parentRef: MutableRefObject<HTMLDivElement>
 }
 
 export interface ClusterListTypes {

src/components/ResourceBrowser/ResourceBrowser.tsx

@@ -34,6 +34,7 @@ import { sortObjectArrayAlphabetically } from '../common'
 import { AddClusterButton } from './PageHeader.buttons'
 
 const ResourceBrowser: React.FC = () => {
+    const parentRef = useRef<HTMLDivElement>(null)
     const abortControllerRef = useRef<AbortController>(new AbortController())
 
     const [detailClusterListLoading, detailClusterList, , reloadDetailClusterList] = useAsync(async () => {
@@ -72,6 +73,7 @@ const ResourceBrowser: React.FC = () => {
 
         return (
             <ClusterListView
+                parentRef={parentRef}
                 clusterOptions={sortedClusterList}
                 clusterListLoader={detailClusterListLoading}
                 initialLoading={initialLoading}
@@ -85,7 +87,7 @@ const ResourceBrowser: React.FC = () => {
     }
 
     return (
-        <div className="flexbox-col h-100 bg__primary">
+        <div className="flexbox-col h-100 bg__primary" ref={parentRef}>
             <PageHeader
                 isBreadcrumbs={false}
                 headerName="Kubernetes Resource Browser"