From a67c584db7ab0784c45df91dcd806c0715322bbc Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Wed, 30 Oct 2024 14:35:20 +0530
Subject: [PATCH] feat: ClusterSelectionList - clusterFilter move from state to
 url

---
 .../ClusterNodes/ClusterSelectionList.tsx         | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/ClusterNodes/ClusterSelectionList.tsx b/src/components/ClusterNodes/ClusterSelectionList.tsx
index bab62b9d11..6751a68519 100644
--- a/src/components/ClusterNodes/ClusterSelectionList.tsx
+++ b/src/components/ClusterNodes/ClusterSelectionList.tsx
@@ -47,6 +47,10 @@ const getClusterMapData = (data: ClusterDetail[]): ClusterTreeMapData['data'] =>
         value: nodeCount ?? 0,
     }))
 
+const parseSearchParams = (searchParams: URLSearchParams) => ({
+    clusterFilter: (searchParams.get('clusterFilter') as ClusterFiltersType) || ClusterFiltersType.ALL_CLUSTERS,
+})
+
 const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
     clusterOptions,
     isSuperAdmin,
@@ -57,15 +61,18 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
     const location = useLocation()
     const history = useHistory()
     const [lastSyncTime, setLastSyncTime] = useState<Dayjs>(dayjs())
-    const [clusterFilter, setClusterFilter] = useState<ClusterFiltersType>(ClusterFiltersType.ALL_CLUSTERS)
 
-    const { searchKey, handleSearch, clearFilters } = useUrlFilters()
+    const { searchKey, clusterFilter, updateSearchParams, handleSearch, clearFilters } = useUrlFilters<
+        void,
+        { clusterFilter: ClusterFiltersType }
+    >({ parseSearchParams })
 
     const filteredList = useMemo(() => {
         const loweredSearchKey = searchKey.toLowerCase()
         return clusterOptions.filter((option) => {
             const filterCondition =
                 clusterFilter === ClusterFiltersType.ALL_CLUSTERS ||
+                !option.status ||
                 option.status === ClusterStatusByFilter[clusterFilter]
 
             return (!searchKey || option.name.toLowerCase().includes(loweredSearchKey)) && filterCondition
@@ -122,6 +129,10 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
         setLastSyncTime(dayjs())
     }
 
+    const setClusterFilter = (_clusterFilter: ClusterFiltersType) => {
+        updateSearchParams({ clusterFilter: _clusterFilter })
+    }
+
     const getOpenTerminalHandler = (clusterData) => () =>
         history.push(`${location.pathname}/${clusterData.id}/all/${AppDetailsTabs.terminal}/${K8S_EMPTY_GROUP}`)