Chore: Upgrade typescript to version 4.3.4, storybook to 6.3.0 (#35374)

* Chore: Upgrade typescript to version 4.3.4, storybook to 6.3.0

package.json

@@ -81,7 +81,7 @@
     "@emotion/eslint-plugin": "11.2.0",
     "@grafana/api-documenter": "7.11.2",
     "@grafana/api-extractor": "7.10.1",
-    "@grafana/eslint-config": "2.4.0",
+    "@grafana/eslint-config": "2.5.0",
     "@kusto/monaco-kusto": "3.2.7",
     "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
     "@testing-library/jest-dom": "5.11.5",
@@ -136,8 +136,8 @@
     "@types/testing-library__react-hooks": "^3.2.0",
     "@types/tinycolor2": "1.4.2",
     "@types/uuid": "8.3.0",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "4.28.0",
-    "@typescript-eslint/parser": "4.22.0",
+    "@typescript-eslint/parser": "4.28.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.3.1",
     "angular-mocks": "1.6.6",
     "autoprefixer": "9.7.4",
@@ -164,7 +164,7 @@
     "expect.js": "0.3.1",
     "expose-loader": "0.7.5",
     "file-loader": "5.0.2",
-    "fork-ts-checker-webpack-plugin": "6.1.1",
+    "fork-ts-checker-webpack-plugin": "6.2.10",
     "fs-extra": "9.1.0",
     "gaze": "1.1.3",
     "glob": "7.1.6",
@@ -208,7 +208,7 @@
     "ts-jest": "26.4.4",
     "ts-node": "9.0.0",
     "tslib": "2.2.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.4",
     "webpack": "4.41.5",
     "webpack-bundle-analyzer": "3.6.0",
     "webpack-cleanup-plugin": "0.5.1",

packages/grafana-data/package.json

@@ -54,7 +54,7 @@
     "rollup-plugin-visualizer": "4.2.0",
     "sinon": "8.1.1",
     "tinycolor2": "1.4.1",
-    "typescript": "4.2.4"
+    "typescript": "4.3.4"
   },
   "volta": {
     "extends": "../../package.json"

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

@@ -34,7 +34,8 @@ export interface SystemConfigOverrideRule extends ConfigOverrideRule {
  */
 export function isSystemOverrideWithRef<T extends SystemConfigOverrideRule>(ref: string) {
   return (override: ConfigOverrideRule): override is T => {
-    return (override as T)?.__systemRef === ref;
+    const overrideAs = override as T;
+    return overrideAs.__systemRef === ref;
   };
 }
 

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.2.4",
+    "typescript": "4.3.4",
     "yaml": "^1.8.3"
   },
   "volta": {

packages/grafana-e2e/package.json

@@ -55,7 +55,7 @@
     "execa": "4.0.0",
     "resolve-as-bin": "2.1.0",
     "ts-loader": "6.2.1",
-    "typescript": "4.2.4",
+    "typescript": "4.3.4",
     "yaml": "^1.8.3"
   },
   "volta": {

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.2.4"
+    "typescript": "4.3.4"
   },
   "types": "src/index.ts",
   "volta": {

packages/grafana-toolkit/package.json

@@ -29,7 +29,7 @@
     "@babel/core": "7.13.14",
     "@babel/preset-env": "7.13.12",
     "@grafana/data": "8.1.0-pre",
-    "@grafana/eslint-config": "2.4.0",
+    "@grafana/eslint-config": "2.5.0",
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@grafana/ui": "8.1.0-pre",
     "@types/command-exists": "^1.2.0",
@@ -45,8 +45,8 @@
     "@types/semver": "^6.0.0",
     "@types/tmp": "^0.1.0",
     "@types/webpack": "4.41.7",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "4.28.0",
-    "@typescript-eslint/parser": "4.22.0",
+    "@typescript-eslint/parser": "4.28.0",
     "axios": "0.21.1",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
@@ -104,7 +104,7 @@
     "ts-loader": "6.2.1",
     "ts-node": "9.0.0",
     "tslib": "2.2.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.4",
     "url-loader": "^2.0.1",
     "webpack": "4.41.5"
   },

packages/grafana-ui/package.json

@@ -79,11 +79,11 @@
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-image": "2.0.5",
     "@rollup/plugin-node-resolve": "10.0.0",
-    "@storybook/addon-essentials": "6.2.7",
+    "@storybook/addon-essentials": "6.3.0",
-    "@storybook/addon-knobs": "6.2.7",
+    "@storybook/addon-knobs": "6.3.0",
-    "@storybook/addon-storysource": "6.2.7",
+    "@storybook/addon-storysource": "6.3.0",
-    "@storybook/react": "6.2.7",
+    "@storybook/react": "6.3.0",
-    "@storybook/theming": "6.2.7",
+    "@storybook/theming": "6.3.0",
     "@testing-library/jest-dom": "5.11.9",
     "@types/classnames": "2.2.7",
     "@types/common-tags": "^1.8.0",
@@ -120,9 +120,9 @@
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.29.0",
     "rollup-plugin-visualizer": "4.2.0",
-    "storybook-dark-mode": "1.0.7",
+    "storybook-dark-mode": "1.0.8",
     "ts-loader": "8.0.11",
-    "typescript": "4.2.4",
+    "typescript": "4.3.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.2.4"
+    "typescript": "4.3.4"
   },
   "dependencies": {
     "@emotion/css": "11.1.3",

public/app/features/live/scopes.ts

@@ -92,7 +92,7 @@ export class GrafanaLiveDataSourceScope extends GrafanaLiveScope {
     for (const [key, ds] of Object.entries(config.datasources)) {
       if (ds.meta.live) {
         try {
-          const s = this.getChannelSupport(key); // ds.name or ID?
+          const s = await this.getChannelSupport(key); // ds.name or ID?
           if (s) {
             names.push({
               label: ds.name,
@@ -143,7 +143,7 @@ export class GrafanaLivePluginScope extends GrafanaLiveScope {
     for (const [key, panel] of Object.entries(config.panels)) {
       if (panel.live) {
         try {
-          const s = this.getChannelSupport(key); // ds.name or ID?
+          const s = await this.getChannelSupport(key); // ds.name or ID?
           if (s) {
             names.push({
               label: panel.name,

public/app/plugins/panel/barchart/bars.ts

@@ -226,7 +226,15 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
 
       // Calculate final labels positions according to unified text size
       const textMeasurement = measureText(label.formattedValue, fontSize * devicePixelRatio);
-      const actualLineHeight = textMeasurement.fontBoundingBoxAscent + textMeasurement.fontBoundingBoxDescent;
+
+      let actualLineHeight = textMeasurement.actualBoundingBoxAscent + textMeasurement.actualBoundingBoxDescent;
+
+      // fontBoundingBoxAscent is only supported in chrome & safari at the moment. (see: https://caniuse.com/?search=fontBoundingBoxAscent)
+      // @ts-ignore
+      if (textMeasurement.fontBoundingBoxAscent && textMeasurement.fontBoundingBoxDescent) {
+        // @ts-ignore
+        actualLineHeight = textMeasurement.fontBoundingBoxAscent + textMeasurement.fontBoundingBoxDescent;
+      }
 
       if (ori === ScaleOrientation.Horizontal) {
         x = label.x + label.barWidth / 2;
@@ -281,7 +289,7 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
 
   const xValues: Axis.Values = (u) => u.data[0];
 
-  let hovered: Rect | null = null;
+  let hovered: Rect | undefined = undefined;
 
   let barMark = document.createElement('div');
   barMark.classList.add('bar-mark');
@@ -315,7 +323,7 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
     updateTooltipPosition
   ) => {
     return (u: uPlot) => {
-      let found: Rect | null = null;
+      let found: Rect | undefined;
       let cx = u.cursor.left! * devicePixelRatio;
       let cy = u.cursor.top! * devicePixelRatio;
 
@@ -329,20 +337,20 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
         // prettier-ignore
         if (found !== hovered) {
           barMark.style.display = '';
-          barMark.style.left   = found!.x / devicePixelRatio + 'px';
+          barMark.style.left   = found.x / devicePixelRatio + 'px';
-          barMark.style.top    = found!.y / devicePixelRatio + 'px';
+          barMark.style.top    = found.y / devicePixelRatio + 'px';
-          barMark.style.width  = found!.w / devicePixelRatio + 'px';
+          barMark.style.width  = found.w / devicePixelRatio + 'px';
-          barMark.style.height = found!.h / devicePixelRatio + 'px';
+          barMark.style.height = found.h / devicePixelRatio + 'px';
           hovered = found;
-          updateActiveSeriesIdx(hovered!.sidx);
+          updateActiveSeriesIdx(hovered.sidx);
-          updateActiveDatapointIdx(hovered!.didx);
+          updateActiveDatapointIdx(hovered.didx);
           updateTooltipPosition();
         }
-      } else if (hovered != null) {
+      } else if (hovered !== undefined) {
         updateActiveSeriesIdx(hovered!.sidx);
         updateActiveDatapointIdx(hovered!.didx);
         updateTooltipPosition();
-        hovered = null;
+        hovered = undefined;
         barMark.style.display = 'none';
       } else {
         updateTooltipPosition(true);

public/app/plugins/panel/state-timeline/timeline.ts

@@ -371,10 +371,10 @@ export function getConfig(opts: TimelineCoreOptions) {
 
     if (o) {
       h.style.display = '';
-      h.style.left = round(o!.x / pxRatio) + 'px';
+      h.style.left = round(o.x / pxRatio) + 'px';
-      h.style.top = round(o!.y / pxRatio) + 'px';
+      h.style.top = round(o.y / pxRatio) + 'px';
-      h.style.width = round(o!.w / pxRatio) + 'px';
+      h.style.width = round(o.w / pxRatio) + 'px';
-      h.style.height = round(o!.h / pxRatio) + 'px';
+      h.style.height = round(o.h / pxRatio) + 'px';
     } else {
       h.style.display = 'none';
     }
@@ -382,13 +382,13 @@ export function getConfig(opts: TimelineCoreOptions) {
     hovered[i] = o;
   }
 
-  let hoveredAtCursor: Rect | null = null;
+  let hoveredAtCursor: Rect | undefined;
 
   function hoverMulti(cx: number, cy: number) {
-    let foundAtCursor: Rect | null = null;
+    let foundAtCursor: Rect | undefined;
 
     for (let i = 0; i < numSeries; i++) {
-      let found: Rect | null = null;
+      let found: Rect | undefined;
 
       if (cx >= 0) {
         let cy2 = yMids[i];
@@ -416,16 +416,16 @@ export function getConfig(opts: TimelineCoreOptions) {
     if (foundAtCursor) {
       if (foundAtCursor !== hoveredAtCursor) {
         hoveredAtCursor = foundAtCursor;
-        onHover(foundAtCursor!.sidx, foundAtCursor!.didx, foundAtCursor);
+        onHover(foundAtCursor.sidx, foundAtCursor.didx, foundAtCursor);
       }
     } else if (hoveredAtCursor) {
-      hoveredAtCursor = null;
+      hoveredAtCursor = undefined;
       onLeave();
     }
   }
 
   function hoverOne(cx: number, cy: number) {
-    let foundAtCursor: Rect | null = null;
+    let foundAtCursor: Rect | undefined;
 
     qt.get(cx, cy, 1, 1, (o) => {
       if (pointWithin(cx, cy, o.x, o.y, o.x + o.w, o.y + o.h)) {
@@ -438,11 +438,11 @@ export function getConfig(opts: TimelineCoreOptions) {
 
       if (foundAtCursor !== hoveredAtCursor) {
         hoveredAtCursor = foundAtCursor;
-        onHover(foundAtCursor!.sidx, foundAtCursor!.didx, foundAtCursor);
+        onHover(foundAtCursor.sidx, foundAtCursor.didx, foundAtCursor);
       }
     } else if (hoveredAtCursor) {
       setHoverMark(0, null);
-      hoveredAtCursor = null;
+      hoveredAtCursor = undefined;
       onLeave();
     }
   }
@@ -450,8 +450,8 @@ export function getConfig(opts: TimelineCoreOptions) {
   const doHover = mode === TimelineMode.Changes ? hoverMulti : hoverOne;
 
   const setCursor = (u: uPlot) => {
-    let cx = round(u.cursor!.left! * pxRatio);
+    let cx = round(u.cursor.left! * pxRatio);
-    let cy = round(u.cursor!.top! * pxRatio);
+    let cy = round(u.cursor.top! * pxRatio);
 
     // if quadtree is empty, fill it
     if (!qt.o.length && qt.q == null) {

public/app/types/store.ts

@@ -1,5 +1,5 @@
 import { ThunkAction, ThunkDispatch as GenericThunkDispatch } from 'redux-thunk';
-import { PayloadAction } from '@reduxjs/toolkit';
+import { Action, PayloadAction } from '@reduxjs/toolkit';
 import { NavIndex } from '@grafana/data';
 import { AlertRulesState, NotificationChannelState } from './alerting';
 import { UnifiedAlertingState } from '../features/alerting/unified/state/reducers';
@@ -50,4 +50,4 @@ export interface StoreState {
  */
 export type ThunkResult<R> = ThunkAction<R, StoreState, undefined, PayloadAction<any>>;
 
-export type ThunkDispatch = GenericThunkDispatch<StoreState, undefined, any>;
+export type ThunkDispatch = GenericThunkDispatch<StoreState, undefined, Action>;