Chore: Fix TypeScript strict errors with components using connect (#37109)

* Chore: Fix TypeScript strict errors with components using connect

* Chore: More TypeScript fixes

* Chore: Update strict check values

* Still need to export these types...

* Declare connector at the top of the file

* Careful with find and replace...

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

@@ -1,6 +1,6 @@
 // Libaries
 import React, { PureComponent, FC, ReactNode } from 'react';
-import { connect, MapDispatchToProps } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 // Utils & Services
 import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 // Components
@@ -12,13 +12,19 @@ import { locationUtil, textUtil } from '@grafana/data';
 import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
 // Types
 import { DashboardModel } from '../../state';
-import { KioskMode, StoreState } from 'app/types';
+import { KioskMode } from 'app/types';
 import { ShareModal } from 'app/features/dashboard/components/ShareModal';
 import { SaveDashboardModalProxy } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardModalProxy';
 import { locationService } from '@grafana/runtime';
 import { toggleKioskMode } from 'app/core/navigation/kiosk';
 import { getDashboardSrv } from '../../services/DashboardSrv';
 
+const mapDispatchToProps = {
+  updateTimeZoneForSession,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
 export interface OwnProps {
   dashboard: DashboardModel;
   isFullscreen: boolean;
@@ -29,10 +35,6 @@ export interface OwnProps {
   onAddPanel: () => void;
 }
 
-interface DispatchProps {
-  updateTimeZoneForSession: typeof updateTimeZoneForSession;
-}
-
 interface DashNavButtonModel {
   show: (props: Props) => boolean;
   component: FC<Partial<Props>>;
@@ -50,7 +52,7 @@ export function addCustomRightAction(content: DashNavButtonModel) {
   customRightActions.push(content);
 }
 
-type Props = OwnProps & DispatchProps;
+type Props = OwnProps & ConnectedProps<typeof connector>;
 
 class DashNav extends PureComponent<Props> {
   constructor(props: Props) {
@@ -263,10 +265,4 @@ class DashNav extends PureComponent<Props> {
   }
 }
 
-const mapStateToProps = (state: StoreState) => ({});
+export default connector(DashNav);
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
-  updateTimeZoneForSession,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(DashNav);

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -78,6 +78,7 @@ function dashboardPageScenario(description: string, scenarioFn: (ctx: ScenarioCo
           }),
           initPhase: DashboardInitPhase.NotStarted,
           isInitSlow: false,
+          initError: null,
           initDashboard: jest.fn(),
           notifyApp: mockToolkitActionCreator(notifyApp),
           cleanUpDashboardAndVariables: jest.fn(),

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { css } from 'emotion';
 import { hot } from 'react-hot-loader';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { locationService } from '@grafana/runtime';
 import { selectors } from '@grafana/e2e-selectors';
 import { CustomScrollbar, ScrollbarPosition, stylesFactory, Themeable2, withTheme2 } from '@grafana/ui';
@@ -14,8 +14,8 @@ import { DashboardSettings } from '../components/DashboardSettings';
 import { PanelEditor } from '../components/PanelEditor/PanelEditor';
 import { initDashboard } from '../state/initDashboard';
 import { notifyApp } from 'app/core/actions';
-import { DashboardInitError, DashboardInitPhase, KioskMode, StoreState } from 'app/types';
+import { KioskMode, StoreState } from 'app/types';
-import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
+import { PanelModel } from 'app/features/dashboard/state';
 import { PanelInspector } from '../components/Inspector/PanelInspector';
 import { SubMenu } from '../components/SubMenu/SubMenu';
 import { cleanUpDashboardAndVariables } from '../state/actions';
@@ -50,21 +50,32 @@ type DashboardPageRouteSearchParams = {
   refresh?: string;
 };
 
-export interface Props
+export const mapStateToProps = (state: StoreState) => ({
-  extends Themeable2,
+  initPhase: state.dashboard.initPhase,
-    GrafanaRouteComponentProps<DashboardPageRouteParams, DashboardPageRouteSearchParams> {
+  isInitSlow: state.dashboard.isInitSlow,
-  initPhase: DashboardInitPhase;
+  initError: state.dashboard.initError,
-  isInitSlow: boolean;
+  dashboard: state.dashboard.getModel(),
-  dashboard: DashboardModel | null;
+});
-  initError?: DashboardInitError;
+
-  initDashboard: typeof initDashboard;
+const mapDispatchToProps = {
-  cleanUpDashboardAndVariables: typeof cleanUpDashboardAndVariables;
+  initDashboard,
-  notifyApp: typeof notifyApp;
+  cleanUpDashboardAndVariables,
+  notifyApp,
+  cancelVariables,
+  templateVarsChangedInUrl,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+interface OwnProps {
   isPanelEditorOpen?: boolean;
-  cancelVariables: typeof cancelVariables;
-  templateVarsChangedInUrl: typeof templateVarsChangedInUrl;
 }
 
+export type Props = Themeable2 &
+  GrafanaRouteComponentProps<DashboardPageRouteParams, DashboardPageRouteSearchParams> &
+  ConnectedProps<typeof connector> &
+  OwnProps;
+
 export interface State {
   editPanel: PanelModel | null;
   viewPanel: PanelModel | null;
@@ -366,21 +377,6 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   }
 }
 
-export const mapStateToProps = (state: StoreState) => ({
-  initPhase: state.dashboard.initPhase,
-  isInitSlow: state.dashboard.isInitSlow,
-  initError: state.dashboard.initError,
-  dashboard: state.dashboard.getModel(),
-});
-
-const mapDispatchToProps = {
-  initDashboard,
-  cleanUpDashboardAndVariables,
-  notifyApp,
-  cancelVariables,
-  templateVarsChangedInUrl,
-};
-
 /*
  * Styles
  */
@@ -413,4 +409,4 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode) => {
 
 export const DashboardPage = withTheme2(UnthemedDashboardPage);
 DashboardPage.displayName = 'DashboardPage';
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DashboardPage));
+export default hot(module)(connector(DashboardPage));

public/app/features/dashboard/containers/SoloPanelPage.tsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { hot } from 'react-hot-loader';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { DashboardPanel } from '../dashgrid/DashboardPanel';
 import { initDashboard } from '../state/initDashboard';
 import { StoreState } from 'app/types';
-import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
+import { PanelModel } from 'app/features/dashboard/state';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
 export interface DashboardPageRouteParams {
@@ -14,10 +14,18 @@ export interface DashboardPageRouteParams {
   slug?: string;
 }
 
-export interface Props extends GrafanaRouteComponentProps<DashboardPageRouteParams, { panelId: string }> {
+const mapStateToProps = (state: StoreState) => ({
-  initDashboard: typeof initDashboard;
+  dashboard: state.dashboard.getModel(),
-  dashboard: DashboardModel | null;
+});
-}
+
+const mapDispatchToProps = {
+  initDashboard,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export type Props = GrafanaRouteComponentProps<DashboardPageRouteParams, { panelId: string }> &
+  ConnectedProps<typeof connector>;
 
 export interface State {
   panel: PanelModel | null;
@@ -103,12 +111,4 @@ export class SoloPanelPage extends Component<Props, State> {
   }
 }
 
-const mapStateToProps = (state: StoreState) => ({
+export default hot(module)(connector(SoloPanelPage));
-  dashboard: state.dashboard.getModel(),
-});
-
-const mapDispatchToProps = {
-  initDashboard,
-};
-
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(SoloPanelPage));

public/app/features/datasources/DataSourcesListPage.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { hot } from 'react-hot-loader';
 // Components
 import Page from 'app/core/components/Page/Page';
@@ -8,7 +8,6 @@ import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import DataSourcesList from './DataSourcesList';
 // Types
-import { DataSourceSettings, NavModel, LayoutMode } from '@grafana/data';
 import { IconName } from '@grafana/ui';
 import { StoreState } from 'app/types';
 // Actions
@@ -23,18 +22,27 @@ import {
 } from './state/selectors';
 import { setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/reducers';
 
-export interface Props {
+function mapStateToProps(state: StoreState) {
-  navModel: NavModel;
+  return {
-  dataSources: DataSourceSettings[];
+    navModel: getNavModel(state.navIndex, 'datasources'),
-  dataSourcesCount: number;
+    dataSources: getDataSources(state.dataSources),
-  layoutMode: LayoutMode;
+    layoutMode: getDataSourcesLayoutMode(state.dataSources),
-  searchQuery: string;
+    dataSourcesCount: getDataSourcesCount(state.dataSources),
-  hasFetched: boolean;
+    searchQuery: getDataSourcesSearchQuery(state.dataSources),
-  loadDataSources: typeof loadDataSources;
+    hasFetched: state.dataSources.hasFetched,
-  setDataSourcesLayoutMode: typeof setDataSourcesLayoutMode;
+  };
-  setDataSourcesSearchQuery: typeof setDataSourcesSearchQuery;
 }
 
+const mapDispatchToProps = {
+  loadDataSources,
+  setDataSourcesSearchQuery,
+  setDataSourcesLayoutMode,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export type Props = ConnectedProps<typeof connector>;
+
 const emptyListModel = {
   title: 'No data sources defined',
   buttonIcon: 'database' as IconName,
@@ -89,21 +97,4 @@ export class DataSourcesListPage extends PureComponent<Props> {
   }
 }
 
-function mapStateToProps(state: StoreState) {
+export default hot(module)(connector(DataSourcesListPage));
-  return {
-    navModel: getNavModel(state.navIndex, 'datasources'),
-    dataSources: getDataSources(state.dataSources),
-    layoutMode: getDataSourcesLayoutMode(state.dataSources),
-    dataSourcesCount: getDataSourcesCount(state.dataSources),
-    searchQuery: getDataSourcesSearchQuery(state.dataSources),
-    hasFetched: state.dataSources.hasFetched,
-  };
-}
-
-const mapDispatchToProps = {
-  loadDataSources,
-  setDataSourcesSearchQuery,
-  setDataSourcesLayoutMode,
-};
-
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourcesListPage));

public/app/features/datasources/NewDataSourcePage.tsx

@@ -1,12 +1,12 @@
 import React, { FC, PureComponent } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { DataSourcePluginMeta, NavModel } from '@grafana/data';
 import { Button, LinkButton, List, PluginSignatureBadge } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import Page from 'app/core/components/Page/Page';
-import { DataSourcePluginCategory, StoreState } from 'app/types';
+import { StoreState } from 'app/types';
 import { addDataSource, loadDataSourcePlugins } from './state/actions';
 import { getDataSourcePlugins } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -14,17 +14,26 @@ import { setDataSourceTypeSearchQuery } from './state/reducers';
 import { Card } from 'app/core/components/Card/Card';
 import { PluginsErrorsInfo } from '../plugins/PluginsErrorsInfo';
 
-export interface Props {
+function mapStateToProps(state: StoreState) {
-  navModel: NavModel;
+  return {
-  plugins: DataSourcePluginMeta[];
+    navModel: getNavModel(),
-  categories: DataSourcePluginCategory[];
+    plugins: getDataSourcePlugins(state.dataSources),
-  isLoading: boolean;
+    searchQuery: state.dataSources.dataSourceTypeSearchQuery,
-  addDataSource: typeof addDataSource;
+    categories: state.dataSources.categories,
-  loadDataSourcePlugins: typeof loadDataSourcePlugins;
+    isLoading: state.dataSources.isLoadingDataSources,
-  searchQuery: string;
+  };
-  setDataSourceTypeSearchQuery: typeof setDataSourceTypeSearchQuery;
 }
 
+const mapDispatchToProps = {
+  addDataSource,
+  loadDataSourcePlugins,
+  setDataSourceTypeSearchQuery,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type Props = ConnectedProps<typeof connector>;
+
 class NewDataSourcePage extends PureComponent<Props> {
   componentDidMount() {
     this.props.loadDataSourcePlugins();
@@ -170,20 +179,4 @@ export function getNavModel(): NavModel {
   };
 }
 
-function mapStateToProps(state: StoreState) {
+export default hot(module)(connector(NewDataSourcePage));
-  return {
-    navModel: getNavModel(),
-    plugins: getDataSourcePlugins(state.dataSources),
-    searchQuery: state.dataSources.dataSourceTypeSearchQuery,
-    categories: state.dataSources.categories,
-    isLoading: state.dataSources.isLoadingDataSources,
-  };
-}
-
-const mapDispatchToProps = {
-  addDataSource,
-  loadDataSourcePlugins,
-  setDataSourceTypeSearchQuery,
-};
-
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NewDataSourcePage));

public/app/features/explore/RichHistory/RichHistory.tsx

@@ -29,7 +29,7 @@ export const sortOrderOptions = [
 
 export interface RichHistoryProps extends Themeable {
   richHistory: RichHistoryQuery[];
-  activeDatasourceInstance: string;
+  activeDatasourceInstance?: string;
   firstTab: Tabs;
   exploreId: ExploreId;
   height: number;
@@ -57,11 +57,13 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps, RichHistorySta
     };
   }
 
-  onChangeRetentionPeriod = (retentionPeriod: { label: string; value: number }) => {
+  onChangeRetentionPeriod = (retentionPeriod: SelectableValue<number>) => {
-    this.setState({
+    if (retentionPeriod.value !== undefined) {
-      retentionPeriod: retentionPeriod.value,
+      this.setState({
-    });
+        retentionPeriod: retentionPeriod.value,
-    store.set(RICH_HISTORY_SETTING_KEYS.retentionPeriod, retentionPeriod.value);
+      });
+      store.set(RICH_HISTORY_SETTING_KEYS.retentionPeriod, retentionPeriod.value);
+    }
   };
 
   toggleStarredTabAsFirstTab = () => {

public/app/features/explore/RichHistory/RichHistoryCard.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { css, cx } from '@emotion/css';
 import { stylesFactory, useTheme, TextArea, Button, IconButton } from '@grafana/ui';
@@ -20,17 +20,31 @@ import { changeDatasource } from '../state/datasource';
 import { setQueries } from '../state/query';
 import { ShowConfirmModalEvent } from '../../../types/events';
 
-export interface Props {
+function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) {
+  const explore = state.explore;
+  const { datasourceInstance } = explore[exploreId]!;
+  return {
+    exploreId,
+    datasourceInstance,
+  };
+}
+
+const mapDispatchToProps = {
+  changeDatasource,
+  updateRichHistory,
+  setQueries,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+interface OwnProps {
   query: RichHistoryQuery;
   dsImg: string;
   isRemoved: boolean;
-  changeDatasource: typeof changeDatasource;
-  updateRichHistory: typeof updateRichHistory;
-  setQueries: typeof setQueries;
-  exploreId: ExploreId;
-  datasourceInstance: DataSourceApi;
 }
 
+export type Props = ConnectedProps<typeof connector> & OwnProps;
+
 const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
   /* Hard-coded value so all buttons and icons on right side of card are aligned */
   const rigtColumnWidth = '240px';
@@ -304,19 +318,4 @@ export function RichHistoryCard(props: Props) {
   );
 }
 
-function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) {
+export default hot(module)(connector(RichHistoryCard));
-  const explore = state.explore;
-  const { datasourceInstance } = explore[exploreId]!;
-  return {
-    exploreId,
-    datasourceInstance,
-  };
-}
-
-const mapDispatchToProps = {
-  changeDatasource,
-  updateRichHistory,
-  setQueries,
-};
-
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(RichHistoryCard));

public/app/features/explore/RichHistory/RichHistoryContainer.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { hot } from 'react-hot-loader';
 
 // Services & Utils
@@ -9,7 +9,7 @@ import { RICH_HISTORY_SETTING_KEYS } from 'app/core/utils/richHistory';
 
 // Types
 import { ExploreItemState, StoreState } from 'app/types';
-import { ExploreId, RichHistoryQuery } from 'app/types/explore';
+import { ExploreId } from 'app/types/explore';
 
 // Components, enums
 import { RichHistory, Tabs } from './RichHistory';
@@ -18,15 +18,34 @@ import { RichHistory, Tabs } from './RichHistory';
 import { deleteRichHistory } from '../state/history';
 import { ExploreDrawer } from '../ExploreDrawer';
 
-export interface Props {
+function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) {
+  const explore = state.explore;
+  // @ts-ignore
+  const item: ExploreItemState = explore[exploreId];
+  const { datasourceInstance } = item;
+  const firstTab = store.getBool(RICH_HISTORY_SETTING_KEYS.starredTabAsFirstTab, false)
+    ? Tabs.Starred
+    : Tabs.RichHistory;
+  const { richHistory } = explore;
+  return {
+    richHistory,
+    firstTab,
+    activeDatasourceInstance: datasourceInstance?.name,
+  };
+}
+
+const mapDispatchToProps = {
+  deleteRichHistory,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+interface OwnProps {
   width: number;
   exploreId: ExploreId;
-  activeDatasourceInstance: string;
-  richHistory: RichHistoryQuery[];
-  firstTab: Tabs;
-  deleteRichHistory: typeof deleteRichHistory;
   onClose: () => void;
 }
+export type Props = ConnectedProps<typeof connector> & OwnProps;
 
 export function RichHistoryContainer(props: Props) {
   const [height, setHeight] = useState(400);
@@ -53,24 +72,4 @@ export function RichHistoryContainer(props: Props) {
   );
 }
 
-function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) {
+export default hot(module)(connector(RichHistoryContainer));
-  const explore = state.explore;
-  // @ts-ignore
-  const item: ExploreItemState = explore[exploreId];
-  const { datasourceInstance } = item;
-  const firstTab = store.getBool(RICH_HISTORY_SETTING_KEYS.starredTabAsFirstTab, false)
-    ? Tabs.Starred
-    : Tabs.RichHistory;
-  const { richHistory } = explore;
-  return {
-    richHistory,
-    firstTab,
-    activeDatasourceInstance: datasourceInstance?.name,
-  };
-}
-
-const mapDispatchToProps = {
-  deleteRichHistory,
-};
-
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(RichHistoryContainer));

public/app/features/explore/RichHistory/RichHistorySettings.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { stylesFactory, useTheme, Select, Button, Switch, Field } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import appEvents from 'app/core/app_events';
 import { ShowConfirmModalEvent } from '../../../types/events';
 import { dispatch } from 'app/store/store';
@@ -12,7 +12,7 @@ export interface RichHistorySettingsProps {
   retentionPeriod: number;
   starredTabAsFirstTab: boolean;
   activeDatasourceOnly: boolean;
-  onChangeRetentionPeriod: (option: { label: string; value: number }) => void;
+  onChangeRetentionPeriod: (option: SelectableValue<number>) => void;
   toggleStarredTabAsFirstTab: () => void;
   toggleactiveDatasourceOnly: () => void;
   deleteRichHistory: () => void;

public/app/features/folders/components/NewDashboardsFolder.tsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
-import { NavModel } from '@grafana/data';
 import { Button, Input, Form, Field } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import { createNewFolder } from '../state/actions';
@@ -8,15 +7,17 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { StoreState } from 'app/types';
 import validationSrv from '../../manage-dashboards/services/ValidationSrv';
 
-interface OwnProps {}
+const mapStateToProps = (state: StoreState) => ({
+  navModel: getNavModel(state.navIndex, 'manage-dashboards'),
+});
 
-interface ConnectedProps {
+const mapDispatchToProps = {
-  navModel: NavModel;
+  createNewFolder,
-}
+};
 
-interface DispatchProps {
+const connector = connect(mapStateToProps, mapDispatchToProps);
-  createNewFolder: typeof createNewFolder;
+
-}
+interface OwnProps {}
 
 interface FormModel {
   folderName: string;
@@ -24,7 +25,7 @@ interface FormModel {
 
 const initialFormModel: FormModel = { folderName: '' };
 
-type Props = OwnProps & ConnectedProps & DispatchProps;
+type Props = OwnProps & ConnectedProps<typeof connector>;
 
 export class NewDashboardsFolder extends PureComponent<Props> {
   onSubmit = (formData: FormModel) => {
@@ -72,12 +73,4 @@ export class NewDashboardsFolder extends PureComponent<Props> {
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state) => ({
+export default connector(NewDashboardsFolder);
-  navModel: getNavModel(state.navIndex, 'manage-dashboards'),
-});
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
-  createNewFolder,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(NewDashboardsFolder);

public/app/features/teams/TeamMemberRow.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { LegacyForms, DeleteButton } from '@grafana/ui';
 const { Select } = LegacyForms;
 import { SelectableValue } from '@grafana/data';
@@ -9,14 +9,20 @@ import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
 import { updateTeamMember, removeTeamMember } from './state/actions';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 
-export interface Props {
+const mapDispatchToProps = {
+  removeTeamMember,
+  updateTeamMember,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+interface OwnProps {
   member: TeamMember;
   syncEnabled: boolean;
   editorsCanAdmin: boolean;
   signedInUserIsTeamAdmin: boolean;
-  removeTeamMember: typeof removeTeamMember;
-  updateTeamMember: typeof updateTeamMember;
 }
+export type Props = ConnectedProps<typeof connector> & OwnProps;
 
 export class TeamMemberRow extends PureComponent<Props> {
   constructor(props: Props) {
@@ -97,13 +103,4 @@ export class TeamMemberRow extends PureComponent<Props> {
   }
 }
 
-function mapStateToProps(state: any) {
+export default connector(TeamMemberRow);
-  return {};
-}
-
-const mapDispatchToProps = {
-  removeTeamMember,
-  updateTeamMember,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(TeamMemberRow);

public/app/features/teams/TeamMembers.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
@@ -9,23 +9,35 @@ import { getSearchMemberQuery, isSignedInUserTeamAdmin } from './state/selectors
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
 import { config } from 'app/core/config';
-import { contextSrv, User as SignedInUser } from 'app/core/services/context_srv';
+import { contextSrv } from 'app/core/services/context_srv';
 import TeamMemberRow from './TeamMemberRow';
 import { setSearchMemberQuery } from './state/reducers';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import { Button } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 
-export interface Props {
+function mapStateToProps(state: any) {
+  return {
+    searchMemberQuery: getSearchMemberQuery(state.team),
+    editorsCanAdmin: config.editorsCanAdmin, // this makes the feature toggle mockable/controllable from tests,
+    signedInUser: contextSrv.user, // this makes the feature toggle mockable/controllable from tests,
+  };
+}
+
+const mapDispatchToProps = {
+  addTeamMember,
+  setSearchMemberQuery,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+interface OwnProps {
   members: TeamMember[];
-  searchMemberQuery: string;
-  addTeamMember: typeof addTeamMember;
-  setSearchMemberQuery: typeof setSearchMemberQuery;
   syncEnabled: boolean;
-  editorsCanAdmin: boolean;
-  signedInUser: SignedInUser;
 }
 
+export type Props = ConnectedProps<typeof connector> & OwnProps;
+
 export interface State {
   isAdding: boolean;
   newTeamMember?: SelectableValue<OrgUser['userId']> | null;
@@ -133,17 +145,4 @@ export class TeamMembers extends PureComponent<Props, State> {
   }
 }
 
-function mapStateToProps(state: any) {
+export default connector(TeamMembers);
-  return {
-    searchMemberQuery: getSearchMemberQuery(state.team),
-    editorsCanAdmin: config.editorsCanAdmin, // this makes the feature toggle mockable/controllable from tests,
-    signedInUser: contextSrv.user, // this makes the feature toggle mockable/controllable from tests,
-  };
-}
-
-const mapDispatchToProps = {
-  addTeamMember,
-  setSearchMemberQuery,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(TeamMembers);

public/app/features/teams/TeamSettings.tsx

@@ -1,15 +1,21 @@
 import React, { FC } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { Input, Field, Form, Button, FieldSet, VerticalGroup } from '@grafana/ui';
 
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 import { updateTeam } from './state/actions';
 import { Team } from 'app/types';
 
-export interface Props {
+const mapDispatchToProps = {
+  updateTeam,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+interface OwnProps {
   team: Team;
-  updateTeam: typeof updateTeam;
 }
+export type Props = ConnectedProps<typeof connector> & OwnProps;
 
 export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
   return (
@@ -43,8 +49,4 @@ export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
   );
 };
 
-const mapDispatchToProps = {
+export default connector(TeamSettings);
-  updateTeam,
-};
-
-export default connect(null, mapDispatchToProps)(TeamSettings);

public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx

@@ -32,7 +32,7 @@ export const MetricPicker = ({ options, onChange, className, value }: Props) =>
       options={toOptions(options)}
       onChange={onChange}
       placeholder="Select Metric"
-      value={!!selectedOption ? toOption(selectedOption) : null}
+      value={!!selectedOption ? toOption(selectedOption) : undefined}
     />
   );
 };

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx

@@ -94,7 +94,7 @@ describe('Metric Editor', () => {
 
       const getFields: ElasticDatasource['getFields'] = jest.fn(() => from([[]]));
 
-      const wrapper = ({ children }: { children: ReactNode }) => (
+      const wrapper = ({ children }: { children?: ReactNode }) => (
         <ElasticsearchProvider
           datasource={{ getFields, esVersion, xpack } as ElasticDatasource}
           query={query}

public/app/plugins/datasource/loki/components/LokiOptionFields.tsx

@@ -2,6 +2,7 @@
 import React, { memo } from 'react';
 import { css, cx } from '@emotion/css';
 import { LokiQuery } from '../types';
+import { SelectableValue } from '@grafana/data';
 
 // Types
 import { InlineFormLabel, RadioButtonGroup, InlineField, Input } from '@grafana/ui';
@@ -17,7 +18,7 @@ export interface LokiOptionFieldsProps {
 
 type LokiQueryType = 'instant' | 'range';
 
-const queryTypeOptions = [
+const queryTypeOptions: Array<SelectableValue<LokiQueryType>> = [
   { value: 'range', label: 'Range', description: 'Run query over a range of time.' },
   {
     value: 'instant',

public/app/plugins/panel/geomap/dims/editors/ScaleDimensionEditor.tsx

@@ -58,31 +58,37 @@ export const ScaleDimensionEditor: FC<StandardEditorProps<ScaleDimensionConfig,
   );
 
   const onMinChange = useCallback(
-    (min: number) => {
+    (min?: number) => {
-      validateAndDoChange({
+      if (min !== undefined) {
-        ...value,
+        validateAndDoChange({
-        min,
+          ...value,
-      });
+          min,
+        });
+      }
     },
     [validateAndDoChange, value]
   );
 
   const onMaxChange = useCallback(
-    (max: number) => {
+    (max?: number) => {
-      validateAndDoChange({
+      if (max !== undefined) {
-        ...value,
+        validateAndDoChange({
-        max,
+          ...value,
-      });
+          max,
+        });
+      }
     },
     [validateAndDoChange, value]
   );
 
   const onValueChange = useCallback(
-    (fixed: number) => {
+    (fixed?: number) => {
-      validateAndDoChange({
+      if (fixed !== undefined) {
-        ...value,
+        validateAndDoChange({
-        fixed,
+          ...value,
-      });
+          fixed,
+        });
+      }
     },
     [validateAndDoChange, value]
   );

public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx

@@ -147,7 +147,7 @@ export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
             items: i.items.map((j) => {
               return {
                 ...j,
-                onClick: (e: React.SyntheticEvent<HTMLElement>) => {
+                onClick: (e?: React.SyntheticEvent<HTMLElement>) => {
                   if (!coords) {
                     return;
                   }

scripts/ci-check-strict.sh

@@ -3,7 +3,7 @@ set -e
 
 echo -e "Collecting code stats (typescript errors & more)"
 
-ERROR_COUNT_LIMIT=157
+ERROR_COUNT_LIMIT=136
 ERROR_COUNT="$(./node_modules/.bin/tsc --project tsconfig.json --noEmit --strict true | grep -oP 'Found \K(\d+)')"
 
 if [ "$ERROR_COUNT" -gt $ERROR_COUNT_LIMIT ]; then