Explore: props automatically inferred from mapStateToProps and mapDispatchToProps (#35885)

* Explore: props automatically inferred from mapStateToProps

* Remove props that that wasn't removed in last commit

* Remove unused imports

* Add correct properties to test function

* Remove final props from ExploreProps

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

@@ -2,12 +2,13 @@ import React from 'react';
 import { DataSourceApi, LoadingState, toUtc, DataQueryError, DataQueryRequest, CoreApp } from '@grafana/data';
 import { ExploreId } from 'app/types/explore';
 import { shallow } from 'enzyme';
-import { Explore, ExploreProps } from './Explore';
+import { Explore, Props } from './Explore';
 import { scanStopAction } from './state/query';
 import { SecondaryActions } from './SecondaryActions';
 import { getTheme } from '@grafana/ui';
 
-const dummyProps: ExploreProps = {
+const dummyProps: Props = {
+  logsResult: undefined,
   changeSize: jest.fn(),
   datasourceInstance: {
     meta: {
@@ -22,11 +23,6 @@ const dummyProps: ExploreProps = {
   exploreId: ExploreId.left,
   loading: false,
   modifyQueries: jest.fn(),
-  scanning: false,
-  scanRange: {
-    from: '0',
-    to: '0',
-  },
   scanStart: jest.fn(),
   scanStopAction: scanStopAction,
   setQueries: jest.fn(),
@@ -40,7 +36,6 @@ const dummyProps: ExploreProps = {
     to: 0,
   },
   timeZone: 'UTC',
-  onHiddenSeriesChanged: jest.fn(),
   queryResponse: {
     state: LoadingState.NotStarted,
     series: [],
@@ -73,7 +68,6 @@ const dummyProps: ExploreProps = {
       },
     },
   },
-  originPanelId: 1,
   addQueryRow: jest.fn(),
   theme: getTheme(),
   showMetrics: true,

public/app/features/explore/Explore.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { hot } from 'react-hot-loader';
 import { css, cx } from '@emotion/css';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import memoizeOne from 'memoize-one';
 import { selectors } from '@grafana/e2e-selectors';
@@ -14,18 +14,7 @@ import {
   Collapse,
   TooltipDisplayMode,
 } from '@grafana/ui';
-import {
-  AbsoluteTimeRange,
-  DataQuery,
-  DataSourceApi,
-  GrafanaTheme,
-  LoadingState,
-  PanelData,
-  RawTimeRange,
-  TimeZone,
-  LogsModel,
-  DataFrame,
-} from '@grafana/data';
+import { AbsoluteTimeRange, DataQuery, GrafanaTheme, LoadingState, RawTimeRange, DataFrame } from '@grafana/data';
 
 import LogsContainer from './LogsContainer';
 import QueryRows from './QueryRows';
@@ -71,36 +60,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 });
 
 export interface ExploreProps {
-  changeSize: typeof changeSize;
-  datasourceInstance: DataSourceApi | null;
-  datasourceMissing: boolean;
   exploreId: ExploreId;
-  modifyQueries: typeof modifyQueries;
-  scanning?: boolean;
-  scanRange?: RawTimeRange;
-  scanStart: typeof scanStart;
-  scanStopAction: typeof scanStopAction;
-  setQueries: typeof setQueries;
-  queryKeys: string[];
-  isLive: boolean;
-  syncedTimes: boolean;
-  updateTimeRange: typeof updateTimeRange;
-  graphResult: DataFrame[] | null;
-  logsResult?: LogsModel;
-  absoluteRange: AbsoluteTimeRange;
-  timeZone: TimeZone;
-  onHiddenSeriesChanged?: (hiddenSeries: string[]) => void;
-  queryResponse: PanelData;
-  originPanelId: number;
-  addQueryRow: typeof addQueryRow;
   theme: GrafanaTheme;
-  loading: boolean;
-  showMetrics: boolean;
-  showTable: boolean;
-  showLogs: boolean;
-  showTrace: boolean;
-  showNodeGraph: boolean;
-  splitOpen: typeof splitOpen;
 }
 
 enum ExploreDrawer {
@@ -112,6 +73,8 @@ interface ExploreState {
   openDrawer?: ExploreDrawer;
 }
 
+export type Props = ExploreProps & ConnectedProps<typeof connector>;
+
 /**
  * Explore provides an area for quick query iteration for a given datasource.
  * Once a datasource is selected it populates the query section at the top.
@@ -136,8 +99,8 @@ interface ExploreState {
  * The result viewers determine some of the query options sent to the datasource, e.g.,
  * `format`, to indicate eventual transformations by the datasources' result transformers.
  */
-export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
-  constructor(props: ExploreProps) {
+export class Explore extends React.PureComponent<Props, ExploreState> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       openDrawer: undefined,
@@ -394,7 +357,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   }
 }
 
-function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partial<ExploreProps> {
+function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
   const explore = state.explore;
   const { syncedTimes } = explore;
   const item: ExploreItemState = explore[exploreId]!;
@@ -436,7 +399,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
   };
 }
 
-const mapDispatchToProps: Partial<ExploreProps> = {
+const mapDispatchToProps = {
   changeSize,
   modifyQueries,
   scanStart,
@@ -447,8 +410,6 @@ const mapDispatchToProps: Partial<ExploreProps> = {
   splitOpen,
 };
 
-export default compose(
-  hot(module),
-  connect(mapStateToProps, mapDispatchToProps),
-  withTheme
-)(Explore) as React.ComponentType<{ exploreId: ExploreId }>;
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(hot(module), connector, withTheme)(Explore) as React.ComponentType<{ exploreId: ExploreId }>;

public/app/features/explore/ExploreGraphNGPanel.tsx

@@ -32,12 +32,12 @@ import { ContextMenuPlugin } from 'app/plugins/panel/timeseries/plugins/ContextM
 import { ExemplarsPlugin } from 'app/plugins/panel/timeseries/plugins/ExemplarsPlugin';
 import { css, cx } from '@emotion/css';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { splitOpen } from './state/main';
 import { getFieldLinksForExplore } from './utils/links';
 import { usePrevious } from 'react-use';
 import appEvents from 'app/core/app_events';
 import { seriesVisibilityConfigFactory } from '../dashboard/dashgrid/SeriesVisibilityConfigFactory';
 import { identity } from 'lodash';
+import { SplitOpen } from 'app/types/explore';
 
 const MAX_NUMBER_OF_TIME_SERIES = 20;
 
@@ -51,7 +51,7 @@ interface Props {
   onUpdateTimeRange: (absoluteRange: AbsoluteTimeRange) => void;
   onHiddenSeriesChanged?: (hiddenSeries: string[]) => void;
   tooltipDisplayMode: TooltipDisplayMode;
-  splitOpenFn?: typeof splitOpen;
+  splitOpenFn?: SplitOpen;
 }
 
 export function ExploreGraphNGPanel({