Loki code editor: do not run query on blur in explore mode (#49241)

* 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>

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}

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}