From e02c9c5e95be6af0e2acc3eadfce8444cddd72db Mon Sep 17 00:00:00 2001 From: Evangelos Skopelitis 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 --- frontend/src/components/App/TopBar.tsx | 101 ++++++++++++------ frontend/src/i18n/locales/de/translation.json | 1 + frontend/src/i18n/locales/en/translation.json | 1 + frontend/src/i18n/locales/es/translation.json | 1 + frontend/src/i18n/locales/fr/translation.json | 1 + frontend/src/i18n/locales/pt/translation.json | 1 + frontend/src/redux/actionButtonsSlice.ts | 2 + 7 files changed, 73 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/App/TopBar.tsx b/frontend/src/components/App/TopBar.tsx index f8391bdf37..1b392a8cfc 100644 --- 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 ( - {Action} + + + {Action} + + {label && } + ); } else if (Action === null) { @@ -150,7 +162,10 @@ function AppBarActionsMenu({ const ActionComponent = Action as React.FC; return ( - + @@ -308,33 +323,41 @@ export function PureTopBar({ id: DefaultAppBarAction.NOTIFICATION, action: null, }, - { - id: DefaultAppBarAction.SETTINGS, - action: ( - - - - ), - }, + ...(isClusterContext + ? [ + { + id: DefaultAppBarAction.SETTINGS, + action: , + label: t('translation|Settings'), + onClick: () => { + handleMenuClose(); + history.push(createRouteURL('settingsCluster', { cluster })); + }, + }, + ] + : []), { id: DefaultAppBarAction.USER, action: !!isClusterContext && ( - - { - handleMenuClose(); - handleProfileMenuOpen(event); - }} - size="medium" - > - - - + { + handleMenuClose(); + handleProfileMenuOpen(event); + }} + size="medium" + > + + ), + label: t('translation|Account'), + onClick: (event: React.MouseEvent) => { + 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 ( <> - - - + {visibleMobileActions.length > 0 && ( + + + + )} ) : ( <> diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json index ab76e21f71..1f213f981c 100644 --- 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 index 7aadd30716..c4ecf6ad1d 100644 --- 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 index 394ea32c76..15ca170e4b 100644 --- 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 index b5682ee4c1..3ebefac585 100644 --- 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 index 16e786f568..521ed6695e 100644 --- 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 index cf96080970..51a4e7c030 100644 --- 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 {