address review

Author: michaeljguarino

assets/src/components/kubernetes/Cluster.tsx

@@ -39,6 +39,7 @@ import {
   getDefaultKubernetesClusterId,
   isKubernetesClusterMissing,
   LAST_SELECTED_CLUSTER_KEY,
+  selectMatchingCluster,
 } from './clusterSelection'
 import { DataSelectProvider } from './common/DataSelect'
 import { getNamespaceListLoadError } from './common/namespaceList'
@@ -138,13 +139,11 @@ export default function Cluster({
     () => mapExistingNodes(queryData?.clusters),
     [queryData?.clusters]
   )
-  const currentCluster = [data?.cluster, queryData?.cluster].find(
-    (candidate) => candidate?.id === clusterId
-  )
-  const cluster = currentCluster ?? clusters.find(({ id }) => id === clusterId)
-  // Don't unmount the dashboard while the new cluster(id:) result is in flight.
-  const clusterForContext =
-    cluster ?? (loading ? queryData?.cluster : undefined)
+  const cluster = selectMatchingCluster(clusterId, [
+    data?.cluster,
+    queryData?.cluster,
+    ...clusters,
+  ])
 
   const clusterMissing = isKubernetesClusterMissing({
     clusterId,
@@ -206,10 +205,10 @@ export default function Cluster({
       ({
         clusters,
         refetch,
-        cluster: clusterForContext,
+        cluster,
         namespaces,
       }) as ClusterContextT,
-    [clusters, refetch, clusterForContext, namespaces]
+    [clusters, refetch, cluster, namespaces]
   )
 
   const defaultClusterId = useMemo(

assets/src/components/kubernetes/clusterSelection.test.ts

@@ -3,6 +3,7 @@ import { replaceKubernetesClusterId } from '../../routes/kubernetesRoutesConsts'
 import {
   getDefaultKubernetesClusterId,
   isKubernetesClusterMissing,
+  selectMatchingCluster,
   withCurrentCluster,
 } from './clusterSelection'
 
@@ -52,6 +53,18 @@ describe('withCurrentCluster', () => {
   })
 })
 
+describe('selectMatchingCluster', () => {
+  it('never returns a cluster that does not match the route id', () => {
+    expect(
+      selectMatchingCluster('b', [{ id: 'a' }, undefined, { id: 'c' }])
+    ).toBeUndefined()
+  })
+
+  it('returns the matching cluster even when it is not first', () => {
+    expect(selectMatchingCluster('b', [{ id: 'a' }, { id: 'b' }])?.id).toBe('b')
+  })
+})
+
 describe('getDefaultKubernetesClusterId', () => {
   const clusters = [
     { id: 'worker', self: false },

assets/src/components/kubernetes/clusterSelection.ts

@@ -10,6 +10,17 @@ export function withCurrentCluster<T extends { id: string }>(
   return [current, ...clusters]
 }
 
+export function selectMatchingCluster<T extends { id: string }>(
+  clusterId: string | undefined,
+  candidates: Array<T | null | undefined>
+): T | undefined {
+  if (!clusterId) return undefined
+
+  return (
+    candidates.find((candidate) => candidate?.id === clusterId) ?? undefined
+  )
+}
+
 export function getDefaultKubernetesClusterId<
   T extends { id: string; self?: boolean | null },
 >(clusters: T[], lastSelectedClusterId: string | null): string | undefined {

assets/src/components/kubernetes/common/ResourceList.tsx

@@ -14,7 +14,7 @@ import {
   useEffect,
   useMemo,
 } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { AxiosInstance } from '../../../helpers/axios.ts'
 
 import {
@@ -88,15 +88,18 @@ export function ResourceList<
   setRefetch,
 }: ResourceListProps<TResourceList>): ReactElement<any> {
   const navigate = useNavigate()
+  const { clusterId: clusterIdParam } = useParams()
   const cluster = useCluster()
+  // Route param is the source of truth while context cluster is still resolving.
+  const requestClusterId = clusterIdParam || cluster?.id || ''
   const { filter, namespace, setNamespaced } = useDataSelect()
   const { sortBy, reactTableOptions } = useSortedTableOptions(initialSort, {
     ...tableOptions,
     meta: { cluster, ...tableOptions?.meta },
   })
 
   const options = queryOptions({
-    client: AxiosInstance(cluster?.id ?? ''),
+    client: AxiosInstance(requestClusterId),
     path: { ...(namespaced ? { namespace } : undefined), ...pathParams },
     query: {
       filterBy: `name,${filter}`,
@@ -109,7 +112,8 @@ export function ResourceList<
   const { data, isLoading, isFetching, hasNextPage, fetchNextPage, refetch } =
     useInfiniteQuery<TResourceList>({
       ...options,
-      queryKey: [...options.queryKey, 'clusterId ', cluster?.id], // Add clusterId to queryKey to refetch when cluster changes
+      queryKey: [...options.queryKey, 'clusterId ', requestClusterId], // Add clusterId to queryKey to refetch when cluster changes
+      enabled: !!requestClusterId,
       initialPageParam: DEFAULT_DATA_SELECT.page,
       getNextPageParam: (lastPage, allPages) => {
         const pages = allPages.length