chore: checkboc logic moved to fe lib

Author: shivani170

src/components/ClusterNodes/ClusterList/ClusterList.tsx

@@ -7,11 +7,15 @@ import {
     useUrlFilters,
 } from '@devtron-labs/devtron-fe-common-lib'
 
+import { importComponentFromFELibrary } from '@Components/common'
+
 import { ClusterMapListSortableKeys, ClusterMapListSortableTitle } from '../constants'
 import { parseSearchParams } from '../utils'
 import ClusterListRow from './ClusterListRow'
 import { ClusterListTypes } from './types'
 
+const KubeConfigRowCheckbox = importComponentFromFELibrary('KubeConfigRowCheckbox', null, 'function')
+
 const ClusterList = ({
     filteredList,
     clusterListLoader,
@@ -36,7 +40,7 @@ const ClusterList = ({
             <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 && (
+                        {KubeConfigRowCheckbox && cellKey === ClusterMapListSortableKeys.CLUSTER_NAME && (
                             <BulkSelection showPagination={false} />
                         )}
                         <SortableTableHeaderCell
@@ -52,15 +56,14 @@ const ClusterList = ({
                 ))}
             </div>
             {filteredList.map((clusterData) => (
-                <React.Fragment key={clusterData.id}>
-                    <ClusterListRow
-                        clusterData={clusterData}
-                        clusterListLoader={clusterListLoader}
-                        showKubeConfigModal={showKubeConfigModal}
-                        onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
-                        setSelectedClusterName={setSelectedClusterName}
-                    />
-                </React.Fragment>
+                <ClusterListRow
+                    key={clusterData.id}
+                    clusterData={clusterData}
+                    clusterListLoader={clusterListLoader}
+                    showKubeConfigModal={showKubeConfigModal}
+                    onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
+                    setSelectedClusterName={setSelectedClusterName}
+                />
             ))}
         </div>
     )

src/components/ClusterNodes/ClusterList/ClusterListRow.tsx

@@ -2,14 +2,11 @@ import { Link } from 'react-router-dom'
 
 import {
     ALL_NAMESPACE_OPTION,
-    BulkSelectionEvents,
     BulkSelectionIdentifiersType,
     Button,
     ButtonComponentType,
     ButtonStyleType,
     ButtonVariantType,
-    Checkbox,
-    CHECKBOX_VALUE,
     ClusterDetail,
     ClusterStatusType,
     ComponentSizeType,
@@ -31,42 +28,18 @@ import { ClusterListRowTypes } from './types'
 const CompareClusterButton = importComponentFromFELibrary('CompareClusterButton', null, 'function')
 const ClusterStatusCell = importComponentFromFELibrary('ClusterStatus', null, 'function')
 const KubeConfigButton = importComponentFromFELibrary('KubeConfigButton', null, 'function')
+const KubeConfigRowCheckbox = importComponentFromFELibrary('KubeConfigRowCheckbox', null, 'function')
 
 const ClusterListRow = ({
     clusterData,
     clusterListLoader,
     onChangeShowKubeConfigModal,
     setSelectedClusterName,
 }: ClusterListRowTypes) => {
-    const {
-        selectedIdentifiers: bulkSelectionState,
-        handleBulkSelection,
-        getSelectedIdentifiersCount,
-    } = useBulkSelection<BulkSelectionIdentifiersType<ClusterDetail>>()
+    const { selectedIdentifiers: bulkSelectionState, getSelectedIdentifiersCount } =
+        useBulkSelection<BulkSelectionIdentifiersType<ClusterDetail>>()
     const errorCount = clusterData.nodeErrors ? Object.keys(clusterData.nodeErrors).length : 0
-
-    const handleSelection = () => {
-        const { name } = clusterData
-        if (bulkSelectionState[name]) {
-            handleBulkSelection({
-                action: BulkSelectionEvents.CLEAR_IDENTIFIERS,
-                data: {
-                    identifierIds: [name],
-                },
-            })
-        } else {
-            handleBulkSelection({
-                action: BulkSelectionEvents.SELECT_IDENTIFIER,
-                data: {
-                    identifierObject: {
-                        ...bulkSelectionState,
-                        [name]: clusterData,
-                    },
-                },
-            })
-        }
-        setSelectedClusterName('')
-    }
+    const identifierCount = getSelectedIdentifiersCount()
 
     const hideDataOnLoad = (value) => {
         if (clusterListLoader) {
@@ -92,22 +65,8 @@ const ClusterListRow = ({
             className={`cluster-list-row fw-4 cn-9 fs-13 dc__border-bottom-n1 pt-12 pb-12 pr-20 pl-20 hover-class dc__visible-hover dc__visible-hover--parent
                  ${clusterListLoader ? 'show-shimmer-loading dc__align-items-center' : ''}`}
         >
-            <div
-                className={
-                    isIdentifierSelected || getSelectedIdentifiersCount() > 0
-                        ? 'dc__visible'
-                        : 'dc__visible-hover--child flex left'
-                }
-            >
-                <Checkbox
-                    isChecked={isIdentifierSelected}
-                    onChange={handleSelection}
-                    rootClassName="icon-dim-20 m-0"
-                    dataTestId={`activate-${clusterData.name}`}
-                    value={CHECKBOX_VALUE.CHECKED}
-                />
-            </div>
-            {!isIdentifierSelected && getSelectedIdentifiersCount() === 0 && (
+            {KubeConfigRowCheckbox && <KubeConfigRowCheckbox clusterData={clusterData} />}
+            {!isIdentifierSelected && identifierCount === 0 && (
                 <div className="dc__visible-hover--hide-child flex left">
                     <Icon name="ic-bg-cluster" color={null} size={24} />
                 </div>

src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx

@@ -65,9 +65,11 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
         initialSortKey: ClusterMapListSortableKeys.CLUSTER_NAME,
     })
 
-    const { handleBulkSelection, isBulkSelectionApplied, getSelectedIdentifiersCount } =
+    const { handleBulkSelection, getSelectedIdentifiersCount } =
         useBulkSelection<BulkSelectionIdentifiersType<ClusterDetail>>()
 
+    const identifierCount = getSelectedIdentifiersCount()
+
     const handleClearBulkSelection = () => {
         handleBulkSelection({
             action: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
@@ -149,11 +151,11 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
     )
 
     const renderClusterBulkSelection = () => {
-        if (getSelectedIdentifiersCount() > 0 || isBulkSelectionApplied) {
+        if (identifierCount > 0) {
             return (
                 <ClusterBulkSelectionActionWidget
                     parentRef={parentRef}
-                    count={isBulkSelectionApplied ? clusterOptions?.length ?? 0 : getSelectedIdentifiersCount()}
+                    count={identifierCount}
                     handleClearBulkSelection={handleClearBulkSelection}
                     onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
                 />
@@ -168,7 +170,7 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
             {renderClusterList()}
             {showKubeConfigModal && KubeConfigModal && (
                 <KubeConfigModal
-                    clusterName={selectedClusterName || getSelectedIdentifiersCount() === 0}
+                    clusterName={selectedClusterName || identifierCount === 0}
                     handleModalClose={onChangeCloseKubeConfigModal}
                     isSingleClusterButton={!!selectedClusterName}
                 />