Prometheus: Fix executing query onBlur in Explore (#47561)

public/app/core/config.ts

@@ -18,5 +18,5 @@ export const updateConfig = (update: Partial<GrafanaBootConfig>) => {
   };
 };
 
-// The `enable_alpha` flag is no exposed directly, this is equivolant
+// The `enable_alpha` flag is not exposed directly, this is equivalent
 export const hasAlphaPanels = Boolean(config.panels?.debug?.state === PluginState.alpha);

public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx

@@ -1,24 +1,41 @@
 import React from 'react';
 import { render, RenderResult } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { PromQueryEditorByApp } from './PromQueryEditorByApp';
 import { CoreApp } from '@grafana/data';
 import { noop } from 'lodash';
 import { PrometheusDatasource } from '../datasource';
 import { testIds as alertingTestIds } from './PromQueryEditorForAlerting';
 import { testIds as regularTestIds } from './PromQueryEditor';
-import { testIds as exploreTestIds } from './PromExploreQueryEditor';
 
 // the monaco-based editor uses lazy-loading and that does not work
 // well with this test, and we do not need the monaco-related
 // functionality in this test anyway, so we mock it out.
-jest.mock('./monaco-query-field/MonacoQueryFieldWrapper', () => {
-  const fakeQueryField = () => <div>prometheus query field</div>;
+jest.mock('./monaco-query-field/MonacoQueryFieldLazy', () => {
+  const fakeQueryField = (props: any) => {
+    return <input onBlur={props.onBlur} data-testid={'dummy-code-input'} type={'text'} />;
+  };
   return {
-    MonacoQueryFieldWrapper: fakeQueryField,
+    MonacoQueryFieldLazy: fakeQueryField,
   };
 });
 
-function setup(app: CoreApp): RenderResult {
+jest.mock('@grafana/runtime', () => {
+  const runtime = jest.requireActual('@grafana/runtime');
+  return {
+    __esModule: true,
+    ...runtime,
+    config: {
+      ...runtime.config,
+      featureToggles: {
+        ...runtime.config.featureToggles,
+        promQueryBuilder: true,
+      },
+    },
+  };
+});
+
+function setup(app: CoreApp): RenderResult & { onRunQuery: jest.Mock } {
   const dataSource = {
     createQuery: jest.fn((q) => q),
     getInitHints: () => [],
@@ -30,16 +47,22 @@ function setup(app: CoreApp): RenderResult {
       metrics: [],
     },
   } as unknown as PrometheusDatasource;
+  const onRunQuery = jest.fn();
 
-  return render(
+  const renderOutput = render(
     <PromQueryEditorByApp
       app={app}
       onChange={noop}
-      onRunQuery={noop}
+      onRunQuery={onRunQuery}
       datasource={dataSource}
       query={{ refId: 'A', expr: '' }}
     />
   );
+
+  return {
+    ...renderOutput,
+    onRunQuery,
+  };
 }
 
 describe('PromQueryEditorByApp', () => {
@@ -50,24 +73,44 @@ describe('PromQueryEditorByApp', () => {
     expect(queryByTestId(regularTestIds.editor)).toBeNull();
   });
 
-  it('should render regular query editor for unkown apps', () => {
+  it('should render editor selector for unkown apps', () => {
     const { getByTestId, queryByTestId } = setup(CoreApp.Unknown);
 
-    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(getByTestId('QueryEditorModeToggle')).toBeInTheDocument();
     expect(queryByTestId(alertingTestIds.editor)).toBeNull();
   });
 
-  it('should render regular query editor for explore', () => {
+  it('should render editor selector for explore', () => {
     const { getByTestId, queryByTestId } = setup(CoreApp.Explore);
 
-    expect(getByTestId(exploreTestIds.editor)).toBeInTheDocument();
+    expect(getByTestId('QueryEditorModeToggle')).toBeInTheDocument();
     expect(queryByTestId(alertingTestIds.editor)).toBeNull();
   });
 
-  it('should render regular query editor for dashboard', () => {
+  it('should render editor selector for dashboard', () => {
     const { getByTestId, queryByTestId } = setup(CoreApp.Dashboard);
 
-    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(getByTestId('QueryEditorModeToggle')).toBeInTheDocument();
     expect(queryByTestId(alertingTestIds.editor)).toBeNull();
   });
+
+  it('should not run query onBlur in explore', () => {
+    const { getByTestId, onRunQuery } = setup(CoreApp.Explore);
+
+    const input = getByTestId('dummy-code-input');
+    expect(input).toBeInTheDocument();
+    userEvent.type(input, 'metric');
+    input.blur();
+    expect(onRunQuery).not.toHaveBeenCalled();
+  });
+
+  it('should run query onBlur in dashboard', () => {
+    const { getByTestId, onRunQuery } = setup(CoreApp.Dashboard);
+
+    const input = getByTestId('dummy-code-input');
+    expect(input).toBeInTheDocument();
+    userEvent.type(input, 'metric');
+    input.blur();
+    expect(onRunQuery).toHaveBeenCalled();
+  });
 });

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryCodeEditor.tsx

@@ -6,7 +6,15 @@ import { useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 
-export function PromQueryCodeEditor({ query, datasource, range, onRunQuery, onChange, data }: PromQueryEditorProps) {
+export function PromQueryCodeEditor({
+  query,
+  datasource,
+  range,
+  onRunQuery,
+  onChange,
+  data,
+  app,
+}: PromQueryEditorProps) {
   const styles = useStyles2(getStyles);
 
   return (
@@ -20,6 +28,7 @@ export function PromQueryCodeEditor({ query, datasource, range, onRunQuery, onCh
         history={[]}
         data={data}
         data-testid={testIds.editor}
+        app={app}
       />
     </div>
   );

public/app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle.tsx

@@ -29,5 +29,9 @@ const editorModes = [
 ];
 
 export function QueryEditorModeToggle({ mode, onChange }: Props) {
-  return <RadioButtonGroup options={editorModes} size="sm" value={mode} onChange={onChange} />;
+  return (
+    <div data-testid={'QueryEditorModeToggle'}>
+      <RadioButtonGroup options={editorModes} size="sm" value={mode} onChange={onChange} />
+    </div>
+  );
 }