Chore: Update typescript to v4.2.4 (#33297)

* Update typescript to v4.2.4

* Update @types/slate

* Fix QueryVariableEditor.test.tsx

* Fix search-related type errors

* Fix Plugin pages type errors

* Fix missing initializer errors

* Update snapshot

* Revert tsconfig changes

package.json

@@ -197,7 +197,7 @@
     "ts-jest": "26.4.4",
     "ts-node": "9.0.0",
     "tslib": "2.1.0",
-    "typescript": "4.1.2",
+    "typescript": "4.2.4",
     "webpack": "4.41.5",
     "webpack-bundle-analyzer": "3.6.0",
     "webpack-cleanup-plugin": "0.5.1",

packages/grafana-data/package.json

@@ -52,7 +52,7 @@
     "rollup-plugin-typescript2": "0.29.0",
     "rollup-plugin-visualizer": "4.2.0",
     "sinon": "8.1.1",
-    "typescript": "4.1.2",
+    "typescript": "4.2.4",
     "tinycolor2": "1.4.1"
   }
 }

packages/grafana-e2e-selectors/package.json

@@ -43,7 +43,7 @@
     "@grafana/tsconfig": "^1.0.0-rc1",
     "commander": "5.0.0",
     "execa": "4.0.0",
-    "typescript": "4.1.2",
+    "typescript": "4.2.4",
     "yaml": "^1.8.3"
   }
 }

packages/grafana-e2e/package.json

@@ -54,7 +54,7 @@
     "execa": "4.0.0",
     "resolve-as-bin": "2.1.0",
     "ts-loader": "6.2.1",
-    "typescript": "4.1.2",
+    "typescript": "4.2.4",
     "yaml": "^1.8.3"
   }
 }

packages/grafana-runtime/package.json

@@ -44,7 +44,7 @@
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.29.0",
     "rollup-plugin-visualizer": "4.2.0",
-    "typescript": "4.1.2"
+    "typescript": "4.2.4"
   },
   "types": "src/index.ts"
 }

packages/grafana-toolkit/package.json

@@ -104,7 +104,7 @@
     "ts-loader": "6.2.1",
     "ts-node": "9.0.0",
     "tslib": "2.1.0",
-    "typescript": "4.1.2",
+    "typescript": "4.2.4",
     "url-loader": "^2.0.1",
     "webpack": "4.41.5"
   },

packages/grafana-ui/package.json

@@ -42,7 +42,7 @@
     "@types/react-color": "3.0.1",
     "@types/react-select": "4.0.13",
     "@types/react-table": "7.0.12",
-    "@types/slate": "0.47.1",
+    "@types/slate": "0.47.2",
     "@types/slate-react": "0.22.5",
     "@visx/event": "1.3.0",
     "@visx/gradient": "1.0.0",
@@ -118,7 +118,7 @@
     "rollup-plugin-visualizer": "4.2.0",
     "storybook-dark-mode": "1.0.7",
     "ts-loader": "8.0.11",
-    "typescript": "4.1.2",
+    "typescript": "4.2.4",
     "webpack-filter-warnings-plugin": "1.2.1"
   },
   "types": "src/index.ts"

packages/jaeger-ui-components/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.2.0",
-    "typescript": "4.1.2"
+    "typescript": "4.2.4"
   },
   "dependencies": {
     "@emotion/react": "11.1.5",

public/app/core/components/TagFilter/TagFilter.tsx

@@ -2,7 +2,7 @@
 import React, { FC } from 'react';
 import { css } from '@emotion/css';
 import { components } from 'react-select';
-import { AsyncSelect, stylesFactory, useTheme, resetSelectStyles, Icon } from '@grafana/ui';
+import { stylesFactory, useTheme, resetSelectStyles, Icon, AsyncMultiSelect } from '@grafana/ui';
 import { escapeStringForRegex, GrafanaTheme } from '@grafana/data';
 // Components
 import { TagOption } from './TagOption';
@@ -98,7 +98,7 @@ export const TagFilter: FC<Props> = ({
           Clear tags
         </span>
       )}
-      <AsyncSelect {...selectOptions} prefix={<Icon name="tag-alt" />} aria-label="Tag filter" />
+      <AsyncMultiSelect {...selectOptions} prefix={<Icon name="tag-alt" />} aria-label="Tag filter" />
     </div>
   );
 };

public/app/features/dashboard/components/PanelEditor/AngularPanelOptions.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { PureComponent } from 'react';
-import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 
 // Utils and services
 import { AngularComponent, getAngularLoader } from '@grafana/runtime';
@@ -19,15 +19,14 @@ interface OwnProps {
   plugin: PanelPlugin;
 }
 
-interface ConnectedProps {
-  angularPanelComponent?: AngularComponent | null;
-}
+const mapStateToProps = (state: StoreState, props: OwnProps) => ({
+  angularPanelComponent: state.dashboard.panels[props.panel.id].angularComponent,
+});
 
-interface DispatchProps {
-  changePanelPlugin: typeof changePanelPlugin;
-}
+const mapDispatchToProps = { changePanelPlugin };
 
-type Props = OwnProps & ConnectedProps & DispatchProps;
+const connector = connect(mapStateToProps, mapDispatchToProps);
+type Props = ConnectedProps<typeof connector> & OwnProps;
 
 export class AngularPanelOptionsUnconnected extends PureComponent<Props> {
   element?: HTMLElement | null;
@@ -122,12 +121,4 @@ export class AngularPanelOptionsUnconnected extends PureComponent<Props> {
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, props) => {
-  return {
-    angularPanelComponent: state.dashboard.panels[props.panel.id].angularComponent,
-  };
-};
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { changePanelPlugin };
-
 export const AngularPanelOptions = connect(mapStateToProps, mapDispatchToProps)(AngularPanelOptionsUnconnected);

public/app/features/plugins/PluginListPage.tsx

@@ -1,27 +1,32 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import Page from 'app/core/components/Page/Page';
 import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
 import PluginList from './PluginList';
 import { loadPlugins } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getPlugins, getPluginsSearchQuery } from './state/selectors';
-import { NavModel, PluginMeta } from '@grafana/data';
 import { StoreState } from 'app/types';
 import { setPluginsSearchQuery } from './state/reducers';
 import { useAsync } from 'react-use';
 import { selectors } from '@grafana/e2e-selectors';
 import { PluginsErrorsInfo } from './PluginsErrorsInfo';
 
-export interface Props {
-  navModel: NavModel;
-  plugins: PluginMeta[];
-  searchQuery: string;
-  hasFetched: boolean;
-  loadPlugins: typeof loadPlugins;
-  setPluginsSearchQuery: typeof setPluginsSearchQuery;
-}
+const mapStateToProps = (state: StoreState) => ({
+  navModel: getNavModel(state.navIndex, 'plugins'),
+  plugins: getPlugins(state.plugins),
+  searchQuery: getPluginsSearchQuery(state.plugins),
+  hasFetched: state.plugins.hasFetched,
+});
+
+const mapDispatchToProps = {
+  loadPlugins,
+  setPluginsSearchQuery,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+export type Props = ConnectedProps<typeof connector>;
 
 export const PluginListPage: React.FC<Props> = ({
   hasFetched,
@@ -67,18 +72,4 @@ export const PluginListPage: React.FC<Props> = ({
   );
 };
 
-function mapStateToProps(state: StoreState) {
-  return {
-    navModel: getNavModel(state.navIndex, 'plugins'),
-    plugins: getPlugins(state.plugins),
-    searchQuery: getPluginsSearchQuery(state.plugins),
-    hasFetched: state.plugins.hasFetched,
-  };
-}
-
-const mapDispatchToProps = {
-  loadPlugins,
-  setPluginsSearchQuery,
-};
-
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(PluginListPage));

public/app/features/plugins/PluginsErrorsInfo.tsx

@@ -5,24 +5,24 @@ import { StoreState } from '../../types';
 import { getAllPluginsErrors } from './state/selectors';
 import { loadPlugins, loadPluginsErrors } from './state/actions';
 import useAsync from 'react-use/lib/useAsync';
-import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import { hot } from 'react-hot-loader';
-import { PluginError, PluginErrorCode, PluginSignatureStatus } from '@grafana/data';
+import { PluginErrorCode, PluginSignatureStatus } from '@grafana/data';
 import { css } from '@emotion/css';
 
-interface ConnectedProps {
-  errors: PluginError[];
-}
+const mapStateToProps = (state: StoreState) => ({
+  errors: getAllPluginsErrors(state.plugins),
+});
 
-interface DispatchProps {
-  loadPluginsErrors: typeof loadPluginsErrors;
-}
+const mapDispatchToProps = {
+  loadPluginsErrors,
+};
 
 interface OwnProps {
   children?: React.ReactNode;
 }
-
-type PluginsErrorsInfoProps = ConnectedProps & DispatchProps & OwnProps;
+const connector = connect(mapStateToProps, mapDispatchToProps);
+type PluginsErrorsInfoProps = ConnectedProps<typeof connector> & OwnProps;
 
 export const PluginsErrorsInfoUnconnected: React.FC<PluginsErrorsInfoProps> = ({
   loadPluginsErrors,
@@ -88,16 +88,6 @@ export const PluginsErrorsInfoUnconnected: React.FC<PluginsErrorsInfoProps> = ({
   );
 };
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state: StoreState) => {
-  return {
-    errors: getAllPluginsErrors(state.plugins),
-  };
-};
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
-  loadPluginsErrors,
-};
-
 export const PluginsErrorsInfo = hot(module)(
   connect(mapStateToProps, mapDispatchToProps)(PluginsErrorsInfoUnconnected)
 );

public/app/features/plugins/wrappers/AppConfigWrapper.tsx

@@ -19,6 +19,7 @@ interface State {
 
 export class AppConfigCtrlWrapper extends PureComponent<Props, State> {
   element: HTMLElement | null = null;
+  //@ts-ignore
   model: PluginMeta;
 
   // Needed for angular scope

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

@@ -38,7 +38,7 @@ interface Props {
   index: number;
   timeRange?: TimeRange;
   onChangeTimeRange?: (timeRange: TimeRange) => void;
-  onAddQuery: (query?: DataQuery) => void;
+  onAddQuery: (query: DataQuery) => void;
   onRemoveQuery: (query: DataQuery) => void;
   onChange: (query: DataQuery) => void;
   onRunQuery: () => void;
@@ -55,7 +55,7 @@ interface State {
 
 export class QueryEditorRow extends PureComponent<Props, State> {
   element: HTMLElement | null = null;
-  angularScope: AngularQueryComponentScope | null;
+  angularScope: AngularQueryComponentScope | null = null;
   angularQueryEditor: AngularComponent | null = null;
 
   state: State = {

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

@@ -51,7 +51,7 @@ interface State {
 export class QueryGroup extends PureComponent<Props, State> {
   backendSrv = backendSrv;
   dataSourceSrv = getDataSourceSrv();
-  querySubscription: Unsubscribable | null;
+  querySubscription: Unsubscribable | null = null;
 
   state: State = {
     isLoadingHelp: false,

public/app/features/search/components/ActionRow.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, FC, FormEvent, SetStateAction } from 'react';
+import React, { FC, FormEvent } from 'react';
 import { css } from '@emotion/css';
 import { HorizontalGroup, RadioButtonGroup, stylesFactory, useTheme, Checkbox } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
@@ -14,12 +14,11 @@ export const layoutOptions = [
 
 const searchSrv = new SearchSrv();
 
-type onSelectChange = (value: SelectableValue) => void;
 interface Props {
-  onLayoutChange: Dispatch<SetStateAction<string>>;
-  onSortChange: onSelectChange;
+  onLayoutChange: (layout: SearchLayout) => void;
+  onSortChange: (value: SelectableValue) => void;
   onStarredFilterChange?: (event: FormEvent<HTMLInputElement>) => void;
-  onTagFilterChange: onSelectChange;
+  onTagFilterChange: (tags: string[]) => void;
   query: DashboardQuery;
   showStarredFilter?: boolean;
   hideLayout?: boolean;

public/app/features/search/components/SearchResultsFilter.tsx

@@ -1,12 +1,10 @@
-import React, { Dispatch, FC, SetStateAction } from 'react';
+import React, { FC, FormEvent } from 'react';
 import { css } from '@emotion/css';
 import { Button, Checkbox, stylesFactory, useTheme, HorizontalGroup } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { DashboardQuery } from '../types';
+import { DashboardQuery, SearchLayout } from '../types';
 import { ActionRow } from './ActionRow';
 
-type onSelectChange = (value: SelectableValue) => void;
-
 export interface Props {
   allChecked?: boolean;
   canDelete?: boolean;
@@ -14,10 +12,10 @@ export interface Props {
   deleteItem: () => void;
   hideLayout?: boolean;
   moveTo: () => void;
-  onLayoutChange: Dispatch<SetStateAction<string>>;
-  onSortChange: onSelectChange;
-  onStarredFilterChange: onSelectChange;
-  onTagFilterChange: onSelectChange;
+  onLayoutChange: (layout: SearchLayout) => void;
+  onSortChange: (value: SelectableValue) => void;
+  onStarredFilterChange: (event: FormEvent<HTMLInputElement>) => void;
+  onTagFilterChange: (tags: string[]) => void;
   onToggleAllChecked: () => void;
   query: DashboardQuery;
   editable?: boolean;

public/app/features/search/reducers/manageDashboards.ts

@@ -78,7 +78,7 @@ const reducer = (state: ManageDashboardsState, action: SearchAction) => {
             return [...filtered, { ...result, items: result.items.filter((item) => !dashboards.includes(item.uid)) }];
           }
           return filtered;
-        }, []),
+        }, [] as DashboardSection[]),
       };
     }
     default:

public/app/features/search/utils.ts

@@ -138,7 +138,7 @@ export const getCheckedDashboards = (sections: DashboardSection[]): DashboardSec
 
   return sections.reduce((uids, section) => {
     return section.items ? [...uids, ...section.items.filter((item) => item.checked)] : uids;
-  }, []);
+  }, [] as DashboardSectionItem[]);
 };
 
 /**
@@ -166,11 +166,11 @@ export const getCheckedUids = (sections: DashboardSection[]): UidsToDelete => {
 
   return sections.reduce((result, section) => {
     if (section?.id !== 0 && section.checked) {
-      return { ...result, folders: [...result.folders, section.uid] };
+      return { ...result, folders: [...result.folders, section.uid] } as UidsToDelete;
     } else {
-      return { ...result, dashboards: getCheckedDashboardsUids(sections) };
+      return { ...result, dashboards: getCheckedDashboardsUids(sections) } as UidsToDelete;
     }
-  }, emptyResults) as UidsToDelete;
+  }, emptyResults);
 };
 
 /**

public/app/features/teams/TeamGroupSync.tsx

@@ -1,28 +1,36 @@
 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 { LegacyForms, Tooltip, Icon, Button } from '@grafana/ui';
 const { Input } = LegacyForms;
 
-import { TeamGroup } from '../../types';
+import { StoreState, TeamGroup } from '../../types';
 import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';
 import { getTeamGroups } from './state/selectors';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 
-export interface Props {
-  groups: TeamGroup[];
-  loadTeamGroups: typeof loadTeamGroups;
-  addTeamGroup: typeof addTeamGroup;
-  removeTeamGroup: typeof removeTeamGroup;
+function mapStateToProps(state: StoreState) {
+  return {
+    groups: getTeamGroups(state.team),
+  };
 }
 
+const mapDispatchToProps = {
+  loadTeamGroups,
+  addTeamGroup,
+  removeTeamGroup,
+};
+
 interface State {
   isAdding: boolean;
   newGroupId: string;
 }
 
+const connector = connect(mapStateToProps, mapDispatchToProps);
+export type Props = ConnectedProps<typeof connector>;
+
 const headerTooltip = `Sync LDAP or OAuth groups with your Grafana teams.`;
 
 export class TeamGroupSync extends PureComponent<Props, State> {
@@ -148,16 +156,4 @@ export class TeamGroupSync extends PureComponent<Props, State> {
   }
 }
 
-function mapStateToProps(state: any) {
-  return {
-    groups: getTeamGroups(state.team),
-  };
-}
-
-const mapDispatchToProps = {
-  loadTeamGroups,
-  addTeamGroup,
-  removeTeamGroup,
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(TeamGroupSync);

public/app/features/variables/query/QueryVariableEditor.test.tsx

@@ -53,7 +53,7 @@ describe('QueryVariableEditor', () => {
     it.each`
       fieldName  | propName                      | expectedArgs
       ${'query'} | ${'changeQueryVariableQuery'} | ${[{ type: 'query', id: NEW_VARIABLE_ID }, 't', 't']}
-      ${'regex'} | ${'onPropChange'}             | ${{ propName: 'regex', propValue: 't', updateOptions: true }}
+      ${'regex'} | ${'onPropChange'}             | ${[{ propName: 'regex', propValue: 't', updateOptions: true }]}
     `(
       '$fieldName field and tabs away then $propName should be called with correct args',
       ({ fieldName, propName, expectedArgs }) => {

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

@@ -5,8 +5,8 @@ export class QueryCtrl {
   datasource: any;
   panelCtrl: any;
   panel: any;
-  hasRawMode: boolean;
-  error: string;
+  hasRawMode = false;
+  error = '';
 
   constructor(public $scope: any, _$injector: auto.IInjectorService) {
     this.panelCtrl = this.panelCtrl || { panel: {} };

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

@@ -112,10 +112,10 @@ export class AzureMonitorQueryCtrl extends QueryCtrl {
   };
 
   resultFormats: ResultFormat[];
-  workspaces: any[];
-  showHelp: boolean;
-  showLastQuery: boolean;
-  lastQuery: string;
+  workspaces: any[] = [];
+  showHelp = false;
+  showLastQuery = false;
+  lastQuery = '';
   lastQueryError?: string;
   subscriptions: Array<{ text: string; value: string }>;
 

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

@@ -7,12 +7,12 @@ import { ScopedVars } from '@grafana/data';
 export default class GraphiteQuery {
   datasource: any;
   target: any;
-  functions: any[];
-  segments: any[];
-  tags: any[];
+  functions: any[] = [];
+  segments: any[] = [];
+  tags: any[] = [];
   error: any;
-  seriesByTagUsed: boolean;
-  checkOtherSegmentsIndex: number;
+  seriesByTagUsed = false;
+  checkOtherSegmentsIndex = 0;
   removeTagValue: string;
   templateSrv: any;
   scopedVars: any;

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

@@ -18,11 +18,11 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
 
   queryModel: GraphiteQuery;
-  segments: any[];
-  addTagSegments: any[];
+  segments: any[] = [];
+  addTagSegments: any[] = [];
   removeTagValue: string;
-  supportsTags: boolean;
-  paused: boolean;
+  supportsTags = false;
+  paused = false;
 
   // to avoid error flooding, these errors are shown only once per session
   private _tagsAutoCompleteErrorShown = false;

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

@@ -16,7 +16,7 @@ export class InfluxQueryCtrl extends QueryCtrl {
   queryBuilder: any;
   groupBySegment: any;
   resultFormats: any[];
-  orderByTime: any[];
+  orderByTime: any[] = [];
   policySegment: any;
   tagSegments: any[];
   selectMenu: any;

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

@@ -86,6 +86,7 @@ exports[`LokiExploreQueryEditor should render component 1`] = `
           Symbol(length): 0,
         },
         "logLabelFetchTs": 0,
+        "lookupsDisabled": false,
         "request": [Function],
         "seriesCache": LRUCache {
           Symbol(max): 10,
@@ -104,6 +105,7 @@ exports[`LokiExploreQueryEditor should render component 1`] = `
           Symbol(length): 0,
         },
         "start": [Function],
+        "started": false,
       },
       "metadataRequest": [Function],
     }

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

@@ -69,9 +69,9 @@ export function addHistoryMetadata(item: CompletionItem, history: LokiHistoryIte
 export default class LokiLanguageProvider extends LanguageProvider {
   labelKeys: string[];
   logLabelFetchTs: number;
-  started: boolean;
+  started = false;
   datasource: LokiDatasource;
-  lookupsDisabled: boolean; // Dynamically set to true for big/slow instances
+  lookupsDisabled = false; // Dynamically set to true for big/slow instances
 
   /**
    *  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/datasource/mssql/query_ctrl.ts

@@ -27,7 +27,7 @@ export class MssqlQueryCtrl extends QueryCtrl {
   target: MssqlQuery;
   lastQueryMeta?: QueryResultMeta;
   lastQueryError?: string;
-  showHelp: boolean;
+  showHelp = false;
 
   /** @ngInject */
   constructor($scope: any, $injector: auto.IInjectorService) {

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

@@ -17,8 +17,8 @@ export class OpenTsQueryCtrl extends QueryCtrl {
   suggestMetrics: any;
   suggestTagKeys: any;
   suggestTagValues: any;
-  addTagMode: boolean;
-  addFilterMode: boolean;
+  addTagMode = false;
+  addFilterMode = false;
 
   /** @ngInject */
   constructor($scope: any, $injector: auto.IInjectorService) {

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

@@ -28,15 +28,15 @@ export class PostgresQueryCtrl extends QueryCtrl {
   metaBuilder: PostgresMetaQuery;
   lastQueryMeta?: QueryResultMeta;
   lastQueryError?: string;
-  showHelp: boolean;
+  showHelp = false;
   tableSegment: any;
   whereAdd: any;
   timeColumnSegment: any;
   metricColumnSegment: any;
-  selectMenu: any[];
-  selectParts: SqlPart[][];
-  groupParts: SqlPart[];
-  whereParts: SqlPart[];
+  selectMenu: any[] = [];
+  selectParts: SqlPart[][] = [[]];
+  groupParts: SqlPart[] = [];
+  whereParts: SqlPart[] = [];
   groupAdd: any;
 
   /** @ngInject */

public/app/plugins/datasource/testdata/runStreams.ts

@@ -212,7 +212,7 @@ export function runFetchStream(
       },
     });
 
-    const processChunk = (value: ReadableStreamReadResult<Uint8Array>): any => {
+    const processChunk = (value: ReadableStreamDefaultReadResult<Uint8Array>): any => {
       if (value.value) {
         const text = new TextDecoder().decode(value.value);
         csv.readCSV(text);

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

@@ -5,11 +5,11 @@ export class GraphContextMenuCtrl {
   private source?: FlotDataPoint | null;
   private scope?: any;
   menuItemsSupplier?: () => MenuItemProps[];
-  scrollContextElement: HTMLElement | null;
+  scrollContextElement: HTMLElement | null = null;
   position: {
     x: number;
     y: number;
-  };
+  } = { x: 0, y: 0 };
 
   isVisible: boolean;
 

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

@@ -60,7 +60,7 @@ class GraphElement {
   panel: any;
   plot: any;
   sortedSeries?: any[];
-  data: any[];
+  data: any[] = [];
   panelWidth: number;
   eventManager: EventManager;
   thresholdManager: ThresholdManager;

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

@@ -31,7 +31,7 @@ import { annotationsFromDataFrames } from '../../../features/query/state/Dashboa
 export class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
 
-  renderError: boolean;
+  renderError = false;
   hiddenSeries: any = {};
   hiddenSeriesTainted = false;
   seriesList: TimeSeries[] = [];
@@ -41,7 +41,7 @@ export class GraphCtrl extends MetricsPanelCtrl {
 
   dataWarning?: DataWarning;
   colors: any = [];
-  subTabIndex: number;
+  subTabIndex = 0;
   processor: DataProcessor;
   contextMenuCtrl: GraphContextMenuCtrl;
 

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

@@ -11,7 +11,7 @@ export class ThresholdManager {
   placeholder: any;
   height: any;
   thresholds: any;
-  needsCleanup: boolean;
+  needsCleanup = false;
   hasSecondYAxis: any;
 
   constructor(private panelCtrl: PanelCtrl) {}

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

@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2';
 export class ThresholdFormCtrl {
   panelCtrl: any;
   panel: any;
-  disabled: boolean;
+  disabled = false;
 
   /** @ngInject */
   constructor(private $scope: any) {}

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

@@ -4,7 +4,7 @@ import { getColorModes } from './time_region_manager';
 export class TimeRegionFormCtrl {
   panelCtrl: any;
   panel: any;
-  disabled: boolean;
+  disabled = false;
   colorModes: any;
 
   /** @ngInject */

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -119,10 +119,10 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   selectionActivated: boolean;
   unitFormats: any;
   data: any;
-  series: TimeSeries[];
+  series: TimeSeries[] = [];
   dataWarning: any;
-  decimals: number;
-  scaledDecimals: number;
+  decimals = 0;
+  scaledDecimals = 0;
 
   processor: DataProcessor; // Shared with graph panel
 

public/test/core/redux/reduxTester.ts

@@ -59,7 +59,7 @@ export const reduxTester = <State>(args?: ReduxTesterArguments<State>): ReduxTes
   const givenRootReducer = (rootReducer: Reducer<State>): ReduxTesterWhen<State> => {
     store = configureStore<State>({
       reducer: rootReducer,
-      middleware: [...defaultMiddleware, logActionsMiddleWare, thunk] as [ThunkMiddleware<State>],
+      middleware: ([...defaultMiddleware, logActionsMiddleWare, thunk] as unknown) as [ThunkMiddleware<State>],
       preloadedState,
     });
 

yarn.lock

@@ -6126,7 +6126,7 @@
     "@types/slate" "*"
     immutable "^3.8.2"
 
-"@types/slate@*":
+"@types/slate@*", "@types/slate@0.47.2":
   version "0.47.2"
   resolved "https://registry.yarnpkg.com/@types/slate/-/slate-0.47.2.tgz#54c57c223919bb70b3047600ab6b0ccf800bff77"
   integrity sha512-1qwuAtuJ2Tnhewr2tz3OsDeM9xIC1ttTkBuSuf2P4Dy7K9I/I8HVeVowpo8k2vzVX7UMkc3OHo0RpC7V6pWCBw==
@@ -24442,16 +24442,16 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9"
-  integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==
-
 typescript@4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
   integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
 
+typescript@4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
+  integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
+
 typescript@~3.9.7:
   version "3.9.7"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"