chore: code refactoring

shivani170 · shivani170 · commit 688c2cefdbee · 2025-04-14T02:19:29.000+05:30
diff --git a/src/components/ClusterNodes/ClusterList.tsx b/src/components/ClusterNodes/ClusterList.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+
+import {
+    BulkSelection,
+    ClusterFiltersType,
+    SortableTableHeaderCell,
+    useUrlFilters,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { ClusterListRow } from './ClusterListRow'
+import { ClusterMapListSortableKeys, ClusterMapListSortableTitle } from './constants'
+import { ClusterListTypes } from './types'
+import { parseSearchParams } from './utils'
+
+export const ClusterList = ({
+    filteredList,
+    clusterListLoader,
+    showKubeConfigModal,
+    onChangeShowKubeConfigModal,
+    setSelectedClusterName,
+}: ClusterListTypes) => {
+    const { sortBy, sortOrder, handleSorting } = useUrlFilters<
+        ClusterMapListSortableKeys,
+        { clusterFilter: ClusterFiltersType }
+    >({
+        parseSearchParams,
+        initialSortKey: ClusterMapListSortableKeys.CLUSTER_NAME,
+    })
+
+    const handleCellSorting = (cellToSort: ClusterMapListSortableKeys) => () => {
+        handleSorting(cellToSort)
+    }
+
+    return (
+        <div data-testid="cluster-list-container" className="flexbox-col flex-grow-1">
+            <div className="cluster-list-row fw-6 cn-7 fs-12 dc__border-bottom pt-8 pb-8 pr-20 pl-20 dc__uppercase bg__primary dc__position-sticky dc__top-0 dc__zi-3">
+                {Object.entries(ClusterMapListSortableKeys).map(([cellName, cellKey]) => (
+                    <React.Fragment key={cellName}>
+                        {cellKey === ClusterMapListSortableKeys.CLUSTER_NAME && (
+                            <BulkSelection showPagination={false} />
+                        )}
+                        <SortableTableHeaderCell
+                            key={cellName}
+                            title={ClusterMapListSortableTitle[cellName]}
+                            isSorted={sortBy === cellKey}
+                            sortOrder={sortOrder}
+                            isSortable
+                            disabled={false}
+                            triggerSorting={handleCellSorting(cellKey)}
+                        />
+                    </React.Fragment>
+                ))}
+            </div>
+            {filteredList.map((clusterData) => (
+                <ClusterListRow
+                    clusterData={clusterData}
+                    clusterListLoader={clusterListLoader}
+                    showKubeConfigModal={showKubeConfigModal}
+                    onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
+                    setSelectedClusterName={setSelectedClusterName}
+                />
+            ))}
+        </div>
+    )
+}
diff --git a/src/components/ClusterNodes/ClusterListRow.tsx b/src/components/ClusterNodes/ClusterListRow.tsx
@@ -28,30 +28,26 @@ import { ClusterMapInitialStatus } from './ClusterMapInitialStatus'
 import { CLUSTER_PROD_TYPE } from './constants'
 import { ClusterListRowTypes } from './types'
 
+const CompareClusterButton = importComponentFromFELibrary('CompareClusterButton', null, 'function')
+const ClusterStatusCell = importComponentFromFELibrary('ClusterStatus', null, 'function')
 const KubeConfigButton = importComponentFromFELibrary('KubeConfigButton', null, 'function')
 
-export const ClusterListRow = ({ clusterData, index, clusterListLoader }: ClusterListRowTypes) => {
-    const ClusterStatusCell = importComponentFromFELibrary('ClusterStatus', null, 'function')
-    const CompareClusterButton = importComponentFromFELibrary('CompareClusterButton', null, 'function')
-
+export const ClusterListRow = ({
+    clusterData,
+    clusterListLoader,
+    onChangeShowKubeConfigModal,
+    setSelectedClusterName,
+}: ClusterListRowTypes) => {
     const {
         selectedIdentifiers: bulkSelectionState,
-        isBulkSelectionApplied,
         handleBulkSelection,
         getSelectedIdentifiersCount,
     } = useBulkSelection<BulkSelectionIdentifiersType<ClusterDetail>>()
     const errorCount = clusterData.nodeErrors ? Object.keys(clusterData.nodeErrors).length : 0
 
     const handleSelection = () => {
         const { name } = clusterData
-        if (isBulkSelectionApplied) {
-            handleBulkSelection({
-                action: BulkSelectionEvents.CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION,
-                data: {
-                    identifierIds: [name],
-                },
-            })
-        } else if (bulkSelectionState[name]) {
+        if (bulkSelectionState[name]) {
             handleBulkSelection({
                 action: BulkSelectionEvents.CLEAR_IDENTIFIERS,
                 data: {
@@ -69,10 +65,9 @@ export const ClusterListRow = ({ clusterData, index, clusterListLoader }: Cluste
                 },
             })
         }
+        setSelectedClusterName('')
     }
 
-    const terminalURL = `${URLS.RESOURCE_BROWSER}/${clusterData.id}/all}/${AppDetailsTabs.terminal}/${K8S_EMPTY_GROUP}`
-
     const hideDataOnLoad = (value) => {
         if (clusterListLoader) {
             return null
@@ -87,7 +82,7 @@ export const ClusterListRow = ({ clusterData, index, clusterListLoader }: Cluste
 
         return <ClusterMapInitialStatus errorInNodeListing={errorInNodeListing} />
     }
-    const isIdentifierSelected = !!bulkSelectionState[clusterData.name] || isBulkSelectionApplied
+    const isIdentifierSelected = !!bulkSelectionState[clusterData.name]
 
     return (
         <div
@@ -99,22 +94,21 @@ export const ClusterListRow = ({ clusterData, index, clusterListLoader }: Cluste
                 className={
                     isIdentifierSelected || getSelectedIdentifiersCount() > 0
                         ? 'dc__visible'
-                        : 'dc__visible-hover--child flexbox'
+                        : 'dc__visible-hover--child flex left'
                 }
             >
                 <Checkbox
                     isChecked={isIdentifierSelected}
                     onChange={handleSelection}
                     rootClassName="icon-dim-20 m-0"
                     dataTestId={`activate-${clusterData.name}`}
-                    tabIndex={index - 1}
                     value={CHECKBOX_VALUE.CHECKED}
                 />
             </div>
 
             {!isIdentifierSelected && getSelectedIdentifiersCount() === 0 && (
                 <div className="dc__visible-hover--hide-child flex left">
-                    <Icon name="ic-bg-cluster" color={null} size={20} />
+                    <Icon name="ic-bg-cluster" color={null} size={24} />
                 </div>
             )}
             <div data-testid={`cluster-row-${clusterData.name}`} className="flex left dc__overflow-hidden">
@@ -137,14 +131,20 @@ export const ClusterListRow = ({ clusterData, index, clusterListLoader }: Cluste
                                 variant={ButtonVariantType.borderLess}
                                 component={ButtonComponentType.link}
                                 linkProps={{
-                                    to: terminalURL,
+                                    to: `${URLS.RESOURCE_BROWSER}/${clusterData.id}/${ALL_NAMESPACE_OPTION.value}/${AppDetailsTabs.terminal}/${K8S_EMPTY_GROUP}`,
                                 }}
                             />
                         )}
                         {CompareClusterButton && clusterData.status !== ClusterStatusType.CONNECTION_FAILED && (
                             <CompareClusterButton sourceClusterId={clusterData.id} isIconButton />
                         )}
-                        {KubeConfigButton && <KubeConfigButton clusterName={clusterData.name} />}
+                        {KubeConfigButton && (
+                            <KubeConfigButton
+                                onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
+                                clusterName={clusterData.name}
+                                setSelectedClusterName={setSelectedClusterName}
+                            />
+                        )}
                     </div>
                 </div>
             </div>
diff --git a/src/components/ClusterNodes/ClusterOverview.tsx b/src/components/ClusterNodes/ClusterOverview.tsx
@@ -26,6 +26,7 @@ import {
     getUrlWithSearchParams,
     showError,
     ClusterCapacityType,
+    Icon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import {
     ClusterErrorType,
@@ -412,7 +413,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
             <aside className="flexbox-col dc__gap-16 w-300 dc__no-shrink">
                 <div className="flexbox-col dc__gap-12">
                     <div>
-                        <ClusterOverviewIcon className="icon-dim-48" />
+                        <Icon name='ic-bg-cluster' size={48} color={null} />
                     </div>
                     <div className="fs-16 fw-7 lh-24 cn-9 font-merriweather" data-testid="clusterOveviewName">
                         {clusterDetails?.clusterName}
diff --git a/src/components/ClusterNodes/ClusterSelectionList.tsx b/src/components/ClusterNodes/ClusterSelectionList.tsx
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import dayjs, { Dayjs } from 'dayjs'
 
 import {
-    BulkSelection,
     BulkSelectionEvents,
     BulkSelectionIdentifiersType,
     BulkSelectionProvider,
@@ -27,7 +26,6 @@ import {
     GenericEmptyState,
     SearchBar,
     SelectAllDialogStatus,
-    SortableTableHeaderCell,
     useBulkSelection,
     useUrlFilters,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -38,10 +36,10 @@ import Timer from '@Components/common/DynamicTabs/DynamicTabs.timer'
 import { AddClusterButton } from '@Components/ResourceBrowser/PageHeader.buttons'
 
 import { ClusterSelectionType } from '../ResourceBrowser/Types'
-import { ClusterListRow } from './ClusterListRow'
+import { ClusterList } from './ClusterList'
 import ClusterNodeEmptyState from './ClusterNodeEmptyStates'
-import { ClusterMapListSortableKeys, ClusterMapListSortableTitle, ClusterStatusByFilter } from './constants'
-import { getSortedClusterList } from './utils'
+import { ClusterMapListSortableKeys, ClusterStatusByFilter } from './constants'
+import { getSortedClusterList, parseSearchParams } from './utils'
 
 import './clusterNodes.scss'
 
@@ -52,10 +50,7 @@ const ClusterBulkSelectionActionWidget = importComponentFromFELibrary(
     null,
     'function',
 )
-
-const parseSearchParams = (searchParams: URLSearchParams) => ({
-    clusterFilter: (searchParams.get('clusterFilter') as ClusterFiltersType) || ClusterFiltersType.ALL_CLUSTERS,
-})
+const KubeConfigModal = importComponentFromFELibrary('KubeConfigModal', null, 'function')
 
 const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
     clusterOptions,
@@ -65,34 +60,18 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
     parentRef,
 }) => {
     const [lastSyncTime, setLastSyncTime] = useState<Dayjs>(dayjs())
+    const [showKubeConfigModal, setKubeConfigModal] = useState(false)
+    const [selectedClusterName, setSelectedClusterName] = useState('')
 
-    const {
-        searchKey,
-        clusterFilter,
-        updateSearchParams,
-        handleSearch,
-        clearFilters,
-        sortBy,
-        sortOrder,
-        handleSorting,
-    } = useUrlFilters<ClusterMapListSortableKeys, { clusterFilter: ClusterFiltersType }>({
-        parseSearchParams,
-        initialSortKey: ClusterMapListSortableKeys.CLUSTER_NAME,
-    })
+    const { searchKey, clusterFilter, updateSearchParams, handleSearch, clearFilters, sortBy, sortOrder } =
+        useUrlFilters<ClusterMapListSortableKeys, { clusterFilter: ClusterFiltersType }>({
+            parseSearchParams,
+            initialSortKey: ClusterMapListSortableKeys.CLUSTER_NAME,
+        })
 
-    const { handleBulkSelection, setIdentifiers, isBulkSelectionApplied, getSelectedIdentifiersCount } =
+    const { handleBulkSelection, isBulkSelectionApplied, getSelectedIdentifiersCount } =
         useBulkSelection<BulkSelectionIdentifiersType<ClusterDetail>>()
 
-    useEffect(() => {
-        if (clusterOptions.length) {
-            const clusterIdentifier: BulkSelectionIdentifiersType<ClusterDetail> = {}
-            clusterOptions.forEach((cluster) => {
-                clusterIdentifier[cluster.name] = cluster
-            })
-            setIdentifiers(clusterIdentifier)
-        }
-    }, [clusterOptions])
-
     const filteredList: ClusterDetail[] = useMemo(() => {
         const loweredSearchKey = searchKey.toLowerCase()
         const updatedClusterOptions = [...clusterOptions]
@@ -141,11 +120,15 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
         )
     }
 
-    const handleCellSorting = (cellToSort: ClusterMapListSortableKeys) => () => {
-        handleSorting(cellToSort)
+    const onChangeShowKubeConfigModal = () => {
+        setKubeConfigModal(true)
     }
 
-    const renderClusterListContent = () => (
+    const onChangeCloseKubeConfigModal = () => {
+        setKubeConfigModal(false)
+    }
+
+    const renderClusterList = () => (
         <div className="cluster-list-main-container flex-grow-1 flexbox-col bg__primary dc__overflow-auto">
             <div className="flexbox dc__content-space pl-20 pr-20 pt-16 pb-16 dc__zi-4">
                 <div className="flex dc__gap-12">
@@ -198,29 +181,13 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
                     <ClusterNodeEmptyState actionHandler={clearFilters} />
                 </div>
             ) : (
-                <div data-testid="cluster-list-container" className="flexbox-col flex-grow-1">
-                    <div className="cluster-list-row fw-6 cn-7 fs-12 dc__border-bottom pt-8 pb-8 pr-20 pl-20 dc__uppercase bg__primary dc__position-sticky dc__top-0 dc__zi-3">
-                        {Object.entries(ClusterMapListSortableKeys).map(([cellName, cellKey]) => (
-                            <>
-                                {cellKey === ClusterMapListSortableKeys.CLUSTER_NAME && (
-                                    <BulkSelection showPagination={false} />
-                                )}
-                                <SortableTableHeaderCell
-                                    key={cellName}
-                                    title={ClusterMapListSortableTitle[cellName]}
-                                    isSorted={sortBy === cellKey}
-                                    sortOrder={sortOrder}
-                                    isSortable
-                                    disabled={false}
-                                    triggerSorting={handleCellSorting(cellKey)}
-                                />
-                            </>
-                        ))}
-                    </div>
-                    {filteredList.map((clusterData, index) => (
-                        <ClusterListRow clusterData={clusterData} index={index} clusterListLoader={clusterListLoader} />
-                    ))}
-                </div>
+                <ClusterList
+                    filteredList={filteredList}
+                    clusterListLoader={clusterListLoader}
+                    setSelectedClusterName={setSelectedClusterName}
+                    showKubeConfigModal={showKubeConfigModal}
+                    onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
+                />
             )}
         </div>
     )
@@ -232,6 +199,7 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
                     parentRef={parentRef}
                     count={isBulkSelectionApplied ? clusterOptions?.length ?? 0 : getSelectedIdentifiersCount()}
                     handleClearBulkSelection={handleClearBulkSelection}
+                    onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
                 />
             )
         }
@@ -241,7 +209,14 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
     return (
         <div ref={parentRef} className="flexbox-col flex-grow-1">
             {renderClusterBulkSelection()}
-            {renderClusterListContent()}
+            {renderClusterList()}
+            {showKubeConfigModal && KubeConfigModal && (
+                <KubeConfigModal
+                    clusterName={selectedClusterName || getSelectedIdentifiersCount() === 0}
+                    handleModalClose={onChangeCloseKubeConfigModal}
+                    isSingleClusterButton={!!selectedClusterName}
+                />
+            )}
         </div>
     )
 }
@@ -257,10 +232,12 @@ const BaseClusterList = (props: ClusterSelectionType) => {
         [clusterOptions],
     )
 
+    const getSelectAllDialogStatus = () => SelectAllDialogStatus.CLOSED
+
     return (
         <BulkSelectionProvider<BulkSelectionIdentifiersType<ClusterDetail>>
             identifiers={allOnThisPageIdentifiers}
-            getSelectAllDialogStatus={() => SelectAllDialogStatus.CLOSED}
+            getSelectAllDialogStatus={getSelectAllDialogStatus}
         >
             <ClusterSelectionList {...props} />
         </BulkSelectionProvider>
diff --git a/src/components/ClusterNodes/types.ts b/src/components/ClusterNodes/types.ts
@@ -294,8 +294,13 @@ export interface ClusterMapInitialStatusType {
     errorInNodeListing: string
 }
 
-export interface ClusterListRowTypes {
-    clusterData: ClusterDetail
-    index: number
+export interface ClusterListTypes {
+    filteredList: ClusterDetail[]
     clusterListLoader: boolean
+    showKubeConfigModal: boolean
+    onChangeShowKubeConfigModal: () => void
+    setSelectedClusterName: React.Dispatch<React.SetStateAction<string>>
+}
+export interface ClusterListRowTypes extends Omit<ClusterListTypes, 'filteredList'> {
+    clusterData: ClusterDetail
 }
diff --git a/src/components/ClusterNodes/utils.tsx b/src/components/ClusterNodes/utils.tsx
