diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx index 869923d8424..e0abf6b80db 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx +++ b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx @@ -1,3 +1,4 @@ +import { isEqual } from 'lodash'; import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'; import { usePrevious } from 'react-use'; @@ -76,7 +77,9 @@ export const LokiQueryEditor = React.memo((props) => { }, [data]); const onChangeInternal = (query: LokiQuery) => { - setDataIsStale(true); + if (!isEqual(query, props.query)) { + setDataIsStale(true); + } onChange(query); }; diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx index f5d7c480857..7a317af5a27 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx +++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from 'react'; -import { CoreApp, QueryEditorProps } from '@grafana/data'; +import { QueryEditorProps } from '@grafana/data'; import { LokiDatasource } from '../datasource'; import { shouldRefreshLabels } from '../languageUtils'; @@ -66,7 +66,7 @@ export class LokiQueryField extends React.PureComponent
= {}) { +function renderComponent({ initialValue = '', onChange = jest.fn(), onRunQuery = jest.fn() }: Partial = {}) { const datasource = createLokiDatasource(); render( @@ -20,7 +15,6 @@ function renderComponent({ initialValue={initialValue} onChange={onChange} onRunQuery={onRunQuery} - runQueryOnBlur={runQueryOnBlur} placeholder="Enter a Loki query (run with Shift+Enter)" /> ); diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldWrapper.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldWrapper.tsx index f7f536b2a20..f4ac1b73774 100644 --- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldWrapper.tsx +++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldWrapper.tsx @@ -6,13 +6,12 @@ import { Props as MonacoProps } from './MonacoQueryFieldProps'; export type Props = Omit & { onChange: (query: string) => void; onRunQuery: () => void; - runQueryOnBlur: boolean; onQueryType?: (query: string) => void; }; export const MonacoQueryFieldWrapper = (props: Props) => { const lastRunValueRef = useRef(null); - const { runQueryOnBlur, onRunQuery, onChange, ...rest } = props; + const { onRunQuery, onChange, ...rest } = props; const handleRunQuery = (value: string) => { lastRunValueRef.current = value; @@ -21,14 +20,7 @@ export const MonacoQueryFieldWrapper = (props: Props) => { }; const handleBlur = (value: string) => { - if (runQueryOnBlur) { - // run handleRunQuery only if the current value is different from the last-time-executed value - if (value !== lastRunValueRef.current) { - handleRunQuery(value); - } - } else { - onChange(value); - } + onChange(value); }; return ; diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx index 1f10acda38e..d40d7b014cb 100644 --- a/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx @@ -148,7 +148,7 @@ describe('PromQueryField', () => { expect(labelBrowser.textContent).toContain('Metrics browser'); }); - it('should not run query onBlur in explore', async () => { + it('should not run query onBlur', async () => { const onRunQuery = jest.fn(); const { container } = render(); @@ -163,22 +163,6 @@ describe('PromQueryField', () => { await userEvent.click(document.body); expect(onRunQuery).not.toHaveBeenCalled(); }); - - it('should run query onBlur in dashboard', async () => { - const onRunQuery = jest.fn(); - const { container } = render(); - - // wait for component to rerender - await screen.findByRole('button'); - - const input = getByTestId(container, 'dummy-code-input'); - expect(input).toBeInTheDocument(); - await userEvent.type(input, 'metric'); - - // blur element - await userEvent.click(document.body); - expect(onRunQuery).toHaveBeenCalled(); - }); }); function makeLanguageProvider(options: { metrics: string[][] }) { diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx index e8ebe60700b..045fdefc119 100644 --- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx @@ -4,7 +4,7 @@ import React, { ReactNode } from 'react'; import { Plugin } from 'slate'; import { Editor } from 'slate-react'; -import { CoreApp, isDataFrame, QueryEditorProps, QueryHint, TimeRange, toLegacyResponseData } from '@grafana/data'; +import { isDataFrame, QueryEditorProps, QueryHint, TimeRange, toLegacyResponseData } from '@grafana/data'; import { reportInteraction } from '@grafana/runtime/src'; import { BracesPlugin, @@ -310,7 +310,6 @@ class PromQueryField extends React.PureComponent & { onChange: (query: string) => void; onRunQuery: () => void; - runQueryOnBlur: boolean; }; export const MonacoQueryFieldWrapper = (props: Props) => { const lastRunValueRef = useRef(null); - const { runQueryOnBlur, onRunQuery, onChange, ...rest } = props; + const { onRunQuery, onChange, ...rest } = props; const handleRunQuery = (value: string) => { lastRunValueRef.current = value; @@ -20,14 +19,7 @@ export const MonacoQueryFieldWrapper = (props: Props) => { }; const handleBlur = (value: string) => { - if (runQueryOnBlur) { - // run handleRunQuery only if the current value is different from the last-time-executed value - if (value !== lastRunValueRef.current) { - handleRunQuery(value); - } - } else { - onChange(value); - } + onChange(value); }; /** diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx index 524d1e03f10..e7861247fd3 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx @@ -1,4 +1,4 @@ -import { map } from 'lodash'; +import { isEqual, map } from 'lodash'; import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'; import { CoreApp, LoadingState, SelectableValue } from '@grafana/data'; @@ -82,7 +82,9 @@ export const PromQueryEditorSelector = React.memo((props) => { }, [data]); const onChangeInternal = (query: PromQuery) => { - setDataIsStale(true); + if (!isEqual(query, props.query)) { + setDataIsStale(true); + } onChange(query); }; @@ -138,7 +140,9 @@ export const PromQueryEditorSelector = React.memo((props) => { - {editorMode === QueryEditorMode.Code && } + {editorMode === QueryEditorMode.Code && ( + + )} {editorMode === QueryEditorMode.Builder && (