From 878121bb46b3a5afa8d49a5ec645f6af506efd99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 19 May 2017 11:14:11 +0200
Subject: [PATCH] fix: templating variable name validation detecting global
 variable naming wrongly, fixes #8423

---
 public/app/features/templating/editor_ctrl.ts |  2 +-
 .../features/templating/partials/editor.html  | 10 ++++----
 public/sass/components/_gf-form.scss          | 23 ++++---------------
 3 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts
index da1425cb9e0..b2ca08f2395 100644
--- a/public/app/features/templating/editor_ctrl.ts
+++ b/public/app/features/templating/editor_ctrl.ts
@@ -10,7 +10,7 @@ export class VariableEditorCtrl {
   constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) {
     $scope.variableTypes = variableTypes;
     $scope.ctrl = {};
-    $scope.namePattern = /^((?!__).)*$/;
+    $scope.namePattern = /^(?!__).*$/;
 
     $scope.refreshOptions = [
       {value: 0, text: "Never"},
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index d974b7d4e3d..5d110773cc7 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/public/app/features/templating/partials/editor.html
@@ -93,10 +93,7 @@
     <form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
       <h5 class="section-heading">Variable</h5>
       <div class="gf-form-group">
-        <div class="gf-form" ng-show="ctrl.form.name.$error.pattern">
-          <span class="gf-form-error">Template names cannot begin with '__' that's reserved for Grafanas global variables</span>
-        </div>
-        <div class="gf-form-inline">
+				<div class="gf-form-inline">
           <div class="gf-form max-width-19">
             <span class="gf-form-label width-6">Name</span>
             <input type="text" class="gf-form-input" name="name" placeholder="name" ng-model='current.name' required ng-pattern="namePattern"></input>
@@ -113,6 +110,11 @@
             </div>
           </div>
         </div>
+
+				<div class="gf-form" ng-show="ctrl.form.name.$error.pattern">
+          <span class="gf-form-label gf-form-label--error">Template names cannot begin with '__' that's reserved for Grafanas global variables</span>
+        </div>
+
         <div class="gf-form-inline">
           <div class="gf-form max-width-19">
             <span class="gf-form-label width-6">Label</span>
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 9c88435fcc2..97a97a013f7 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -64,6 +64,10 @@ $gf-form-margin: 0.25rem;
     flex-grow: 1;
     min-height: 2.60rem;
   }
+
+  &--error {
+    color: $critical;
+  }
 }
 
 .gf-form-pre {
@@ -76,25 +80,6 @@ $gf-form-margin: 0.25rem;
   @include border-radius($label-border-radius-sm);
 }
 
-.gf-form-error {
-  padding: $input-padding-y $input-padding-x;
-  margin-right: $gf-form-margin;
-  flex-shrink: 0;
-
-  background-color: $input-label-bg;
-  display: block;
-  font-size: $font-size-sm;
-  margin-right: $gf-form-margin;
-
-  border: $input-btn-border-width solid $red;
-  @include border-radius($label-border-radius-sm);
-
-  &--grow {
-    flex-grow: 1;
-    min-height: 2.60rem;
-  }
-}
-
 .gf-form-checkbox {
   flex-shrink: 0;
   padding: $input-padding-y $input-padding-x;