frontend: TopBar: Visual support for displaying authenticated users

Fetch and display authenticated user information per cluster in the user menu.
Fallback to showing the cluster name if no user info is available.
Update TopBar stories to reflect multi-user scenarios.
Update e2e tests to match the new menu item structure.

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

Author: alokdangre

e2e-tests/tests/headlampPage.ts

@@ -112,8 +112,8 @@ export class HeadlampPage {
     await this.page.click('button[aria-label="Account of current user"]');
 
     // Wait for the logout option to be visible and click on it
-    await this.page.waitForSelector('a.MuiMenuItem-root:has-text("Log out")');
-    await this.page.click('a.MuiMenuItem-root:has-text("Log out")');
+    await this.page.waitForSelector('.MuiMenuItem-root:has-text("Log out")');
+    await this.page.click('.MuiMenuItem-root:has-text("Log out")');
     await this.page.waitForLoadState('load');
 
     // Expects the URL to contain c/test/token

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,7 @@ export default {
       );
     },
   ],
+  parameters: {},
 } as Meta;
 
 function OurTopBar(args: PropsWithChildren<PureTopBarProps>) {
@@ -116,6 +118,16 @@ OneCluster.args = {
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
 };
+OneCluster.parameters = {
+  msw: {
+    handlers: [
+      http.post(
+        'http://localhost:4466/clusters/ak8s-desktop/apis/authentication.k8s.io/v1/selfsubjectreviews',
+        () => HttpResponse.json({ status: { userInfo: { username: 'one-cluster-user' } } })
+      ),
+    ],
+  },
+};
 
 export const TwoCluster = PureTemplate.bind({});
 TwoCluster.args = {
@@ -131,9 +143,22 @@ WithUserInfo.args = {
   logout: () => {},
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
-  userInfo: {
-    username: 'Ada Lovelace',
-    email: 'ada@example.com',
+};
+WithUserInfo.parameters = {
+  msw: {
+    handlers: [
+      http.post(
+        'http://localhost:4466/clusters/ak8s-desktop/apis/authentication.k8s.io/v1/selfsubjectreviews',
+        () =>
+          HttpResponse.json({
+            status: {
+              userInfo: {
+                username: 'Ada Lovelace',
+              },
+            },
+          })
+      ),
+    ],
   },
 };
 
@@ -143,8 +168,22 @@ WithEmailOnly.args = {
   logout: () => {},
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
-  userInfo: {
-    email: 'grace@example.com',
+};
+WithEmailOnly.parameters = {
+  msw: {
+    handlers: [
+      http.post(
+        'http://localhost:4466/clusters/ak8s-desktop/apis/authentication.k8s.io/v1/selfsubjectreviews',
+        () =>
+          HttpResponse.json({
+            status: {
+              userInfo: {
+                username: 'grace@example.com',
+              },
+            },
+          })
+      ),
+    ],
   },
 };
 
@@ -154,7 +193,17 @@ UndefinedData.args = {
   logout: () => {},
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
-  userInfo: undefined,
+};
+UndefinedData.parameters = {
+  msw: {
+    handlers: [
+      // 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 +212,57 @@ EmptyUserInfo.args = {
   logout: () => {},
   cluster: 'ak8s-desktop',
   clusters: { 'ak8s-desktop': '' },
-  userInfo: {
-    email: '',
-    username: '',
+};
+EmptyUserInfo.parameters = {
+  msw: {
+    handlers: [
+      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: [
+      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'],
+              },
+            },
+          })
+      ),
+    ],
   },
 };