Chore: Upgrade typescript and related packages (#27316)

* Chore: Upgrade typescript and related packages
Closes #27115

* Apply suggestions from code review

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* fixes some tests

* Fix failing tests

* Apply suggestions from code review

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

packages/grafana-data/package.json

@@ -49,6 +49,6 @@
     "rollup-plugin-typescript2": "0.26.0",
     "rollup-plugin-visualizer": "3.3.1",
     "sinon": "8.1.1",
-    "typescript": "3.9.3"
+    "typescript": "4.0.2"
   }
 }

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": "3.9.3",
+    "typescript": "4.0.2",
     "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": "3.9.3",
+    "typescript": "4.0.2",
     "yaml": "^1.8.3"
   }
 }

packages/grafana-runtime/package.json

@@ -41,7 +41,7 @@
     "rollup-plugin-terser": "5.3.0",
     "rollup-plugin-typescript2": "0.26.0",
     "rollup-plugin-visualizer": "3.3.1",
-    "typescript": "3.9.3"
+    "typescript": "4.0.2"
   },
   "types": "src/index.ts"
 }

packages/grafana-toolkit/package.json

@@ -47,8 +47,8 @@
     "@types/semver": "^6.0.0",
     "@types/tmp": "^0.1.0",
     "@types/webpack": "4.41.7",
-    "@typescript-eslint/eslint-plugin": "3.6.0",
-    "@typescript-eslint/parser": "3.6.0",
+    "@typescript-eslint/eslint-plugin": "4.0.1",
+    "@typescript-eslint/parser": "4.0.1",
     "axios": "0.19.2",
     "babel-jest": "24.8.0",
     "babel-loader": "8.1.0",
@@ -102,11 +102,11 @@
     "simple-git": "^1.132.0",
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^2.3.4",
-    "ts-jest": "24.1.0",
+    "ts-jest": "26.3.0",
     "ts-loader": "6.2.1",
     "ts-node": "8.8.1",
-    "tslib": "1.10.0",
-    "typescript": "3.9.3",
+    "tslib": "2.0.1",
+    "typescript": "4.0.2",
     "url-loader": "^2.0.1",
     "webpack": "4.41.5"
   },

packages/grafana-ui/package.json

@@ -107,7 +107,7 @@
     "rollup-plugin-visualizer": "3.3.1",
     "storybook-dark-mode": "0.6.1",
     "ts-loader": "6.2.1",
-    "typescript": "3.9.3"
+    "typescript": "4.0.2"
   },
   "types": "src/index.ts"
 }

packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx

@@ -188,7 +188,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.memo(({ x, y, onClo
           renderItem={(item, index) => {
             return (
               <>
-                <ContextMenuGroup group={item} onClick={onClose} />
+                <ContextMenuGroupComponent group={item} onClick={onClose} />
               </>
             );
           }}
@@ -207,7 +207,7 @@ interface ContextMenuItemProps {
   className?: string;
 }
 
-const ContextMenuItem: React.FC<ContextMenuItemProps> = React.memo(
+const ContextMenuItemComponent: React.FC<ContextMenuItemProps> = React.memo(
   ({ url, icon, label, target, onClick, className }) => {
     const theme = useContext(ThemeContext);
     const styles = getContextMenuStyles(theme);
@@ -235,7 +235,7 @@ interface ContextMenuGroupProps {
   onClick?: () => void; // Used with 'onClose'
 }
 
-const ContextMenuGroup: React.FC<ContextMenuGroupProps> = ({ group, onClick }) => {
+const ContextMenuGroupComponent: React.FC<ContextMenuGroupProps> = ({ group, onClick }) => {
   const theme = useContext(ThemeContext);
   const styles = getContextMenuStyles(theme);
 
@@ -250,7 +250,7 @@ const ContextMenuGroup: React.FC<ContextMenuGroupProps> = ({ group, onClick }) =
         items={group.items || []}
         renderItem={item => {
           return (
-            <ContextMenuItem
+            <ContextMenuItemComponent
               url={item.url}
               label={item.label}
               target={item.target}

packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx

@@ -5,13 +5,13 @@ import { stylesFactory, useTheme } from '../../themes';
 import { Badge, BadgeProps } from '../Badge/Badge';
 import { css } from 'emotion';
 
-interface FeatureInfoBox extends Omit<InfoBoxProps, 'branded' | 'title' | 'urlTitle'> {
+interface FeatureInfoBoxProps extends Omit<InfoBoxProps, 'branded' | 'title' | 'urlTitle'> {
   title: string;
   featureState?: FeatureState;
 }
 
 export const FeatureInfoBox = React.memo(
-  React.forwardRef<HTMLDivElement, FeatureInfoBox>(({ title, featureState, ...otherProps }, ref) => {
+  React.forwardRef<HTMLDivElement, FeatureInfoBoxProps>(({ title, featureState, ...otherProps }, ref) => {
     const theme = useTheme();
     const styles = getFeatureInfoBoxStyles(theme);
 

packages/jaeger-ui-components/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.2.0",
-    "typescript": "3.9.3"
+    "typescript": "4.0.2"
   },
   "dependencies": {
     "@grafana/data": "7.3.0-pre.0",