prometheus: monaco: handle in-dashboard and in-explore use cases (#40922)

* prometheus: monaco: handle in-dashboard and in-explore use cases

* refactor is-explore handling

* improved comment

* removed unnecessary comment

* reordered props

* simplify code

* refactor: better prop-name

* fixed test snapshot

public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx

@@ -1,5 +1,5 @@
 import React, { memo, FC, useEffect } from 'react';
-import { QueryEditorProps } from '@grafana/data';
+import { QueryEditorProps, CoreApp } from '@grafana/data';
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery, PromOptions } from '../types';
 import PromQueryField from './PromQueryField';
@@ -26,6 +26,7 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
 
   return (
     <PromQueryField
+      app={CoreApp.Explore}
       datasource={datasource}
       query={query}
       range={range}

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -19,10 +19,10 @@ import { LanguageMap, languages as prismLanguages } from 'prismjs';
 import { PromQuery, PromOptions } from '../types';
 import { roundMsToMin } from '../language_utils';
 import { CancelablePromise, makePromiseCancelable } from 'app/core/utils/CancelablePromise';
-import { QueryEditorProps, QueryHint, isDataFrame, toLegacyResponseData, TimeRange } from '@grafana/data';
+import { QueryEditorProps, QueryHint, isDataFrame, toLegacyResponseData, TimeRange, CoreApp } from '@grafana/data';
 import { PrometheusDatasource } from '../datasource';
 import { PrometheusMetricsBrowser } from './PrometheusMetricsBrowser';
-import { MonacoQueryFieldLazy } from './monaco-query-field/MonacoQueryFieldLazy';
+import { MonacoQueryFieldWrapper } from './monaco-query-field/MonacoQueryFieldWrapper';
 import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
 
 export const RECORDING_RULES_GROUP = '__recording_rules__';
@@ -298,7 +298,8 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
 
                 <div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
                   {isMonacoEditorEnabled ? (
-                    <MonacoQueryFieldLazy
+                    <MonacoQueryFieldWrapper
+                      runQueryOnBlur={this.props.app !== CoreApp.Explore}
                       languageProvider={languageProvider}
                       history={history}
                       onChange={this.onChangeQuery}

public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap

@@ -24,6 +24,7 @@ exports[`PromExploreQueryEditor should render component 1`] = `
       }
     />
   }
+  app="explore"
   data={
     Object {
       "request": Object {

public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx

@@ -62,11 +62,12 @@ const getStyles = (theme: GrafanaTheme2) => {
 
 const MonacoQueryField = (props: Props) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const { languageProvider, history, onChange, initialValue } = props;
+  const { languageProvider, history, onBlur, onRunQuery, initialValue } = props;
 
   const lpRef = useLatest(languageProvider);
   const historyRef = useLatest(history);
-  const onChangeRef = useLatest(onChange);
+  const onRunQueryRef = useLatest(onRunQuery);
+  const onBlurRef = useLatest(onBlur);
 
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
 
@@ -96,7 +97,7 @@ const MonacoQueryField = (props: Props) => {
         onMount={(editor, monaco) => {
           // we setup on-blur
           editor.onDidBlurEditorWidget(() => {
-            onChangeRef.current(editor.getValue());
+            onBlurRef.current(editor.getValue());
           });
 
           // we construct a DataProvider object
@@ -169,9 +170,7 @@ const MonacoQueryField = (props: Props) => {
           // handle: shift + enter
           // FIXME: maybe move this functionality into CodeEditor?
           editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => {
-            const text = editor.getValue();
-            props.onChange(text);
-            props.onRunQuery();
+            onRunQueryRef.current(editor.getValue());
           });
         }}
       />

public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts

@@ -10,6 +10,6 @@ export type Props = {
   initialValue: string;
   languageProvider: PromQlLanguageProvider;
   history: Array<HistoryItem<PromQuery>>;
-  onChange: (query: string) => void;
-  onRunQuery: () => void;
+  onRunQuery: (value: string) => void;
+  onBlur: (value: string) => void;
 };

public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx

@@ -0,0 +1,33 @@
+import React, { useRef } from 'react';
+import { MonacoQueryFieldLazy } from './MonacoQueryFieldLazy';
+import { Props as MonacoProps } from './MonacoQueryFieldProps';
+
+type Props = Omit<MonacoProps, 'onRunQuery' | 'onBlur'> & {
+  onChange: (query: string) => void;
+  onRunQuery: () => void;
+  runQueryOnBlur: boolean;
+};
+
+export const MonacoQueryFieldWrapper = (props: Props) => {
+  const lastRunValueRef = useRef<string | null>(null);
+  const { runQueryOnBlur, onRunQuery, onChange, ...rest } = props;
+
+  const handleRunQuery = (value: string) => {
+    lastRunValueRef.current = value;
+    onChange(value);
+    onRunQuery();
+  };
+
+  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);
+    }
+  };
+
+  return <MonacoQueryFieldLazy onRunQuery={handleRunQuery} onBlur={handleBlur} {...rest} />;
+};