Explore: Automatically infer props from mapStateToProps (#35932)

* Explore: refactor ExploreQueryInspector.tsx to inferr props via mapStateToProps

* Explore: refactor ExploreToolbar.tsx to infere props from mapStateToProps

public/app/features/explore/ExploreQueryInspector.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { TabbedContainer, TabConfig } from '@grafana/ui';
-import { PanelData, TimeZone } from '@grafana/data';
+import { TimeZone } from '@grafana/data';
 import { runQueries } from './state/query';
 import { StoreState, ExploreItemState, ExploreId } from 'app/types';
 import { hot } from 'react-hot-loader';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { ExploreDrawer } from 'app/features/explore/ExploreDrawer';
 import { InspectJSONTab } from 'app/features/inspector/InspectJSONTab';
 import { QueryInspector } from 'app/features/inspector/QueryInspector';
@@ -13,16 +13,13 @@ import { InspectDataTab } from 'app/features/inspector/InspectDataTab';
 import { InspectErrorTab } from 'app/features/inspector/InspectErrorTab';
 
 interface DispatchProps {
-  runQueries: typeof runQueries;
-}
-interface Props extends DispatchProps {
-  loading: boolean;
   width: number;
   exploreId: ExploreId;
-  queryResponse?: PanelData;
   onClose: () => void;
 }
 
+type Props = DispatchProps & ConnectedProps<typeof connector>;
+
 export function ExploreQueryInspector(props: Props) {
   const { loading, width, onClose, queryResponse } = props;
   const dataFrames = queryResponse?.series || [];
@@ -90,8 +87,10 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreI
   };
 }
 
-const mapDispatchToProps: DispatchProps = {
+const mapDispatchToProps = {
   runQueries,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(ExploreQueryInspector));
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export default hot(module)(connector(ExploreQueryInspector));

public/app/features/explore/ExploreToolbar.tsx

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import classNames from 'classnames';
 import { css } from '@emotion/css';
 
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { Icon, IconButton, SetInterval, ToolbarButton, ToolbarButtonRow, Tooltip } from '@grafana/ui';
-import { DataSourceInstanceSettings, RawTimeRange, TimeRange, TimeZone } from '@grafana/data';
+import { DataSourceInstanceSettings, RawTimeRange } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
 import { StoreState } from 'app/types/store';
 import { createAndCopyShortLink } from 'app/core/utils/shortLinks';
@@ -28,36 +28,7 @@ interface OwnProps {
   onChangeTime: (range: RawTimeRange, changedByScanner?: boolean) => void;
 }
 
-interface StateProps {
-  datasourceMissing: boolean;
-  loading: boolean;
-  range: TimeRange;
-  timeZone: TimeZone;
-  splitted: boolean;
-  syncedTimes: boolean;
-  refreshInterval?: string;
-  hasLiveOption: boolean;
-  isLive: boolean;
-  isPaused: boolean;
-  datasourceLoading?: boolean | null;
-  containerWidth: number;
-  datasourceName?: string;
-}
-
-interface DispatchProps {
-  changeDatasource: typeof changeDatasource;
-  clearAll: typeof clearQueries;
-  cancelQueries: typeof cancelQueries;
-  runQueries: typeof runQueries;
-  closeSplit: typeof splitClose;
-  split: typeof splitOpen;
-  syncTimes: typeof syncTimes;
-  changeRefreshInterval: typeof changeRefreshInterval;
-  onChangeTimeZone: typeof updateTimeZoneForSession;
-  clearCache: typeof clearCache;
-}
-
-type Props = StateProps & DispatchProps & OwnProps;
+type Props = OwnProps & ConnectedProps<typeof connector>;
 
 export class UnConnectedExploreToolbar extends PureComponent<Props> {
   onChangeDatasource = async (dsSettings: DataSourceInstanceSettings) => {
@@ -236,7 +207,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
   }
 }
 
-const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps => {
+const mapStateToProps = (state: StoreState, { exploreId }: OwnProps) => {
   const syncedTimes = state.explore.syncedTimes;
   const exploreItem: ExploreItemState = state.explore[exploreId]!;
   const {
@@ -268,7 +239,7 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
   };
 };
 
-const mapDispatchToProps: DispatchProps = {
+const mapDispatchToProps = {
   changeDatasource,
   changeRefreshInterval,
   clearAll: clearQueries,
@@ -281,4 +252,6 @@ const mapDispatchToProps: DispatchProps = {
   clearCache,
 };
 
-export const ExploreToolbar = hot(module)(connect(mapStateToProps, mapDispatchToProps)(UnConnectedExploreToolbar));
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export const ExploreToolbar = hot(module)(connector(UnConnectedExploreToolbar));