Refactor: EmptyListCTA (#18516)

* Rewrite EmptyListCTA props and start removing css classes

* Add watchDepth onClick

* EmptyListCTA with React in annotaitons/editor

* Begin conversion of DashLinks editor EmptyListCTA

* Use React component in DashLinks, Variables and TeamGroupSync

* Remove scss file and add emotion styles

* Update snapshot

* Remove style import

* Fix feedback

* Update snapshot

public/app/features/templating/editor_ctrl.ts

@@ -14,6 +14,24 @@ export class VariableEditorCtrl {
     $scope.namePattern = /^(?!__).*$/;
     $scope._ = _;
     $scope.optionsLimit = 20;
+    $scope.emptyListCta = {
+      title: 'There are no variables yet',
+      buttonTitle: 'Add variable',
+      buttonIcon: 'gicon gicon-variable',
+      infoBox: {
+        __html: ` <p>
+      Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server or
+      sensor names in your metric queries you can use variables in their place. Variables are shown as dropdown
+      select boxes at the top of the dashboard. These dropdowns make it easy to change the data being displayed in
+      your dashboard. Check out the
+      <a class="external-link" href="http://docs.grafana.org/reference/templating/" target="_blank">
+        Templating documentation
+      </a>
+      for more information.
+    </p>`,
+        infoBoxTitle: 'What do variables do?',
+      },
+    };
 
     $scope.refreshOptions = [
       { value: 0, text: 'Never' },
@@ -50,6 +68,10 @@ export class VariableEditorCtrl {
       $scope.mode = mode;
     };
 
+    $scope.setNewMode = () => {
+      $scope.setMode('new');
+    };
+
     $scope.add = () => {
       if ($scope.isValid()) {
         variableSrv.addVariable($scope.current);