Babel: Target more modern browsers, updates browserlistrc (grafana#32573)

* Babel: Target more modern browsers, updates browserlistrc

* Updates

* Fixed circular dependencies, grafana booted

Author: torkelo

.babelrc

@@ -1,4 +1,15 @@
->1%,
-Chrome > 20
-last 4 versions,
-Firefox ESR
+[dev]
+last 1 chrome versions
+last 1 firefox versions
+last 1 safari versions
+
+[production]
+last 2 Firefox versions
+last 2 Chrome versions
+last 2 Safari versions
+last 2 Edge versions
+last 1 ios_saf versions
+last 1 and_chr versions
+last 1 samsung versions
+
+

.browserslistrc

@@ -67,20 +67,20 @@
   },
   "devDependencies": {
     "@babel/core": "7.13.14",
-    "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.13.8",
+    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
     "@babel/plugin-proposal-optional-chaining": "7.13.12",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-proposal-private-methods": "7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-react-constant-elements": "7.13.13",
     "@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",
+    "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "11.1.2",
     "@testing-library/react-hooks": "^3.2.1",
@@ -203,6 +203,7 @@
     "zone.js": "0.7.8"
   },
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.13.10",
     "@emotion/core": "10.0.27",
     "@grafana/aws-sdk": "0.0.3",
     "@grafana/slate-react": "0.22.9-grafana",
@@ -222,7 +223,6 @@
     "@types/react-virtualized-auto-sizer": "1.0.0",
     "@types/uuid": "8.3.0",
     "@welldone-software/why-did-you-render": "4.0.6",
-    "history": "4.10.1",
     "abortcontroller-polyfill": "1.4.0",
     "angular": "1.8.2",
     "angular-bindonce": "0.3.1",
@@ -236,7 +236,7 @@
     "classnames": "2.2.6",
     "clipboard": "2.0.4",
     "common-tags": "^1.8.0",
-    "core-js": "3.6.4",
+    "core-js": "3.10.0",
     "d3": "5.15.0",
     "d3-force": "^2.1.1",
     "d3-scale-chromatic": "1.5.0",
@@ -247,6 +247,7 @@
     "fast-json-patch": "2.2.1",
     "fast-text-encoding": "^1.0.0",
     "file-saver": "2.0.2",
+    "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
     "immutable": "3.8.2",
     "is-hotkey": "0.1.6",

package.json

@@ -1,5 +1,5 @@
 import 'symbol-observable';
-import 'core-js/stable';
+import 'core-js';
 import 'regenerator-runtime/runtime';
 
 import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering

public/app/app.ts

@@ -1,19 +1,17 @@
-import angular from 'angular';
 // @ts-ignore
 import baron from 'baron';
 import { PanelEvents } from '@grafana/data';
 import { PanelModel } from '../dashboard/state';
 import { PanelCtrl } from './panel_ctrl';
 import { Subscription } from 'rxjs';
 import { RefreshEvent, RenderEvent } from 'app/types/events';
-
-const module = angular.module('grafana.directives');
+import { coreModule } from 'app/core/core_module';
 
 const panelTemplate = `
   <ng-transclude class="panel-height-helper"></ng-transclude>
 `;
 
-module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
+coreModule.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
   return {
     restrict: 'E',
     template: panelTemplate,

public/app/features/panel/panel_directive.ts

@@ -1,6 +1,4 @@
-import angular from 'angular';
-
-const module = angular.module('grafana.directives');
+import { coreModule } from 'app/core/core_module';
 
 export class QueryRowCtrl {
   target: any;
@@ -43,4 +41,4 @@ function queryEditorRowDirective() {
   };
 }
 
-module.directive('queryEditorRow', queryEditorRowDirective);
+coreModule.directive('queryEditorRow', queryEditorRowDirective);

public/app/features/panel/query_editor_row.ts

@@ -4,7 +4,6 @@ import { Registry, UrlQueryValue, VariableType } from '@grafana/data';
 
 import { VariableModel, VariableOption } from './types';
 import { VariableEditorProps } from './editor/types';
-import { VariablesState } from './state/variablesReducer';
 import { VariablePickerProps } from './pickers/types';
 import { createQueryVariableAdapter } from './query/adapter';
 import { createCustomVariableAdapter } from './custom/adapter';
@@ -14,6 +13,7 @@ import { createDataSourceVariableAdapter } from './datasource/adapter';
 import { createIntervalVariableAdapter } from './interval/adapter';
 import { createAdHocVariableAdapter } from './adhoc/adapter';
 import { createSystemVariableAdapter } from './system/adapter';
+import { VariablesState } from './state/types';
 
 export interface VariableAdapter<Model extends VariableModel> {
   id: VariableType;

public/app/features/variables/adapters.ts

@@ -1,9 +1,8 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import cloneDeep from 'lodash/cloneDeep';
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { adHocVariableReducer, filterAdded, filterRemoved, filtersRestored, filterUpdated } from './reducer';
-import { VariablesState } from '../state/variablesReducer';
 import { AdHocVariableFilter, AdHocVariableModel } from '../types';
 import { createAdHocVariableAdapter } from './adapter';
 

public/app/features/variables/adhoc/reducer.test.ts

@@ -1,7 +1,6 @@
 import { AdHocVariableFilter, AdHocVariableModel, initialVariableModelState } from 'app/features/variables/types';
-import { getInstanceState, VariablePayload } from '../state/types';
+import { getInstanceState, VariablePayload, initialVariablesState, VariablesState } from '../state/types';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
 
 export interface AdHocVariabelFilterUpdate {
   index: number;

public/app/features/variables/adhoc/reducer.ts

@@ -1,9 +1,8 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import cloneDeep from 'lodash/cloneDeep';
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { constantVariableReducer, createConstantOptionsFromQuery } from './reducer';
-import { VariablesState } from '../state/variablesReducer';
 import { ConstantVariableModel } from '../types';
 import { createConstantVariableAdapter } from './adapter';
 

public/app/features/variables/constant/reducer.test.ts

@@ -1,7 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ConstantVariableModel, initialVariableModelState, VariableHide, VariableOption } from '../types';
-import { getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import { getInstanceState, VariablePayload, initialVariablesState, VariablesState } from '../state/types';
 
 export const initialConstantVariableModelState: ConstantVariableModel = {
   ...initialVariableModelState,

public/app/features/variables/constant/reducer.ts

@@ -1,10 +1,9 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import cloneDeep from 'lodash/cloneDeep';
 import { getVariableTestContext } from '../state/helpers';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload } from '../state/types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload, VariablesState } from '../state/types';
 import { createCustomOptionsFromQuery, customVariableReducer } from './reducer';
 import { createCustomVariableAdapter } from './adapter';
-import { VariablesState } from '../state/variablesReducer';
 import { CustomVariableModel } from '../types';
 
 describe('customVariableReducer', () => {

public/app/features/variables/custom/reducer.test.ts

@@ -1,8 +1,14 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { CustomVariableModel, initialVariableModelState, VariableOption } from '../types';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import {
+  ALL_VARIABLE_TEXT,
+  ALL_VARIABLE_VALUE,
+  getInstanceState,
+  VariablePayload,
+  initialVariablesState,
+  VariablesState,
+} from '../state/types';
 
 export const initialCustomVariableModelState: CustomVariableModel = {
   ...initialVariableModelState,

public/app/features/variables/custom/reducer.ts

@@ -1,13 +1,12 @@
 import { DataSourceInstanceSettings } from '@grafana/data';
 
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
-import { VariablesState } from '../state/variablesReducer';
 import { createDataSourceOptions, dataSourceVariableReducer } from './reducer';
 import { DataSourceVariableModel } from '../types';
 import { getVariableTestContext } from '../state/helpers';
 import cloneDeep from 'lodash/cloneDeep';
 import { createDataSourceVariableAdapter } from './adapter';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { getMockPlugins } from '../../plugins/__mocks__/pluginMocks';
 import { getDataSourceInstanceSetting } from '../shared/testing/helpers';
 

public/app/features/variables/datasource/reducer.test.ts

@@ -2,8 +2,14 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { DataSourceInstanceSettings } from '@grafana/data';
 
 import { DataSourceVariableModel, initialVariableModelState, VariableOption, VariableRefresh } from '../types';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import {
+  ALL_VARIABLE_TEXT,
+  ALL_VARIABLE_VALUE,
+  getInstanceState,
+  VariablePayload,
+  initialVariablesState,
+  VariablesState,
+} from '../state/types';
 
 export interface DataSourceVariableEditorState {
   dataSourceTypes: Array<{ text: string; value: string }>;

public/app/features/variables/datasource/reducer.ts

@@ -1,11 +1,10 @@
 import cloneDeep from 'lodash/cloneDeep';
 
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { createIntervalVariableAdapter } from './adapter';
 import { IntervalVariableModel } from '../types';
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
-import { VariablesState } from '../state/variablesReducer';
 import { createIntervalOptions, intervalVariableReducer } from './reducer';
 
 describe('intervalVariableReducer', () => {

public/app/features/variables/interval/reducer.test.ts

@@ -1,7 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { initialVariableModelState, IntervalVariableModel, VariableOption, VariableRefresh } from '../types';
-import { getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import { getInstanceState, VariablePayload, initialVariablesState, VariablesState } from '../state/types';
 import _ from 'lodash';
 
 export const initialIntervalVariableModelState: IntervalVariableModel = {

public/app/features/variables/interval/reducer.ts

@@ -8,9 +8,8 @@ import {
 } from './reducer';
 import { QueryVariableModel, VariableSort } from '../types';
 import cloneDeep from 'lodash/cloneDeep';
-import { VariablesState } from '../state/variablesReducer';
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { createQueryVariableAdapter } from './adapter';
 import { MetricFindValue } from '@grafana/data';
 

public/app/features/variables/query/reducer.test.ts

@@ -19,8 +19,9 @@ import {
   NONE_VARIABLE_TEXT,
   NONE_VARIABLE_VALUE,
   VariablePayload,
+  initialVariablesState,
+  VariablesState,
 } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
 
 interface VariableOptionsUpdate {
   templatedRegex: string;

public/app/features/variables/query/reducer.ts

@@ -1,9 +1,9 @@
 import { combineReducers } from '@reduxjs/toolkit';
 import { LoadingState } from '@grafana/data';
 
-import { NEW_VARIABLE_ID } from './types';
+import { NEW_VARIABLE_ID, VariablesState } from './types';
 import { VariableHide, VariableModel } from '../types';
-import { VariablesState } from './variablesReducer';
+
 import { VariableAdapter } from '../adapters';
 import { dashboardReducer } from 'app/features/dashboard/state/reducers';
 import { templatingReducers, TemplatingState } from './reducers';

public/app/features/variables/state/helpers.ts

@@ -2,8 +2,8 @@ import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import { initialVariableModelState, QueryVariableModel } from '../types';
 import { VariableAdapter, variableAdapters } from '../adapters';
 import { createAction } from '@reduxjs/toolkit';
-import { cleanVariables, variablesReducer, VariablesState } from './variablesReducer';
-import { toVariablePayload, VariablePayload } from './types';
+import { cleanVariables, variablesReducer } from './variablesReducer';
+import { VariablesState, toVariablePayload, VariablePayload } from './types';
 import { VariableType } from '@grafana/data';
 
 const variableAdapter: VariableAdapter<QueryVariableModel> = {

public/app/features/variables/state/reducers.test.ts

@@ -17,12 +17,18 @@ import {
   variableStateNotStarted,
 } from './sharedReducer';
 import { ConstantVariableModel, QueryVariableModel, VariableHide, VariableOption } from '../types';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload, VariableIdentifier } from './types';
+import {
+  ALL_VARIABLE_TEXT,
+  ALL_VARIABLE_VALUE,
+  toVariablePayload,
+  VariableIdentifier,
+  initialVariablesState,
+  VariablesState,
+} from './types';
 import { variableAdapters } from '../adapters';
 import { createQueryVariableAdapter } from '../query/adapter';
 import { initialQueryVariableModelState } from '../query/reducer';
 import { getVariableState, getVariableTestContext } from './helpers';
-import { initialVariablesState, VariablesState } from './variablesReducer';
 import { changeVariableNameSucceeded } from '../editor/reducer';
 import { createConstantVariableAdapter } from '../constant/adapter';
 import { initialConstantVariableModelState } from '../constant/reducer';

public/app/features/variables/state/sharedReducer.test.ts

@@ -1,13 +1,11 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import cloneDeep from 'lodash/cloneDeep';
 import { default as lodashDefaults } from 'lodash/defaults';
-
 import { LoadingState, VariableType } from '@grafana/data';
 import { VariableModel, VariableOption, VariableWithOptions } from '../types';
-import { AddVariable, getInstanceState, VariablePayload } from './types';
+import { AddVariable, getInstanceState, VariablePayload, initialVariablesState, VariablesState } from './types';
 import { variableAdapters } from '../adapters';
 import { changeVariableNameSucceeded } from '../editor/reducer';
-import { initialVariablesState, VariablesState } from './variablesReducer';
 import { isQuery } from '../guard';
 import { ensureStringValues } from '../utils';
 

public/app/features/variables/state/sharedReducer.ts

@@ -1,5 +1,4 @@
 import { VariableModel } from '../types';
-import { VariablesState } from './variablesReducer';
 import { VariableType } from '@grafana/data';
 
 export const NEW_VARIABLE_ID = '00000000-0000-0000-0000-000000000000';
@@ -8,6 +7,10 @@ export const ALL_VARIABLE_VALUE = '$__all';
 export const NONE_VARIABLE_TEXT = 'None';
 export const NONE_VARIABLE_VALUE = '';
 
+export interface VariablesState extends Record<string, VariableModel> {}
+
+export const initialVariablesState: VariablesState = {};
+
 export const getInstanceState = <Model extends VariableModel = VariableModel>(state: VariablesState, id: string) => {
   return state[id] as Model;
 };

public/app/features/variables/state/types.ts

@@ -3,10 +3,7 @@ import { variableAdapters } from '../adapters';
 import { sharedReducer } from './sharedReducer';
 import { VariableModel } from '../types';
 import { AnyAction } from 'redux';
-
-export interface VariablesState extends Record<string, VariableModel> {}
-
-export const initialVariablesState: VariablesState = {};
+import { initialVariablesState, VariablesState } from './types';
 
 export const cleanVariables = createAction<undefined>('templating/cleanVariables');
 

public/app/features/variables/state/variablesReducer.ts

@@ -1,9 +1,8 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import cloneDeep from 'lodash/cloneDeep';
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { createTextBoxOptions, textBoxVariableReducer } from './reducer';
-import { VariablesState } from '../state/variablesReducer';
 import { TextBoxVariableModel } from '../types';
 import { createTextBoxVariableAdapter } from './adapter';