From f0d48a0baefe3702b6376e209d3e50f5bda804ed Mon Sep 17 00:00:00 2001
From: Evangelos Skopelitis <eskopelitis@microsoft.com>
Date: Fri, 22 Nov 2024 11:34:59 -0500
Subject: [PATCH] frontend: Improve top bar menu on mobile

This change addresses issues with the top bar on mobile devices, both in
the home view and in-cluster.

Fixes: #2066

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
---
 frontend/src/components/App/TopBar.tsx   | 64 +++++++++++++++---------
 frontend/src/redux/actionButtonsSlice.ts |  1 +
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/App/TopBar.tsx b/frontend/src/components/App/TopBar.tsx
index f8391bdf37..c31c37055d 100644
--- a/frontend/src/components/App/TopBar.tsx
+++ b/frontend/src/components/App/TopBar.tsx
@@ -141,7 +141,12 @@ function AppBarActionsMenu({
         if (React.isValidElement(Action)) {
           return (
             <ErrorBoundary>
-              <MenuItem>{Action}</MenuItem>
+              <MenuItem
+                onClick={(action as AppBarAction)?.onClick || undefined}
+                sx={{ justifyContent: 'center' }}
+              >
+                {Action}
+              </MenuItem>
             </ErrorBoundary>
           );
         } else if (Action === null) {
@@ -150,7 +155,10 @@ function AppBarActionsMenu({
           const ActionComponent = Action as React.FC;
           return (
             <ErrorBoundary>
-              <MenuItem>
+              <MenuItem
+                onClick={(action as AppBarAction)?.onClick || undefined}
+                sx={{ justifyContent: 'center' }}
+              >
                 <ActionComponent />
               </MenuItem>
             </ErrorBoundary>
@@ -308,33 +316,39 @@ export function PureTopBar({
       id: DefaultAppBarAction.NOTIFICATION,
       action: null,
     },
-    {
-      id: DefaultAppBarAction.SETTINGS,
-      action: (
-        <MenuItem>
-          <SettingsButton onClickExtra={handleMenuClose} />
-        </MenuItem>
-      ),
-    },
+    ...(isClusterContext
+      ? [
+          {
+            id: DefaultAppBarAction.SETTINGS,
+            action: <SettingsButton onClickExtra={handleMenuClose} />,
+            onClick: () => {
+              handleMenuClose();
+              history.push(createRouteURL('settingsCluster', { cluster }));
+            },
+          },
+        ]
+      : []),
     {
       id: DefaultAppBarAction.USER,
       action: !!isClusterContext && (
-        <MenuItem>
-          <IconButton
-            aria-label={t('Account of current user')}
-            aria-controls={userMenuId}
-            aria-haspopup="true"
-            color="inherit"
-            onClick={event => {
-              handleMenuClose();
-              handleProfileMenuOpen(event);
-            }}
-            size="medium"
-          >
-            <Icon icon="mdi:account" />
-          </IconButton>
-        </MenuItem>
+        <IconButton
+          aria-label={t('Account of current user')}
+          aria-controls={userMenuId}
+          aria-haspopup="true"
+          color="inherit"
+          onClick={event => {
+            handleMenuClose();
+            handleProfileMenuOpen(event);
+          }}
+          size="medium"
+        >
+          <Icon icon="mdi:account" />
+        </IconButton>
       ),
+      onClick: (event: React.MouseEvent<HTMLElement>) => {
+        handleMenuClose();
+        handleProfileMenuOpen(event);
+      },
     },
   ];
   const renderMobileMenu = (
diff --git a/frontend/src/redux/actionButtonsSlice.ts b/frontend/src/redux/actionButtonsSlice.ts
index cf96080970..38135b5f37 100644
--- a/frontend/src/redux/actionButtonsSlice.ts
+++ b/frontend/src/redux/actionButtonsSlice.ts
@@ -22,6 +22,7 @@ export type RowAction = {
 export type AppBarAction = {
   id: string;
   action?: AppBarActionType;
+  onClick?: (args?: any) => void;
 };
 
 export enum DefaultHeaderAction {