Templating: removes old Angular variable system and featureToggle (#24779)

* Chore: initial commit

* Tests: fixes MetricsQueryEditor.test.tsx

* Tests: fixes cloudwatch/specs/datasource.test.ts

* Tests: fixes stackdriver/specs/datasource.test.ts

* Tests: remove refrences to CustomVariable

* Refactor: moves DefaultVariableQueryEditor

* Refactor: moves utils

* Refactor: moves types

* Refactor: removes variableSrv

* Refactor: removes feature toggle newVariables

* Refactor: removes valueSelectDropDown

* Chore: removes GeneralTabCtrl

* Chore: migrates RowOptions

* Refactor: adds RowOptionsButton

* Refactor: makes the interface more explicit

* Refactor: small changes

* Refactor: changed type as it can be any variable type

* Tests: fixes broken test

* Refactor: changes after PR comments

* Refactor: adds loading state and call to onChange in componentDidMount

public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts

@@ -3,6 +3,10 @@ import config from 'app/core/config';
 import { DashboardExporter } from './DashboardExporter';
 import { DashboardModel } from '../../state/DashboardModel';
 import { PanelPluginMeta } from '@grafana/data';
+import { variableAdapters } from '../../../variables/adapters';
+import { createConstantVariableAdapter } from '../../../variables/constant/adapter';
+import { createQueryVariableAdapter } from '../../../variables/query/adapter';
+import { createDataSourceVariableAdapter } from '../../../variables/datasource/adapter';
 
 jest.mock('app/core/store', () => {
   return {
@@ -25,6 +29,10 @@ jest.mock('@grafana/runtime', () => ({
   },
 }));
 
+variableAdapters.register(createQueryVariableAdapter());
+variableAdapters.register(createConstantVariableAdapter());
+variableAdapters.register(createDataSourceVariableAdapter());
+
 describe('given dashboard with repeated panels', () => {
   let dash: any, exported: any;
 
@@ -122,7 +130,7 @@ describe('given dashboard with repeated panels', () => {
       info: { version: '1.1.2' },
     } as PanelPluginMeta;
 
-    dash = new DashboardModel(dash, {});
+    dash = new DashboardModel(dash, {}, () => dash.templating.list);
     const exporter = new DashboardExporter();
     exporter.makeExportable(dash).then(clean => {
       exported = clean;

public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts

@@ -5,6 +5,8 @@ import { DashboardModel } from '../../state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state';
 import { PanelPluginMeta } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
+import { VariableOption, VariableRefresh } from '../../../variables/types';
+import { isConstant, isQuery } from '../../../variables/guard';
 
 interface Input {
   name: string;
@@ -144,11 +146,12 @@ export class DashboardExporter {
 
     // templatize template vars
     for (const variable of saveModel.getVariables()) {
-      if (variable.type === 'query') {
+      if (isQuery(variable)) {
         templateizeDatasourceUsage(variable);
         variable.options = [];
-        variable.current = {};
-        variable.refresh = variable.refresh > 0 ? variable.refresh : 1;
+        variable.current = ({} as unknown) as VariableOption;
+        variable.refresh =
+          variable.refresh !== VariableRefresh.never ? variable.refresh : VariableRefresh.onDashboardLoad;
       }
     }
 
@@ -173,7 +176,7 @@ export class DashboardExporter {
 
         // templatize constants
         for (const variable of saveModel.getVariables()) {
-          if (variable.type === 'constant') {
+          if (isConstant(variable)) {
             const refName = 'VAR_' + variable.name.replace(' ', '_').toUpperCase();
             inputs.push({
               name: refName,
@@ -187,6 +190,7 @@ export class DashboardExporter {
             variable.options[0] = variable.current = {
               value: variable.query,
               text: variable.query,
+              selected: false,
             };
           }
         }