Templating: added validation to template editor for variable names, Fixes #1133

src/app/controllers/templateEditorCtrl.js

@@ -33,8 +33,25 @@ function (angular, _) {
     };
 
     $scope.add = function() {
-      $scope.variables.push($scope.current);
-      $scope.update();
+      if ($scope.isValid()) {
+        $scope.variables.push($scope.current);
+        $scope.update();
+      }
+    };
+
+    $scope.isValid = function() {
+      if (!$scope.current.name) {
+        $scope.appEvent('alert-warning', ['Validation', 'Template variable requires a name']);
+        return false;
+      }
+
+      var sameName = _.findWhere($scope.variables, { name: $scope.current.name });
+      if (sameName && sameName !== $scope.current) {
+        $scope.appEvent('alert-warning', ['Validation', 'Variable with the same name already exists']);
+        return false;
+      }
+
+      return true;
     };
 
     $scope.runQuery = function() {
@@ -57,10 +74,12 @@ function (angular, _) {
     };
 
     $scope.update = function() {
-      $scope.runQuery().then(function() {
-        $scope.reset();
-        $scope.editor.index = 0;
-      });
+      if ($scope.isValid()) {
+        $scope.runQuery().then(function() {
+          $scope.reset();
+          $scope.editor.index = 0;
+        });
+      }
     };
 
     $scope.reset = function() {

src/app/partials/templating_editor.html

@@ -47,7 +47,6 @@
 					</table>
 				</div>
 			</div>
-
 		</div>
 
 		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
@@ -56,7 +55,7 @@
 					<div class="editor-row">
 						<div class="editor-option">
 							<label class="small">Variable name</label>
-							<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
+							<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
 						</div>
 						<div class="editor-option">
 							<label class="small">Type</label>