Chore: Automatically infer types for dashgrid connected components (#29818)

* Refactor DashboardPanel

* Refactor PanelEditor

* Fix missing initializer

* Update public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* Simplify type

* Remove unused type

* Move prop connectors on top

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -1,4 +1,4 @@
-// Libaries
+// Libraries
 import React, { Component } from 'react';
 import { dateMath, GrafanaTheme, TimeZone } from '@grafana/data';
 import { css } from 'emotion';
@@ -8,9 +8,6 @@ import { DashboardModel } from '../../state';
 import { LocationState, CoreEvents } from 'app/types';
 import { TimeRange } from '@grafana/data';
 
-// State
-import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
-
 // Components
 import { RefreshPicker, withTheme, stylesFactory, Themeable, defaultIntervals } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
@@ -31,7 +28,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 export interface Props extends Themeable {
   dashboard: DashboardModel;
   location: LocationState;
-  onChangeTimeZone: typeof updateTimeZoneForSession;
+  onChangeTimeZone: (timeZone: TimeZone) => void;
 }
 class UnthemedDashNavTimeControls extends Component<Props> {
   componentDidMount() {

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
-import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { css, cx } from 'emotion';
 import { Subscription } from 'rxjs';
 
-import { FieldConfigSource, GrafanaTheme, PanelPlugin } from '@grafana/data';
+import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Button, HorizontalGroup, Icon, RadioButtonGroup, stylesFactory } from '@grafana/ui';
 
@@ -27,15 +27,14 @@ import { initPanelEditor, panelEditorCleanUp, updatePanelEditorUIState } from '.
 
 import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
 import { updateLocation } from 'app/core/reducers/location';
-import { PanelEditorUIState, setDiscardChanges } from './state/reducers';
+import { setDiscardChanges } from './state/reducers';
 
 import { getPanelEditorTabs } from './state/selectors';
 import { getPanelStateById } from '../../state/selectors';
 import { getVariables } from 'app/features/variables/state/selectors';
 
-import { CoreEvents, LocationState, StoreState } from 'app/types';
+import { CoreEvents, StoreState } from 'app/types';
 import { DisplayMode, displayModes, PanelEditorTab } from './types';
-import { VariableModel } from 'app/features/variables/types';
 import { DashboardModel, PanelModel } from '../../state';
 import { PanelOptionsChangedEvent } from 'app/types/events';
 
@@ -44,26 +43,33 @@ interface OwnProps {
   sourcePanel: PanelModel;
 }
 
-interface ConnectedProps {
-  location: LocationState;
-  plugin?: PanelPlugin;
-  panel: PanelModel;
-  initDone: boolean;
-  tabs: PanelEditorTab[];
-  uiState: PanelEditorUIState;
-  variables: VariableModel[];
-}
+const mapStateToProps = (state: StoreState) => {
+  const panel = state.panelEditor.getPanel();
+  const { plugin } = getPanelStateById(state.dashboard, panel.id);
 
-interface DispatchProps {
-  updateLocation: typeof updateLocation;
-  initPanelEditor: typeof initPanelEditor;
-  panelEditorCleanUp: typeof panelEditorCleanUp;
-  setDiscardChanges: typeof setDiscardChanges;
-  updatePanelEditorUIState: typeof updatePanelEditorUIState;
-  updateTimeZoneForSession: typeof updateTimeZoneForSession;
-}
+  return {
+    location: state.location,
+    plugin: plugin,
+    panel,
+    initDone: state.panelEditor.initDone,
+    tabs: getPanelEditorTabs(state.location, plugin),
+    uiState: state.panelEditor.ui,
+    variables: getVariables(state),
+  };
+};
+
+const mapDispatchToProps = {
+  updateLocation,
+  initPanelEditor,
+  panelEditorCleanUp,
+  setDiscardChanges,
+  updatePanelEditorUIState,
+  updateTimeZoneForSession,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
 
-type Props = OwnProps & ConnectedProps & DispatchProps;
+type Props = OwnProps & ConnectedProps<typeof connector>;
 
 export class PanelEditorUnconnected extends PureComponent<Props> {
   private eventSubs?: Subscription;
@@ -322,31 +328,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = state => {
-  const panel = state.panelEditor.getPanel();
-  const { plugin } = getPanelStateById(state.dashboard, panel.id);
-
-  return {
-    location: state.location,
-    plugin: plugin,
-    panel,
-    initDone: state.panelEditor.initDone,
-    tabs: getPanelEditorTabs(state.location, plugin),
-    uiState: state.panelEditor.ui,
-    variables: getVariables(state),
-  };
-};
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
-  updateLocation,
-  initPanelEditor,
-  panelEditorCleanUp,
-  setDiscardChanges,
-  updatePanelEditorUIState,
-  updateTimeZoneForSession,
-};
-
-export const PanelEditor = connect(mapStateToProps, mapDispatchToProps)(PanelEditorUnconnected);
+export const PanelEditor = connector(PanelEditorUnconnected);
 
 /*
  * Styles

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -1,4 +1,4 @@
-// Libaries
+// Libraries
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import ReactGridLayout, { ItemCallback } from 'react-grid-layout';
@@ -102,7 +102,7 @@ export interface Props {
 }
 
 export class DashboardGrid extends PureComponent<Props> {
-  private panelMap: { [id: string]: PanelModel };
+  private panelMap: { [id: string]: PanelModel } = {};
   private panelRef: { [id: string]: HTMLElement } = {};
   private eventSubs = new Subscription();
 

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 
 // Components
 import { PanelChrome } from './PanelChrome';
@@ -25,23 +25,28 @@ export interface OwnProps {
   isInView: boolean;
 }
 
-export interface ConnectedProps {
-  plugin?: PanelPlugin | null;
+export interface State {
+  isLazy: boolean;
 }
 
-export interface DispatchProps {
-  initDashboardPanel: typeof initDashboardPanel;
-  updateLocation: typeof updateLocation;
-}
+const mapStateToProps = (state: StoreState, props: OwnProps) => {
+  const panelState = state.dashboard.panels[props.panel.id];
+  if (!panelState) {
+    return { plugin: null };
+  }
 
-export type Props = OwnProps & ConnectedProps & DispatchProps;
+  return {
+    plugin: panelState.plugin,
+  };
+};
 
-export interface State {
-  isLazy: boolean;
-}
+const mapDispatchToProps = { initDashboardPanel, updateLocation };
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export type Props = OwnProps & ConnectedProps<typeof connector>;
 
 export class DashboardPanelUnconnected extends PureComponent<Props, State> {
-  element: HTMLElement;
   specialPanels: { [key: string]: Function } = {};
 
   constructor(props: Props) {
@@ -140,17 +145,4 @@ export class DashboardPanelUnconnected extends PureComponent<Props, State> {
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, props) => {
-  const panelState = state.dashboard.panels[props.panel.id];
-  if (!panelState) {
-    return { plugin: null };
-  }
-
-  return {
-    plugin: panelState.plugin,
-  };
-};
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { initDashboardPanel, updateLocation };
-
-export const DashboardPanel = connect(mapStateToProps, mapDispatchToProps)(DashboardPanelUnconnected);
+export const DashboardPanel = connector(DashboardPanelUnconnected);