chore: code refactoring

Author: shivani170

src/components/ClusterNodes/ClusterList/ClusterListView.tsx

@@ -1,16 +1,20 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
+import dayjs, { Dayjs } from 'dayjs'
 
 import {
+    BulkSelectionEvents,
     BulkSelectionIdentifiersType,
     BulkSelectionProvider,
     ClusterDetail,
     ClusterFiltersType,
     SearchBar,
     SelectAllDialogStatus,
+    useBulkSelection,
     useUrlFilters,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
+import Timer from '@Components/common/DynamicTabs/DynamicTabs.timer'
 
 import { ClusterMapListSortableKeys, ClusterStatusByFilter } from '../constants'
 import { getSortedClusterList, parseSearchParams } from '../utils'
@@ -22,14 +26,18 @@ const ClusterFilters = importComponentFromFELibrary('ClusterFilters', null, 'fun
 const getSelectAllDialogStatus = () => SelectAllDialogStatus.CLOSED
 
 const ClusterListView = (props: ClusterViewType) => {
+    const [lastSyncTime, setLastSyncTime] = useState<Dayjs>(dayjs())
+
     const { searchKey, clusterFilter, updateSearchParams, handleSearch, sortBy, sortOrder } = useUrlFilters<
         ClusterMapListSortableKeys,
         { clusterFilter: ClusterFiltersType }
     >({
         parseSearchParams,
         initialSortKey: ClusterMapListSortableKeys.CLUSTER_NAME,
     })
-    const { clusterOptions, initialLoading } = props
+    const { handleBulkSelection } = useBulkSelection<BulkSelectionIdentifiersType<ClusterDetail>>()
+
+    const { clusterOptions, initialLoading, clusterListLoader, refreshData } = props
 
     const setClusterFilter = (_clusterFilter: ClusterFiltersType) => {
         updateSearchParams({ clusterFilter: _clusterFilter })
@@ -65,24 +73,60 @@ const ClusterListView = (props: ClusterViewType) => {
         [clusterOptions],
     )
 
+    const handleClearBulkSelection = () => {
+        handleBulkSelection({
+            action: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
+        })
+    }
+
+    const handleRefresh = () => {
+        refreshData()
+        setLastSyncTime(dayjs())
+        handleClearBulkSelection()
+    }
+
     return (
         <BulkSelectionProvider<BulkSelectionIdentifiersType<ClusterDetail>>
             identifiers={allOnThisPageIdentifiers}
             getSelectAllDialogStatus={getSelectAllDialogStatus}
         >
-            <div className="flex dc__gap-12 dc__content-space">
-                <SearchBar
-                    initialSearchText={searchKey}
-                    handleEnter={handleFilterKeyPress}
-                    containerClassName="w-250-imp"
-                    inputProps={{
-                        placeholder: 'Search clusters',
-                        autoFocus: true,
-                        disabled: initialLoading,
-                    }}
-                />
-                {ClusterFilters && <ClusterFilters clusterFilter={clusterFilter} setClusterFilter={setClusterFilter} />}
+            <div className="flexbox dc__content-space pl-20 pr-20 pt-16 pb-16 dc__zi-4">
+                <div className="flex dc__gap-12">
+                    <SearchBar
+                        initialSearchText={searchKey}
+                        handleEnter={handleFilterKeyPress}
+                        containerClassName="w-250-imp"
+                        inputProps={{
+                            placeholder: 'Search clusters',
+                            autoFocus: true,
+                            disabled: initialLoading,
+                        }}
+                    />
+                    {ClusterFilters && (
+                        <ClusterFilters clusterFilter={clusterFilter} setClusterFilter={setClusterFilter} />
+                    )}
+                </div>
+                {clusterListLoader ? (
+                    <span className="dc__loading-dots mr-20">Syncing</span>
+                ) : (
+                    <div className="flex left">
+                        <span>
+                            Last refreshed&nbsp;
+                            <Timer start={lastSyncTime} />
+                            &nbsp;ago
+                        </span>
+                        <button
+                            type="button"
+                            data-testid="cluster-list-refresh-button"
+                            className="btn btn-link p-0 fw-6 cb-5 ml-5 fs-13"
+                            onClick={handleRefresh}
+                        >
+                            Refresh
+                        </button>
+                    </div>
+                )}
             </div>
+
             <ClusterSelectionBody {...props} filteredList={filteredList} />
         </BulkSelectionProvider>
     )

src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx

@@ -15,7 +15,6 @@
  */
 
 import React, { useRef, useState } from 'react'
-import dayjs, { Dayjs } from 'dayjs'
 
 import {
     BulkSelectionEvents,
@@ -29,7 +28,6 @@ import {
 
 import NoClusterEmptyState from '@Images/no-cluster-empty-state.png'
 import { importComponentFromFELibrary } from '@Components/common'
-import Timer from '@Components/common/DynamicTabs/DynamicTabs.timer'
 import { AddClusterButton } from '@Components/ResourceBrowser/PageHeader.buttons'
 
 import ClusterNodeEmptyState from '../ClusterNodeEmptyStates'
@@ -51,12 +49,10 @@ const KubeConfigModal = importComponentFromFELibrary('KubeConfigModal', null, 'f
 const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
     clusterOptions,
     clusterListLoader,
-    refreshData,
     filteredList,
 }) => {
     const parentRef = useRef<HTMLDivElement>(null)
 
-    const [lastSyncTime, setLastSyncTime] = useState<Dayjs>(dayjs())
     const [showKubeConfigModal, setShowKubeConfigModal] = useState(false)
     const [selectedClusterName, setSelectedClusterName] = useState('')
 
@@ -76,12 +72,6 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
         })
     }
 
-    const handleRefresh = () => {
-        refreshData()
-        setLastSyncTime(dayjs())
-        handleClearBulkSelection()
-    }
-
     if (!clusterOptions.length) {
         return (
             <GenericEmptyState
@@ -104,29 +94,6 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
 
     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="fs-13 flex">
-                    {clusterListLoader ? (
-                        <span className="dc__loading-dots mr-20">Syncing</span>
-                    ) : (
-                        <>
-                            <span>
-                                Last refreshed&nbsp;
-                                <Timer start={lastSyncTime} />
-                                &nbsp;ago
-                            </span>
-                            <button
-                                type="button"
-                                data-testid="cluster-list-refresh-button"
-                                className="btn btn-link p-0 fw-6 cb-5 ml-5 fs-13"
-                                onClick={handleRefresh}
-                            >
-                                Refresh
-                            </button>
-                        </>
-                    )}
-                </div>
-            </div>
             {ClusterMap && window._env_.FEATURE_CLUSTER_MAP_ENABLE && (
                 <ClusterMap
                     isLoading={clusterListLoader}