Navigation: Hide Undock menu button when docked (#76965)

* small dock menu exploration

* fix e2e tests

* revert back to web-section-alt

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -257,7 +257,7 @@ export const Components = {
       button: 'Configuration',
     },
     Toggle: {
-      button: 'Toggle menu',
+      button: 'data-testid Toggle menu',
     },
     Reporting: {
       button: 'Reporting',

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx

@@ -60,14 +60,10 @@ export const MegaMenu = React.memo(
                     onClick={state.megaMenu === 'open' ? onClose : undefined}
                     activeItem={activeItem}
                   />
-                  {index === 0 && (
+                  {index === 0 && Boolean(state.megaMenu === 'open') && (
                     <IconButton
                       className={styles.dockMenuButton}
-                      tooltip={
+                      tooltip={t('navigation.megamenu.dock', 'Dock menu')}
-                        state.megaMenu === 'docked'
-                          ? t('navigation.megamenu.undock', 'Undock menu')
-                          : t('navigation.megamenu.dock', 'Dock menu')
-                      }
                       name="web-section-alt"
                       onClick={handleDockedMenu}
                       variant="secondary"

public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { Components } from '@grafana/e2e-selectors';
 import { Icon, IconButton, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { useGrafana } from 'app/core/context/GrafanaContext';
 import { t } from 'app/core/internationalization';
 import { HOME_NAV_ID } from 'app/core/reducers/navModel';
 import { useSelector } from 'app/types';
@@ -35,6 +36,8 @@ export function NavToolbar({
   onToggleSearchBar,
   onToggleKioskMode,
 }: Props) {
+  const { chrome } = useGrafana();
+  const state = chrome.useState();
   const homeNav = useSelector((state) => state.navIndex)[HOME_NAV_ID];
   const styles = useStyles2(getStyles);
   const breadcrumbs = buildBreadcrumbs(sectionNav, pageNav, homeNav);
@@ -45,10 +48,15 @@ export function NavToolbar({
         <IconButton
           id={TOGGLE_BUTTON_ID}
           name="bars"
-          tooltip={t('navigation.toolbar.toggle-menu', 'Toggle menu')}
+          tooltip={
+            state.megaMenu === 'closed'
+              ? t('navigation.toolbar.open-menu', 'Open menu')
+              : t('navigation.toolbar.close-menu', 'Close menu')
+          }
           tooltipPlacement="bottom"
           size="xl"
           onClick={onToggleMegaMenu}
+          data-testid={Components.NavBar.Toggle.button}
         />
       </div>
       <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbsWrapper} />

public/locales/de-DE/grafana.json

@@ -863,12 +863,12 @@
     },
     "megamenu": {
       "close": "",
-      "dock": "",
+      "dock": ""
-      "undock": ""
     },
     "toolbar": {
+      "close-menu": "",
       "enable-kiosk": "Kiosk-Modus aktivieren",
-      "toggle-menu": "Menü umschalten",
+      "open-menu": "",
       "toggle-search-bar": "Obere Suchleiste umschalten"
     }
   },

public/locales/en-US/grafana.json

@@ -863,12 +863,12 @@
     },
     "megamenu": {
       "close": "Close menu",
-      "dock": "Dock menu",
+      "dock": "Dock menu"
-      "undock": "Undock menu"
     },
     "toolbar": {
+      "close-menu": "Close menu",
       "enable-kiosk": "Enable kiosk mode",
-      "toggle-menu": "Toggle menu",
+      "open-menu": "Open menu",
       "toggle-search-bar": "Toggle top search bar"
     }
   },

public/locales/es-ES/grafana.json

@@ -869,12 +869,12 @@
     },
     "megamenu": {
       "close": "",
-      "dock": "",
+      "dock": ""
-      "undock": ""
     },
     "toolbar": {
+      "close-menu": "",
       "enable-kiosk": "Activar el modo de quiosco",
-      "toggle-menu": "Activar o desactivar menú",
+      "open-menu": "",
       "toggle-search-bar": "Activar o desactivar la barra de búsqueda superior"
     }
   },

public/locales/fr-FR/grafana.json

@@ -869,12 +869,12 @@
     },
     "megamenu": {
       "close": "",
-      "dock": "",
+      "dock": ""
-      "undock": ""
     },
     "toolbar": {
+      "close-menu": "",
       "enable-kiosk": "Activer le mode kiosque",
-      "toggle-menu": "Afficher/Masquer le menu",
+      "open-menu": "",
       "toggle-search-bar": "Afficher/Masquer la barre de recherche"
     }
   },

public/locales/pseudo-LOCALE/grafana.json

@@ -863,12 +863,12 @@
     },
     "megamenu": {
       "close": "Cľőşę męʼnū",
-      "dock": "Đőčĸ męʼnū",
+      "dock": "Đőčĸ męʼnū"
-      "undock": "Ůʼnđőčĸ męʼnū"
     },
     "toolbar": {
+      "close-menu": "Cľőşę męʼnū",
       "enable-kiosk": "Ēʼnäþľę ĸįőşĸ mőđę",
-      "toggle-menu": "Ŧőģģľę męʼnū",
+      "open-menu": "Øpęʼn męʼnū",
       "toggle-search-bar": "Ŧőģģľę ŧőp şęäřčĥ þäř"
     }
   },

public/locales/zh-Hans/grafana.json

@@ -857,12 +857,12 @@
     },
     "megamenu": {
       "close": "",
-      "dock": "",
+      "dock": ""
-      "undock": ""
     },
     "toolbar": {
+      "close-menu": "",
       "enable-kiosk": "启用 kiosk 模式",
-      "toggle-menu": "切换菜单",
+      "open-menu": "",
       "toggle-search-bar": "切换顶部搜索栏"
     }
   },