QueryField: Prevent query runs on blur in Explore (#20180)

As discussed in a UX feedback session, it's annoying that queries are
automatically executed in Explore. This change adds props to override
the blur behavior.

- add `onBlur` to Explore query field props
- Explore's query row will pass down an empty function for onBlur to the
query fields
- pass onBlur through to the QueryField component for Loki and
Prometheus
- add test to QueryField to make sure if onBlur is specified, the
onRunQuery is not executed

packages/grafana-ui/src/components/QueryField/QueryField.tsx

@@ -27,6 +27,7 @@ export interface QueryFieldProps {
   // creating a two way binding.
   query: string | null;
   onRunQuery?: () => void;
+  onBlur?: () => void;
   onChange?: (value: string) => void;
   onTypeahead?: (typeahead: TypeaheadInput) => Promise<TypeaheadOutput>;
   onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;
@@ -171,11 +172,17 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
    * We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.
    */
   handleBlur = (event: Event, editor: CoreEditor, next: Function) => {
-    const previousValue = this.lastExecutedValue ? Plain.serialize(this.lastExecutedValue) : null;
-    const currentValue = Plain.serialize(editor.value);
+    const { onBlur } = this.props;
+    if (onBlur) {
+      onBlur();
+    } else {
+      // Run query by default on blur
+      const previousValue = this.lastExecutedValue ? Plain.serialize(this.lastExecutedValue) : null;
+      const currentValue = Plain.serialize(editor.value);
 
-    if (previousValue !== currentValue) {
-      this.runOnChangeAndRunQuery();
+      if (previousValue !== currentValue) {
+        this.runOnChangeAndRunQuery();
+      }
     }
     return next();
   };