fix(templating): updated templating UI and tab behavior, now edit tab is not visible when not actually editing an existing var, fixes #2679

public/app/features/templating/editorCtrl.js

@@ -22,7 +22,8 @@ function (angular, _) {
     };
 
     $scope.init = function() {
-      $scope.editor = { index: 0 };
+      $scope.mode = 'list';
+
       $scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) {
         return !ds.meta.builtIn;
       });
@@ -30,8 +31,8 @@ function (angular, _) {
       $scope.variables = templateSrv.variables;
       $scope.reset();
 
-      $scope.$watch('editor.index', function(index) {
+      $scope.$watch('mode', function(val) {
-        if ($scope.currentIsNew === false && index === 1) {
+        if (val === 'new') {
           $scope.reset();
         }
       });
@@ -75,7 +76,7 @@ function (angular, _) {
     $scope.edit = function(variable) {
       $scope.current = variable;
       $scope.currentIsNew = false;
-      $scope.editor.index = 2;
+      $scope.mode = 'edit';
 
       if ($scope.current.datasource === void 0) {
         $scope.current.datasource = null;
@@ -88,7 +89,7 @@ function (angular, _) {
       if ($scope.isValid()) {
         $scope.runQuery().then(function() {
           $scope.reset();
-          $scope.editor.index = 0;
+          $scope.mode = 'list';
         });
       }
     };

public/app/features/templating/partials/editor.html

@@ -5,10 +5,27 @@
 			Templating
 		</div>
 
+		<div class="tabs">
+			<ul class="nav nav-tabs">
+				<li ng-class="{active: mode === 'list'}">
+					<a ng-click="mode = 'list';">
+						Variables
+					</a>
+				</li>
 
-		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+				<li ng-class="{active: mode === 'edit'}" ng-show="mode === 'edit'">
-			<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
+					<a>
-			</div>
+						{{current.name}}
+					</a>
+				</li>
+
+				<li ng-class="{active: mode === 'new'}">
+					<a ng-click="mode = 'new';">
+						<i class="fa fa-plus"></i>
+						New
+					</a>
+				</li>
+			</ul>
 		</div>
 
 		<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
@@ -19,7 +36,7 @@
 
 	<div class="gf-box-body">
 
-		<div ng-if="editor.index == 0">
+		<div ng-if="mode === 'list'">
 
 			<div class="editor-row row">
 				<div class="span8">
@@ -55,7 +72,7 @@
 			</div>
 		</div>
 
-		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
+		<div ng-if="mode === 'edit' || mode === 'new'">
 			<div class="editor-row">
 				<div class="tight-form-section">
 					<h5>Variable</h5>
@@ -278,8 +295,8 @@
 		</div>
 
 		<div class="editor-row" style="margin-top: 20px">
-			<button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
+			<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
-			<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
+			<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
 		</div>
 
 	</div>