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/plugins/datasource/stackdriver/components/VariableQueryEditor.test.tsx

@@ -4,7 +4,7 @@ import renderer from 'react-test-renderer';
 import { StackdriverVariableQueryEditor } from './VariableQueryEditor';
 import { VariableQueryProps } from 'app/types/plugins';
 import { MetricFindQueryTypes } from '../types';
-import { VariableModel } from 'app/features/templating/types';
+import { VariableModel } from 'app/features/variables/types';
 
 jest.mock('../functions', () => ({
   getMetricTypes: (): any => ({ metricTypes: [], selectedMetricType: '' }),
@@ -46,6 +46,7 @@ describe('VariableQueryEditor', () => {
   });
 
   describe('and a new variable is created', () => {
+    // these test need to be updated to reflect the changes from old variables system to new
     it('should trigger a query using the first query type in the array', done => {
       props.onChange = (query, definition) => {
         expect(definition).toBe('Stackdriver - Projects');
@@ -56,6 +57,7 @@ describe('VariableQueryEditor', () => {
   });
 
   describe('and an existing variable is edited', () => {
+    // these test need to be updated to reflect the changes from old variables system to new
     it('should trigger new query using the saved query type', done => {
       props.query = { selectedQueryType: MetricFindQueryTypes.LabelKeys };
       props.onChange = (query, definition) => {

public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx

@@ -3,7 +3,6 @@ import { VariableQueryProps } from 'app/types/plugins';
 import { SimpleSelect } from './';
 import { extractServicesFromMetricDescriptors, getLabelKeys, getMetricTypes } from '../functions';
 import { MetricFindQueryTypes, VariableQueryData } from '../types';
-import { getConfig } from 'app/core/config';
 
 export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
   queryTypes: Array<{ value: string; name: string }> = [
@@ -34,6 +33,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
     selectedSLOService: '',
     projects: [],
     projectName: '',
+    loading: true,
   };
 
   constructor(props: VariableQueryProps) {
@@ -80,10 +80,17 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
       projects: projects.map(({ value, label }: any) => ({ value, name: label })),
       ...(await this.getLabels(selectedMetricType, this.state.projectName)),
       sloServices: sloServices.map(({ value, label }: any) => ({ value, name: label })),
+      loading: false,
     };
-    this.setState(state);
+    this.setState(state, () => this.onPropsChange());
   }
 
+  onPropsChange = () => {
+    const { metricDescriptors, labels, metricTypes, services, ...queryModel } = this.state;
+    const query = this.queryTypes.find(q => q.value === this.state.selectedQueryType);
+    this.props.onChange(queryModel, `Stackdriver - ${query.name}`);
+  };
+
   async onQueryTypeChange(queryType: string) {
     const state: any = {
       selectedQueryType: queryType,
@@ -144,15 +151,10 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
   }
 
   componentDidUpdate(prevProps: Readonly<VariableQueryProps>, prevState: Readonly<VariableQueryData>) {
+    const selecQueryTypeChanged = prevState.selectedQueryType !== this.state.selectedQueryType;
     const selectSLOServiceChanged = this.state.selectedSLOService !== prevState.selectedSLOService;
-    if (
-      !getConfig().featureToggles.newVariables ||
-      prevState.selectedQueryType !== this.state.selectedQueryType ||
-      selectSLOServiceChanged
-    ) {
-      const { metricDescriptors, labels, metricTypes, services, ...queryModel } = this.state;
-      const query = this.queryTypes.find(q => q.value === this.state.selectedQueryType);
-      this.props.onChange(queryModel, `Stackdriver - ${query.name}`);
+    if (selecQueryTypeChanged || selectSLOServiceChanged) {
+      this.onPropsChange();
     }
   }
 
@@ -286,6 +288,19 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
   }
 
   render() {
+    if (this.state.loading) {
+      return (
+        <div className="gf-form max-width-21">
+          <span className="gf-form-label width-10 query-keyword">Query Type</span>
+          <div className="gf-form-select-wrapper max-width-12">
+            <select className="gf-form-input">
+              <option>Loading...</option>
+            </select>
+          </div>
+        </div>
+      );
+    }
+
     return (
       <>
         <SimpleSelect

public/app/plugins/datasource/stackdriver/components/__snapshots__/VariableQueryEditor.test.tsx.snap

@@ -1,87 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VariableQueryEditor renders correctly 1`] = `
-Array [
-  <div
-    className="gf-form max-width-21"
+<div
+  className="gf-form max-width-21"
+>
+  <span
+    className="gf-form-label width-10 query-keyword"
   >
-    <span
-      className="gf-form-label width-10 query-keyword"
+    Query Type
+  </span>
+  <div
+    className="gf-form-select-wrapper max-width-12"
+  >
+    <select
+      className="gf-form-input"
     >
-      Query Type
-    </span>
-    <div
-      className="gf-form-select-wrapper max-width-12"
-    >
-      <select
-        className="gf-form-input"
-        onChange={[Function]}
-        required={true}
-        value="projects"
-      >
-        <option
-          value="projects"
-        >
-          Projects
-        </option>
-        <option
-          value="services"
-        >
-          Services
-        </option>
-        <option
-          value="metricTypes"
-        >
-          Metric Types
-        </option>
-        <option
-          value="labelKeys"
-        >
-          Label Keys
-        </option>
-        <option
-          value="labelValues"
-        >
-          Label Values
-        </option>
-        <option
-          value="resourceTypes"
-        >
-          Resource Types
-        </option>
-        <option
-          value="aggregations"
-        >
-          Aggregations
-        </option>
-        <option
-          value="aligners"
-        >
-          Aligners
-        </option>
-        <option
-          value="alignmentPeriods"
-        >
-          Alignment Periods
-        </option>
-        <option
-          value="selectors"
-        >
-          Selectors
-        </option>
-        <option
-          value="sloServices"
-        >
-          SLO Services
-        </option>
-        <option
-          value="slo"
-        >
-          Service Level Objectives (SLO)
-        </option>
-      </select>
-    </div>
-  </div>,
-  "",
-]
+      <option>
+        Loading...
+      </option>
+    </select>
+  </div>
+</div>
 `;