Babel: Updates babel dependencies to latest version (#32534)

* Babel: Updates babel dependencies to latest version

* Fixed problem introduced by babel where calling super with prefedefined this is not supported

* fixing test

* Fixed tests

* Improve fix for QueryCtrl

* Fixed more tests

* Updated tests

package.json

@@ -66,13 +66,13 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.8.4",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "7.8.3",
+    "@babel/core": "7.13.14",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "7.13.12",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.8.4",
-    "@babel/preset-react": "7.8.3",
-    "@babel/preset-typescript": "7.8.3",
+    "@babel/preset-env": "7.13.12",
+    "@babel/preset-react": "7.13.13",
+    "@babel/preset-typescript": "7.13.0",
     "@grafana/api-documenter": "7.11.2",
     "@grafana/api-extractor": "7.10.1",
     "@grafana/eslint-config": "2.3.0",
@@ -128,9 +128,8 @@
     "angular-mocks": "1.6.6",
     "autoprefixer": "9.7.4",
     "axios": "0.21.1",
-    "babel-core": "7.0.0-bridge.0",
     "babel-jest": "26.6.3",
-    "babel-loader": "8.0.6",
+    "babel-loader": "8.2.2",
     "babel-plugin-angularjs-annotate": "0.10.0",
     "clean-webpack-plugin": "3.0.0",
     "css-loader": "3.4.2",

packages/grafana-toolkit/package.json

@@ -26,8 +26,8 @@
   },
   "main": "src/index.ts",
   "dependencies": {
-    "@babel/core": "7.9.0",
-    "@babel/preset-env": "7.9.0",
+    "@babel/core": "7.13.14",
+    "@babel/preset-env": "7.13.12",
     "@grafana/data": "7.5.0-pre.0",
     "@grafana/eslint-config": "2.3.0",
     "@grafana/tsconfig": "^1.0.0-rc1",
@@ -50,7 +50,7 @@
     "@typescript-eslint/parser": "4.15.0",
     "axios": "0.21.1",
     "babel-jest": "26.6.3",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.2.2",
     "babel-plugin-angularjs-annotate": "0.10.0",
     "chalk": "^2.4.2",
     "command-exists": "^1.2.8",

public/app/features/panel/panel_ctrl.ts

@@ -32,6 +32,8 @@ export class PanelCtrl {
   timing: any;
 
   constructor($scope: any, $injector: auto.IInjectorService) {
+    this.panel = this.panel ?? $scope.$parent.panel;
+    this.dashboard = this.dashboard ?? $scope.$parent.dashboard;
     this.$injector = $injector;
     this.$location = $injector.get('$location');
     this.$scope = $scope;

public/app/features/panel/query_ctrl.ts

@@ -11,7 +11,10 @@ export class QueryCtrl {
   isLastQuery: boolean;
 
   constructor(public $scope: any, public $injector: auto.IInjectorService) {
-    this.panel = this.panelCtrl.panel;
+    this.panelCtrl = this.panelCtrl ?? $scope.ctrl.panelCtrl;
+    this.target = this.target ?? $scope.ctrl.target;
+    this.datasource = this.datasource ?? $scope.ctrl.datasource;
+    this.panel = this.panelCtrl?.panel ?? $scope.ctrl.panelCtrl.panel;
     this.isLastQuery = _.indexOf(this.panel.targets, this.target) === this.panel.targets.length - 1;
   }
 

public/app/features/panel/specs/metrics_panel_ctrl.test.ts

@@ -57,9 +57,11 @@ function setupController({ hasAccessToExplore } = { hasAccessToExplore: false })
     onAppEvent: jest.fn(),
     $on: jest.fn(),
     colors: [],
+    $parent: {
+      panel: new PanelModel({ type: 'test' }),
+      dashboard: {},
+    },
   };
 
-  MetricsPanelCtrl.prototype.panel = new PanelModel({ type: 'test' });
-
   return new MetricsPanelCtrl(scope, injectorStub);
 }

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

@@ -120,6 +120,10 @@ describe('grafanaGraph', () => {
     ctrl = new GraphCtrl(
       {
         $on: () => {},
+        $parent: {
+          panel: GraphCtrl.prototype.panel,
+          dashboard: GraphCtrl.prototype.dashboard,
+        },
       },
       {
         get: () => {},

public/app/plugins/panel/graph/specs/graph_ctrl.test.ts

@@ -18,10 +18,6 @@ describe('GraphCtrl', () => {
     },
   };
 
-  const scope: any = {
-    $on: () => {},
-  };
-
   GraphCtrl.prototype.panel = {
     events: {
       on: () => {},
@@ -35,6 +31,14 @@ describe('GraphCtrl', () => {
     },
   };
 
+  const scope: any = {
+    $on: () => {},
+    $parent: {
+      panel: GraphCtrl.prototype.panel,
+      dashboard: {},
+    },
+  };
+
   const ctx = {} as any;
 
   beforeEach(() => {

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

@@ -9,10 +9,6 @@ describe('HeatmapCtrl', () => {
     get: () => {},
   };
 
-  const $scope = {
-    $on: () => {},
-  };
-
   HeatmapCtrl.prototype.panel = {
     events: {
       on: () => {},
@@ -20,6 +16,14 @@ describe('HeatmapCtrl', () => {
     },
   };
 
+  const $scope = {
+    $on: () => {},
+    $parent: {
+      panel: HeatmapCtrl.prototype.panel,
+      dashboard: {},
+    },
+  };
+
   beforeEach(() => {
     //@ts-ignore
     ctx.ctrl = new HeatmapCtrl($scope, $injector, {} as TimeSrv);