From 073f747679df9110acb6c05c9bbe7024d3b107d3 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 26 May 2022 09:21:37 -0400
Subject: [PATCH] Loki code editor: do not run query on blur in explore mode
 (#49241) (#49696)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* loki code editor: do not run query on blur in explore mode

* loki: code editor: better change tracking

* fixed comment

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
(cherry picked from commit 386181cf4565ae558fab9fa5a6033680e4daa1c8)

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>
---
 .../components/LokiQueryCodeEditor.tsx        | 22 +++++++++++++++++--
 .../components/LokiQueryEditorSelector.tsx    |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
index 1354458a7ac..2ea26ae1f60 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
@@ -1,16 +1,33 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { CoreApp, GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 import { testIds } from '../../components/LokiQueryEditor';
 import { LokiQueryField } from '../../components/LokiQueryField';
 import { LokiQueryEditorProps } from '../../components/types';
 
-export function LokiQueryCodeEditor({ query, datasource, range, onRunQuery, onChange, data }: LokiQueryEditorProps) {
+export function LokiQueryCodeEditor({
+  query,
+  datasource,
+  range,
+  onRunQuery,
+  onChange,
+  data,
+  app,
+}: LokiQueryEditorProps) {
   const styles = useStyles2(getStyles);
 
+  // the inner QueryField works like this when a blur event happens:
+  // - if it has an onBlur prop, it calls it
+  // - else it calls onRunQuery (some extra conditions apply)
+  //
+  // we want it to not do anything when a blur event happens in explore mode,
+  // so we set an empty-function in such case. otherwise we set `undefined`,
+  // which will cause it to run the query when blur happens.
+  const onBlur = app === CoreApp.Explore ? () => undefined : undefined;
+
   return (
     <div className={styles.wrapper}>
       <LokiQueryField
@@ -19,6 +36,7 @@ export function LokiQueryCodeEditor({ query, datasource, range, onRunQuery, onCh
         range={range}
         onRunQuery={onRunQuery}
         onChange={onChange}
+        onBlur={onBlur}
         history={[]}
         data={data}
         data-testid={testIds.editor}
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
index fbb5f1d4f82..3d264ea554d 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
@@ -111,7 +111,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
       </EditorHeader>
       <Space v={0.5} />
       <EditorRows>
-        {editorMode === QueryEditorMode.Code && <LokiQueryCodeEditor {...props} />}
+        {editorMode === QueryEditorMode.Code && <LokiQueryCodeEditor {...props} onChange={onChangeInternal} />}
         {editorMode === QueryEditorMode.Builder && (
           <LokiQueryBuilderContainer
             datasource={props.datasource}