From e39d43db0abdb2a5e3b556f9b25237872db347c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Mon, 31 Jan 2022 19:06:08 +0100
Subject: [PATCH] Prometheus: Use explore query field unless new query editor
 feature toggle is enabled (#44650)

---
 .../prometheus/components/PromExploreQueryEditor.test.tsx | 2 +-
 .../prometheus/components/PromExploreQueryEditor.tsx      | 8 ++++----
 .../prometheus/components/PromQueryEditorByApp.test.tsx   | 3 ++-
 .../prometheus/components/PromQueryEditorByApp.tsx        | 6 ++++++
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx
index aeb454bcfa1..5fc77456d14 100644
--- a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import PromExploreQueryEditor, { testIds } from './PromExploreQueryEditor';
+import { PromExploreQueryEditor, testIds } from './PromExploreQueryEditor';
 import { testIds as extraFieldTestIds } from './PromExploreExtraField';
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery } from '../types';
diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx
index a953e1b98c8..140b1f66cd6 100644
--- a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { memo, FC, useEffect } from 'react';
+import React, { memo, useEffect } from 'react';
 import { QueryEditorProps, CoreApp } from '@grafana/data';
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery, PromOptions } from '../types';
@@ -7,7 +7,7 @@ import { PromExploreExtraField } from './PromExploreExtraField';
 
 export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>;
 
-export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
+export const PromExploreQueryEditor = memo((props: Props) => {
   const { range, query, data, datasource, history, onChange, onRunQuery } = props;
 
   // Setting default values
@@ -42,9 +42,9 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
       }
     />
   );
-};
+});
 
-export default memo(PromExploreQueryEditor);
+PromExploreQueryEditor.displayName = 'PromExploreQueryEditor';
 
 export const testIds = {
   editor: 'prom-editor-explore',
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx
index b50796142de..14b412b5419 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx
@@ -6,6 +6,7 @@ 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
@@ -59,7 +60,7 @@ describe('PromQueryEditorByApp', () => {
   it('should render regular query editor for explore', () => {
     const { getByTestId, queryByTestId } = setup(CoreApp.Explore);
 
-    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(getByTestId(exploreTestIds.editor)).toBeInTheDocument();
     expect(queryByTestId(alertingTestIds.editor)).toBeNull();
   });
 
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx
index 74300916fa5..9b1e9ed6fca 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx
@@ -5,6 +5,7 @@ import { PromQueryEditor } from './PromQueryEditor';
 import { PromQueryEditorForAlerting } from './PromQueryEditorForAlerting';
 import { config } from '@grafana/runtime';
 import { PromQueryEditorSelector } from '../querybuilder/components/PromQueryEditorSelector';
+import { PromExploreQueryEditor } from './PromExploreQueryEditor';
 
 export function PromQueryEditorByApp(props: PromQueryEditorProps) {
   const { app } = props;
@@ -12,6 +13,11 @@ export function PromQueryEditorByApp(props: PromQueryEditorProps) {
   switch (app) {
     case CoreApp.CloudAlerting:
       return <PromQueryEditorForAlerting {...props} />;
+    case CoreApp.Explore:
+      if (config.featureToggles.promQueryBuilder) {
+        return <PromQueryEditorSelector {...props} />;
+      }
+      return <PromExploreQueryEditor {...props} />;
     default:
       if (config.featureToggles.promQueryBuilder) {
         return <PromQueryEditorSelector {...props} />;