Prometheus: Use explore query field unless new query editor feature toggle is enabled (#44650)

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';

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',

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();
   });
 

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} />;