Chore: reduces strict null errors to 824 (#22744)

* Chore: reduces strict null errors with 100+

* Chore: lowers the build error number

public/app/core/logs_model.test.ts

 import {
   DataFrame,
   FieldType,
-  LogsMetaKind,
-  LogsDedupStrategy,
   LogLevel,
+  LogRowModel,
+  LogsDedupStrategy,
+  LogsMetaKind,
   MutableDataFrame,
   toDataFrame,
-  LogRowModel,
 } from '@grafana/data';
-import { dedupLogRows, dataFrameToLogsModel } from './logs_model';
+import { dataFrameToLogsModel, dedupLogRows } from './logs_model';
 
 describe('dedupLogRows()', () => {
   test('should return rows as is when dedup is set to none', () => {
@@ -240,12 +240,12 @@ describe('dataFrameToLogsModel', () => {
 
     expect(logsModel.series).toHaveLength(2);
     expect(logsModel.meta).toHaveLength(2);
-    expect(logsModel.meta[0]).toMatchObject({
+    expect(logsModel.meta![0]).toMatchObject({
       label: 'Common labels',
       value: series[0].fields[1].labels,
       kind: LogsMetaKind.LabelsMap,
     });
-    expect(logsModel.meta[1]).toMatchObject({
+    expect(logsModel.meta![1]).toMatchObject({
       label: 'Limit',
       value: `1000 (2 returned)`,
       kind: LogsMetaKind.String,
@@ -364,7 +364,7 @@ describe('dataFrameToLogsModel', () => {
 
     expect(logsModel.series).toHaveLength(2);
     expect(logsModel.meta).toHaveLength(1);
-    expect(logsModel.meta[0]).toMatchObject({
+    expect(logsModel.meta![0]).toMatchObject({
       label: 'Common labels',
       value: {
         foo: 'bar',

public/app/core/specs/flatten.test.ts

@@ -12,7 +12,7 @@ describe('flatten', () => {
           },
         },
       },
-      null
+      (null as unknown) as { delimiter?: any; maxDepth?: any; safe?: any }
     );
 
     expect(flattened['level1']).toBe('level1-value');

public/app/core/utils/errors.test.ts

 import { getMessageFromError } from 'app/core/utils/errors';
 
 describe('errors functions', () => {
-  let message: string;
+  let message: string | null;
 
   describe('when getMessageFromError gets an error string', () => {
     beforeEach(() => {

public/app/core/utils/explore.test.ts

 import {
-  DEFAULT_RANGE,
-  serializeStateToUrlParam,
-  parseUrlState,
-  updateHistory,
+  buildQueryTransaction,
   clearHistory,
-  hasNonEmptyQuery,
-  getValueWithRefId,
+  DEFAULT_RANGE,
   getFirstQueryErrorWithoutRefId,
   getRefIds,
+  getValueWithRefId,
+  hasNonEmptyQuery,
+  parseUrlState,
   refreshIntervalToSortOrder,
-  SortOrder,
+  serializeStateToUrlParam,
   sortLogsResult,
-  buildQueryTransaction,
+  SortOrder,
+  updateHistory,
 } from './explore';
 import { ExploreUrlState } from 'app/types/explore';
 import store from 'app/core/store';
 import {
   DataQueryError,
-  LogsDedupStrategy,
-  LogsModel,
-  LogLevel,
   dateTime,
-  MutableDataFrame,
   ExploreMode,
+  LogLevel,
   LogRowModel,
+  LogsDedupStrategy,
+  LogsModel,
+  MutableDataFrame,
 } from '@grafana/data';
 import { RefreshPicker } from '@grafana/ui';
 
 const DEFAULT_EXPLORE_STATE: ExploreUrlState = {
-  datasource: null,
+  datasource: '',
   queries: [],
   range: DEFAULT_RANGE,
   mode: ExploreMode.Metrics,
@@ -259,7 +259,7 @@ describe('hasRefId', () => {
 describe('getFirstQueryErrorWithoutRefId', () => {
   describe('when called with a null value', () => {
     it('then it should return undefined', () => {
-      const errors: DataQueryError[] = null;
+      const errors: DataQueryError[] | undefined = undefined;
       const result = getFirstQueryErrorWithoutRefId(errors);
 
       expect(result).toBeUndefined();

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx

@@ -43,6 +43,7 @@ const renderAndSubmitForm = async (dashboard: any, submitSpy: any) => {
     />
   );
 
+  // @ts-ignore strict null error below
   await act(async () => {
     const button = container.find('button[aria-label="Save dashboard button"]');
     button.simulate('submit');

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.test.tsx

@@ -39,6 +39,7 @@ const renderAndSubmitForm = async (dashboard: any, submitSpy: any) => {
     />
   );
 
+  // @ts-ignore strict null error below
   await act(async () => {
     const button = container.find('button[aria-label="Dashboard settings Save Dashboard Modal Save button"]');
     button.simulate('submit');

public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts

-import { versions, restore } from './__mocks__/history';
+import { restore, versions } from './__mocks__/history';
 import { HistorySrv } from './HistorySrv';
 import { DashboardModel } from '../../state/DashboardModel';
 
@@ -49,7 +49,7 @@ describe('historySrv', () => {
     });
 
     it('should return an empty array when not given a dashboard', () => {
-      return historySrv.getHistoryList(null, historyListOpts).then((versions: any) => {
+      return historySrv.getHistoryList((null as unknown) as DashboardModel, historyListOpts).then((versions: any) => {
         expect(versions).toEqual([]);
       });
     });

public/app/features/dashboard/panel_editor/QueryEditorRow.test.ts

-import { LoadingState, toDataFrame, dateTime, PanelData, DataQueryRequest } from '@grafana/data';
+import { DataQueryRequest, dateTime, LoadingState, PanelData, toDataFrame } from '@grafana/data';
 import { filterPanelDataToQuery } from './QueryEditorRow';
 
 function makePretendRequest(requestId: string, subRequests?: DataQueryRequest[]): DataQueryRequest {
@@ -32,15 +32,15 @@ describe('filterPanelDataToQuery', () => {
 
   it('should not have an error unless the refId matches', () => {
     const panelData = filterPanelDataToQuery(data, 'A');
-    expect(panelData.series.length).toBe(1);
-    expect(panelData.series[0].refId).toBe('A');
-    expect(panelData.error).toBeUndefined();
+    expect(panelData?.series.length).toBe(1);
+    expect(panelData?.series[0].refId).toBe('A');
+    expect(panelData?.error).toBeUndefined();
   });
 
   it('should match the error to the query', () => {
     const panelData = filterPanelDataToQuery(data, 'B');
-    expect(panelData.series.length).toBe(3);
-    expect(panelData.series[0].refId).toBe('B');
-    expect(panelData.error!.refId).toBe('B');
+    expect(panelData?.series.length).toBe(3);
+    expect(panelData?.series[0].refId).toBe('B');
+    expect(panelData?.error!.refId).toBe('B');
   });
 });

public/app/features/dashboard/state/DashboardModel.test.ts

@@ -652,14 +652,14 @@ describe('DashboardModel', () => {
 
     it('toggleLegendsForAll should toggle all legends on on first execution', () => {
       model.toggleLegendsForAll();
-      const legendsOn = model.panels.filter(panel => panel.legend.show === true);
+      const legendsOn = model.panels.filter(panel => panel.legend!.show === true);
       expect(legendsOn.length).toBe(3);
     });
 
     it('toggleLegendsForAll should toggle all legends off on second execution', () => {
       model.toggleLegendsForAll();
       model.toggleLegendsForAll();
-      const legendsOn = model.panels.filter(panel => panel.legend.show === true);
+      const legendsOn = model.panels.filter(panel => panel.legend!.show === true);
       expect(legendsOn.length).toBe(0);
     });
   });

public/app/features/dashboard/state/PanelModel.test.ts

 import { PanelModel } from './PanelModel';
 import { getPanelPlugin } from '../../plugins/__mocks__/pluginMocks';
+import { PanelProps } from '@grafana/data';
+import { ComponentClass } from 'react';
 
 class TablePanelCtrl {}
 
@@ -58,7 +60,7 @@ describe('PanelModel', () => {
         {
           id: 'table',
         },
-        null, // react
+        (null as unknown) as ComponentClass<PanelProps>, // react
         TablePanelCtrl // angular
       );
       panelPlugin.setDefaults(defaultOptionsMock);

public/app/features/dashboard/state/PanelQueryRunner.test.ts

 import { PanelQueryRunner } from './PanelQueryRunner';
-import { PanelData, DataQueryRequest, dateTime, ScopedVars } from '@grafana/data';
+import { DataQueryRequest, dateTime, PanelData, ScopedVars } from '@grafana/data';
 import { DashboardModel } from './index';
 import { setEchoSrv } from '@grafana/runtime';
 import { Echo } from '../../../core/services/echo/Echo';
@@ -97,7 +97,7 @@ function describeQueryRunnerScenario(description: string, scenarioFn: ScenarioFn
       ctx.runner.getData().subscribe({
         next: (data: PanelData) => {
           ctx.res = data;
-          ctx.events.push(data);
+          ctx.events?.push(data);
         },
       });
 
@@ -112,17 +112,17 @@ function describeQueryRunnerScenario(description: string, scenarioFn: ScenarioFn
 describe('PanelQueryRunner', () => {
   describeQueryRunnerScenario('simple scenario', ctx => {
     it('should set requestId on request', async () => {
-      expect(ctx.queryCalledWith.requestId).toBe('Q100');
+      expect(ctx.queryCalledWith?.requestId).toBe('Q100');
     });
 
     it('should set datasource name on request', async () => {
-      expect(ctx.queryCalledWith.targets[0].datasource).toBe('TestDB');
+      expect(ctx.queryCalledWith?.targets[0].datasource).toBe('TestDB');
     });
 
     it('should pass scopedVars to datasource with interval props', async () => {
-      expect(ctx.queryCalledWith.scopedVars.server.text).toBe('Server1');
-      expect(ctx.queryCalledWith.scopedVars.__interval.text).toBe('5m');
-      expect(ctx.queryCalledWith.scopedVars.__interval_ms.text).toBe('300000');
+      expect(ctx.queryCalledWith?.scopedVars.server.text).toBe('Server1');
+      expect(ctx.queryCalledWith?.scopedVars.__interval.text).toBe('5m');
+      expect(ctx.queryCalledWith?.scopedVars.__interval_ms.text).toBe('300000');
     });
   });
 
@@ -133,20 +133,20 @@ describe('PanelQueryRunner', () => {
     });
 
     it('should return data', async () => {
-      expect(ctx.res.error).toBeUndefined();
-      expect(ctx.res.series.length).toBe(1);
+      expect(ctx.res?.error).toBeUndefined();
+      expect(ctx.res?.series.length).toBe(1);
     });
 
     it('should use widthPixels as maxDataPoints', async () => {
-      expect(ctx.queryCalledWith.maxDataPoints).toBe(200);
+      expect(ctx.queryCalledWith?.maxDataPoints).toBe(200);
     });
 
     it('should calculate interval based on width', async () => {
-      expect(ctx.queryCalledWith.interval).toBe('5m');
+      expect(ctx.queryCalledWith?.interval).toBe('5m');
     });
 
     it('fast query should only publish 1 data events', async () => {
-      expect(ctx.events.length).toBe(1);
+      expect(ctx.events?.length).toBe(1);
     });
   });
 
@@ -157,7 +157,7 @@ describe('PanelQueryRunner', () => {
     });
 
     it('should limit interval to data source min interval', async () => {
-      expect(ctx.queryCalledWith.interval).toBe('15s');
+      expect(ctx.queryCalledWith?.interval).toBe('15s');
     });
   });
 
@@ -169,7 +169,7 @@ describe('PanelQueryRunner', () => {
     });
 
     it('should limit interval to panel min interval', async () => {
-      expect(ctx.queryCalledWith.interval).toBe('30s');
+      expect(ctx.queryCalledWith?.interval).toBe('30s');
     });
   });
 
@@ -179,7 +179,7 @@ describe('PanelQueryRunner', () => {
     });
 
     it('should pass maxDataPoints if specified', async () => {
-      expect(ctx.queryCalledWith.maxDataPoints).toBe(10);
+      expect(ctx.queryCalledWith?.maxDataPoints).toBe(10);
     });
   });
 });

public/app/features/dashboard/state/runRequest.test.ts

 import {
   DataFrame,
-  LoadingState,
-  dateTime,
-  PanelData,
-  DataSourceApi,
   DataQueryRequest,
   DataQueryResponse,
+  DataSourceApi,
+  dateTime,
+  LoadingState,
+  PanelData,
 } from '@grafana/data';
-import { Subscriber, Observable, Subscription } from 'rxjs';
+import { Observable, Subscriber, Subscription } from 'rxjs';
 import { runRequest } from './runRequest';
 import { deepFreeze } from '../../../../test/core/redux/reducerTester';
 import { DashboardModel } from './DashboardModel';
@@ -37,7 +37,7 @@ class ScenarioCtx {
   results: PanelData[];
   subscription: Subscription;
   wasStarted = false;
-  error: Error = null;
+  error: Error | null = null;
   toStartTime = dateTime();
   fromStartTime = dateTime();
 
@@ -203,7 +203,7 @@ describe('runRequest', () => {
     });
 
     it('should emit 1 error result', () => {
-      expect(ctx.results[0].error.message).toBe('Ohh no');
+      expect(ctx.results[0].error?.message).toBe('Ohh no');
       expect(ctx.results[0].state).toBe(LoadingState.Error);
     });
   });
@@ -223,7 +223,7 @@ describe('runRequest', () => {
     it('should add the correct timeRange property and the request range should not be mutated', () => {
       expect(ctx.results[0].timeRange.to.valueOf()).toBeDefined();
       expect(ctx.results[0].timeRange.to.valueOf()).not.toBe(ctx.toStartTime.valueOf());
-      expect(ctx.results[0].timeRange.to.valueOf()).not.toBe(ctx.results[0].request.range.to.valueOf());
+      expect(ctx.results[0].timeRange.to.valueOf()).not.toBe(ctx.results[0].request?.range?.to.valueOf());
 
       expectThatRangeHasNotMutated(ctx);
     });
@@ -231,8 +231,8 @@ describe('runRequest', () => {
 
   runRequestScenario('If time range is not relative', ctx => {
     ctx.setup(async () => {
-      ctx.request.range.raw.from = ctx.fromStartTime;
-      ctx.request.range.raw.to = ctx.toStartTime;
+      ctx.request.range!.raw.from = ctx.fromStartTime;
+      ctx.request.range!.raw.to = ctx.toStartTime;
       // any changes to ctx.request.range will throw and state would become LoadingState.Error
       deepFreeze(ctx.request.range);
       ctx.start();
@@ -246,7 +246,7 @@ describe('runRequest', () => {
     it('should add the correct timeRange property and the request range should not be mutated', () => {
       expect(ctx.results[0].timeRange).toBeDefined();
       expect(ctx.results[0].timeRange.to.valueOf()).toBe(ctx.toStartTime.valueOf());
-      expect(ctx.results[0].timeRange.to.valueOf()).toBe(ctx.results[0].request.range.to.valueOf());
+      expect(ctx.results[0].timeRange.to.valueOf()).toBe(ctx.results[0].request?.range?.to.valueOf());
 
       expectThatRangeHasNotMutated(ctx);
     });
@@ -255,7 +255,7 @@ describe('runRequest', () => {
 
 const expectThatRangeHasNotMutated = (ctx: ScenarioCtx) => {
   // Make sure that the range for request is not changed and that deepfreeze hasn't thrown
-  expect(ctx.results[0].request.range.to.valueOf()).toBe(ctx.toStartTime.valueOf());
+  expect(ctx.results[0].request?.range?.to.valueOf()).toBe(ctx.toStartTime.valueOf());
   expect(ctx.results[0].error).not.toBeDefined();
   expect(ctx.results[0].state).toBe(LoadingState.Done);
 };

public/app/features/dashboard/utils/panel.test.ts

-import { TimeRange } from '@grafana/data';
+import { dateTime, DateTime, PanelProps, TimeRange } from '@grafana/data';
 import { applyPanelTimeOverrides, calculateInnerPanelHeight } from 'app/features/dashboard/utils/panel';
 import { advanceTo, clear } from 'jest-date-mock';
-import { dateTime, DateTime } from '@grafana/data';
 import { PanelModel } from '../state';
 import { getPanelPlugin } from '../../plugins/__mocks__/pluginMocks';
+import { ComponentClass } from 'react';
 
 const dashboardTimeRange: TimeRange = {
   from: dateTime([2019, 1, 11, 12, 0]),
@@ -83,7 +83,9 @@ describe('applyPanelTimeOverrides', () => {
 
   it('Calculate panel height with panel plugin zeroChromePadding', () => {
     const panelModel = new PanelModel({});
-    panelModel.pluginLoaded(getPanelPlugin({ id: 'table' }, null, null).setNoPadding());
+    panelModel.pluginLoaded(
+      getPanelPlugin({ id: 'table' }, (null as unknown) as ComponentClass<PanelProps>, null).setNoPadding()
+    );
 
     const height = calculateInnerPanelHeight(panelModel, 100);
     expect(height).toBe(98);

public/app/features/explore/state/actions.test.ts

 import { PayloadAction } from '@reduxjs/toolkit';
-import { DataQuery, DefaultTimeZone, LogsDedupStrategy, RawTimeRange, toUtc, ExploreMode } from '@grafana/data';
+import { DataQuery, DefaultTimeZone, ExploreMode, LogsDedupStrategy, RawTimeRange, toUtc } from '@grafana/data';
 
 import * as Actions from './actions';
 import { changeDatasource, loadDatasource, navigateToExplore, refreshExplore } from './actions';
@@ -289,7 +289,7 @@ describe('loading datasource', () => {
   });
 });
 
-const getNavigateToExploreContext = async (openInNewWindow: (url: string) => void = undefined) => {
+const getNavigateToExploreContext = async (openInNewWindow?: (url: string) => void) => {
   const url = 'http://www.someurl.com';
   const panel: Partial<PanelModel> = {
     datasource: 'mocked datasource',
@@ -320,7 +320,7 @@ const getNavigateToExploreContext = async (openInNewWindow: (url: string) => voi
 describe('navigateToExplore', () => {
   describe('when navigateToExplore thunk is dispatched', () => {
     describe('and openInNewWindow is undefined', () => {
-      const openInNewWindow: (url: string) => void = undefined;
+      const openInNewWindow: (url: string) => void = (undefined as unknown) as (url: string) => void;
       it('then it should dispatch correct actions', async () => {
         const { dispatchedActions, url } = await getNavigateToExploreContext(openInNewWindow);
 

public/app/features/explore/utils/ResultProcessor.test.ts

@@ -16,7 +16,7 @@ jest.mock('@grafana/data/src/datetime/moment_wrapper', () => ({
 import { ResultProcessor } from './ResultProcessor';
 import { ExploreItemState } from 'app/types/explore';
 import TableModel from 'app/core/table_model';
-import { TimeSeries, LogRowModel, toDataFrame, FieldType, ExploreMode } from '@grafana/data';
+import { ExploreMode, FieldType, LogRowModel, TimeSeries, toDataFrame } from '@grafana/data';
 
 const testContext = (options: any = {}) => {
   const timeSeries = toDataFrame({
@@ -131,11 +131,11 @@ describe('ResultProcessor', () => {
       it('then it should return correct table result', () => {
         const { resultProcessor } = testContext();
         let theResult = resultProcessor.getTableResult();
-        expect(theResult.fields[0].name).toEqual('value');
-        expect(theResult.fields[1].name).toEqual('time');
-        expect(theResult.fields[2].name).toEqual('message');
-        expect(theResult.fields[1].display).not.toBeNull();
-        expect(theResult.length).toBe(3);
+        expect(theResult?.fields[0].name).toEqual('value');
+        expect(theResult?.fields[1].name).toEqual('time');
+        expect(theResult?.fields[2].name).toEqual('message');
+        expect(theResult?.fields[1].display).not.toBeNull();
+        expect(theResult?.length).toBe(3);
 
         // Same data though a DataFrame
         theResult = toDataFrame(

public/app/features/panel/panellinks/linkSuppliers.test.ts

-import { getLinksFromLogsField, getFieldLinksSupplier } from './linkSuppliers';
+import { getFieldLinksSupplier, getLinksFromLogsField } from './linkSuppliers';
 import {
+  applyFieldOverrides,
   ArrayVector,
+  DataFrameView,
   dateTime,
   Field,
+  FieldDisplay,
   FieldType,
-  toDataFrame,
-  applyFieldOverrides,
   GrafanaTheme,
-  FieldDisplay,
-  DataFrameView,
+  toDataFrame,
 } from '@grafana/data';
 import { getLinkSrv, LinkService, LinkSrv, setLinkSrv } from './link_srv';
 import { TemplateSrv } from '../../templating/template_srv';
@@ -152,7 +152,7 @@ describe('getLinksFromLogsField', () => {
     };
 
     const supplier = getFieldLinksSupplier(fieldDisp);
-    const links = supplier.getLinks({}).map(m => {
+    const links = supplier?.getLinks({}).map(m => {
       return {
         title: m.title,
         href: m.href,

public/app/features/playlist/specs/playlist_edit_ctrl.test.ts

 import '../playlist_edit_ctrl';
 import { PlaylistEditCtrl } from '../playlist_edit_ctrl';
+import { ILocationService, IScope } from 'angular';
+import { AppEventEmitter } from '../../../types';
 
 describe('PlaylistEditCtrl', () => {
   let ctx: any;
@@ -10,7 +12,12 @@ describe('PlaylistEditCtrl', () => {
       },
     };
 
-    ctx = new PlaylistEditCtrl(null, null, { current: { params: {} } }, navModelSrv);
+    ctx = new PlaylistEditCtrl(
+      (null as unknown) as IScope & AppEventEmitter,
+      (null as unknown) as ILocationService,
+      { current: { params: {} } },
+      navModelSrv
+    );
 
     ctx.dashboardresult = [
       { id: 2, title: 'dashboard: 2' },

public/app/features/templating/pickers/OptionsPicker/actions.test.ts

@@ -2,25 +2,25 @@ import { reduxTester } from '../../../../../test/core/redux/reduxTester';
 import { getTemplatingRootReducer } from '../../state/helpers';
 import { initDashboardTemplating } from '../../state/actions';
 import { TemplatingState } from '../../state/reducers';
-import { VariableHide, VariableSort, VariableRefresh, QueryVariableModel } from '../../variable';
+import { QueryVariableModel, VariableHide, VariableRefresh, VariableSort } from '../../variable';
 import {
-  showOptions,
   hideOptions,
+  showOptions,
   toggleOption,
-  updateSearchQuery,
-  updateOptionsAndFilter,
   toggleTag,
+  updateOptionsAndFilter,
+  updateSearchQuery,
 } from './reducer';
 import {
-  navigateOptions,
-  filterOrSearchOptions,
   commitChangesToVariable,
-  toggleOptionByHighlight,
+  filterOrSearchOptions,
+  navigateOptions,
   toggleAndFetchTag,
+  toggleOptionByHighlight,
 } from './actions';
 import { NavigationKey } from '../types';
 import { toVariablePayload } from '../../state/types';
-import { setCurrentVariableValue, changeVariableProp } from '../../state/sharedReducer';
+import { changeVariableProp, setCurrentVariableValue } from '../../state/sharedReducer';
 import { variableAdapters } from '../../adapters';
 import { createQueryVariableAdapter } from '../../query/adapter';
 
@@ -374,6 +374,8 @@ describe('options picker actions', () => {
       const variable = createVariable({ options, includeAll: false, tags: [tag] });
 
       datasource.metricFindQuery.mockReset();
+      // @ts-ignore couldn't wrap my head around this
+      // error TS2345: Argument of type '() => Promise<{ value: string; text: string; }[]>' is not assignable to parameter of type '() => Promise<never[]>'.
       datasource.metricFindQuery.mockImplementation(() => Promise.resolve(values));
 
       const tester = await reduxTester<{ templating: TemplatingState }>()

public/app/features/templating/query/actions.test.ts

@@ -2,23 +2,23 @@ import { variableAdapters } from '../adapters';
 import { createQueryVariableAdapter } from './adapter';
 import { reduxTester } from '../../../../test/core/redux/reduxTester';
 import { getTemplatingRootReducer } from '../state/helpers';
-import { QueryVariableModel, VariableHide, VariableSort, VariableRefresh } from '../variable';
-import { toVariablePayload, ALL_VARIABLE_VALUE, ALL_VARIABLE_TEXT } from '../state/types';
-import { setCurrentVariableValue, changeVariableProp } from '../state/sharedReducer';
+import { QueryVariableModel, VariableHide, VariableRefresh, VariableSort } from '../variable';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload } from '../state/types';
+import { changeVariableProp, setCurrentVariableValue } from '../state/sharedReducer';
 import { initDashboardTemplating } from '../state/actions';
 import { TemplatingState } from '../state/reducers';
 import {
-  updateQueryVariableOptions,
-  initQueryVariableEditor,
   changeQueryVariableDataSource,
   changeQueryVariableQuery,
+  initQueryVariableEditor,
+  updateQueryVariableOptions,
 } from './actions';
 import { updateVariableOptions, updateVariableTags } from './reducer';
 import {
-  setIdInEditor,
-  removeVariableEditorError,
   addVariableEditorError,
   changeVariableEditorExtended,
+  removeVariableEditorError,
+  setIdInEditor,
 } from '../editor/reducer';
 import DefaultVariableQueryEditor from '../DefaultVariableQueryEditor';
 import { expect } from 'test/lib/common';
@@ -163,7 +163,7 @@ describe('query actions', () => {
       const tester = await reduxTester<{ templating: TemplatingState }>()
         .givenRootReducer(getTemplatingRootReducer())
         .whenActionIsDispatched(initDashboardTemplating([variable]))
-        .whenActionIsDispatched(setIdInEditor({ id: variable.uuid }))
+        .whenActionIsDispatched(setIdInEditor({ id: variable.uuid! }))
         .whenAsyncActionIsDispatched(updateQueryVariableOptions(toVariablePayload(variable)), true);
 
       const option = createOption(ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE);
@@ -185,12 +185,12 @@ describe('query actions', () => {
       const variable = createVariable({ includeAll: true, useTags: false });
       const error = { message: 'failed to fetch metrics' };
 
-      mocks[variable.datasource].metricFindQuery = jest.fn(() => Promise.reject(error));
+      mocks[variable.datasource!].metricFindQuery = jest.fn(() => Promise.reject(error));
 
       const tester = await reduxTester<{ templating: TemplatingState }>()
         .givenRootReducer(getTemplatingRootReducer())
         .whenActionIsDispatched(initDashboardTemplating([variable]))
-        .whenActionIsDispatched(setIdInEditor({ id: variable.uuid }))
+        .whenActionIsDispatched(setIdInEditor({ id: variable.uuid! }))
         .whenAsyncActionIsDispatched(updateQueryVariableOptions(toVariablePayload(variable)), true);
 
       tester.thenDispatchedActionPredicateShouldEqual(actions => {
@@ -241,7 +241,7 @@ describe('query actions', () => {
     it('then correct actions are dispatched', async () => {
       const variable = createVariable({ includeAll: true, useTags: false });
       const defaultMetricSource = { name: '', value: '', meta: {}, sort: '' };
-      const testMetricSource = { name: 'test', value: null as string, meta: {}, sort: '' };
+      const testMetricSource = { name: 'test', value: (null as unknown) as string, meta: {}, sort: '' };
       const editor = {};
 
       mocks.datasourceSrv.getMetricSources = jest.fn().mockReturnValue([testMetricSource]);
@@ -521,7 +521,7 @@ function mockDatasourceMetrics(variable: QueryVariableModel, optionsMetrics: any
     [variable.tagsQuery]: tagsMetrics,
   };
 
-  const { metricFindQuery } = mocks[variable.datasource];
+  const { metricFindQuery } = mocks[variable.datasource!];
 
   metricFindQuery.mockReset();
   metricFindQuery.mockImplementation((query: string) => Promise.resolve(metrics[query] ?? []));

public/app/plugins/datasource/cloudwatch/components/QueryEditor.test.tsx

@@ -5,7 +5,7 @@ import { act } from 'react-dom/test-utils';
 import { DataSourceInstanceSettings } from '@grafana/data';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { CustomVariable } from 'app/features/templating/all';
-import { QueryEditor, Props } from './QueryEditor';
+import { Props, QueryEditor } from './QueryEditor';
 import CloudWatchDatasource from '../datasource';
 
 const setup = () => {
@@ -70,9 +70,10 @@ describe('QueryEditor', () => {
 
   describe('should use correct default values', () => {
     it('when region is null is display default in the label', async () => {
+      // @ts-ignore strict null error TS2345: Argument of type '() => Promise<void>' is not assignable to parameter of type '() => void | undefined'.
       await act(async () => {
         const props = setup();
-        props.query.region = null;
+        props.query.region = (null as unknown) as string;
         const wrapper = mount(<QueryEditor {...props} />);
         expect(
           wrapper
@@ -86,14 +87,15 @@ describe('QueryEditor', () => {
     });
 
     it('should init props correctly', async () => {
+      // @ts-ignore strict null error TS2345: Argument of type '() => Promise<void>' is not assignable to parameter of type '() => void | undefined'.
       await act(async () => {
         const props = setup();
-        props.query.namespace = null;
-        props.query.metricName = null;
-        props.query.expression = null;
-        props.query.dimensions = null;
-        props.query.region = null;
-        props.query.statistics = null;
+        props.query.namespace = (null as unknown) as string;
+        props.query.metricName = (null as unknown) as string;
+        props.query.expression = (null as unknown) as string;
+        props.query.dimensions = (null as unknown) as { [key: string]: string | string[] };
+        props.query.region = (null as unknown) as string;
+        props.query.statistics = (null as unknown) as string[];
         const wrapper = mount(<QueryEditor {...props} />);
         const {
           query: { namespace, region, metricName, dimensions, statistics, expression },

public/app/plugins/datasource/dashboard/runSharedRequest.test.ts

@@ -6,8 +6,8 @@ describe('SharedQueryRunner', () => {
     expect(isSharedDashboardQuery('-- Dashboard --')).toBe(true);
 
     expect(isSharedDashboardQuery('')).toBe(false);
-    expect(isSharedDashboardQuery(undefined)).toBe(false);
-    expect(isSharedDashboardQuery(null)).toBe(false);
+    expect(isSharedDashboardQuery((undefined as unknown) as string | DataSourceApi)).toBe(false);
+    expect(isSharedDashboardQuery((null as unknown) as string | DataSourceApi)).toBe(false);
 
     const ds = {
       meta: {
@@ -16,7 +16,7 @@ describe('SharedQueryRunner', () => {
     } as DataSourceApi;
     expect(isSharedDashboardQuery(ds)).toBe(true);
 
-    ds.meta.name = 'something else';
+    ds.meta!.name = 'something else';
     expect(isSharedDashboardQuery(ds)).toBe(false);
   });
 });

public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts

@@ -917,7 +917,12 @@ describe('ElasticResponse', () => {
         expect(r._id).toEqual(response.responses[0].hits.hits[i]._id);
         expect(r._type).toEqual(response.responses[0].hits.hits[i]._type);
         expect(r._index).toEqual(response.responses[0].hits.hits[i]._index);
-        expect(r._source).toEqual(flatten(response.responses[0].hits.hits[i]._source, null));
+        expect(r._source).toEqual(
+          flatten(
+            response.responses[0].hits.hits[i]._source,
+            (null as unknown) as { delimiter?: any; maxDepth?: any; safe?: any }
+          )
+        );
       }
 
       // Make a map from the histogram results
@@ -938,14 +943,14 @@ describe('ElasticResponse', () => {
       const result = new ElasticResponse(targets, response).getLogs(undefined, 'level');
       const fieldCache = new FieldCache(result.data[0]);
       const field = fieldCache.getFieldByName('level');
-      expect(field.values.toArray()).toEqual(['debug', 'error']);
+      expect(field?.values.toArray()).toEqual(['debug', 'error']);
     });
 
     it('should re map levels field to new field', () => {
       const result = new ElasticResponse(targets, response).getLogs(undefined, 'fields.lvl');
       const fieldCache = new FieldCache(result.data[0]);
       const field = fieldCache.getFieldByName('level');
-      expect(field.values.toArray()).toEqual(['debug', 'info']);
+      expect(field?.values.toArray()).toEqual(['debug', 'info']);
     });
   });
 });

public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.test.ts

@@ -135,7 +135,7 @@ describe('AppInsightsDatasource', () => {
             rawQueryString: queryString,
             timeColumn: 'timestamp',
             valueColumn: 'max',
-            segmentColumn: undefined as string,
+            segmentColumn: (undefined as unknown) as string,
           },
         },
       ],

public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.test.tsx

@@ -5,6 +5,7 @@ import { InfluxDatasourceMock } from '../datasource.mock';
 import InfluxDatasource from '../datasource';
 import { InfluxQuery } from '../types';
 import { ButtonCascader } from '@grafana/ui';
+import { KeyValuePair } from '../../../../features/explore/AdHocFilterField';
 
 describe('pairsAreValid()', () => {
   describe('when all pairs are fully defined', () => {
@@ -34,7 +35,7 @@ describe('pairsAreValid()', () => {
 
   describe('when pairs are undefined', () => {
     it('should return true', () => {
-      expect(pairsAreValid(undefined)).toBe(true);
+      expect(pairsAreValid((undefined as unknown) as KeyValuePair[])).toBe(true);
     });
   });
 

public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.tsx

@@ -7,7 +7,7 @@ import { AdHocFilterField, KeyValuePair } from 'app/features/explore/AdHocFilter
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import InfluxDatasource from '../datasource';
 import { InfluxQueryBuilder } from '../query_builder';
-import { InfluxQuery, InfluxOptions } from '../types';
+import { InfluxOptions, InfluxQuery } from '../types';
 
 export interface Props extends ExploreQueryFieldProps<InfluxDatasource, InfluxQuery, InfluxOptions> {}
 
@@ -49,7 +49,12 @@ function getChooserText({ measurement, field, error }: ChooserOptions): string {
 
 export class InfluxLogsQueryField extends React.PureComponent<Props, State> {
   templateSrv: TemplateSrv = new TemplateSrv();
-  state: State = { measurements: [], measurement: null, field: null, error: null };
+  state: State = {
+    measurements: [],
+    measurement: (null as unknown) as string,
+    field: (null as unknown) as string,
+    error: (null as unknown) as string,
+  };
 
   async componentDidMount() {
     const { datasource } = this.props;

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

@@ -262,10 +262,10 @@ describe('InfluxQuery', () => {
       );
 
       query.addGroupBy('tag(host)');
-      expect(query.target.groupBy.length).toBe(3);
-      expect(query.target.groupBy[1].type).toBe('tag');
-      expect(query.target.groupBy[1].params[0]).toBe('host');
-      expect(query.target.groupBy[2].type).toBe('fill');
+      expect(query.target.groupBy?.length).toBe(3);
+      expect(query.target.groupBy![1].type).toBe('tag');
+      expect(query.target.groupBy![1].params![0]).toBe('host');
+      expect(query.target.groupBy![2].type).toBe('fill');
     });
 
     it('should add tag last if no fill', () => {
@@ -280,8 +280,8 @@ describe('InfluxQuery', () => {
       );
 
       query.addGroupBy('tag(host)');
-      expect(query.target.groupBy.length).toBe(1);
-      expect(query.target.groupBy[0].type).toBe('tag');
+      expect(query.target.groupBy?.length).toBe(1);
+      expect(query.target.groupBy![0].type).toBe('tag');
     });
   });
 
@@ -298,8 +298,8 @@ describe('InfluxQuery', () => {
       );
 
       query.addSelectPart(query.selectModels[0], 'mean');
-      expect(query.target.select[0].length).toBe(2);
-      expect(query.target.select[0][1].type).toBe('mean');
+      expect(query.target.select![0].length).toBe(2);
+      expect(query.target.select![0][1].type).toBe('mean');
     });
 
     it('should replace sum by mean', () => {
@@ -314,8 +314,8 @@ describe('InfluxQuery', () => {
       );
 
       query.addSelectPart(query.selectModels[0], 'sum');
-      expect(query.target.select[0].length).toBe(2);
-      expect(query.target.select[0][1].type).toBe('sum');
+      expect(query.target.select![0].length).toBe(2);
+      expect(query.target.select![0][1].type).toBe('sum');
     });
 
     it('should add math before alias', () => {
@@ -330,8 +330,8 @@ describe('InfluxQuery', () => {
       );
 
       query.addSelectPart(query.selectModels[0], 'math');
-      expect(query.target.select[0].length).toBe(4);
-      expect(query.target.select[0][2].type).toBe('math');
+      expect(query.target.select![0].length).toBe(4);
+      expect(query.target.select![0][2].type).toBe('math');
     });
 
     it('should add math last', () => {
@@ -346,8 +346,8 @@ describe('InfluxQuery', () => {
       );
 
       query.addSelectPart(query.selectModels[0], 'math');
-      expect(query.target.select[0].length).toBe(3);
-      expect(query.target.select[0][2].type).toBe('math');
+      expect(query.target.select![0].length).toBe(3);
+      expect(query.target.select![0][2].type).toBe('math');
     });
 
     it('should replace math', () => {
@@ -362,8 +362,8 @@ describe('InfluxQuery', () => {
       );
 
       query.addSelectPart(query.selectModels[0], 'math');
-      expect(query.target.select[0].length).toBe(3);
-      expect(query.target.select[0][2].type).toBe('math');
+      expect(query.target.select![0].length).toBe(3);
+      expect(query.target.select![0][2].type).toBe('math');
     });
 
     it('should add math when one only query part', () => {
@@ -378,8 +378,8 @@ describe('InfluxQuery', () => {
       );
 
       query.addSelectPart(query.selectModels[0], 'math');
-      expect(query.target.select[0].length).toBe(2);
-      expect(query.target.select[0][1].type).toBe('math');
+      expect(query.target.select![0].length).toBe(2);
+      expect(query.target.select![0][1].type).toBe('math');
     });
 
     describe('when render adhoc filters', () => {

public/app/plugins/datasource/input/InputDatasource.test.ts

 import InputDatasource, { describeDataFrame } from './InputDatasource';
-import { InputQuery, InputOptions } from './types';
-import { readCSV, DataFrame, MutableDataFrame, DataSourceInstanceSettings, PluginMeta } from '@grafana/data';
+import { InputOptions, InputQuery } from './types';
+import {
+  DataFrame,
+  DataFrameDTO,
+  DataSourceInstanceSettings,
+  MutableDataFrame,
+  PluginMeta,
+  readCSV,
+} from '@grafana/data';
 
 import { getQueryOptions } from 'test/helpers/getQueryOptions';
 
@@ -35,7 +42,7 @@ describe('InputDatasource', () => {
 
   test('DataFrame descriptions', () => {
     expect(describeDataFrame([])).toEqual('');
-    expect(describeDataFrame(null)).toEqual('');
+    expect(describeDataFrame((null as unknown) as Array<DataFrameDTO | DataFrame>)).toEqual('');
     expect(
       describeDataFrame([
         new MutableDataFrame({

public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.test.tsx

@@ -80,6 +80,7 @@ describe('LokiExploreQueryEditor', () => {
   });
 
   it('should render LokiQueryField with ExtraFieldElement when ExploreMode is set to Logs', async () => {
+    // @ts-ignore strict null error TS2345: Argument of type '() => Promise<void>' is not assignable to parameter of type '() => void | undefined'.
     await act(async () => {
       const wrapper = setup(mount);
       expect(wrapper.find(LokiExploreExtraField).length).toBe(1);
@@ -87,6 +88,7 @@ describe('LokiExploreQueryEditor', () => {
   });
 
   it('should render LokiQueryField with no ExtraFieldElement when ExploreMode is not Logs', async () => {
+    // @ts-ignore strict null error TS2345: Argument of type '() => Promise<void>' is not assignable to parameter of type '() => void | undefined'.
     await act(async () => {
       const wrapper = setup(mount, { exploreMode: ExploreMode.Metrics });
       expect(wrapper.find(LokiExploreExtraField).length).toBe(0);

public/app/plugins/datasource/loki/datasource.test.ts

 import LokiDatasource, { RangeQueryOptions } from './datasource';
-import { LokiQuery, LokiResultType, LokiResponse, LokiLegacyStreamResponse } from './types';
+import { LokiLegacyStreamResponse, LokiQuery, LokiResponse, LokiResultType } from './types';
 import { getQueryOptions } from 'test/helpers/getQueryOptions';
 import {
   AnnotationQueryRequest,
-  DataSourceApi,
   DataFrame,
+  DataSourceApi,
   dateTime,
-  TimeRange,
   ExploreMode,
   FieldCache,
+  TimeRange,
 } from '@grafana/data';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { CustomVariable } from 'app/features/templating/custom_variable';
@@ -219,9 +219,9 @@ describe('LokiDatasource', () => {
 
       const dataFrame = res.data[0] as DataFrame;
       const fieldCache = new FieldCache(dataFrame);
-      expect(fieldCache.getFieldByName('line').values.get(0)).toBe('hello');
-      expect(dataFrame.meta.limit).toBe(20);
-      expect(dataFrame.meta.searchWords).toEqual(['foo']);
+      expect(fieldCache.getFieldByName('line')?.values.get(0)).toBe('hello');
+      expect(dataFrame.meta?.limit).toBe(20);
+      expect(dataFrame.meta?.searchWords).toEqual(['foo']);
     });
   });
 
@@ -373,7 +373,7 @@ describe('LokiDatasource', () => {
       };
       // Odd timerange/interval combination that would lead to a float step
       const options: RangeQueryOptions = { range, intervalMs: 2000 };
-      expect(Number.isInteger(ds.createRangeQuery(query, options).step)).toBeTruthy();
+      expect(Number.isInteger(ds.createRangeQuery(query, options).step!)).toBeTruthy();
     });
   });
 
@@ -478,7 +478,7 @@ type LimitTestArgs = {
 function makeLimitTest(instanceSettings: any, datasourceRequestMock: any, templateSrvMock: any, testResp: any) {
   return ({ maxDataPoints, maxLines, expectedLimit }: LimitTestArgs) => {
     let settings = instanceSettings;
-    if (Number.isFinite(maxLines)) {
+    if (Number.isFinite(maxLines!)) {
       const customData = { ...(instanceSettings.jsonData || {}), maxLines: 20 };
       settings = { ...instanceSettings, jsonData: customData };
     }
@@ -486,7 +486,7 @@ function makeLimitTest(instanceSettings: any, datasourceRequestMock: any, templa
     datasourceRequestMock.mockImplementation(() => Promise.resolve(testResp));
 
     const options = getQueryOptions<LokiQuery>({ targets: [{ expr: 'foo', refId: 'B', maxLines: maxDataPoints }] });
-    if (Number.isFinite(maxDataPoints)) {
+    if (Number.isFinite(maxDataPoints!)) {
       options.maxDataPoints = maxDataPoints;
     } else {
       // By default is 500

public/app/plugins/datasource/loki/live_streams.test.ts

-import { Subject, Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import * as rxJsWebSocket from 'rxjs/webSocket';
 import { LiveStreams } from './live_streams';
-import { DataFrameView, Labels, formatLabels, DataFrame } from '@grafana/data';
+import { DataFrame, DataFrameView, formatLabels, Labels } from '@grafana/data';
 import { noop } from 'lodash';
 
 let fakeSocket: Subject<any>;
@@ -59,7 +59,7 @@ describe('Live Stream Tests', () => {
     stream.subscribe({
       next: val => {
         const test = tests.shift();
-        test(val);
+        test!(val);
       },
       complete: () => done(),
     });

public/app/plugins/datasource/loki/result_transformer.test.ts

-import { FieldType, MutableDataFrame, CircularDataFrame } from '@grafana/data';
+import { CircularDataFrame, FieldType, MutableDataFrame } from '@grafana/data';
 import { LokiLegacyStreamResult, LokiStreamResult, LokiTailResponse } from './types';
 import * as ResultTransformer from './result_transformer';
 
@@ -52,7 +52,7 @@ describe('loki result transformer', () => {
       const data = legacyStreamResult.map(stream => ResultTransformer.legacyLogStreamToDataFrame(stream));
 
       expect(data.length).toBe(2);
-      expect(data[0].fields[1].labels['foo']).toEqual('bar');
+      expect(data[0].fields[1].labels!['foo']).toEqual('bar');
       expect(data[0].fields[0].values.get(0)).toEqual(legacyStreamResult[0].entries[0].ts);
       expect(data[0].fields[1].values.get(0)).toEqual(legacyStreamResult[0].entries[0].line);
       expect(data[0].fields[2].values.get(0)).toEqual('2764544e18dbc3fcbeee21a573e8cd1b');
@@ -94,7 +94,7 @@ describe('loki result transformer', () => {
       const data = streamResult.map(stream => ResultTransformer.lokiStreamResultToDataFrame(stream));
 
       expect(data.length).toBe(2);
-      expect(data[0].fields[1].labels['foo']).toEqual('bar');
+      expect(data[0].fields[1].labels!['foo']).toEqual('bar');
       expect(data[0].fields[0].values.get(0)).toEqual('2020-01-24T09:19:22.021Z');
       expect(data[0].fields[1].values.get(0)).toEqual(streamResult[0].values[0][1]);
       expect(data[0].fields[2].values.get(0)).toEqual('2b431b8a98b80b3b2c2f4cd2444ae6cb');

public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx

@@ -79,6 +79,7 @@ describe('PromExploreQueryEditor', () => {
   });
 
   it('should render PromQueryField with ExtraFieldElement', async () => {
+    // @ts-ignore strict null errpr TS2345: Argument of type '() => Promise<void>' is not assignable to parameter of type '() => void | undefined'.
     await act(async () => {
       const wrapper = setup(mount);
       expect(wrapper.find(PromExploreExtraField).length).toBe(1);

public/app/plugins/datasource/prometheus/configuration/PromSettings.test.tsx

 import { getValueFromEventItem, promSettingsValidationEvents } from './PromSettings';
 import { EventsWithValidation } from '@grafana/ui';
+import { SyntheticEvent } from 'react';
+import { SelectableValue } from '@grafana/data';
 
 describe('PromSettings', () => {
   describe('getValueFromEventItem', () => {
     describe('when called with undefined', () => {
       it('then it should return empty string', () => {
-        const result = getValueFromEventItem(undefined);
+        const result = getValueFromEventItem(
+          (undefined as unknown) as SyntheticEvent<HTMLInputElement> | SelectableValue<string>
+        );
         expect(result).toEqual('');
       });
     });

public/app/plugins/datasource/prometheus/result_transformer.test.ts

@@ -17,7 +17,7 @@ describe('Prometheus Result Transformer', () => {
         status: 'success',
         data: {
           resultType: '',
-          result: null as DataQueryResponseData[],
+          result: (null as unknown) as DataQueryResponseData[],
         },
       };
       const series = ctx.resultTransformer.transform({ data: response }, {});
@@ -28,7 +28,7 @@ describe('Prometheus Result Transformer', () => {
         status: 'success',
         data: {
           resultType: '',
-          result: null as DataQueryResponseData[],
+          result: (null as unknown) as DataQueryResponseData[],
         },
       };
       const table = ctx.resultTransformer.transform({ data: response }, { format: 'table' });

scripts/ci-frontend-metrics.sh

@@ -3,7 +3,7 @@
 echo -e "Collecting code stats (typescript errors & more)"
 
 
-ERROR_COUNT_LIMIT=958
+ERROR_COUNT_LIMIT=824
 DIRECTIVES_LIMIT=172
 CONTROLLERS_LIMIT=139