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/DashboardRow/DashboardRow.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { DashboardRow } from './DashboardRow';
 import { PanelModel } from '../../state/PanelModel';
 
@@ -16,7 +16,7 @@ describe('DashboardRow', () => {
     };
 
     panel = new PanelModel({ collapsed: false });
-    wrapper = shallow(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    wrapper = mount(<DashboardRow panel={panel} dashboard={dashboardMock} />);
   });
 
   it('Should not have collapsed class when collaped is false', () => {
@@ -37,14 +37,14 @@ describe('DashboardRow', () => {
 
   it('should not show row drag handle when cannot edit', () => {
     dashboardMock.meta.canEdit = false;
-    wrapper = shallow(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    wrapper = mount(<DashboardRow panel={panel} dashboard={dashboardMock} />);
     expect(wrapper.find('.dashboard-row__drag')).toHaveLength(0);
   });
 
   it('should have zero actions when cannot edit', () => {
     dashboardMock.meta.canEdit = false;
     panel = new PanelModel({ collapsed: false });
-    wrapper = shallow(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    wrapper = mount(<DashboardRow panel={panel} dashboard={dashboardMock} />);
     expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(0);
   });
 });

public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx

@@ -6,6 +6,7 @@ import { DashboardModel } from '../../state/DashboardModel';
 import templateSrv from 'app/features/templating/template_srv';
 import appEvents from 'app/core/app_events';
 import { CoreEvents } from 'app/types';
+import { RowOptionsButton } from '../RowOptions/RowOptionsButton';
 
 export interface DashboardRowProps {
   panel: PanelModel;
@@ -39,22 +40,14 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
     });
   };
 
-  onUpdate = () => {
+  onUpdate = (title: string | null, repeat: string | null) => {
+    this.props.panel['title'] = title;
+    this.props.panel['repeat'] = repeat;
+    this.props.panel.render();
     this.props.dashboard.processRepeats();
     this.forceUpdate();
   };
 
-  onOpenSettings = () => {
-    appEvents.emit(CoreEvents.showModal, {
-      templateHtml: `<row-options row="model.row" on-updated="model.onUpdated()" dismiss="dismiss()"></row-options>`,
-      modalClass: 'modal--narrow',
-      model: {
-        row: this.props.panel,
-        onUpdated: this.onUpdate,
-      },
-    });
-  };
-
   onDelete = () => {
     appEvents.emit(CoreEvents.showConfirmModal, {
       title: 'Delete Row',
@@ -92,9 +85,11 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
         </a>
         {canEdit && (
           <div className="dashboard-row__actions">
-            <a className="pointer" onClick={this.onOpenSettings}>
-              <Icon name="cog" />
-            </a>
+            <RowOptionsButton
+              title={this.props.panel.title}
+              repeat={this.props.panel.repeat}
+              onUpdate={this.onUpdate}
+            />
             <a className="pointer" onClick={this.onDelete}>
               <Icon name="trash-alt" />
             </a>