diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx index 8f3cdb02ef9..49dd693756d 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +++ b/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 { componentDidMount() { diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index 78b2cc20d38..6b4088aae2f 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/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), + }; +}; -type Props = OwnProps & ConnectedProps & DispatchProps; +const mapDispatchToProps = { + updateLocation, + initPanelEditor, + panelEditorCleanUp, + setDiscardChanges, + updatePanelEditorUIState, + updateTimeZoneForSession, +}; + +const connector = connect(mapStateToProps, mapDispatchToProps); + +type Props = OwnProps & ConnectedProps; export class PanelEditorUnconnected extends PureComponent { private eventSubs?: Subscription; @@ -322,31 +328,7 @@ export class PanelEditorUnconnected extends PureComponent { } } -const mapStateToProps: MapStateToProps = 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 = { - updateLocation, - initPanelEditor, - panelEditorCleanUp, - setDiscardChanges, - updatePanelEditorUIState, - updateTimeZoneForSession, -}; - -export const PanelEditor = connect(mapStateToProps, mapDispatchToProps)(PanelEditorUnconnected); +export const PanelEditor = connector(PanelEditorUnconnected); /* * Styles diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 70454f784cb..e36d56060cc 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/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 { - private panelMap: { [id: string]: PanelModel }; + private panelMap: { [id: string]: PanelModel } = {}; private panelRef: { [id: string]: HTMLElement } = {}; private eventSubs = new Subscription(); diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index f1a2da00efa..4c4009135dc 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/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 DispatchProps { - initDashboardPanel: typeof initDashboardPanel; - updateLocation: typeof updateLocation; -} - -export type Props = OwnProps & ConnectedProps & DispatchProps; - export interface State { isLazy: boolean; } +const mapStateToProps = (state: StoreState, props: OwnProps) => { + const panelState = state.dashboard.panels[props.panel.id]; + if (!panelState) { + return { plugin: null }; + } + + return { + plugin: panelState.plugin, + }; +}; + +const mapDispatchToProps = { initDashboardPanel, updateLocation }; + +const connector = connect(mapStateToProps, mapDispatchToProps); + +export type Props = OwnProps & ConnectedProps; + export class DashboardPanelUnconnected extends PureComponent { - element: HTMLElement; specialPanels: { [key: string]: Function } = {}; constructor(props: Props) { @@ -140,17 +145,4 @@ export class DashboardPanelUnconnected extends PureComponent { } } -const mapStateToProps: MapStateToProps = (state, props) => { - const panelState = state.dashboard.panels[props.panel.id]; - if (!panelState) { - return { plugin: null }; - } - - return { - plugin: panelState.plugin, - }; -}; - -const mapDispatchToProps: MapDispatchToProps = { initDashboardPanel, updateLocation }; - -export const DashboardPanel = connect(mapStateToProps, mapDispatchToProps)(DashboardPanelUnconnected); +export const DashboardPanel = connector(DashboardPanelUnconnected);