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>
headlamp-k8s · Dec 2, 2024 · e02c9c5 · e02c9c5
1 parent 82eb285
commit e02c9c5
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 35 deletions.
diff --git a/frontend/src/components/App/TopBar.tsx b/frontend/src/components/App/TopBar.tsx
@@ -139,9 +139,21 @@ function AppBarActionsMenu({
       appBarActions.map(action => {
         const Action = has(action, 'action') ? action.action : action;
         if (React.isValidElement(Action)) {
+          const label = (action as AppBarAction)?.label;
           return (
             <ErrorBoundary>
-              <MenuItem>{Action}</MenuItem>
+              <MenuItem
+                onClick={(action as AppBarAction)?.onClick || undefined}
+                sx={{
+                  justifyContent: 'center',
+                  gap: '12px',
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: '40px', justifyContent: 'center' }}>
+                  {Action}
+                </ListItemIcon>
+                {label && <ListItemText primary={label} />}
+              </MenuItem>
             </ErrorBoundary>
           );
         } else if (Action === null) {
@@ -150,7 +162,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 +323,41 @@ 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} />,
+            label: t('translation|Settings'),
+            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>
       ),
+      label: t('translation|Account'),
+      onClick: (event: React.MouseEvent<HTMLElement>) => {
+        handleMenuClose();
+        handleProfileMenuOpen(event);
+      },
     },
   ];
   const renderMobileMenu = (
@@ -395,6 +418,12 @@ export function PureTopBar({
       ),
     },
   ];
+
+  const visibleMobileActions = processAppBarActions(
+    allAppBarActionsMobile,
+    appBarActionsProcessors
+  ).filter(action => React.isValidElement(action.action) || typeof action === 'function');
+
   return (
     <>
       <AppBar
@@ -425,16 +454,18 @@ export function PureTopBar({
               <HeadlampButton open={openSideBar} onToggleOpen={onToggleOpen} />
               <Box sx={{ flexGrow: 1 }} />
               <GlobalSearch isIconButton />
-              <IconButton
-                aria-label={t('show more')}
-                aria-controls={mobileMenuId}
-                aria-haspopup="true"
-                onClick={handleMobileMenuOpen}
-                color="inherit"
-                size="medium"
-              >
-                <Icon icon="mdi:more-vert" />
-              </IconButton>
+              {visibleMobileActions.length > 0 && (
+                <IconButton
+                  aria-label={t('show more')}
+                  aria-controls={mobileMenuId}
+                  aria-haspopup="true"
+                  onClick={handleMobileMenuOpen}
+                  color="inherit"
+                  size="medium"
+                >
+                  <Icon icon="mdi:more-vert" />
+                </IconButton>
+              )}
             </>
           ) : (
             <>

diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json
@@ -88,6 +88,7 @@
   "Log out": "Abmelden",
   "(No token set up)": "(Kein Token eingerichtet)",
   "Account of current user": "Konto des aktuellen Benutzers",
+  "Account": "",
   "Appbar Tools": "Appbar-Tools",
   "show more": "mehr anzeigen",
   "Getting auth info: {{ clusterName }}": "Rufe Authentifizierungsinformationen für {{ clusterName }} ab",

diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -88,6 +88,7 @@
   "Log out": "Log out",
   "(No token set up)": "(No token set up)",
   "Account of current user": "Account of current user",
+  "Account": "Account",
   "Appbar Tools": "Appbar Tools",
   "show more": "show more",
   "Getting auth info: {{ clusterName }}": "Getting auth info: {{ clusterName }}",

diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
@@ -88,6 +88,7 @@
   "Log out": "Desconectar",
   "(No token set up)": "(Ningún token asignado)",
   "Account of current user": "Cuenta del usuario actual",
+  "Account": "",
   "Appbar Tools": "Herramientas de la barra de aplicación",
   "show more": "mostrar más",
   "Getting auth info: {{ clusterName }}": "Obteniendo información de autenticación: {{ clusterName }}",

diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
@@ -88,6 +88,7 @@
   "Log out": "Déconnexion",
   "(No token set up)": "(Pas de jeton mis en place)",
   "Account of current user": "Compte de l'utilisateur actuel",
+  "Account": "",
   "Appbar Tools": "Outils de la barre d'application",
   "show more": "afficher plus",
   "Getting auth info: {{ clusterName }}": "Obtenir des informations d'authentification : {{ clusterName }}",

diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
@@ -88,6 +88,7 @@
   "Log out": "Terminar sessão",
   "(No token set up)": "(Nenhum token establecido)",
   "Account of current user": "Conta do utilizador actual",
+  "Account": "",
   "Appbar Tools": "Ferramentas da barra de aplicação",
   "show more": "mostrar mais",
   "Getting auth info: {{ clusterName }}": "A obter informação de autentição: {{ clusterName }}",

diff --git a/frontend/src/redux/actionButtonsSlice.ts b/frontend/src/redux/actionButtonsSlice.ts
@@ -22,6 +22,8 @@ export type RowAction = {
 export type AppBarAction = {
   id: string;
   action?: AppBarActionType;
+  label?: string;
+  onClick?: (args?: any) => void;
 };
 
 export enum DefaultHeaderAction {