feat(ui): add multi-cluster user logout

- Visual support for displaying authenticated users per cluster in TopBar.
- Implemented individual cluster logout functionality.
- Added SelfSubjectReview API support for fetching user info.
- Fixed multi-cluster selection state bug in useSelectedClusters hook.
- Improved logout UX to persist view on remaining clusters.

Fixes #4082

Signed-off-by: alokdangre <[email protected]>

Author: alokdangre

frontend/src/components/App/TopBar.tsx

@@ -17,24 +17,26 @@
 import { Icon } from '@iconify/react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useTheme } from '@mui/material/styles';
 import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQueries, useQueryClient } from '@tanstack/react-query';
 import { has } from 'lodash';
 import React, { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { getProductName, getVersion } from '../../helpers/getProductInfo';
 import { logout } from '../../lib/auth';
-import { useCluster, useClustersConf } from '../../lib/k8s';
-import { clusterRequest } from '../../lib/k8s/api/v1/clusterRequests';
+import { useCluster, useClustersConf, useSelectedClusters } from '../../lib/k8s';
+import { ClusterUserInfo, getClusterUserInfo } from '../../lib/k8s/api/v1/clusterApi';
 import { createRouteURL } from '../../lib/router/createRouteURL';
 import {
   AppBarAction,
@@ -86,70 +88,48 @@ export default function TopBar({}: TopBarProps) {
 
   const clustersConfig = useClustersConf();
   const cluster = useCluster();
+  const selectedClusters = useSelectedClusters();
   const history = useHistory();
   const { appBarActions, appBarActionsProcessors } = useAppBarActionsProcessed();
   const queryClient = useQueryClient();
-  const clusterName = cluster ?? undefined;
-  const { data: me } = useQuery<{ username?: string; email?: string } | null>({
-    queryKey: ['clusterMe', clusterName],
-    queryFn: async () => {
-      if (!clusterName) {
-        return null;
-      }
-
-      try {
-        const res = await clusterRequest('/me', {
-          cluster: clusterName,
-          autoLogoutOnAuthError: false,
-        });
-
-        if (!res) {
-          return null;
-        }
 
-        if (!(typeof res.userInfoURL === 'string' && res.userInfoURL.length > 0)) {
-          return { username: res.username, email: res.email };
-        }
-
-        const ui: {
-          preferredUsername?: string;
-          email?: string;
-        } = await fetch(res.userInfoURL, {
-          credentials: 'include',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }).then(r => {
-          if (!r.ok) {
-            throw new Error(`Could not fetch user info from ${res.userInfoURL}`);
+  const logoutCallback = useCallback(
+    async (clusterToLogout?: string) => {
+      if (clusterToLogout) {
+        await logout(clusterToLogout);
+        queryClient.removeQueries({ queryKey: ['clusterMe', clusterToLogout], exact: true });
+
+        if (selectedClusters.length > 1) {
+          const remainingClusters = selectedClusters.filter(c => c !== clusterToLogout);
+          if (remainingClusters.length > 0) {
+            const currentPath = history.location.pathname;
+            const clusterParam = selectedClusters.join('+');
+            const newClusterParam = remainingClusters.join('+');
+            const newPath = currentPath.replace(`/c/${clusterParam}`, `/c/${newClusterParam}`);
+            history.push(newPath);
+          } else {
+            history.push('/');
           }
-          return r.json();
-        });
-
-        if (!ui || (!ui.preferredUsername && !ui.email)) {
-          return null;
+        } else {
+          history.push('/');
         }
-
-        return {
-          username: ui.preferredUsername,
-          email: ui.email,
-        };
-      } catch {
-        return null;
+      } else {
+        if (selectedClusters.length > 0) {
+          await Promise.all(
+            selectedClusters.map(async c => {
+              await logout(c);
+              queryClient.removeQueries({ queryKey: ['clusterMe', c], exact: true });
+            })
+          );
+        } else if (cluster) {
+          await logout(cluster);
+          queryClient.removeQueries({ queryKey: ['clusterMe', cluster], exact: true });
+        }
+        history.push('/');
       }
     },
-    enabled: Boolean(clusterName),
-    staleTime: 0,
-    refetchOnMount: 'always',
-  });
-
-  const logoutCallback = useCallback(async () => {
-    if (!!cluster) {
-      await logout(cluster);
-      queryClient.removeQueries({ queryKey: ['clusterMe', cluster], exact: true });
-    }
-    history.push('/');
-  }, [cluster, history, queryClient]);
+    [cluster, selectedClusters, history, queryClient]
+  );
 
   const handletoggleOpen = useCallback(() => {
     // For medium view we default to closed if they have not made a selection.
@@ -174,8 +154,8 @@ export default function TopBar({}: TopBarProps) {
       isSidebarOpenUserSelected={isSidebarOpenUserSelected}
       onToggleOpen={handletoggleOpen}
       cluster={cluster || undefined}
+      selectedClusters={selectedClusters}
       clusters={clustersConfig || undefined}
-      userInfo={me || undefined}
     />
   );
 }
@@ -185,14 +165,14 @@ export interface PureTopBarProps {
   appBarActions: AppBarAction[];
   /** functions which filter the app bar action buttons */
   appBarActionsProcessors?: AppBarActionsProcessor[];
-  logout: () => Promise<any> | void;
+  logout: (cluster?: string) => Promise<any> | void;
   clusters?: {
     [clusterName: string]: any;
   };
   cluster?: string;
+  selectedClusters?: string[];
   isSidebarOpen?: boolean;
   isSidebarOpenUserSelected?: boolean;
-  userInfo?: { username?: string; email?: string };
 
   /** Called when sidebar toggles between open and closed. */
   onToggleOpen: () => void;
@@ -265,11 +245,11 @@ export const PureTopBar = memo(
     appBarActionsProcessors = [],
     logout,
     cluster,
+    selectedClusters,
     clusters,
     isSidebarOpen,
     isSidebarOpenUserSelected,
     onToggleOpen,
-    userInfo,
   }: PureTopBarProps) => {
     const { t } = useTranslation();
     const theme = useTheme();
@@ -303,13 +283,37 @@ export const PureTopBar = memo(
       setMobileMoreAnchorEl(event.currentTarget);
     };
     const userMenuId = 'primary-user-menu';
-    const userDisplayName = userInfo?.username || userInfo?.email || '';
-    const userSecondaryInfo =
-      userInfo?.username && userInfo?.email && userInfo.username !== userInfo.email
-        ? userInfo.email
-        : undefined;
 
-    const renderUserMenu = !!isClusterContext && (
+    const clustersToQuery =
+      selectedClusters && selectedClusters.length > 0 ? selectedClusters : cluster ? [cluster] : [];
+
+    const userInfoQueries = useQueries({
+      queries: clustersToQuery.map(clusterName => ({
+        queryKey: ['clusterMe', clusterName],
+        queryFn: () => getClusterUserInfo(clusterName),
+        staleTime: 5 * 60 * 1000,
+        retry: 1,
+      })),
+    });
+
+    const clusterUserInfoMap: Record<string, ClusterUserInfo | undefined> = {};
+    clustersToQuery.forEach((clusterName, index) => {
+      if (userInfoQueries[index]?.data) {
+        clusterUserInfoMap[clusterName] = userInfoQueries[index].data;
+      }
+    });
+
+    const getUserDisplayName = (clusterName: string): string => {
+      const userInfo = clusterUserInfoMap[clusterName];
+      if (userInfo?.username) {
+        return userInfo.username;
+      }
+      return clusterName;
+    };
+
+    const showUserMenu = (!!selectedClusters && selectedClusters.length > 0) || isClusterContext;
+
+    const renderUserMenu = showUserMenu && (
       <Menu
         anchorEl={anchorEl}
         anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
@@ -327,38 +331,83 @@ export const PureTopBar = memo(
           },
         }}
       >
-        {!!userDisplayName && (
+        {selectedClusters && selectedClusters.length > 1 && (
           <MenuItem
-            disableRipple
-            sx={{
-              pointerEvents: 'none',
-              cursor: 'default',
-              '&:hover': { backgroundColor: 'inherit' },
+            component="a"
+            onClick={async () => {
+              await logout();
+              handleMenuClose();
             }}
           >
             <ListItemIcon>
-              <Icon icon="mdi:account" />
+              <Icon icon="mdi:logout" />
+            </ListItemIcon>
+            <ListItemText primary={t('Log out from all')} />
+          </MenuItem>
+        )}
+
+        {selectedClusters && selectedClusters.length > 1 ? (
+          selectedClusters.map(clusterName => {
+            const userName = getUserDisplayName(clusterName);
+            return (
+              <MenuItem
+                key={`logout-${clusterName}`}
+                component="a"
+                onClick={async () => {
+                  await logout(clusterName);
+                  handleMenuClose();
+                }}
+              >
+                <ListItemIcon>
+                  <Icon icon="mdi:logout" />
+                </ListItemIcon>
+                <ListItemText
+                  primary={
+                    <Box display="flex" flexDirection="column">
+                      <Typography variant="body2" component="span">
+                        {t('Log out')}: {userName}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary" component="span">
+                        {clusterName}
+                      </Typography>
+                    </Box>
+                  }
+                />
+              </MenuItem>
+            );
+          })
+        ) : (
+          <MenuItem
+            component="a"
+            onClick={async () => {
+              await logout();
+              handleMenuClose();
+            }}
+          >
+            <ListItemIcon>
+              <Icon icon="mdi:logout" />
             </ListItemIcon>
             <ListItemText
-              primaryTypographyProps={{ variant: 'subtitle2' }}
-              secondaryTypographyProps={{ variant: 'body2' }}
-              primary={userDisplayName}
-              secondary={userSecondaryInfo}
+              primary={
+                cluster ? (
+                  <Box display="flex" flexDirection="column">
+                    <Typography variant="body2" component="span">
+                      {t('Log out')}: {getUserDisplayName(cluster)}
+                    </Typography>
+                    <Typography variant="caption" color="text.secondary" component="span">
+                      {cluster}
+                    </Typography>
+                  </Box>
+                ) : (
+                  t('Log out')
+                )
+              }
             />
           </MenuItem>
         )}
-        <MenuItem
-          component="a"
-          onClick={async () => {
-            await logout();
-            handleMenuClose();
-          }}
-        >
-          <ListItemIcon>
-            <Icon icon="mdi:logout" />
-          </ListItemIcon>
-          <ListItemText primary={t('Log out')} />
-        </MenuItem>
+
+        <Divider />
+
         <MenuItem
           component="a"
           onClick={() => {
@@ -411,7 +460,7 @@ export const PureTopBar = memo(
       },
       {
         id: DefaultAppBarAction.USER,
-        action: !!isClusterContext && (
+        action: showUserMenu && (
           <MenuItem>
             <IconButton
               aria-label={t('Account of current user')}
@@ -470,7 +519,7 @@ export const PureTopBar = memo(
       },
       {
         id: DefaultAppBarAction.USER,
-        action: !!isClusterContext && (
+        action: showUserMenu && (
           <IconButton
             aria-label={t('Account of current user')}
             aria-controls={userMenuId}