From e8ef0395b142244da462c5b2c49f3e0d10f8c310 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= Date: Thu, 12 Jan 2023 21:14:55 +0100 Subject: [PATCH] Glue: Hide run queries button in Correlations Page (#61039) * Hide run queries button in Correlations Page when showing Loki and Prometheus editors * Use more semantic selectors Co-authored-by: Giordano Ricci * Use more semantic selectors Co-authored-by: Giordano Ricci * Post-merge fix (remove duplicate) Co-authored-by: Giordano Ricci --- packages/grafana-data/src/types/app.ts | 2 +- .../correlations/Forms/QueryEditorField.tsx | 1 + .../loki/components/LokiQueryEditor.test.tsx | 42 +++++++++++++++++-- .../loki/components/LokiQueryEditor.tsx | 2 +- .../PromQueryEditorSelector.test.tsx | 35 +++++++++++++--- .../components/PromQueryEditorSelector.tsx | 4 +- 6 files changed, 73 insertions(+), 13 deletions(-) diff --git a/packages/grafana-data/src/types/app.ts b/packages/grafana-data/src/types/app.ts index 40da580ae5b..aeb336fb15f 100644 --- a/packages/grafana-data/src/types/app.ts +++ b/packages/grafana-data/src/types/app.ts @@ -13,10 +13,10 @@ export enum CoreApp { UnifiedAlerting = 'unified-alerting', Dashboard = 'dashboard', Explore = 'explore', + Correlations = 'correlations', Unknown = 'unknown', PanelEditor = 'panel-editor', PanelViewer = 'panel-viewer', - Correlations = 'correlations', } export interface AppRootProps { diff --git a/public/app/features/correlations/Forms/QueryEditorField.tsx b/public/app/features/correlations/Forms/QueryEditorField.tsx index c1e039f7b9c..53f425a08ff 100644 --- a/public/app/features/correlations/Forms/QueryEditorField.tsx +++ b/public/app/features/correlations/Forms/QueryEditorField.tsx @@ -130,6 +130,7 @@ export const QueryEditorField = ({ dsUid, invalid, error, name }: Props) => { return ( <> handleValidation(value)} onChange={(value) => { setIsValidQuery(undefined); diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx index 28efdb5e183..f911314e545 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx +++ b/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx @@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'; import { cloneDeep, defaultsDeep } from 'lodash'; import React from 'react'; +import { CoreApp } from '@grafana/data'; import { config } from '@grafana/runtime'; import { QueryEditorMode } from 'app/plugins/datasource/prometheus/querybuilder/shared/types'; @@ -11,6 +12,7 @@ import { EXPLAIN_LABEL_FILTER_CONTENT } from '../querybuilder/components/LokiQue import { LokiQuery, LokiQueryType } from '../types'; import { LokiQueryEditor } from './LokiQueryEditor'; +import { LokiQueryEditorProps } from './types'; jest.mock('@grafana/runtime', () => { return { @@ -19,6 +21,15 @@ jest.mock('@grafana/runtime', () => { }; }); +// We need to mock this because it seems jest has problem importing monaco in tests +jest.mock('./monaco-query-field/MonacoQueryFieldWrapper', () => { + return { + MonacoQueryFieldWrapper: () => { + return 'MonacoQueryFieldWrapper'; + }, + }; +}); + jest.mock('app/core/store', () => { return { get() { @@ -82,6 +93,21 @@ describe('LokiQueryEditorSelector', () => { await expectBuilder(); }); + it('shows Run Queries button in Dashboards', () => { + renderWithProps({}, { app: CoreApp.Dashboard }); + expectRunQueriesButton(); + }); + + it('hides Run Queries button in Explore', async () => { + renderWithProps({}, { app: CoreApp.Explore }); + expectNoRunQueriesButton(); + }); + + it('hides Run Queries button in Correlations Page', async () => { + renderWithProps({}, { app: CoreApp.Correlations }); + await expectNoRunQueriesButton(); + }); + it('changes to builder mode', async () => { const { onChange } = renderWithMode(QueryEditorMode.Code); await expectCodeEditor(); @@ -160,23 +186,31 @@ function renderWithMode(mode: QueryEditorMode) { return renderWithProps({ editorMode: mode }); } -function renderWithProps(overrides?: Partial) { +function renderWithProps(overrides?: Partial, componentProps: Partial = {}) { const query = defaultsDeep(overrides ?? {}, cloneDeep(defaultQuery)); const onChange = jest.fn(); - const stuff = render(); + const allProps = { ...defaultProps, ...componentProps }; + const stuff = render(); return { onChange, ...stuff }; } async function expectCodeEditor() { - // Label browser shows this until log labels are loaded. - expect(await screen.findByText('Loading...')).toBeInTheDocument(); + expect(await screen.findByText('MonacoQueryFieldWrapper')).toBeInTheDocument(); } async function expectBuilder() { expect(await screen.findByText('Label filters')).toBeInTheDocument(); } +function expectRunQueriesButton() { + expect(screen.getByRole('button', { name: /run queries/i })).toBeInTheDocument(); +} + +function expectNoRunQueriesButton() { + expect(screen.queryByRole('button', { name: /run queries/i })).not.toBeInTheDocument(); +} + async function switchToMode(mode: QueryEditorMode) { const label = { [QueryEditorMode.Code]: /Code/, diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx index 771103990e7..b3b8563591f 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx +++ b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx @@ -138,7 +138,7 @@ export const LokiQueryEditor = React.memo((props) => { - {app !== CoreApp.Explore && ( + {app !== CoreApp.Explore && app !== CoreApp.Correlations && (