frontend: ClusterNotFoundPopup: Fix to work with multi clusters

Now when there's a wrong cluster name in the URL when using
multiple clusters it also gives a cluster not found alert
message for each cluster not found.

Signed-off-by: René Dudfield <renedudfield@microsoft.com>

frontend/src/components/App/Layout.tsx

@@ -10,7 +10,7 @@ import { useDispatch } from 'react-redux';
 import { useClustersConf } from '../../lib/k8s';
 import { request } from '../../lib/k8s/apiProxy';
 import { Cluster } from '../../lib/k8s/cluster';
-import { getCluster } from '../../lib/util';
+import { getCluster, getClusterGroup } from '../../lib/util';
 import { setConfig } from '../../redux/configSlice';
 import { ConfigState } from '../../redux/configSlice';
 import { useTypedSelector } from '../../redux/reducers/reducers';
@@ -27,8 +27,8 @@ export interface LayoutProps {}
 
 const CLUSTER_FETCH_INTERVAL = 10 * 1000; // ms
 
-function ClusterNotFoundPopup() {
-  const cluster = getCluster();
+function ClusterNotFoundPopup({ cluster }: { cluster?: string }) {
+  const problemCluster = cluster || getCluster();
   const { t } = useTranslation();
 
   return (
@@ -46,7 +46,9 @@ function ClusterNotFoundPopup() {
       p={0.5}
       alignItems="center"
     >
-      <Box p={0.5}>{t(`Something went wrong with cluster {{ cluster }}`, { cluster })}</Box>
+      <Box p={0.5}>
+        {t(`Something went wrong with cluster {{ cluster }}`, { cluster: problemCluster })}
+      </Box>
       <Button variant="contained" size="small" href={window.desktopApi ? '#' : '/'}>
         {t('Choose another cluster')}
       </Button>
@@ -101,7 +103,6 @@ export default function Layout({}: LayoutProps) {
   const isFullWidth = useTypedSelector(state => state.ui.isFullWidth);
   const { t } = useTranslation();
   const allClusters = useClustersConf();
-  const clusterInURL = getCluster();
   const theme = useTheme();
 
   /** This fetches the cluster config from the backend and updates the redux store on an interval.
@@ -180,9 +181,14 @@ export default function Layout({}: LayoutProps) {
       });
   };
 
+  const urlClusters = getClusterGroup();
+  const clustersNotInURL =
+    allClusters && urlClusters.length !== 0
+      ? urlClusters.filter(clusterName => !Object.keys(allClusters).includes(clusterName))
+      : [];
   const containerProps = isFullWidth
-    ? ({ maxWidth: false, disableGutters: true } as const)
-    : ({ maxWidth: 'xl' } as const);
+  ? ({ maxWidth: false, disableGutters: true } as const)
+  : ({ maxWidth: 'xl' } as const);
 
   return (
     <>
@@ -208,13 +214,9 @@ export default function Layout({}: LayoutProps) {
         <TopBar />
         <Sidebar />
         <Main id="main" sx={{ flexGrow: 1, marginLeft: 'initial' }}>
-          {allClusters &&
-          !!clusterInURL &&
-          !Object.keys(allClusters).includes(getCluster() || '') ? (
-            <ClusterNotFoundPopup />
-          ) : (
-            ''
-          )}
+          {clustersNotInURL.length > 0
+            ? clustersNotInURL.map(clusterName => <ClusterNotFoundPopup cluster={clusterName} />)
+            : ''}
           <AlertNotification />
           <Box>
             <Div sx={theme.mixins.toolbar} />