[App Menu Standardization] Integrate new app menu with discover

.github/CODEOWNERS

@@ -399,7 +399,6 @@ src/platform/packages/private/kbn-tinymath @elastic/kibana-visualizations
 src/platform/packages/private/kbn-transpose-utils @elastic/kibana-visualizations
 src/platform/packages/private/kbn-ui-shared-deps-npm @elastic/kibana-operations
 src/platform/packages/private/kbn-ui-shared-deps-src @elastic/kibana-operations
-src/platform/packages/private/kbn-unsaved-changes-badge @elastic/kibana-data-discovery
 src/platform/packages/private/kbn-validate-oas @elastic/kibana-core
 src/platform/packages/private/opentelemetry/kbn-metrics @elastic/kibana-core @elastic/stack-monitoring
 src/platform/packages/private/opentelemetry/kbn-metrics-config @elastic/kibana-core

package.json

@@ -1140,7 +1140,6 @@
     "@kbn/unified-search-plugin": "link:src/platform/plugins/shared/unified_search",
     "@kbn/unified-tabs": "link:src/platform/packages/shared/kbn-unified-tabs",
     "@kbn/unified-tabs-examples-plugin": "link:examples/unified_tabs_examples",
-    "@kbn/unsaved-changes-badge": "link:src/platform/packages/private/kbn-unsaved-changes-badge",
     "@kbn/unsaved-changes-prompt": "link:src/platform/packages/shared/kbn-unsaved-changes-prompt",
     "@kbn/upgrade-assistant-pkg-common": "link:x-pack/platform/packages/private/upgrade-assistant/common",
     "@kbn/upgrade-assistant-pkg-public": "link:x-pack/platform/packages/private/upgrade-assistant/public",

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/moon.yml

@@ -20,6 +20,7 @@ project:
 dependsOn:
   - '@kbn/split-button'
   - '@kbn/i18n'
+  - '@kbn/router-utils'
 tags:
   - shared-browser
   - package

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_action_button.tsx

@@ -13,6 +13,7 @@ import { upperFirst } from 'lodash';
 import type { EuiButtonColor, PopoverAnchorPosition } from '@elastic/eui';
 import { EuiButton, EuiHideFor, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { getRouterLinkProps } from '@kbn/router-utils';
 import {
   APP_MENU_NOTIFICATION_INDICATOR_LEFT,
   APP_MENU_NOTIFICATION_INDICATOR_TOP,
@@ -100,8 +101,11 @@ export const AppMenuActionButton = (props: AppMenuActionButtonProps) => {
     splitButtonRun?.({ triggerElement: event.currentTarget });
   };
 
+  const routerLinkProps =
+    href && run ? getRouterLinkProps({ href, onClick: handleClick }) : { onClick: handleClick };
+
   const commonProps = {
-    onClick: href ? undefined : handleClick,
+    ...routerLinkProps,
     id: htmlId,
     'data-test-subj': testId || `app-menu-action-button-${id}`,
     iconType,

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_item.tsx

@@ -11,6 +11,7 @@ import React, { type MouseEvent } from 'react';
 import { EuiHeaderLink, EuiHideFor, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { upperFirst } from 'lodash';
 import { css } from '@emotion/react';
+import { getRouterLinkProps } from '@kbn/router-utils';
 import { getIsSelectedColor, getTooltip, isDisabled } from '../utils';
 import { AppMenuPopover } from './app_menu_popover';
 import type { AppMenuItemType } from '../types';
@@ -60,6 +61,9 @@ export const AppMenuItem = ({
     run?.({ triggerElement: event.currentTarget });
   };
 
+  const routerLinkProps =
+    href && run ? getRouterLinkProps({ href, onClick: handleClick }) : { onClick: handleClick };
+
   const buttonCss = css`
     background-color: ${isPopoverOpen
       ? getIsSelectedColor({
@@ -73,7 +77,6 @@ export const AppMenuItem = ({
   const buttonComponent = (
     <EuiHideFor sizes={hidden ?? 'none'}>
       <EuiHeaderLink
-        onClick={href ? undefined : handleClick}
         id={htmlId}
         data-test-subj={testId || `app-menu-item-${id}`}
         iconType={iconType}
@@ -88,6 +91,7 @@ export const AppMenuItem = ({
         aria-haspopup={hasItems ? 'menu' : undefined}
         isSelected={hasItems ? isPopoverOpen : undefined}
         css={buttonCss}
+        {...routerLinkProps}
       >
         {itemText}
       </EuiHeaderLink>

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts

@@ -122,17 +122,17 @@ interface AppMenuItemBase {
 
 type AppMenuLinkItem = AppMenuItemBase & {
   /**
-   * The HTML href attribute for the item. Only used if `run` and `items` are not provided.
+   * The HTML href attribute for the item. Only used if `items` is not provided.
    */
   href: string;
   /**
-   * The HTML target attribute for the item. Only used if `run` and `items` are not provided.
+   * The HTML target attribute for the item. Only used if `items` is not provided.
    */
   target: string;
   /**
-   * Function to run when the item is clicked. Only used if `items` and `href` is not provided.
+   * Function to run when the item is clicked. Only used if `items` is not provided.
    */
-  run?: never;
+  run?: AppMenuRunAction;
   /**
    * Sub-items to show in a popover when the item is clicked. Only used if `run` and `href` is not provided.
    */
@@ -151,15 +151,15 @@ type AppMenuLinkItem = AppMenuItemBase & {
 
 type AppMenuButtonItem = AppMenuItemBase & {
   /**
-   * The HTML href attribute for the item. Only used if `run` and `items` are not provided.
+   * The HTML href attribute for the item. Only used if `items` is not provided.
    */
-  href?: never;
+  href?: string;
   /**
-   * The HTML target attribute for the item. Only used if `run` and `items` are not provided.
+   * The HTML target attribute for the item. Only used if `items` is not provided.
    */
-  target?: never;
+  target?: string;
   /**
-   * Function to run when the item is clicked. Only used if `items` and `href` is not provided.
+   * Function to run when the item is clicked. Only used if `items` is not provided.
    */
   run: AppMenuRunAction;
   /**
@@ -180,15 +180,15 @@ type AppMenuButtonItem = AppMenuItemBase & {
 
 type AppMenuItemWithPopover = AppMenuItemBase & {
   /**
-   * The HTML href attribute for the item. Only used if `run` and `items` are not provided.
+   * The HTML href attribute for the item. Only used if `items` is not provided.
    */
   href?: never;
   /**
-   * The HTML target attribute for the item. Only used if `run` and `items` are not provided.
+   * The HTML target attribute for the item. Only used if `items` is not provided.
    */
   target?: never;
   /**
-   * Function to run when the item is clicked. Only used if `items` and `href` is not provided.
+   * Function to run when the item is clicked. Only used if `items` is not provided.
    */
   run?: never;
   /**

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.test.tsx

@@ -217,14 +217,6 @@ describe('utils', () => {
       expect(result.onClick).toBeDefined();
     });
 
-    it('should not set onClick when href is provided', () => {
-      const item = { ...baseItem, href: 'http://example.com' };
-      const result = mapAppMenuItemToPanelItem(item);
-
-      expect(result.onClick).toBeUndefined();
-      expect(result.href).toBe('http://example.com');
-    });
-
     it('should not set onClick when childPanelId is provided', () => {
       const result = mapAppMenuItemToPanelItem(baseItem, 1);
 

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx

@@ -15,6 +15,7 @@ import {
   type EuiContextMenuPanelDescriptor,
   type EuiContextMenuPanelItemDescriptor,
 } from '@elastic/eui';
+import { getRouterLinkProps } from '@kbn/router-utils';
 import { AppMenuPopoverActionButtons } from './components/app_menu_popover_action_buttons';
 import type {
   AppMenuConfig,
@@ -132,11 +133,17 @@ export const mapAppMenuItemToPanelItem = (
     }
   };
 
+  const hasClickHandler = childPanelId === undefined;
+  const routerLinkProps =
+    item?.href && item?.run && hasClickHandler
+      ? getRouterLinkProps({ href: item.href, onClick: handleClick })
+      : { onClick: hasClickHandler ? handleClick : undefined };
+
   return {
     key: item.id,
     name: upperFirst(item.label),
     icon: item?.iconType,
-    onClick: item?.href || childPanelId !== undefined ? undefined : handleClick,
+    ...routerLinkProps,
     href: item?.href,
     target: item?.href ? item?.target : undefined,
     disabled: isDisabled(item?.disableButton),

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/tsconfig.json

@@ -18,5 +18,6 @@
   "kbn_references": [
     "@kbn/split-button",
     "@kbn/i18n",
+    "@kbn/router-utils"
   ]
 }

src/platform/packages/private/kbn-managed-content-badge/index.ts

@@ -9,12 +9,12 @@
 
 import { i18n } from '@kbn/i18n';
 import type { EuiToolTipProps } from '@elastic/eui';
-import type { TopNavMenuBadgeProps } from '@kbn/navigation-plugin/public';
+import type { ChromeBreadcrumbsBadge } from '@kbn/core-chrome-browser';
 
 export const getManagedContentBadge: (
   tooltipText: string,
   disableTooltipProps?: boolean
-) => TopNavMenuBadgeProps = (tooltipText, enableTooltipProps = true) => ({
+) => ChromeBreadcrumbsBadge = (tooltipText, enableTooltipProps = true) => ({
   'data-test-subj': 'managedContentBadge',
   badgeText: i18n.translate('managedContentBadge.text', {
     defaultMessage: 'Managed',

src/platform/packages/private/kbn-managed-content-badge/moon.yml

@@ -19,7 +19,7 @@ project:
     sourceRoot: src/platform/packages/private/kbn-managed-content-badge
 dependsOn:
   - '@kbn/i18n'
-  - '@kbn/navigation-plugin'
+  - '@kbn/core-chrome-browser'
 tags:
   - shared-browser
   - package

src/platform/packages/private/kbn-managed-content-badge/tsconfig.json

@@ -15,6 +15,6 @@
   ],
   "kbn_references": [
     "@kbn/i18n",
-    "@kbn/navigation-plugin",
+    "@kbn/core-chrome-browser",
   ]
 }