Explore: refactor redux-connected components (#36027)

* Remove some props since they are already inferred from mapStateToProps

* Remove empty interface

* Refactor TableContainer component

* Did some small re-namings

public/app/features/explore/NodeGraphContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useToggle } from 'react-use';
 import { Badge, Collapse, useStyles2, useTheme2 } from '@grafana/ui';
-import { applyFieldOverrides, DataFrame, GrafanaTheme2, TimeRange } from '@grafana/data';
+import { applyFieldOverrides, DataFrame, GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 import { ExploreId, StoreState } from '../../types';
 import { splitOpen } from './state/main';
@@ -18,16 +18,17 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
 });
 
-interface Props {
+interface OwnProps {
   // Edges and Nodes are separate frames
   dataFrames: DataFrame[];
   exploreId: ExploreId;
-  range: TimeRange;
-  splitOpen: typeof splitOpen;
   // When showing the node graph together with trace view we do some changes so it works better.
   withTraceView?: boolean;
 }
-export function UnconnectedNodeGraphContainer(props: Props & ConnectedProps<typeof connector>) {
+
+type Props = OwnProps & ConnectedProps<typeof connector>;
+
+export function UnconnectedNodeGraphContainer(props: Props) {
   const { dataFrames, range, splitOpen, withTraceView } = props;
   const getLinks = useLinks(range, splitOpen);
   const theme = useTheme2();
@@ -75,7 +76,7 @@ export function UnconnectedNodeGraphContainer(props: Props & ConnectedProps<type
   );
 }
 
-function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) {
+function mapStateToProps(state: StoreState, { exploreId }: OwnProps) {
   return {
     range: state.explore[exploreId]!.range,
   };

public/app/features/explore/ReturnToDashboardButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { ButtonGroup, ButtonSelect, Icon, ToolbarButton, Tooltip } from '@grafana/ui';
 import { DataQuery, urlUtil } from '@grafana/data';
 
@@ -11,14 +11,27 @@ import { setDashboardQueriesToUpdateOnLoad } from '../dashboard/state/reducers';
 import { isSplit } from './state/selectors';
 import { locationService } from '@grafana/runtime';
 
-interface Props {
+function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) {
-  exploreId: ExploreId;
+  const explore = state.explore;
-  splitted: boolean;
+  const splitted = isSplit(state);
-  queries: DataQuery[];
+  const { datasourceInstance, queries, originPanelId } = explore[exploreId]!;
-  originPanelId?: number | null;
+
-  setDashboardQueriesToUpdateOnLoad: typeof setDashboardQueriesToUpdateOnLoad;
+  return {
+    exploreId,
+    datasourceInstance,
+    queries,
+    originPanelId,
+    splitted,
+  };
 }
 
+const mapDispatchToProps = {
+  setDashboardQueriesToUpdateOnLoad,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+type Props = ConnectedProps<typeof connector>;
+
 export const UnconnectedReturnToDashboardButton: FC<Props> = ({
   originPanelId,
   setDashboardQueriesToUpdateOnLoad,
@@ -83,22 +96,4 @@ export const UnconnectedReturnToDashboardButton: FC<Props> = ({
   );
 };
 
-function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) {
+export default connector(UnconnectedReturnToDashboardButton);
-  const explore = state.explore;
-  const splitted = isSplit(state);
-  const { datasourceInstance, queries, originPanelId } = explore[exploreId]!;
-
-  return {
-    exploreId,
-    datasourceInstance,
-    queries,
-    originPanelId,
-    splitted,
-  };
-}
-
-const mapDispatchToProps = {
-  setDashboardQueriesToUpdateOnLoad,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(UnconnectedReturnToDashboardButton);

public/app/features/explore/TableContainer.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
-import { DataFrame, TimeRange, ValueLinkConfig } from '@grafana/data';
+import { ValueLinkConfig } from '@grafana/data';
 import { Collapse, Table } from '@grafana/ui';
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { StoreState } from 'app/types';
@@ -15,15 +15,28 @@ import { getFieldLinksForExplore } from './utils/links';
 interface TableContainerProps {
   ariaLabel?: string;
   exploreId: ExploreId;
-  loading: boolean;
   width: number;
   onCellFilterAdded?: (filter: FilterItem) => void;
-  tableResult?: DataFrame;
-  splitOpen: typeof splitOpen;
-  range: TimeRange;
 }
 
-export class TableContainer extends PureComponent<TableContainerProps> {
+function mapStateToProps(state: StoreState, { exploreId }: TableContainerProps) {
+  const explore = state.explore;
+  // @ts-ignore
+  const item: ExploreItemState = explore[exploreId];
+  const { loading: loadingInState, tableResult, range } = item;
+  const loading = tableResult && tableResult.length > 0 ? false : loadingInState;
+  return { loading, tableResult, range };
+}
+
+const mapDispatchToProps = {
+  splitOpen,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type Props = TableContainerProps & ConnectedProps<typeof connector>;
+
+export class TableContainer extends PureComponent<Props> {
   getTableHeight() {
     const { tableResult } = this.props;
 
@@ -71,17 +84,4 @@ export class TableContainer extends PureComponent<TableContainerProps> {
   }
 }
 
-function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }) {
+export default hot(module)(connector)(TableContainer);
-  const explore = state.explore;
-  // @ts-ignore
-  const item: ExploreItemState = explore[exploreId];
-  const { loading: loadingInState, tableResult, range } = item;
-  const loading = tableResult && tableResult.length > 0 ? false : loadingInState;
-  return { loading, tableResult, range };
-}
-
-const mapDispatchToProps = {
-  splitOpen,
-};
-
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TableContainer));