Explore: simplify support for multiple query editors (#48701)

* Explore: simplify support for multiple query editors

* CloudWatch: remove usage of deprecated plugin methods

* Apply suggestions from code review

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Update docs/sources/developers/plugins/add-support-for-explore-queries.md

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Update docs/sources/developers/plugins/add-support-for-explore-queries.md

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* run prettier

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

docs/sources/developers/plugins/add-query-editor-help.md

@@ -27,7 +27,6 @@ By adding a help component to your plugin, you can for example create "cheat she
    export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
      .setConfigEditor(ConfigEditor)
      .setQueryEditor(QueryEditor)
-     .setExploreQueryField(ExploreQueryEditor)
      .setQueryEditorHelp(QueryEditorHelp);
    ```
 

docs/sources/developers/plugins/add-support-for-explore-queries.md

@@ -10,11 +10,11 @@ This guide assumes that you're already familiar with how to [Build a data source
 
 With Explore, users can make ad-hoc queries without the use of a dashboard. This is useful when users want to troubleshoot or to learn more about the data.
 
-Your data source already supports Explore by default, and will use the existing query editor for the data source. If you want to offer extended Explore functionality for your data source however, you can define a Explore-specific query editor.
+Your data source supports Explore by default and uses the existing query editor for the data source.
 
-## Add a query editor for Explore
+## Add an Explore-specific query editor
 
-The query editor for Explore is similar to the query editor for the data source itself. In fact, you'll probably reuse the same components for both query editors.
+To extend Explore functionality for your data source, you can define an Explore-specific query editor.
 
 1. Create a file `ExploreQueryEditor.tsx` in the `src` directory of your plugin, with the following content:
 
@@ -26,60 +26,31 @@ The query editor for Explore is similar to the query editor for the data source
    import { DataSource } from './DataSource';
    import { MyQuery, MyDataSourceOptions } from './types';
 
-   export type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
+   type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
    export default (props: Props) => {
-     return <h2>My query editor</h2>;
+     return <h2>My Explore-specific query editor</h2>;
    };
    ```
 
-1. Configure the plugin to use the `ExploreQueryEditor`.
+1. Modify your base query editor in `QueryEditor.tsx` to render the Explore-specific query editor. For example:
 
    ```ts
+   // [...]
+   import { CoreApp } from '@grafana/data';
    import ExploreQueryEditor from './ExploreQueryEditor';
-   ```
 
-   ```ts
+   type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
-   export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
-     .setConfigEditor(ConfigEditor)
-     .setQueryEditor(QueryEditor)
-     .setExploreQueryField(ExploreQueryEditor);
-   ```
 
-1. Add a `QueryField` to `ExploreQueryEditor`.
-
-   ```ts
-   import { QueryField } from '@grafana/ui';
-   ```
-
-   ```ts
    export default (props: Props) => {
-     const { query } = props;
+     const { app } = props;
 
-     const onQueryChange = (value: string, override?: boolean) => {
+     switch (app) {
-       const { query, onChange, onRunQuery } = props;
+       case CoreApp.Explore:
-
+         return <ExploreQueryEditor {...props} />;
-       if (onChange) {
+       default:
-         // Update the query whenever the query field changes.
+         return <div>My base query editor</div>;
-         onChange({ ...query, queryText: value });
-
-         // Run the query on Enter.
-         if (override && onRunQuery) {
-           onRunQuery();
      }
-       }
-     };
-
-     return (
-       <QueryField
-         portalOrigin="mock-origin"
-         onChange={onQueryChange}
-         onRunQuery={props.onRunQuery}
-         onBlur={props.onBlur}
-         query={query.queryText || ''}
-         placeholder="Enter a query"
-       />
-     );
    };
    ```
 

packages/grafana-data/src/types/datasource.ts

@@ -65,16 +65,19 @@ export class DataSourcePlugin<
     return this;
   }
 
+  /** @deprecated Use `setQueryEditor` instead. When using Explore `props.app` is equal to `CoreApp.Explore` */
   setExploreQueryField(ExploreQueryField: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>) {
     this.components.ExploreQueryField = ExploreQueryField;
     return this;
   }
 
+  /** @deprecated Use `setQueryEditor` instead. */
   setExploreMetricsQueryField(ExploreQueryField: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>) {
     this.components.ExploreMetricsQueryField = ExploreQueryField;
     return this;
   }
 
+  /** @deprecated Use `setQueryEditor` instead. */
   setExploreLogsQueryField(ExploreQueryField: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>) {
     this.components.ExploreLogsQueryField = ExploreQueryField;
     return this;
@@ -151,8 +154,11 @@ export interface DataSourcePluginComponents<
   AnnotationsQueryCtrl?: any;
   VariableQueryEditor?: any;
   QueryEditor?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
+  /** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */
   ExploreQueryField?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
+  /** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */
   ExploreMetricsQueryField?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
+  /** @deprecated it will be removed in a future release and `QueryEditor` will be used instead. */
   ExploreLogsQueryField?: ComponentType<QueryEditorProps<DSType, TQuery, TOptions>>;
   QueryEditorHelp?: ComponentType<QueryEditorHelpProps<TQuery>>;
   ConfigEditor?: ComponentType<DataSourcePluginOptionsEditorProps<TOptions, TSecureOptions>>;

public/app/plugins/datasource/cloudwatch/module.tsx

@@ -2,7 +2,6 @@ import { DataSourcePlugin } from '@grafana/data';
 
 import { ConfigEditor } from './components/ConfigEditor';
 import LogsCheatSheet from './components/LogsCheatSheet';
-import { CloudWatchLogsQueryEditor } from './components/LogsQueryEditor';
 import { MetaInspector } from './components/MetaInspector';
 import { PanelQueryEditor } from './components/PanelQueryEditor';
 import { CloudWatchDatasource } from './datasource';
@@ -14,6 +13,4 @@ export const plugin = new DataSourcePlugin<CloudWatchDatasource, CloudWatchQuery
   .setQueryEditorHelp(LogsCheatSheet)
   .setConfigEditor(ConfigEditor)
   .setQueryEditor(PanelQueryEditor)
-  .setMetadataInspector(MetaInspector)
+  .setMetadataInspector(MetaInspector);
-  .setExploreMetricsQueryField(PanelQueryEditor)
-  .setExploreLogsQueryField(CloudWatchLogsQueryEditor);