Merge pull request #3058 from devtron-labs/fix/duplicate-resource-list

feat: duplicate resource list

Author: shivani170

src/components/ClusterNodes/ClusterList/ClusterList.tsx

@@ -67,7 +67,7 @@ const ClusterList = ({
             </div>
             {filteredList.map((clusterData) => (
                 <ClusterListRow
-                    key={clusterData.id ?? clusterData.installationId}
+                    key={`${clusterData.name}-${clusterData.id ?? clusterData.installationId}`}
                     clusterData={clusterData}
                     clusterListLoader={clusterListLoader}
                     showKubeConfigModal={showKubeConfigModal}

src/components/ClusterNodes/ClusterList/ClusterListRow.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useMemo } from 'react'
 import { generatePath, Link } from 'react-router-dom'
 
 import {
@@ -51,35 +52,29 @@ const ClusterListRow = ({
     onChangeShowKubeConfigModal,
     setSelectedClusterName,
 }: ClusterListRowTypes) => {
-    const { selectedIdentifiers: bulkSelectionState, getSelectedIdentifiersCount } =
+    const { selectedIdentifiers, getSelectedIdentifiersCount } =
         useBulkSelection<BulkSelectionIdentifiersType<ClusterDetail>>()
-    const errorCount = clusterData.nodeErrors ? Object.keys(clusterData.nodeErrors).length : 0
     const identifierCount = getSelectedIdentifiersCount()
+    const isIdentifierSelected = Boolean(selectedIdentifiers[clusterData.name])
 
-    const hideDataOnLoad = (value) => {
-        if (clusterListLoader) {
-            return null
-        }
-        return value
-    }
-
-    const renderClusterStatus = ({ errorInNodeListing, status }: ClusterDetail) => {
-        if (!status) {
-            return null
-        }
-
-        return <ClusterStatus status={status} errorInNodeListing={errorInNodeListing} />
-    }
-
-    const isIdentifierSelected = !!bulkSelectionState[clusterData.name]
+    const errorCount = useMemo(
+        () => (clusterData.nodeErrors ? Object.keys(clusterData.nodeErrors).length : 0),
+        [clusterData.nodeErrors],
+    )
 
-    const isClusterInCreationPhase = !!clusterData.installationId && !clusterData.id
+    const isClusterInCreationPhase = Boolean(clusterData.installationId && !clusterData.id)
 
-    const clusterLinkURL = getClusterChangeRedirectionUrl(
-        isClusterInCreationPhase,
-        String(isClusterInCreationPhase ? clusterData.installationId : clusterData.id),
+    const clusterLinkURL = useMemo(
+        () =>
+            getClusterChangeRedirectionUrl(
+                isClusterInCreationPhase,
+                String(isClusterInCreationPhase ? clusterData.installationId : clusterData.id),
+            ),
+        [isClusterInCreationPhase, clusterData.installationId, clusterData.id],
     )
 
+    const hideDataOnLoad = (value) => (clusterListLoader ? null : value)
+
     const wrapWithLinkForClusterName = (children) => (
         <Link className="dc__ellipsis-right dc__no-decor" to={clusterLinkURL}>
             {children}
@@ -88,9 +83,8 @@ const ClusterListRow = ({
 
     return (
         <div
-            key={`cluster-${clusterData.id}`}
             className={`cluster-list-row fw-4 cn-9 fs-13 dc__border-bottom-n1 py-12 px-20 hover-class dc__visible-hover dc__visible-hover--parent
-                 ${clusterListLoader ? 'show-shimmer-loading dc__align-items-center' : ''}`}
+            ${clusterListLoader ? 'show-shimmer-loading dc__align-items-center' : ''}`}
         >
             {KubeConfigRowCheckbox && <KubeConfigRowCheckbox clusterData={clusterData} />}
             {!isIdentifierSelected && identifierCount === 0 && (
@@ -125,9 +119,11 @@ const ClusterListRow = ({
                                     }}
                                 />
                             )}
+
                             {CompareClusterButton && clusterData.status !== ClusterStatusType.CONNECTION_FAILED && (
                                 <CompareClusterButton sourceClusterId={clusterData.id} isIconButton />
                             )}
+
                             {KubeConfigButton && (
                                 <KubeConfigButton
                                     onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
@@ -139,8 +135,18 @@ const ClusterListRow = ({
                     </div>
                 )}
             </div>
-            <div className="child-shimmer-loading">{hideDataOnLoad(renderClusterStatus(clusterData))}</div>
-            {}
+
+            <div className="child-shimmer-loading">
+                {hideDataOnLoad(
+                    clusterData.status && (
+                        <ClusterStatus
+                            status={clusterData.status}
+                            errorInNodeListing={clusterData.errorInNodeListing}
+                        />
+                    ),
+                )}
+            </div>
+
             <div className="child-shimmer-loading">
                 {hideDataOnLoad(clusterData.isProd ? CLUSTER_PROD_TYPE.PRODUCTION : CLUSTER_PROD_TYPE.NON_PRODUCTION)}
             </div>

src/components/ClusterNodes/ClusterList/ClusterListView.tsx

@@ -74,7 +74,7 @@ const ClusterListView = (props: ClusterViewType) => {
 
             return (!searchKey || option.name.toLowerCase().includes(loweredSearchKey)) && filterCondition
         })
-    }, [searchKey, clusterOptions, `${clusterFilter}`, sortBy, sortOrder])
+    }, [searchKey, clusterOptions, clusterFilter, sortBy, sortOrder])
 
     const handleFilterKeyPress = (value: string) => {
         handleSearch(value)