mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Explore: Relabel secondary actions buttons (#73605)
This commit is contained in:
parent
997d21f6e5
commit
35818fa9ab
@ -183,7 +183,7 @@ export const Components = {
|
||||
QueryTab: {
|
||||
content: 'Query editor tab content',
|
||||
queryInspectorButton: 'Query inspector button',
|
||||
queryHistoryButton: 'Rich history button',
|
||||
queryHistoryButton: 'data-testid query-history-button',
|
||||
addQuery: 'Query editor add query button',
|
||||
},
|
||||
QueryHistory: {
|
||||
|
@ -15,9 +15,9 @@ describe('SecondaryActions', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Add row button/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Rich history button/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Add query/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Query history/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Query inspector/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render hidden elements', () => {
|
||||
@ -31,9 +31,9 @@ describe('SecondaryActions', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /Add row button/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: /Rich history button/i })).not.toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: /Add query/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: /Query history/i })).not.toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Query inspector/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should disable add row button if addQueryRowButtonDisabled=true', () => {
|
||||
@ -46,9 +46,9 @@ describe('SecondaryActions', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Add row button/i })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: /Rich history button/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Add query/i })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: /Query history/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /Query inspector/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should map click handlers correctly', async () => {
|
||||
@ -66,13 +66,13 @@ describe('SecondaryActions', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Add row button/i }));
|
||||
await user.click(screen.getByRole('button', { name: /Add query/i }));
|
||||
expect(onClickAddRow).toBeCalledTimes(1);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Rich history button/i }));
|
||||
await user.click(screen.getByRole('button', { name: /Query history/i }));
|
||||
expect(onClickHistory).toBeCalledTimes(1);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Query inspector button/i }));
|
||||
await user.click(screen.getByRole('button', { name: /Query inspector/i }));
|
||||
expect(onClickQueryInspector).toBeCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
@ -2,6 +2,7 @@ import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { Components } from '@grafana/e2e-selectors';
|
||||
import { HorizontalGroup, ToolbarButton, useTheme2 } from '@grafana/ui';
|
||||
|
||||
type Props = {
|
||||
@ -33,7 +34,7 @@ export function SecondaryActions(props: Props) {
|
||||
{!props.addQueryRowButtonHidden && (
|
||||
<ToolbarButton
|
||||
variant="canvas"
|
||||
aria-label="Add row button"
|
||||
aria-label="Add query"
|
||||
onClick={props.onClickAddQueryRowButton}
|
||||
disabled={props.addQueryRowButtonDisabled}
|
||||
icon="plus"
|
||||
@ -44,8 +45,9 @@ export function SecondaryActions(props: Props) {
|
||||
{!props.richHistoryRowButtonHidden && (
|
||||
<ToolbarButton
|
||||
variant={props.richHistoryButtonActive ? 'active' : 'canvas'}
|
||||
aria-label="Rich history button"
|
||||
aria-label="Query history"
|
||||
onClick={props.onClickRichHistoryButton}
|
||||
data-testid={Components.QueryTab.queryHistoryButton}
|
||||
icon="history"
|
||||
>
|
||||
Query history
|
||||
@ -53,11 +55,11 @@ export function SecondaryActions(props: Props) {
|
||||
)}
|
||||
<ToolbarButton
|
||||
variant={props.queryInspectorButtonActive ? 'active' : 'canvas'}
|
||||
aria-label="Query inspector button"
|
||||
aria-label="Query inspector"
|
||||
onClick={props.onClickQueryInspectorButton}
|
||||
icon="info-circle"
|
||||
>
|
||||
Inspector
|
||||
Query inspector
|
||||
</ToolbarButton>
|
||||
</HorizontalGroup>
|
||||
</div>
|
||||
|
@ -27,7 +27,7 @@ export const runQuery = async (exploreId = 'left') => {
|
||||
|
||||
export const openQueryHistory = async (exploreId = 'left') => {
|
||||
const selector = withinExplore(exploreId);
|
||||
const button = selector.getByRole('button', { name: 'Rich history button' });
|
||||
const button = selector.getByRole('button', { name: 'Query history' });
|
||||
await userEvent.click(button);
|
||||
expect(await selector.findByPlaceholderText('Search queries')).toBeInTheDocument();
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user