Add cluster in url - Newest cleaned up code

frontend/packages/console-app/src/components/detect-cluster/cluster.ts

@@ -2,10 +2,18 @@ import * as React from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useDispatch } from 'react-redux';
-import { setActiveCluster } from '@console/internal/actions/ui';
+import { useLocation } from 'react-router-dom';
+import isMultiClusterEnabled from '@console/app/src/utils/isMultiClusterEnabled';
+import { setActiveCluster, formatNamespaceRoute } from '@console/internal/actions/ui';
+import { getCluster } from '@console/internal/components/utils/link';
+import { history } from '@console/internal/components/utils/router';
+// import { useActiveNamespace } from '@console/shared';
+import store from '@console/internal/redux';
 import { LAST_CLUSTER_USER_SETTINGS_KEY } from '@console/shared/src/constants';
 import { useUserSettings } from '@console/shared/src/hooks/useUserSettings';
 
+export const multiClusterRoutePrefixes = ['/k8s/all-namespaces', '/k8s/cluster', '/k8s/ns'];
+
 type ClusterContextType = {
   cluster?: string;
   setCluster?: (cluster: string) => void;
@@ -28,14 +36,41 @@ export const useValuesForClusterContext = () => {
     [dispatch, setLastCluster],
   );
 
+  // const [activeNamespace] = useActiveNamespace();
+  //  const activeNamespace = useSelector(({ UI }) => UI.get('activeNamespace'));
+
+  const urlCluster = getCluster(useLocation().pathname);
   React.useEffect(() => {
-    // TODO: Detect cluster from URL.
-    if (lastClusterLoaded && lastCluster) {
+    if (urlCluster) {
+      setLastCluster(urlCluster);
+      dispatch(setActiveCluster(urlCluster));
+    } else if (lastClusterLoaded && lastCluster) {
       dispatch(setActiveCluster(lastCluster));
     }
-    // Only run this hook after last cluster is loaded.
+
+    if (
+      isMultiClusterEnabled() &&
+      lastClusterLoaded &&
+      lastCluster &&
+      !urlCluster &&
+      multiClusterRoutePrefixes.some((pattern) => window.location.pathname.startsWith(pattern))
+    ) {
+      const activeNamespace = store.getState().UI.get('activeNamespace');
+      const newPath = formatNamespaceRoute(
+        activeNamespace,
+        window.location.pathname,
+        window.location,
+        false,
+        lastCluster,
+      );
+
+      if (newPath !== window.location.pathname) {
+        history.pushPath(newPath);
+      }
+    }
+    // Only run this hook after last cluster is loaded or window path changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastClusterLoaded]);
+  }, [lastClusterLoaded, urlCluster, window.location.pathname]);
 
   return {
     cluster: lastCluster,

frontend/packages/console-shared/src/utils/__tests__/user-settings.spec.ts

@@ -40,7 +40,10 @@ describe('createConfigMap', () => {
 
     expect(actual).toEqual(configMap);
     expect(coFetchMock).toHaveBeenCalledTimes(1);
-    expect(coFetchMock).lastCalledWith('/api/console/user-settings', { method: 'POST' });
+    expect(coFetchMock).lastCalledWith('/api/console/user-settings', {
+      headers: { 'X-Cluster': 'local-cluster' },
+      method: 'POST',
+    });
   });
 });
 
@@ -61,6 +64,7 @@ describe('updateConfigMap', () => {
         headers: {
           Accept: 'application/json',
           'Content-Type': 'application/merge-patch+json;charset=UTF-8',
+          'X-Cluster': 'local-cluster',
         },
         body: '{"data":{"key":"value"}}',
       },

frontend/public/actions/ui.ts

@@ -10,6 +10,7 @@ import {
   ALL_NAMESPACES_KEY,
   LAST_NAMESPACE_NAME_LOCAL_STORAGE_KEY,
 } from '@console/shared/src/constants';
+// import { multiClusterRoutePrefixes } from '@console/app/src/components/detect-cluster/cluster'
 import { K8sResourceKind, PodKind, NodeKind } from '../module/k8s';
 import { allModels } from '../module/k8s/k8s-models';
 import { detectFeatures, clearSSARFlags } from './features';
@@ -152,10 +153,23 @@ export const formatNamespaceRoute = (
   originalPath,
   location?,
   forceList?: boolean,
+  activeCluster?: string,
 ) => {
   let path = originalPath.substr(window.SERVER_FLAGS.basePath.length);
 
   let parts = path.split('/').filter((p) => p);
+
+  if (parts[0] === 'cluster') {
+    // The url pattern that includes the cluster name starts  with /cluster/:clusterName
+    parts.splice(0, 2);
+  }
+
+  const multiClusterRoutePrefixes = ['/k8s/all-namespaces', '/k8s/cluster', '/k8s/ns'];
+  const clusterPathPart =
+    activeCluster && multiClusterRoutePrefixes.includes(`/${parts[0]}/${parts[1]}`)
+      ? `/cluster/${activeCluster}`
+      : '';
+
   const prefix = parts.shift();
 
   let previousNS;
@@ -168,7 +182,7 @@ export const formatNamespaceRoute = (
   }
 
   if (!previousNS) {
-    return originalPath;
+    return `${clusterPathPart}${originalPath}`;
   }
 
   if (
@@ -193,7 +207,7 @@ export const formatNamespaceRoute = (
     path += `${location.search}${location.hash}`;
   }
 
-  return path;
+  return `${clusterPathPart}${path}`;
 };
 
 export const setCurrentLocation = (location: string) =>
@@ -211,6 +225,7 @@ export const setActiveNamespace = (namespace: string = '') => {
   // make it noop when new active namespace is the same
   // otherwise users will get page refresh and cry about
   // broken direct links and bookmarks
+
   if (namespace !== getActiveNamespace()) {
     const oldPath = window.location.pathname;
     const newPath = formatNamespaceRoute(namespace, oldPath, window.location);