IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 17:43:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alexa V 2023-03-28 10:20:35 +02:00 committed by GitHub
parent d73fdcfc11
commit 42b58fbca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -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}`,
},

4
packages/grafana-ui/src/components/Menu/MenuItem.tsx
View File

@ -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}

2
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
View File

@ -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)}
/>
)
);

7
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
View File

@ -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} />}