Navigation: Add help menu to top search bar (#55062)

* add help menu to top search bar

* fixes

* handle preventDefault in node graph specifically

* use icon prop of MenuItem

* undo changes to ContextMenuPlugin/DataLinksContextMenu

* remove unused component

* revert storybook changes

* Tweaks

* remove unused style

* stop propagation on the header so version can be highlighted

* make sure useContextMenu has the exact same logic as before

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-data/src/types/navModel.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 
+import { LinkTarget } from './dataLink';
 import { IconName } from './icon';
 
 export interface NavLinkDTO {
@@ -11,7 +12,7 @@ export interface NavLinkDTO {
   icon?: IconName;
   img?: string;
   url?: string;
-  target?: string;
+  target?: LinkTarget;
   sortWeight?: number;
   divider?: boolean;
   hideFromMenu?: boolean;

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -30,7 +30,7 @@ export interface MenuItemProps<T = any> {
   /** Url of the menu item */
   url?: string;
   /** Handler for the click behaviour */
-  onClick?: (event?: React.SyntheticEvent<HTMLElement>, payload?: T) => void;
+  onClick?: (event?: React.MouseEvent<HTMLElement>, payload?: T) => void;
   /** Custom MenuItem styles*/
   className?: string;
   /** Active */
@@ -115,17 +115,7 @@ export const MenuItem = React.memo(
         className={itemStyle}
         rel={target === '_blank' ? 'noopener noreferrer' : undefined}
         href={url}
-        onClick={
-          onClick
-            ? (event) => {
-                if (!(event.ctrlKey || event.metaKey || event.shiftKey) && onClick) {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  onClick(event);
-                }
-              }
-            : undefined
-        }
+        onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onKeyDown={handleKeys}
@@ -136,8 +126,11 @@ export const MenuItem = React.memo(
         aria-checked={ariaChecked}
         tabIndex={tabIndex}
       >
-        {icon && <Icon name={icon} className={styles.icon} aria-hidden />}
-        {label}
+        <>
+          {icon && <Icon name={icon} className={styles.icon} aria-hidden />}
+          {label}
+        </>
+
         {hasSubMenu && (
           <SubMenu
             items={childItems}