Chore: Fix more strict typescript errors (#35514)

packages/grafana-data/src/types/datasource.ts

@@ -76,7 +76,7 @@ export class DataSourcePlugin<
     return this;
   }
 
-  setQueryEditorHelp(QueryEditorHelp: ComponentType<QueryEditorHelpProps>) {
+  setQueryEditorHelp(QueryEditorHelp: ComponentType<QueryEditorHelpProps<TQuery>>) {
     this.components.QueryEditorHelp = QueryEditorHelp;
     return this;
   }
@@ -84,7 +84,7 @@ export class DataSourcePlugin<
   /**
    * @deprecated prefer using `setQueryEditorHelp`
    */
-  setExploreStartPage(ExploreStartPage: ComponentType<QueryEditorHelpProps>) {
+  setExploreStartPage(ExploreStartPage: ComponentType<QueryEditorHelpProps<TQuery>>) {
     return this.setQueryEditorHelp(ExploreStartPage);
   }
 
@@ -149,7 +149,7 @@ export interface DataSourcePluginComponents<
   ExploreQueryField?: ComponentType<ExploreQueryFieldProps<DSType, TQuery, TOptions>>;
   ExploreMetricsQueryField?: ComponentType<ExploreQueryFieldProps<DSType, TQuery, TOptions>>;
   ExploreLogsQueryField?: ComponentType<ExploreQueryFieldProps<DSType, TQuery, TOptions>>;
-  QueryEditorHelp?: ComponentType<QueryEditorHelpProps>;
+  QueryEditorHelp?: ComponentType<QueryEditorHelpProps<TQuery>>;
   ConfigEditor?: ComponentType<DataSourcePluginOptionsEditorProps<TOptions, TSecureOptions>>;
   MetadataInspector?: ComponentType<MetadataInspectorProps<DSType, TQuery, TOptions>>;
 }
@@ -210,7 +210,7 @@ abstract class DataSourceApi<
   /**
    * Imports queries from a different datasource
    */
-  async importQueries?(queries: DataQuery[], originDataSource: DataSourceApi): Promise<TQuery[]>;
+  async importQueries?(queries: DataQuery[], originDataSource: DataSourceApi<DataQuery>): Promise<TQuery[]>;
 
   /**
    * Returns configuration for importing queries from other data sources
@@ -387,9 +387,9 @@ export interface ExploreQueryFieldProps<
   exploreId?: any;
 }
 
-export interface QueryEditorHelpProps {
+export interface QueryEditorHelpProps<TQuery extends DataQuery = DataQuery> {
-  datasource: DataSourceApi;
+  datasource: DataSourceApi<TQuery>;
-  onClickExample: (query: DataQuery) => void;
+  onClickExample: (query: TQuery) => void;
   exploreId?: any;
 }
 

packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx

@@ -15,7 +15,7 @@ import { TimeZoneGroup } from './TimeZonePicker/TimeZoneGroup';
 import { formatUtcOffset } from './TimeZonePicker/TimeZoneOffset';
 
 export interface Props {
-  onChange: (timeZone: TimeZone | undefined) => void;
+  onChange: (timeZone?: TimeZone) => void;
   value?: TimeZone;
   width?: number;
   autoFocus?: boolean;

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -98,7 +98,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
     this.setState({ theme: value });
   };
 
-  onTimeZoneChanged = (timezone: string) => {
+  onTimeZoneChanged = (timezone?: string) => {
     if (!timezone) {
       return;
     }
@@ -109,7 +109,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
     this.setState({ homeDashboardId: dashboardId });
   };
 
-  getFullDashName = (dashboard: DashboardSearchHit) => {
+  getFullDashName = (dashboard: SelectableValue<DashboardSearchHit>) => {
     if (typeof dashboard.folderTitle === 'undefined' || dashboard.folderTitle === '') {
       return dashboard.title;
     }
@@ -148,7 +148,9 @@ export class SharedPreferences extends PureComponent<Props, State> {
                   value={dashboards.find((dashboard) => dashboard.id === homeDashboardId)}
                   getOptionValue={(i) => i.id}
                   getOptionLabel={this.getFullDashName}
-                  onChange={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
+                  onChange={(dashboard: SelectableValue<DashboardSearchHit>) =>
+                    this.onHomeDashboardChanged(dashboard.id)
+                  }
                   options={dashboards}
                   placeholder="Choose default dashboard"
                 />

public/app/core/utils/deferred.ts

@@ -1,5 +1,5 @@
 export class Deferred<T = any> {
-  resolve?: (reason?: T | PromiseLike<T>) => void;
+  resolve?: (reason: T | PromiseLike<T>) => void;
   reject?: (reason?: any) => void;
   promise: Promise<T>;
 

public/app/features/admin/UserAdminPage.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { NavModel } from '@grafana/data';
 import { getNavModel } from 'app/core/selectors/navModel';
 import config from 'app/core/config';
@@ -29,39 +29,17 @@ import { UserOrgs } from './UserOrgs';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { contextSrv } from 'app/core/core';
 
-interface Props extends GrafanaRouteComponentProps<{ id: string }> {
+interface OwnProps extends GrafanaRouteComponentProps<{ id: string }> {
   navModel: NavModel;
-  user: UserDTO;
+  user?: UserDTO;
   orgs: UserOrg[];
   sessions: UserSession[];
-  ldapSyncInfo: SyncInfo;
+  ldapSyncInfo?: SyncInfo;
   isLoading: boolean;
-  error: UserAdminError;
+  error?: UserAdminError;
-
-  loadAdminUserPage: typeof loadAdminUserPage;
-  revokeSession: typeof revokeSession;
-  revokeAllSessions: typeof revokeAllSessions;
-  updateUser: typeof updateUser;
-  setUserPassword: typeof setUserPassword;
-  disableUser: typeof disableUser;
-  enableUser: typeof enableUser;
-  deleteUser: typeof deleteUser;
-  updateUserPermissions: typeof updateUserPermissions;
-  addOrgUser: typeof addOrgUser;
-  updateOrgUserRole: typeof updateOrgUserRole;
-  deleteOrgUser: typeof deleteOrgUser;
-  syncLdapUser: typeof syncLdapUser;
 }
 
-interface State {
+export class UserAdminPage extends PureComponent<Props> {
-  // isLoading: boolean;
-}
-
-export class UserAdminPage extends PureComponent<Props, State> {
-  state = {
-    // isLoading: true,
-  };
-
   async componentDidMount() {
     const { match, loadAdminUserPage } = this.props;
     loadAdminUserPage(parseInt(match.params.id, 10));
@@ -73,7 +51,7 @@ export class UserAdminPage extends PureComponent<Props, State> {
 
   onPasswordChange = (password: string) => {
     const { user, setUserPassword } = this.props;
-    setUserPassword(user.id, password);
+    user && setUserPassword(user.id, password);
   };
 
   onUserDelete = (userId: number) => {
@@ -90,42 +68,41 @@ export class UserAdminPage extends PureComponent<Props, State> {
 
   onGrafanaAdminChange = (isGrafanaAdmin: boolean) => {
     const { user, updateUserPermissions } = this.props;
-    updateUserPermissions(user.id, isGrafanaAdmin);
+    user && updateUserPermissions(user.id, isGrafanaAdmin);
   };
 
   onOrgRemove = (orgId: number) => {
     const { user, deleteOrgUser } = this.props;
-    deleteOrgUser(user.id, orgId);
+    user && deleteOrgUser(user.id, orgId);
   };
 
   onOrgRoleChange = (orgId: number, newRole: string) => {
     const { user, updateOrgUserRole } = this.props;
-    updateOrgUserRole(user.id, orgId, newRole);
+    user && updateOrgUserRole(user.id, orgId, newRole);
   };
 
   onOrgAdd = (orgId: number, role: string) => {
     const { user, addOrgUser } = this.props;
-    addOrgUser(user, orgId, role);
+    user && addOrgUser(user, orgId, role);
   };
 
   onSessionRevoke = (tokenId: number) => {
     const { user, revokeSession } = this.props;
-    revokeSession(tokenId, user.id);
+    user && revokeSession(tokenId, user.id);
   };
 
   onAllSessionsRevoke = () => {
     const { user, revokeAllSessions } = this.props;
-    revokeAllSessions(user.id);
+    user && revokeAllSessions(user.id);
   };
 
   onUserSync = () => {
     const { user, syncLdapUser } = this.props;
-    syncLdapUser(user.id);
+    user && syncLdapUser(user.id);
   };
 
   render() {
     const { navModel, user, orgs, sessions, ldapSyncInfo, isLoading } = this.props;
-    // const { isLoading } = this.state;
     const isLDAPUser = user && user.isExternal && user.authLabels && user.authLabels.includes('LDAP');
     const canReadSessions = contextSrv.hasPermission(AccessControlAction.UsersAuthTokenList);
     const canReadLDAPStatus = contextSrv.hasPermission(AccessControlAction.LDAPStatusRead);
@@ -198,4 +175,6 @@ const mapDispatchToProps = {
   syncLdapUser,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(UserAdminPage));
+const connector = connect(mapStateToProps, mapDispatchToProps);
+type Props = OwnProps & ConnectedProps<typeof connector>;
+export default hot(module)(connector(UserAdminPage));

public/app/features/admin/ldap/LdapPage.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { NavModel } from '@grafana/data';
 import { Alert, Button, LegacyForms } from '@grafana/ui';
 const { FormField } = LegacyForms;
@@ -29,19 +29,13 @@ import {
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { contextSrv } from 'app/core/core';
 
-interface Props extends GrafanaRouteComponentProps<{}, { username: string }> {
+interface OwnProps extends GrafanaRouteComponentProps<{}, { username: string }> {
   navModel: NavModel;
   ldapConnectionInfo: LdapConnectionInfo;
-  ldapUser: LdapUser;
+  ldapUser?: LdapUser;
-  ldapSyncInfo: SyncInfo;
+  ldapSyncInfo?: SyncInfo;
-  ldapError: LdapError;
+  ldapError?: LdapError;
   userError?: LdapError;
-
-  loadLdapState: typeof loadLdapState;
-  loadLdapSyncStatus: typeof loadLdapSyncStatus;
-  loadUserMapping: typeof loadUserMapping;
-  clearUserError: typeof clearUserError;
-  clearUserMappingInfo: typeof clearUserMappingInfo;
 }
 
 interface State {
@@ -163,4 +157,7 @@ const mapDispatchToProps = {
   clearUserMappingInfo,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(LdapPage));
+const connector = connect(mapStateToProps, mapDispatchToProps);
+type Props = OwnProps & ConnectedProps<typeof connector>;
+
+export default hot(module)(connector(LdapPage));

public/app/features/admin/state/reducers.test.ts

@@ -17,15 +17,9 @@ import { LdapState, LdapUser, UserAdminState, UserDTO, UserListAdminState } from
 
 const makeInitialLdapState = (): LdapState => ({
   connectionInfo: [],
-  syncInfo: null,
-  user: null,
-  ldapError: null,
-  connectionError: null,
-  userError: null,
 });
 
 const makeInitialUserAdminState = (): UserAdminState => ({
-  user: null,
   sessions: [],
   orgs: [],
   isLoading: true,
@@ -95,7 +89,7 @@ describe('LDAP page reducer', () => {
                 error: (null as unknown) as string,
               },
             ],
-            ldapError: null,
+            ldapError: undefined,
           });
       });
     });
@@ -167,7 +161,7 @@ describe('LDAP page reducer', () => {
         .thenStateShouldEqual({
           ...makeInitialLdapState(),
           user: getTestUserMapping(),
-          userError: null,
+          userError: undefined,
         });
     });
   });
@@ -189,7 +183,7 @@ describe('LDAP page reducer', () => {
         )
         .thenStateShouldEqual({
           ...makeInitialLdapState(),
-          user: null,
+          user: undefined,
           userError: {
             title: 'User not found',
             body: 'Cannot find user',
@@ -208,7 +202,7 @@ describe('LDAP page reducer', () => {
         .whenActionIsDispatched(clearUserMappingInfoAction())
         .thenStateShouldEqual({
           ...makeInitialLdapState(),
-          user: null,
+          user: undefined,
         });
     });
   });

public/app/features/admin/state/reducers.ts

@@ -15,10 +15,10 @@ import {
 
 const initialLdapState: LdapState = {
   connectionInfo: [],
-  syncInfo: null,
+  syncInfo: undefined,
-  user: null,
+  user: undefined,
-  connectionError: null,
+  connectionError: undefined,
-  userError: null,
+  userError: undefined,
 };
 
 const ldapSlice = createSlice({
@@ -27,7 +27,7 @@ const ldapSlice = createSlice({
   reducers: {
     ldapConnectionInfoLoadedAction: (state, action: PayloadAction<LdapConnectionInfo>): LdapState => ({
       ...state,
-      ldapError: null,
+      ldapError: undefined,
       connectionInfo: action.payload,
     }),
     ldapFailedAction: (state, action: PayloadAction<LdapError>): LdapState => ({
@@ -41,20 +41,20 @@ const ldapSlice = createSlice({
     userMappingInfoLoadedAction: (state, action: PayloadAction<LdapUser>): LdapState => ({
       ...state,
       user: action.payload,
-      userError: null,
+      userError: undefined,
     }),
     userMappingInfoFailedAction: (state, action: PayloadAction<LdapError>): LdapState => ({
       ...state,
-      user: null,
+      user: undefined,
       userError: action.payload,
     }),
     clearUserMappingInfoAction: (state, action: PayloadAction<undefined>): LdapState => ({
       ...state,
-      user: null,
+      user: undefined,
     }),
     clearUserErrorAction: (state, action: PayloadAction<undefined>): LdapState => ({
       ...state,
-      userError: null,
+      userError: undefined,
     }),
   },
 });
@@ -74,11 +74,11 @@ export const ldapReducer = ldapSlice.reducer;
 // UserAdminPage
 
 const initialUserAdminState: UserAdminState = {
-  user: null,
+  user: undefined,
   sessions: [],
   orgs: [],
   isLoading: true,
-  error: null,
+  error: undefined,
 };
 
 export const userAdminSlice = createSlice({

public/app/features/alerting/NewNotificationChannelPage.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 { config } from '@grafana/runtime';
 import { Form } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
@@ -13,25 +12,9 @@ import {
 } from './utils/notificationChannels';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { createNotificationChannel, loadNotificationTypes, testNotificationChannel } from './state/actions';
-import { NotificationChannelType, NotificationChannelDTO, StoreState } from '../../types';
+import { NotificationChannelDTO, StoreState } from '../../types';
 import { resetSecureField } from './state/reducers';
 
-interface OwnProps {}
-
-interface ConnectedProps {
-  navModel: NavModel;
-  notificationChannelTypes: NotificationChannelType[];
-}
-
-interface DispatchProps {
-  createNotificationChannel: typeof createNotificationChannel;
-  loadNotificationTypes: typeof loadNotificationTypes;
-  testNotificationChannel: typeof testNotificationChannel;
-  resetSecureField: typeof resetSecureField;
-}
-
-type Props = OwnProps & ConnectedProps & DispatchProps;
-
 class NewNotificationChannelPage extends PureComponent<Props> {
   componentDidMount() {
     this.props.loadNotificationTypes();
@@ -79,18 +62,18 @@ class NewNotificationChannelPage extends PureComponent<Props> {
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state) => {
+const mapStateToProps = (state: StoreState) => ({
-  return {
+  navModel: getNavModel(state.navIndex, 'channels'),
-    navModel: getNavModel(state.navIndex, 'channels'),
+  notificationChannelTypes: state.notificationChannel.notificationChannelTypes,
-    notificationChannelTypes: state.notificationChannel.notificationChannelTypes,
+});
-  };
-};
 
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
+const mapDispatchToProps = {
   createNotificationChannel,
   loadNotificationTypes,
   testNotificationChannel,
   resetSecureField,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(NewNotificationChannelPage);
+const connector = connect(mapStateToProps, mapDispatchToProps);
+type Props = ConnectedProps<typeof connector>;
+export default connector(NewNotificationChannelPage);

public/app/features/alerting/unified/components/DynamicTable.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { IconButton, useStyles2, useTheme2 } from '@grafana/ui';
@@ -27,11 +27,11 @@ export interface DynamicTableProps<T = unknown> {
   isExpandable?: boolean;
   onCollapse?: (id: DynamicTableItemProps<T>) => void;
   onExpand?: (id: DynamicTableItemProps<T>) => void;
-  renderExpandedContent?: (item: DynamicTableItemProps, index: number) => ReactNode;
+  renderExpandedContent?: (item: DynamicTableItemProps<T>, index: number) => ReactNode;
   testIdGenerator?: (item: DynamicTableItemProps<T>) => string;
 }
 
-export const DynamicTable: FC<DynamicTableProps> = ({
+export const DynamicTable = <T extends object>({
   cols,
   items,
   isExpandable = false,
@@ -39,7 +39,7 @@ export const DynamicTable: FC<DynamicTableProps> = ({
   onExpand,
   renderExpandedContent,
   testIdGenerator,
-}) => {
+}: DynamicTableProps<T>) => {
   const styles = useStyles2(getStyles(cols, isExpandable));
   const theme = useTheme2();
   const isMobile = useMedia(`(${theme.breakpoints.down('sm')})`);
@@ -84,7 +84,7 @@ export const DynamicTable: FC<DynamicTableProps> = ({
   );
 };
 
-const getStyles = (cols: DynamicTableColumnProps[], isExpandable: boolean) => {
+const getStyles = <T extends unknown>(cols: Array<DynamicTableColumnProps<T>>, isExpandable: boolean) => {
   const sizes = cols.map((col) => {
     if (!col.size) {
       return 'auto';

public/app/features/query/components/QueryEditorRow.tsx

@@ -29,38 +29,38 @@ import { DashboardModel } from '../../dashboard/state/DashboardModel';
 import { selectors } from '@grafana/e2e-selectors';
 import { PanelModel } from 'app/features/dashboard/state';
 
-interface Props {
+interface Props<TQuery extends DataQuery> {
   data: PanelData;
-  query: DataQuery;
+  query: TQuery;
-  queries: DataQuery[];
+  queries: TQuery[];
   id: string;
   index: number;
   dataSource: DataSourceInstanceSettings;
   onChangeDataSource?: (dsSettings: DataSourceInstanceSettings) => void;
   renderHeaderExtras?: () => ReactNode;
-  onAddQuery: (query: DataQuery) => void;
+  onAddQuery: (query: TQuery) => void;
-  onRemoveQuery: (query: DataQuery) => void;
+  onRemoveQuery: (query: TQuery) => void;
-  onChange: (query: DataQuery) => void;
+  onChange: (query: TQuery) => void;
   onRunQuery: () => void;
   visualization?: ReactNode;
   hideDisableQuery?: boolean;
 }
 
-interface State {
+interface State<TQuery extends DataQuery> {
   loadedDataSourceIdentifier?: string | null;
-  datasource: DataSourceApi | null;
+  datasource: DataSourceApi<TQuery> | null;
   hasTextEditMode: boolean;
   data?: PanelData;
   isOpen?: boolean;
   showingHelp: boolean;
 }
 
-export class QueryEditorRow extends PureComponent<Props, State> {
+export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Props<TQuery>, State<TQuery>> {
   element: HTMLElement | null = null;
-  angularScope: AngularQueryComponentScope | null = null;
+  angularScope: AngularQueryComponentScope<TQuery> | null = null;
   angularQueryEditor: AngularComponent | null = null;
 
-  state: State = {
+  state: State<TQuery> = {
     datasource: null,
     hasTextEditMode: false,
     data: undefined,
@@ -78,7 +78,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     }
   }
 
-  getAngularQueryComponentScope(): AngularQueryComponentScope {
+  getAngularQueryComponentScope(): AngularQueryComponentScope<TQuery> {
     const { query, queries } = this.props;
     const { datasource } = this.state;
     const panel = new PanelModel({ targets: queries });
@@ -129,13 +129,13 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     }
 
     this.setState({
-      datasource,
+      datasource: (datasource as unknown) as DataSourceApi<TQuery>,
       loadedDataSourceIdentifier: dataSourceIdentifier,
       hasTextEditMode: has(datasource, 'components.QueryCtrl.prototype.toggleEditorMode'),
     });
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: Props<TQuery>) {
     const { datasource, loadedDataSourceIdentifier } = this.state;
     const { data, query } = this.props;
 
@@ -252,7 +252,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     }));
   };
 
-  onClickExample = (query: DataQuery) => {
+  onClickExample = (query: TQuery) => {
     this.props.onChange({
       ...query,
       refId: this.props.query.refId,
@@ -371,7 +371,11 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   }
 }
 
-function notifyAngularQueryEditorsOfData(scope: AngularQueryComponentScope, data: PanelData, editor: AngularComponent) {
+function notifyAngularQueryEditorsOfData<TQuery extends DataQuery>(
+  scope: AngularQueryComponentScope<TQuery>,
+  data: PanelData,
+  editor: AngularComponent
+) {
   if (data.state === LoadingState.Done) {
     const legacy = data.series.map((v) => toLegacyResponseData(v));
     scope.events.emit(PanelEvents.dataReceived, legacy);
@@ -384,14 +388,14 @@ function notifyAngularQueryEditorsOfData(scope: AngularQueryComponentScope, data
   setTimeout(editor.digest);
 }
 
-export interface AngularQueryComponentScope {
+export interface AngularQueryComponentScope<TQuery extends DataQuery> {
-  target: DataQuery;
+  target: TQuery;
   panel: PanelModel;
   dashboard: DashboardModel;
   events: EventBusExtended;
   refresh: () => void;
   render: () => void;
-  datasource: DataSourceApi | null;
+  datasource: DataSourceApi<TQuery> | null;
   toggleEditorMode?: () => void;
   getCollapsedText?: () => string;
   range: TimeRange;

public/app/features/query/components/QueryEditorRowHeader.tsx

@@ -5,19 +5,19 @@ import { DataSourcePicker } from '@grafana/runtime';
 import { Icon, Input, FieldValidationMessage, useStyles } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
-export interface Props {
+export interface Props<TQuery extends DataQuery = DataQuery> {
-  query: DataQuery;
+  query: TQuery;
-  queries: DataQuery[];
+  queries: TQuery[];
   disabled?: boolean;
   dataSource: DataSourceInstanceSettings;
   renderExtras?: () => ReactNode;
   onChangeDataSource?: (settings: DataSourceInstanceSettings) => void;
-  onChange: (query: DataQuery) => void;
+  onChange: (query: TQuery) => void;
   onClick: (e: React.MouseEvent) => void;
   collapsedText: string | null;
 }
 
-export const QueryEditorRowHeader: React.FC<Props> = (props) => {
+export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQuery>) => {
   const { query, queries, onClick, onChange, collapsedText, renderExtras, disabled } = props;
 
   const styles = useStyles(getStyles);
@@ -123,7 +123,10 @@ export const QueryEditorRowHeader: React.FC<Props> = (props) => {
   );
 };
 
-const renderDataSource = (props: Props, styles: ReturnType<typeof getStyles>): ReactNode => {
+const renderDataSource = <TQuery extends DataQuery>(
+  props: Props<TQuery>,
+  styles: ReturnType<typeof getStyles>
+): ReactNode => {
   const { dataSource, onChangeDataSource } = props;
 
   if (!onChangeDataSource) {

public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx

@@ -1,8 +1,12 @@
 import React, { PureComponent } from 'react';
 import { QueryEditorHelpProps } from '@grafana/data';
 import { css } from '@emotion/css';
+import { CloudMonitoringQuery } from '../types';
 
-export default class CloudMonitoringCheatSheet extends PureComponent<QueryEditorHelpProps, { userExamples: string[] }> {
+export default class CloudMonitoringCheatSheet extends PureComponent<
+  QueryEditorHelpProps<CloudMonitoringQuery>,
+  { userExamples: string[] }
+> {
   render() {
     return (
       <div>

public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx

@@ -5,7 +5,7 @@ import Prism from 'prismjs';
 import tokenizer from '../syntax';
 import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
 import { css, cx } from '@emotion/css';
-import { CloudWatchLogsQuery } from '../types';
+import { CloudWatchQuery } from '../types';
 
 interface QueryExample {
   category: string;
@@ -214,8 +214,11 @@ const exampleCategory = css`
   margin-top: 5px;
 `;
 
-export default class LogsCheatSheet extends PureComponent<QueryEditorHelpProps, { userExamples: string[] }> {
+export default class LogsCheatSheet extends PureComponent<
-  onClickExample(query: CloudWatchLogsQuery) {
+  QueryEditorHelpProps<CloudWatchQuery>,
+  { userExamples: string[] }
+> {
+  onClickExample(query: CloudWatchQuery) {
     this.props.onClickExample(query);
   }
 

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

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import { shuffle } from 'lodash';
-import { QueryEditorHelpProps, DataQuery } from '@grafana/data';
+import { QueryEditorHelpProps } from '@grafana/data';
 import LokiLanguageProvider from '../language_provider';
+import { LokiQuery } from '../types';
 
 const DEFAULT_EXAMPLES = ['{job="default/prometheus"}'];
 const PREFERRED_LABELS = ['job', 'app', 'k8s_app'];
@@ -32,7 +33,7 @@ const LOGQL_EXAMPLES = [
   },
 ];
 
-export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps, { userExamples: string[] }> {
+export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<LokiQuery>, { userExamples: string[] }> {
   userLabelTimer: NodeJS.Timeout;
   state = {
     userExamples: DEFAULT_EXAMPLES,
@@ -72,11 +73,7 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps,
     const { onClickExample } = this.props;
 
     return (
-      <div
+      <div className="cheat-sheet-item__example" key={expr} onClick={(e) => onClickExample({ refId: 'A', expr })}>
-        className="cheat-sheet-item__example"
-        key={expr}
-        onClick={(e) => onClickExample({ refId: 'A', expr } as DataQuery)}
-      >
         <code>{expr}</code>
       </div>
     );

public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { QueryEditorHelpProps, DataQuery } from '@grafana/data';
+import { QueryEditorHelpProps } from '@grafana/data';
+import { PromQuery } from '../types';
 
 const CHEAT_SHEET_ITEMS = [
   {
@@ -25,7 +26,7 @@ const CHEAT_SHEET_ITEMS = [
   },
 ];
 
-const PromCheatSheet = (props: QueryEditorHelpProps) => (
+const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => (
   <div>
     <h2>PromQL Cheat Sheet</h2>
     {CHEAT_SHEET_ITEMS.map((item, index) => (
@@ -34,7 +35,7 @@ const PromCheatSheet = (props: QueryEditorHelpProps) => (
         {item.expression ? (
           <div
             className="cheat-sheet-item__example"
-            onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression } as DataQuery)}
+            onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
           >
             <code>{item.expression}</code>
           </div>

public/app/types/ldap.ts

@@ -68,9 +68,9 @@ export type LdapConnectionInfo = LdapServerInfo[];
 
 export interface LdapState {
   connectionInfo: LdapConnectionInfo;
-  user?: LdapUser | null;
+  user?: LdapUser;
-  syncInfo?: SyncInfo | null;
+  syncInfo?: SyncInfo;
-  connectionError?: LdapError | null;
+  connectionError?: LdapError;
-  userError?: LdapError | null;
+  userError?: LdapError;
-  ldapError?: LdapError | null;
+  ldapError?: LdapError;
 }

public/app/types/user.ts

@@ -88,11 +88,11 @@ export interface UserOrg {
 }
 
 export interface UserAdminState {
-  user: UserDTO | null;
+  user?: UserDTO;
   sessions: UserSession[];
   orgs: UserOrg[];
   isLoading: boolean;
-  error?: UserAdminError | null;
+  error?: UserAdminError;
 }
 
 export interface UserAdminError {