Explore: Refactor QueryRow to use ConnectedProps (#36604)

* Refactor QueryRow

* Upddate import in test

* Simplify typing

* Add copy when loading instance

public/app/features/explore/QueryRow.test.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
-import { QueryRow, QueryRowProps } from './QueryRow';
+import { QueryRow } from './QueryRow';
 import { shallow } from 'enzyme';
 import { ExploreId } from 'app/types/explore';
 import { DataSourceApi, TimeRange, AbsoluteTimeRange, PanelData, EventBusExtended } from '@grafana/data';
 
 const setup = (propOverrides?: object) => {
-  const props: QueryRowProps = {
+  const props: ComponentProps<typeof QueryRow> = {
     exploreId: ExploreId.left,
     index: 1,
     exploreEvents: {} as EventBusExtended,

public/app/features/explore/QueryRow.tsx

@@ -2,53 +2,24 @@
 import React, { PureComponent } from 'react';
 import { debounce, has } from 'lodash';
 import { hot } from 'react-hot-loader';
-// @ts-ignore
+import { connect, ConnectedProps } from 'react-redux';
-import { connect } from 'react-redux';
-// Components
 import AngularQueryEditor from './QueryEditor';
 import { QueryRowActions } from './QueryRowActions';
-// Types
 import { StoreState } from 'app/types';
-import {
+import { DataQuery, LoadingState, DataSourceApi } from '@grafana/data';
-  DataQuery,
-  DataSourceApi,
-  PanelData,
-  HistoryItem,
-  TimeRange,
-  AbsoluteTimeRange,
-  LoadingState,
-  EventBusExtended,
-} from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-
 import { ExploreItemState, ExploreId } from 'app/types/explore';
 import { highlightLogsExpressionAction } from './state/explorePane';
 import { ErrorContainer } from './ErrorContainer';
 import { changeQuery, modifyQueries, removeQueryRowAction, runQueries } from './state/query';
 import { HelpToggle } from '../query/components/HelpToggle';
 
-interface PropsFromParent {
+interface OwnProps {
   exploreId: ExploreId;
   index: number;
 }
 
-export interface QueryRowProps extends PropsFromParent {
+type QueryRowProps = OwnProps & ConnectedProps<typeof connector>;
-  changeQuery: typeof changeQuery;
-  className?: string;
-  exploreId: ExploreId;
-  datasourceInstance: DataSourceApi;
-  highlightLogsExpressionAction: typeof highlightLogsExpressionAction;
-  history: HistoryItem[];
-  query: DataQuery;
-  modifyQueries: typeof modifyQueries;
-  range: TimeRange;
-  absoluteRange: AbsoluteTimeRange;
-  removeQueryRowAction: typeof removeQueryRowAction;
-  runQueries: typeof runQueries;
-  queryResponse: PanelData;
-  latency: number;
-  exploreEvents: EventBusExtended;
-}
 
 interface QueryRowState {
   textEditModeEnabled: boolean;
@@ -70,7 +41,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
   onChange = (query: DataQuery, override?: boolean) => {
     const { datasourceInstance, exploreId, index } = this.props;
     this.props.changeQuery(exploreId, query, index, override);
-    if (query && !override && datasourceInstance.getHighlighterExpression && index === 0) {
+    if (query && !override && datasourceInstance?.getHighlighterExpression && index === 0) {
       // Live preview of log search matches. Only use on first row for now
       this.updateLogsHighlights(query);
     }
@@ -95,10 +66,8 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
     this.setState({ textEditModeEnabled: !this.state.textEditModeEnabled });
   };
 
-  setReactQueryEditor = () => {
+  setReactQueryEditor = (datasourceInstance: DataSourceApi) => {
-    const { datasourceInstance } = this.props;
     let QueryEditor;
-
     // TODO:unification
     if (datasourceInstance.components?.ExploreMetricsQueryField) {
       QueryEditor = datasourceInstance.components.ExploreMetricsQueryField;
@@ -112,12 +81,12 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
     return QueryEditor;
   };
 
-  renderQueryEditor = () => {
+  renderQueryEditor = (datasourceInstance: DataSourceApi) => {
-    const { datasourceInstance, history, query, exploreEvents, range, queryResponse, exploreId } = this.props;
+    const { history, query, exploreEvents, range, queryResponse, exploreId } = this.props;
 
     const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : [];
 
-    const ReactQueryEditor = this.setReactQueryEditor();
+    const ReactQueryEditor = this.setReactQueryEditor(datasourceInstance);
 
     let QueryEditor: JSX.Element;
     if (ReactQueryEditor) {
@@ -155,7 +124,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
         {QueryEditor}
         {DatasourceCheatsheet && (
           <HelpToggle>
-            <DatasourceCheatsheet onClickExample={(query) => this.onChange(query)} datasource={datasourceInstance} />
+            <DatasourceCheatsheet onClickExample={(query) => this.onChange(query)} datasource={datasourceInstance!} />
           </HelpToggle>
         )}
       </>
@@ -164,7 +133,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
 
   updateLogsHighlights = debounce((value: DataQuery) => {
     const { datasourceInstance } = this.props;
-    if (datasourceInstance.getHighlighterExpression) {
+    if (datasourceInstance?.getHighlighterExpression) {
       const { exploreId } = this.props;
       const expressions = datasourceInstance.getHighlighterExpression(value);
       this.props.highlightLogsExpressionAction({ exploreId, expressions });
@@ -174,6 +143,10 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
   render() {
     const { datasourceInstance, query, queryResponse, latency } = this.props;
 
+    if (!datasourceInstance) {
+      return <>Loading data source</>;
+    }
+
     const canToggleEditorModes = has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode');
     const isNotStarted = queryResponse.state === LoadingState.NotStarted;
 
@@ -183,7 +156,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
     return (
       <>
         <div className="query-row" aria-label={selectors.components.QueryEditorRows.rows}>
-          <div className="query-row-field flex-shrink-1">{this.renderQueryEditor()}</div>
+          <div className="query-row-field flex-shrink-1">{this.renderQueryEditor(datasourceInstance)}</div>
           <QueryRowActions
             canToggleEditorModes={canToggleEditorModes}
             isDisabled={query.hide}
@@ -200,7 +173,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
   }
 }
 
-function mapStateToProps(state: StoreState, { exploreId, index }: QueryRowProps) {
+function mapStateToProps(state: StoreState, { exploreId, index }: OwnProps) {
   const explore = state.explore;
   const item: ExploreItemState = explore[exploreId]!;
   const { datasourceInstance, history, queries, range, absoluteRange, queryResponse, latency, eventBridge } = item;
@@ -226,6 +199,6 @@ const mapDispatchToProps = {
   runQueries,
 };
 
-export default hot(module)(
+const connector = connect(mapStateToProps, mapDispatchToProps);
-  connect(mapStateToProps, mapDispatchToProps)(QueryRow) as React.ComponentType<PropsFromParent>
+
-);
+export default hot(module)(connector(QueryRow));