IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboards: Enable feature flag newPanelChromeUI by default (#65593)

Browse Source
This commit is contained in:
Alexa V
2023-04-03 13:50:43 +02:00
committed by GitHub
parent bf0f4a6751
commit 2b0c0d4b95
10 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

4
packages/grafana-e2e/src/flows/importDashboard.ts
View File

@@ -50,8 +50,8 @@ export const importDashboard = (dashboardToImport: Dashboard, queryTimeout?: num
if (!skipPanelValidation) {
dashboardToImport.panels.forEach((panel) => {
// Look at the json data
e2e.components.Panels.Panel.title(panel.title).should('be.visible').click();
e2e.components.Panels.Panel.headerItems('Inspect').should('be.visible').click();
e2e.components.Panels.Panel.menu(panel.title).click({ force: true }); // force click because menu is hidden and show on hover
e2e.components.Panels.Panel.menuItems('Inspect').should('be.visible').click();
e2e.components.Tab.title('JSON').should('be.visible').click();
e2e.components.PanelInspector.Json.content().should('be.visible').contains('Panel JSON').click({ force: true });
e2e.components.Select.option().should('be.visible').contains('Panel data').click();

14
packages/grafana-e2e/src/flows/openPanelMenuItem.ts
View File

@@ -7,10 +7,16 @@ export enum PanelMenuItems {
Extensions = 'Extensions',
}
export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title') => {
e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title', isReactPanel = false) => {
// we changed the way we open the panel menu in react panels with the new panel header
if (isReactPanel) {
e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
e2e.components.Panels.Panel.menuItems(menu).should('be.visible').click();
} else {
// this is the old way of opening the panel menu from the title
e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
}
};
export const openPanelMenuExtension = (extensionTitle: string, panelTitle = 'Panel Title') => {

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

@@ -114,7 +114,7 @@ export function PanelChrome({
actions = leftItems;
}
const ariaLabel = title ? selectors.components.Panels.Panel.containerByTitle(title) : 'Panel';
const testid = title ? selectors.components.Panels.Panel.title(title) : 'Panel';
const headerContent = (
<>
@@ -152,7 +152,7 @@ export function PanelChrome({
);
return (
<div className={styles.container} style={containerStyles} aria-label={ariaLabel}>
<div className={styles.container} style={containerStyles} data-testid={testid}>
<div className={styles.loadingBarContainer}>
{loadingState === LoadingState.Loading ? <LoadingBar width={width} ariaLabel="Panel loading bar" /> : null}
</div>

5
packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
View File

@@ -1,6 +1,8 @@
import { cx } from '@emotion/css';
import React, { ReactElement } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { Dropdown } from '../Dropdown/Dropdown';
import { ToolbarButton } from '../ToolbarButton';
import { TooltipPlacement } from '../Tooltip';
@@ -24,6 +26,7 @@ export function PanelMenu({
menuButtonClass,
onVisibleChange,
}: PanelMenuProps) {
const testId = title ? selectors.components.Panels.Panel.menu(title) : `panel-menu-button`;
return (
<Dropdown overlay={menu} placement={placement} offset={offset} onVisibleChange={onVisibleChange}>
<ToolbarButton
@@ -32,7 +35,7 @@ export function PanelMenu({
icon="ellipsis-v"
iconSize="md"
narrow
data-testid="panel-menu-button"
data-testid={testId}
className={cx(menuButtonClass, dragClassCancel)}
/>
</Dropdown>