From c19ca091a87cb2685525d72fac77689a4ce831c7 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Thu, 19 Dec 2024 13:10:11 +0530
Subject: [PATCH] feat: handle only one expanded row at a time

---
 .../InfraMonitoringK8s.styles.scss                   |  8 ++++----
 .../InfraMonitoringK8s/Pods/K8sPodLists.tsx          | 12 ++++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
index 7ad0d28a80..96b1c7b3be 100644
--- a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
+++ b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
@@ -148,8 +148,8 @@
 			gap: 4px;
 			flex-wrap: wrap;
 
-			min-width: 180px;
-			max-width: 180px;
+			min-width: 120px;
+			max-width: 120px;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -174,8 +174,8 @@
 			gap: 4px;
 			flex-wrap: wrap;
 
-			min-width: 180px;
-			max-width: 180px;
+			min-width: 120px;
+			max-width: 120px;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
diff --git a/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx b/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx
index 5f1a660f6c..014febe397 100644
--- a/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx
@@ -68,6 +68,8 @@ function K8sPodsList({
 		null,
 	);
 
+	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
+
 	const [groupByOptions, setGroupByOptions] = useState<
 		{ value: string; label: string }[]
 	>([]);
@@ -284,6 +286,8 @@ function K8sPodsList({
 			}
 
 			setGroupBy(groupBy);
+
+			setExpandedRowKeys([]);
 		},
 		[groupByFiltersData],
 	);
@@ -299,6 +303,12 @@ function K8sPodsList({
 
 	const handleGroupByRowClick = (record: K8sPodsRowData): void => {
 		setSelectedRowData(record);
+
+		if (expandedRowKeys.includes(record.key)) {
+			setExpandedRowKeys(expandedRowKeys.filter((key) => key !== record.key));
+		} else {
+			setExpandedRowKeys([record.key]);
+		}
 	};
 
 	useEffect(() => {
@@ -351,6 +361,7 @@ function K8sPodsList({
 
 		updateLocalStorage('k8sPodsAddedColumns', addedColumnIDs);
 	}, [addedColumns]);
+
 	useEffect(() => {
 		if (groupByFiltersData?.payload) {
 			setGroupByOptions(
@@ -533,6 +544,7 @@ function K8sPodsList({
 					expandable={{
 						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
 						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
 					}}
 				/>
 			)}