Chore: Fix more TypeScript strict errors (#37066)

* Chore: Fix more TypeScript strict errors

* whoops

public/app/core/components/PermissionList/AddPermission.tsx

@@ -5,7 +5,7 @@ import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TeamPicker } from 'app/core/components/Select/TeamPicker';
 import { Button, Form, HorizontalGroup, Select, stylesFactory } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { Team, User } from 'app/types';
+import { OrgUser, Team } from 'app/types';
 import {
   dashboardPermissionLevels,
   dashboardAclTargets,
@@ -58,7 +58,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
     }
   };
 
-  onUserSelected = (user: User) => {
+  onUserSelected = (user: SelectableValue<OrgUser['userId']>) => {
     this.setState({ userId: user && !Array.isArray(user) ? user.id : 0 });
   };
 

public/app/core/components/Select/UserPicker.tsx

@@ -9,10 +9,11 @@ import { AsyncSelect } from '@grafana/ui';
 import { getBackendSrv } from '@grafana/runtime';
 
 // Types
-import { User } from 'app/types';
+import { OrgUser } from 'app/types';
+import { SelectableValue } from '@grafana/data';
 
 export interface Props {
-  onSelected: (user: User) => void;
+  onSelected: (user: SelectableValue<OrgUser['userId']>) => void;
   className?: string;
 }
 
@@ -43,8 +44,8 @@ export class UserPicker extends Component<Props, State> {
 
     return getBackendSrv()
       .get(`/api/org/users/lookup?query=${query}&limit=100`)
-      .then((result: any) => {
+      .then((result: OrgUser[]) => {
-        return result.map((user: any) => ({
+        return result.map((user) => ({
           id: user.userId,
           value: user.userId,
           label: user.login,

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

@@ -1,4 +1,4 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction, Draft } from '@reduxjs/toolkit';
 import {
   DashboardAclDTO,
   DashboardInitError,
@@ -32,13 +32,13 @@ const dashbardSlice = createSlice({
     loadDashboardPermissions: (state, action: PayloadAction<DashboardAclDTO[]>) => {
       state.permissions = processAclItems(action.payload);
     },
-    dashboardInitFetching: (state, action: PayloadAction) => {
+    dashboardInitFetching: (state) => {
       state.initPhase = DashboardInitPhase.Fetching;
     },
-    dashboardInitServices: (state, action: PayloadAction) => {
+    dashboardInitServices: (state) => {
       state.initPhase = DashboardInitPhase.Services;
     },
-    dashboardInitSlow: (state, action: PayloadAction) => {
+    dashboardInitSlow: (state) => {
       state.isInitSlow = true;
     },
     dashboardInitCompleted: (state, action: PayloadAction<DashboardModel>) => {
@@ -59,7 +59,7 @@ const dashbardSlice = createSlice({
         return new DashboardModel({ title: 'Dashboard init failed' }, { canSave: false, canEdit: false });
       };
     },
-    cleanUpDashboard: (state, action: PayloadAction) => {
+    cleanUpDashboard: (state) => {
       state.panels = {};
       state.initPhase = DashboardInitPhase.NotStarted;
       state.isInitSlow = false;
@@ -69,17 +69,17 @@ const dashbardSlice = createSlice({
     setDashboardQueriesToUpdateOnLoad: (state, action: PayloadAction<QueriesToUpdateOnDashboardLoad>) => {
       state.modifiedQueries = action.payload;
     },
-    clearDashboardQueriesToUpdateOnLoad: (state, action: PayloadAction) => {
+    clearDashboardQueriesToUpdateOnLoad: (state) => {
       state.modifiedQueries = null;
     },
-    panelModelAndPluginReady: (state: DashboardState, action: PayloadAction<PanelModelAndPluginReadyPayload>) => {
+    panelModelAndPluginReady: (state, action: PayloadAction<PanelModelAndPluginReadyPayload>) => {
       updatePanelState(state, action.payload.panelId, { plugin: action.payload.plugin });
     },
-    cleanUpEditPanel: (state, action: PayloadAction) => {
+    cleanUpEditPanel: (state) => {
       // TODO: refactor, since the state should be mutated by copying only
       delete state.panels[EDIT_PANEL_ID];
     },
-    setPanelAngularComponent: (state: DashboardState, action: PayloadAction<SetPanelAngularComponentPayload>) => {
+    setPanelAngularComponent: (state, action: PayloadAction<SetPanelAngularComponentPayload>) => {
       updatePanelState(state, action.payload.panelId, { angularComponent: action.payload.angularComponent });
     },
     addPanel: (state, action: PayloadAction<PanelModel>) => {
@@ -89,7 +89,7 @@ const dashbardSlice = createSlice({
   },
 });
 
-export function updatePanelState(state: DashboardState, panelId: number, ps: Partial<PanelState>) {
+export function updatePanelState(state: Draft<DashboardState>, panelId: number, ps: Partial<PanelState>) {
   if (!state.panels[panelId]) {
     state.panels[panelId] = ps as PanelState;
   } else {

public/app/features/panel/panel_ctrl.ts

@@ -24,8 +24,8 @@ export class PanelCtrl {
   $injector: auto.IInjectorService;
   $timeout: any;
   editModeInitiated = false;
-  height: number;
+  declare height: number;
-  width: number;
+  declare width: number;
   containerHeight: any;
   events: EventBusExtended;
   loading = false;

public/app/features/playlist/PlaylistSrv.ts

@@ -14,15 +14,15 @@ export const queryParamsToPreserve: { [key: string]: boolean } = {
 
 export class PlaylistSrv {
   private nextTimeoutId: any;
-  private dashboards: Array<{ url: string }>;
+  private declare dashboards: Array<{ url: string }>;
-  private index: number;
+  private index = 0;
-  private interval: number;
+  private declare interval: number;
-  private startUrl: string;
+  private declare startUrl: string;
   private numberOfLoops = 0;
-  private validPlaylistUrl: string;
+  private declare validPlaylistUrl: string;
   private locationListenerUnsub?: () => void;
 
-  isPlaying: boolean;
+  isPlaying = false;
 
   constructor() {
     this.locationUpdated = this.locationUpdated.bind(this);

public/app/features/teams/TeamMembers.tsx

@@ -3,7 +3,7 @@ import { connect } 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';
-import { TeamMember, User } from 'app/types';
+import { TeamMember, OrgUser } from 'app/types';
 import { addTeamMember } from './state/actions';
 import { getSearchMemberQuery, isSignedInUserTeamAdmin } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -14,6 +14,7 @@ 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 {
   members: TeamMember[];
@@ -27,7 +28,7 @@ export interface Props {
 
 export interface State {
   isAdding: boolean;
-  newTeamMember?: User | null;
+  newTeamMember?: SelectableValue<OrgUser['userId']> | null;
 }
 
 export class TeamMembers extends PureComponent<Props, State> {
@@ -44,7 +45,7 @@ export class TeamMembers extends PureComponent<Props, State> {
     this.setState({ isAdding: !this.state.isAdding });
   };
 
-  onUserSelected = (user: User) => {
+  onUserSelected = (user: SelectableValue<OrgUser['userId']>) => {
     this.setState({ newTeamMember: user });
   };
 

public/app/features/users/UsersListPage.tsx

@@ -37,7 +37,7 @@ export interface State {
 const pageLimit = 30;
 
 export class UsersListPage extends PureComponent<Props, State> {
-  externalUserMngInfoHtml: string;
+  declare externalUserMngInfoHtml: string;
 
   constructor(props: Props) {
     super(props);

public/app/plugins/datasource/cloudwatch/language_provider.ts

@@ -30,8 +30,8 @@ type TypeaheadContext = {
 };
 
 export class CloudWatchLanguageProvider extends LanguageProvider {
-  started: boolean;
+  started = false;
-  initialRange: AbsoluteTimeRange;
+  declare initialRange: AbsoluteTimeRange;
   datasource: CloudWatchDatasource;
 
   constructor(datasource: CloudWatchDatasource, initialValues?: any) {

public/app/plugins/datasource/elasticsearch/language_provider.ts

@@ -93,8 +93,8 @@ function getElasticsearchQuery(prometheusLabels: string[][]): string {
 }
 
 export default class ElasticsearchLanguageProvider extends LanguageProvider {
-  request: (url: string, params?: any) => Promise<any>;
+  declare request: (url: string, params?: any) => Promise<any>;
-  start: () => Promise<any[]>;
+  declare start: () => Promise<any[]>;
   datasource: ElasticDatasource;
 
   constructor(datasource: ElasticDatasource, initialValues?: any) {

public/app/plugins/datasource/grafana-azure-monitor-datasource/annotations_query_ctrl.ts

@@ -4,8 +4,8 @@ export class AzureMonitorAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
   datasource: any;
   annotation: any;
-  workspaces: any[];
+  declare workspaces: any[];
-  subscriptions: Array<{ text: string; value: string }>;
+  declare subscriptions: Array<{ text: string; value: string }>;
 
   defaultQuery =
     '<your table>\n| where $__timeFilter() \n| project TimeGenerated, Text=YourTitleColumn, Tags="tag1,tag2"';

public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_log_analytics/azure_log_analytics_datasource.ts

@@ -34,7 +34,7 @@ export default class AzureLogAnalyticsDatasource extends DataSourceWithBackend<
 > {
   resourcePath: string;
   azurePortalUrl: string;
-  applicationId: string;
+  declare applicationId: string;
 
   defaultSubscriptionId?: string;
 

public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_log_analytics/response_parser.ts

@@ -4,7 +4,7 @@ import { AzureLogsTableData, AzureLogsVariable } from '../types';
 import { AzureLogAnalyticsMetadata } from '../types/logAnalyticsMetadata';
 
 export default class ResponseParser {
-  columns: string[];
+  declare columns: string[];
   constructor(private results: any) {}
 
   parseQueryResult(): any {

public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/azure_monitor_datasource.ts

@@ -47,8 +47,8 @@ export default class AzureMonitorDatasource extends DataSourceWithBackend<AzureM
   defaultSubscriptionId?: string;
   resourcePath: string;
   azurePortalUrl: string;
-  resourceGroup: string;
+  declare resourceGroup: string;
-  resourceName: string;
+  declare resourceName: string;
   supportedMetricNamespaces: string[] = [];
   timeSrv: TimeSrv;
 

public/app/plugins/datasource/grafana-azure-monitor-datasource/datasource.ts

@@ -46,7 +46,7 @@ export default class Datasource extends DataSourceApi<AzureMonitorQuery, AzureDa
       | InsightsAnalyticsDatasource;
   } = {};
 
-  optionsKey: Record<AzureQueryType, string>;
+  declare optionsKey: Record<AzureQueryType, string>;
 
   constructor(
     instanceSettings: DataSourceInstanceSettings<AzureDataSourceJsonData>,

public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts

@@ -132,7 +132,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl {
   showLastQuery = false;
   lastQuery = '';
   lastQueryError?: string;
-  subscriptions: Array<{ text: string; value: string }>;
+  subscriptions: Array<{ text: string; value: string }> = [];
 
   /** @ngInject */
   constructor($scope: any, $injector: auto.IInjectorService, private templateSrv: TemplateSrv) {

public/app/plugins/datasource/graphite/gfunc.ts

@@ -990,7 +990,7 @@ export class FuncInstance {
   def: FuncDef;
   params: Array<string | number>;
   text: any;
-  added: boolean;
+  declare added: boolean;
   /**
    * Hidden functions are not displayed in UI but available in text editor
    * This is used for seriesByTagUsed function which when used switches

public/app/plugins/datasource/graphite/query_ctrl.ts

@@ -25,10 +25,10 @@ import { ChangeEvent } from 'react';
 export class GraphiteQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
 
-  queryModel: GraphiteQuery;
+  declare queryModel: GraphiteQuery;
   segments: any[] = [];
   addTagSegments: any[] = [];
-  removeTagValue: string;
+  declare removeTagValue: string;
   supportsTags = false;
   paused = false;
 

public/app/plugins/datasource/influxdb/influx_query_model.ts

@@ -7,7 +7,7 @@ import { TemplateSrv } from '@grafana/runtime';
 
 export default class InfluxQueryModel {
   target: InfluxQuery;
-  selectModels: any[];
+  selectModels: any[] = [];
   queryBuilder: any;
   groupByParts: any;
   templateSrv: any;

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

@@ -34,7 +34,7 @@ const LOGQL_EXAMPLES = [
 ];
 
 export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<LokiQuery>, { userExamples: string[] }> {
-  userLabelTimer: NodeJS.Timeout;
+  declare userLabelTimer: NodeJS.Timeout;
   state = {
     userExamples: DEFAULT_EXAMPLES,
   };

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

@@ -89,7 +89,7 @@ interface PromQueryFieldState {
 
 class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryFieldState> {
   plugins: Plugin[];
-  languageProviderInitializationPromise: CancelablePromise<any>;
+  declare languageProviderInitializationPromise: CancelablePromise<any>;
 
   constructor(props: PromQueryFieldProps, context: React.Context<any>) {
     super(props, context);

public/app/plugins/datasource/prometheus/language_provider.ts

@@ -67,10 +67,10 @@ export default class PromQlLanguageProvider extends LanguageProvider {
   timeRange?: { start: number; end: number };
   metrics: string[];
   metricsMetadata?: PromMetricsMetadata;
-  startTask: Promise<any>;
+  declare startTask: Promise<any>;
   datasource: PrometheusDatasource;
-  labelKeys: string[];
+  labelKeys: string[] = [];
-  labelFetchTs: number;
+  declare labelFetchTs: number;
 
   /**
    *  Cache for labels of series. This is bit simplistic in the sense that it just counts responses each as a 1 and does

public/app/plugins/panel/graph/graph.ts

@@ -65,7 +65,7 @@ class GraphElement {
   eventManager: EventManager;
   thresholdManager?: ThresholdManager;
   timeRegionManager: TimeRegionManager;
-  legendElem: HTMLElement;
+  declare legendElem: HTMLElement;
 
   constructor(private scope: any, private elem: JQuery, private timeSrv: TimeSrv) {
     this.ctrl = scope.ctrl;

scripts/ci-check-strict.sh

@@ -3,7 +3,7 @@ set -e
 
 echo -e "Collecting code stats (typescript errors & more)"
 
-ERROR_COUNT_LIMIT=198
+ERROR_COUNT_LIMIT=157
 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