persist last viewed cluster id in k8s dashboard (#1399)

assets/src/components/kubernetes/Cluster.tsx

@@ -20,6 +20,8 @@ import LoadingIndicator from '../utils/LoadingIndicator'
 import { GqlError } from '../utils/Alert'
 import { useProjectId } from '../contexts/ProjectsContext'
 
+import { LAST_SELECTED_CLUSTER_KEY } from './Navigation'
+
 type ClusterContextT = {
   clusters: KubernetesClusterFragment[]
   refetch?: Nullable<() => void>
@@ -101,6 +103,8 @@ export default function Cluster() {
     [data?.clusters]
   )
 
+  const hasCurrentClusterId = clusters.some(({ id }) => id === clusterId)
+
   const cluster = useMemo(
     () => clusters.find(({ id }) => id === clusterId),
     [clusterId, clusters]
@@ -125,16 +129,26 @@ export default function Cluster() {
   )
 
   useEffect(() => {
-    if (!isEmpty(clusters) && !clusterId) {
+    if (!isEmpty(clusters) && !hasCurrentClusterId) {
+      const lastSelectedClusterId = sessionStorage.getItem(
+        LAST_SELECTED_CLUSTER_KEY
+      )
+      const lastSelectedClusterExists = clusters.some(
+        ({ id }) => id === lastSelectedClusterId
+      )
       const mgmtCluster = clusters.find(({ self }) => !!self)
 
-      if (mgmtCluster) {
-        navigate(getWorkloadsAbsPath(mgmtCluster.id) + search, {
-          replace: true,
-        })
-      }
+      const redirectId = lastSelectedClusterExists
+        ? lastSelectedClusterId
+        : mgmtCluster
+        ? mgmtCluster?.id
+        : clusters[0].id
+
+      navigate(getWorkloadsAbsPath(redirectId) + search, {
+        replace: true,
+      })
     }
-  }, [clusters, navigate, search, clusterId])
+  }, [clusters, navigate, search, clusterId, hasCurrentClusterId])
 
   if (error)
     return (

assets/src/components/kubernetes/Navigation.tsx

@@ -34,6 +34,7 @@ import {
 
 export const NAMESPACE_PARAM = 'namespace'
 export const FILTER_PARAM = 'filter'
+export const LAST_SELECTED_CLUSTER_KEY = 'plural-last-selected-cluster'
 
 const directory: Directory = [
   { path: WORKLOADS_REL_PATH, label: 'Workloads' },
@@ -63,6 +64,8 @@ export default function Navigation() {
   const pageHeaderContext = useMemo(() => ({ setHeaderContent }), [])
 
   useLayoutEffect(() => {
+    if (clusterId) sessionStorage.setItem(LAST_SELECTED_CLUSTER_KEY, clusterId)
+
     const newParams = new URLSearchParams()
 
     if (!isEmpty(dataSelect.filter))
@@ -74,7 +77,7 @@ export default function Navigation() {
     if (newParams.toString() !== params.toString()) setParams(newParams)
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataSelect, pathname])
+  }, [dataSelect, pathname, clusterId])
 
   return (
     <ResponsiveLayoutPage>