[8.x] [TopNav] Ability for menu items to collapse into popover at cus…

…tom breakpoints (#195820) (#197269) # Backport This will backport the following commits from `main` to `8.x`: - [[TopNav] Ability for menu items to collapse into popover at custom breakpoints (#195820)](#195820)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Tim Sullivan <[email protected]>
elastic · Oct 22, 2024 · 259ab11 · 259ab11
1 parent bb09eb3
commit 259ab11
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -10,14 +10,15 @@
 import React, { ReactElement } from 'react';
 import classNames from 'classnames';
 
-import { MountPoint } from '@kbn/core/public';
+import type { MountPoint } from '@kbn/core/public';
 import { MountPointPortal } from '@kbn/react-kibana-mount';
-import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
-import { StatefulSearchBarProps } from '@kbn/unified-search-plugin/public';
-import { AggregateQuery, Query } from '@kbn/es-query';
-import { TopNavMenuData } from './top_nav_menu_data';
+import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
+import type { StatefulSearchBarProps } from '@kbn/unified-search-plugin/public';
+import type { AggregateQuery, Query } from '@kbn/es-query';
+import type { EuiBreakpointSize } from '@elastic/eui';
+import type { TopNavMenuData } from './top_nav_menu_data';
 import { TopNavMenuItems } from './top_nav_menu_items';
-import { TopNavMenuBadgeProps, TopNavMenuBadges } from './top_nav_menu_badges';
+import { type TopNavMenuBadgeProps, TopNavMenuBadges } from './top_nav_menu_badges';
 
 export type TopNavMenuProps<QT extends Query | AggregateQuery = Query> = Omit<
   StatefulSearchBarProps<QT>,
@@ -51,6 +52,11 @@ export type TopNavMenuProps<QT extends Query | AggregateQuery = Query> = Omit<
    * ```
    */
   setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
+
+  /**
+   * A list of named breakpoints at which to show the popover version. If not provided, it will use the default set of ['xs', 's'] that is internally provided by EUI.
+   */
+  popoverBreakpoints?: EuiBreakpointSize[];
 };
 
 /*
@@ -76,7 +82,13 @@ export function TopNavMenu<QT extends AggregateQuery | Query = Query>(
   }
 
   function renderMenu(className: string): ReactElement | null {
-    return <TopNavMenuItems config={config} className={className} />;
+    return (
+      <TopNavMenuItems
+        config={config}
+        className={className}
+        popoverBreakpoints={props.popoverBreakpoints}
+      />
+    );
   }
 
   function renderSearchBar(): ReactElement | null {

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_items.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_items.tsx
@@ -7,21 +7,30 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiHeaderLinks } from '@elastic/eui';
+import { EuiBreakpointSize, EuiHeaderLinks } from '@elastic/eui';
 import React from 'react';
 import type { TopNavMenuData } from './top_nav_menu_data';
 import { TopNavMenuItem } from './top_nav_menu_item';
 
+interface TopNavMenuItemsProps {
+  config: TopNavMenuData[] | undefined;
+  className?: string;
+  popoverBreakpoints?: EuiBreakpointSize[];
+}
+
 export const TopNavMenuItems = ({
   config,
   className,
-}: {
-  config: TopNavMenuData[] | undefined;
-  className?: string;
-}) => {
+  popoverBreakpoints,
+}: TopNavMenuItemsProps) => {
   if (!config || config.length === 0) return null;
   return (
-    <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
+    <EuiHeaderLinks
+      data-test-subj="top-nav"
+      gutterSize="xs"
+      className={className}
+      popoverBreakpoints={popoverBreakpoints}
+    >
       {config.map((menuItem: TopNavMenuData, i: number) => {
         return <TopNavMenuItem key={`nav-menu-${i}`} {...menuItem} />;
       })}

diff --git a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
@@ -1071,6 +1071,7 @@ export const LensTopNavMenu = ({
   return (
     <AggregateQueryTopNavMenu
       setMenuMountPoint={setHeaderActionMenu}
+      popoverBreakpoints={['xs', 's', 'm']}
       config={topNavConfig}
       saveQueryMenuVisibility={
         application.capabilities.visualize.saveQuery