frontend: Add multi-cluster user logout support

- 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.
- Added unit tests for user info fetching logic.
- Added Storybook story for multi-cluster user logout.

Signed-off-by: alokdangre <alokdangre@gmail.com>

Author: alokdangre

frontend/src/components/App/TopBar.stories.tsx

@@ -18,6 +18,7 @@ import { configureStore } from '@reduxjs/toolkit';
 import { Meta, StoryFn } from '@storybook/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { get } from 'lodash';
+import { http, HttpResponse } from 'msw';
 import { PropsWithChildren } from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -62,6 +63,16 @@ export default {
       );
     },
   ],
+  parameters: {
+    msw: {
+      handlers: [
+        http.post(
+          'http://localhost:4466/clusters/ak8s-desktop/apis/authentication.k8s.io/v1/selfsubjectreviews',
+          () => HttpResponse.json({ status: { userInfo: { username: 'default-user' } } })
+        ),
+      ],
+    },
+  },
 } as Meta;
 
 function OurTopBar(args: PropsWithChildren<PureTopBarProps>) {
@@ -131,9 +142,24 @@ WithUserInfo.args = {
   logout: () => {},
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
-  userInfo: {
-    username: 'Ada Lovelace',
-    email: 'ada@example.com',
+};
+WithUserInfo.parameters = {
+  msw: {
+    handlers: {
+      story: [
+        http.post(
+          'http://localhost:4466/clusters/ak8s-desktop/apis/authentication.k8s.io/v1/selfsubjectreviews',
+          () =>
+            HttpResponse.json({
+              status: {
+                userInfo: {
+                  username: 'Ada Lovelace',
+                },
+              },
+            })
+        ),
+      ],
+    },
   },
 };
 
@@ -143,8 +169,24 @@ WithEmailOnly.args = {
   logout: () => {},
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
-  userInfo: {
-    email: 'grace@example.com',
+};
+WithEmailOnly.parameters = {
+  msw: {
+    handlers: {
+      story: [
+        http.post(
+          'http://localhost:4466/clusters/ak8s-desktop/apis/authentication.k8s.io/v1/selfsubjectreviews',
+          () =>
+            HttpResponse.json({
+              status: {
+                userInfo: {
+                  username: 'grace@example.com',
+                },
+              },
+            })
+        ),
+      ],
+    },
   },
 };
 
@@ -154,7 +196,19 @@ UndefinedData.args = {
   logout: () => {},
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
-  userInfo: undefined,
+};
+UndefinedData.parameters = {
+  msw: {
+    handlers: {
+      story: [
+        // Return 404 to simulate missing API or data
+        http.post(
+          'http://localhost:4466/clusters/ak8s-desktop/apis/authentication.k8s.io/v1/selfsubjectreviews',
+          () => new HttpResponse(null, { status: 404 })
+        ),
+      ],
+    },
+  },
 };
 
 export const EmptyUserInfo = PureTemplate.bind({});
@@ -163,8 +217,61 @@ EmptyUserInfo.args = {
   logout: () => {},
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
-  userInfo: {
-    email: '',
-    username: '',
+};
+EmptyUserInfo.parameters = {
+  msw: {
+    handlers: {
+      story: [
+        http.post(
+          'http://localhost:4466/clusters/ak8s-desktop/apis/authentication.k8s.io/v1/selfsubjectreviews',
+          () => HttpResponse.json({})
+        ),
+      ],
+    },
+  },
+};
+
+export const MultiCluster = PureTemplate.bind({});
+MultiCluster.args = {
+  appBarActions: [],
+  logout: () => {},
+  cluster: 'admin-cluster',
+  clusters: {
+    'admin-cluster': '',
+    'view-cluster': '',
+    'other-cluster': '',
+  },
+  selectedClusters: ['admin-cluster', 'view-cluster'],
+};
+MultiCluster.parameters = {
+  msw: {
+    handlers: {
+      story: [
+        http.post(
+          'http://localhost:4466/clusters/admin-cluster/apis/authentication.k8s.io/v1/selfsubjectreviews',
+          () =>
+            HttpResponse.json({
+              status: {
+                userInfo: {
+                  username: 'admin-user',
+                  groups: ['system:masters'],
+                },
+              },
+            })
+        ),
+        http.post(
+          'http://localhost:4466/clusters/view-cluster/apis/authentication.k8s.io/v1/selfsubjectreviews',
+          () =>
+            HttpResponse.json({
+              status: {
+                userInfo: {
+                  username: 'view-user',
+                  groups: ['view-group'],
+                },
+              },
+            })
+        ),
+      ],
+    },
   },
 };