Loki: Use explore query field unless new query builder feature toggle is enabled (#44858)

* Loki: Fix using of Explore editor in Explore

* Add test and remove Explore fields in module

* Update tests

public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import LokiExploreQueryEditor from './LokiExploreQueryEditor';
+import { LokiExploreQueryEditor } from './LokiExploreQueryEditor';
 import { LokiOptionFields } from './LokiOptionFields';
 import { LokiDatasource } from '../datasource';
 import { LokiQuery } from '../types';

public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx

@@ -10,7 +10,7 @@ import { LokiOptionFields } from './LokiOptionFields';
 
 type Props = QueryEditorProps<LokiDatasource, LokiQuery, LokiOptions>;
 
-export function LokiExploreQueryEditor(props: Props) {
+export const LokiExploreQueryEditor = memo((props: Props) => {
   const { query, data, datasource, history, onChange, onRunQuery, range } = props;
 
   return (
@@ -23,6 +23,7 @@ export function LokiExploreQueryEditor(props: Props) {
       history={history}
       data={data}
       range={range}
+      data-testid={testIds.editor}
       ExtraFieldElement={
         <LokiOptionFields
           lineLimitValue={query?.maxLines?.toString() || ''}
@@ -34,6 +35,10 @@ export function LokiExploreQueryEditor(props: Props) {
       }
     />
   );
-}
+});
 
-export default memo(LokiExploreQueryEditor);
+LokiExploreQueryEditor.displayName = 'LokiExploreQueryEditor';
+
+export const testIds = {
+  editor: 'loki-editor-explore',
+};

public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.test.tsx

@@ -5,7 +5,8 @@ import { noop } from 'lodash';
 import { LokiDatasource } from '../datasource';
 import { testIds as alertingTestIds } from './LokiQueryEditorForAlerting';
 import { testIds as regularTestIds } from './LokiQueryEditor';
-import LokiQueryEditorByApp from './LokiQueryEditorByApp';
+import { testIds as exploreTestIds } from './LokiExploreQueryEditor';
+import { LokiQueryEditorByApp } from './LokiQueryEditorByApp';
 
 function setup(app: CoreApp): RenderResult {
   const dataSource = {
@@ -43,10 +44,10 @@ describe('LokiQueryEditorByApp', () => {
     expect(queryByTestId(alertingTestIds.editor)).toBeNull();
   });
 
-  it('should render regular query editor for explore', () => {
+  it('should render expore 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/loki/components/LokiQueryEditorByApp.tsx

@@ -3,6 +3,7 @@ import { CoreApp } from '@grafana/data';
 import { LokiQueryEditorProps } from './types';
 import { LokiQueryEditor } from './LokiQueryEditor';
 import { LokiQueryEditorForAlerting } from './LokiQueryEditorForAlerting';
+import { LokiExploreQueryEditor } from './LokiExploreQueryEditor';
 import { LokiQueryEditorSelector } from '../querybuilder/components/LokiQueryEditorSelector';
 import { config } from '@grafana/runtime';
 
@@ -12,6 +13,11 @@ export function LokiQueryEditorByApp(props: LokiQueryEditorProps) {
   switch (app) {
     case CoreApp.CloudAlerting:
       return <LokiQueryEditorForAlerting {...props} />;
+    case CoreApp.Explore:
+      if (config.featureToggles.lokiQueryBuilder) {
+        return <LokiQueryEditorSelector {...props} />;
+      }
+      return <LokiExploreQueryEditor {...props} />;
     default:
       if (config.featureToggles.lokiQueryBuilder) {
         return <LokiQueryEditorSelector {...props} />;

public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreQueryEditor.test.tsx.snap

@@ -51,6 +51,7 @@ exports[`LokiExploreQueryEditor should render component 1`] = `
       },
     }
   }
+  data-testid="loki-editor-explore"
   datasource={
     Object {
       "getTimeRangeParams": [Function],

public/app/plugins/datasource/loki/module.ts

@@ -9,6 +9,5 @@ import { ConfigEditor } from './configuration/ConfigEditor';
 export const plugin = new DataSourcePlugin(Datasource)
   .setQueryEditor(LokiQueryEditorByApp)
   .setConfigEditor(ConfigEditor)
-  .setExploreQueryField(LokiQueryEditorByApp)
   .setQueryEditorHelp(LokiCheatSheet)
   .setAnnotationQueryCtrl(LokiAnnotationsQueryCtrl);

public/app/plugins/datasource/prometheus/module.test.ts

@@ -3,7 +3,6 @@ import { ANNOTATION_QUERY_STEP_DEFAULT } from './datasource';
 
 describe('module', () => {
   it('should have metrics query field in panels and Explore', () => {
-    expect(PrometheusDatasourcePlugin.components.ExploreMetricsQueryField).toBeDefined();
     expect(PrometheusDatasourcePlugin.components.QueryEditor).toBeDefined();
   });
   it('should have stepDefaultValuePlaceholder set in annotations ctrl', () => {

public/app/plugins/datasource/prometheus/module.ts

@@ -14,6 +14,5 @@ class PrometheusAnnotationsQueryCtrl {
 export const plugin = new DataSourcePlugin(PrometheusDatasource)
   .setQueryEditor(PromQueryEditorByApp)
   .setConfigEditor(ConfigEditor)
-  .setExploreMetricsQueryField(PromQueryEditorByApp)
   .setAnnotationQueryCtrl(PrometheusAnnotationsQueryCtrl)
   .setQueryEditorHelp(PromCheatSheet);