[Panel Header - Fullstory]: Make sure new menu's are findable in fullstory (#65167)

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

@@ -72,6 +72,7 @@ export const Components = {
     Panel: {
       title: (title: string) => `data-testid Panel header ${title}`,
       headerItems: (item: string) => `Panel header item ${item}`,
+      menuItems: (item: string) => `data-testid Panel menu item ${item}`,
       containerByTitle: (title: string) => `${title} panel`,
       headerCornerInfo: (mode: string) => `Panel header ${mode}`,
     },

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

@@ -46,6 +46,8 @@ export interface MenuItemProps<T = any> {
   customSubMenuContainerStyles?: CSSProperties;
   /** Shortcut key combination */
   shortcut?: string;
+  /** Test id for e2e tests and fullstory*/
+  testId?: string;
 }
 
 /** @internal */
@@ -68,6 +70,7 @@ export const MenuItem = React.memo(
       tabIndex = -1,
       customSubMenuContainerStyles,
       shortcut,
+      testId,
     } = props;
     const styles = useStyles2(getStyles);
     const [isActive, setIsActive] = useState(active);
@@ -150,6 +153,7 @@ export const MenuItem = React.memo(
         role={url === undefined ? role : undefined}
         data-role="menuitem" // used to identify menuitem in Menu.tsx
         ref={localRef}
+        data-testid={testId}
         aria-label={ariaLabel}
         aria-checked={ariaChecked}
         tabIndex={tabIndex}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import React, { PureComponent } from 'react';
 
 import { PanelMenuItem } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { Menu } from '@grafana/ui';
 
 import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
@@ -63,6 +64,7 @@ export function PanelHeaderMenuNew({ items }: Props) {
           url={item.href}
           onClick={item.onClick}
           shortcut={item.shortcut}
+          testId={selectors.components.Panels.Panel.menuItems(item.text)}
         />
       )
     );

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx

@@ -20,10 +20,13 @@ export const PanelHeaderMenuItem = (props: Props & PanelMenuItem) => {
   return isDivider ? (
     <li className="divider" />
   ) : (
-    <li className={isSubMenu ? `dropdown-submenu ${getDropdownLocationCssClass(ref)}` : undefined} ref={setRef}>
+    <li
+      className={isSubMenu ? `dropdown-submenu ${getDropdownLocationCssClass(ref)}` : undefined}
+      ref={setRef}
+      data-testid={selectors.components.Panels.Panel.menuItems(props.text)}
+    >
       <a onClick={props.onClick} href={props.href}>
         {icon && <Icon name={icon} className={styles.menuIconClassName} />}
-
         <span className="dropdown-item-text" aria-label={selectors.components.Panels.Panel.headerItems(props.text)}>
           {props.text}
           {isSubMenu && <Icon name="angle-right" className={styles.shortcutIconClassName} />}