Fixed issue with multi select template variable and restoring state from url, #2196

public/app/features/templating/templateValuesSrv.js

@@ -57,10 +57,6 @@ function (angular, _, kbn) {
       var option = _.findWhere(variable.options, { text: urlValue });
       option = option || { text: urlValue, value: urlValue };
 
-      if (_.isArray(urlValue)) {
-        option.text = urlValue.join(', ');
-      }
-
       this.updateAutoInterval(variable);
       return this.setVariableValue(variable, option);
     };
@@ -79,6 +75,11 @@ function (angular, _, kbn) {
 
     this.setVariableValue = function(variable, option) {
       variable.current = angular.copy(option);
+
+      if (_.isArray(variable.current.value)) {
+        variable.current.text = variable.current.value.join(' + ');
+      }
+
       templateSrv.updateTemplateData();
       return this.updateOptionsInChildVariables(variable);
     };
@@ -127,6 +128,7 @@ function (angular, _, kbn) {
 
     this.validateVariableSelectionState = function(variable) {
       if (!variable.current) {
+        if (!variable.options.length) { return; }
         return self.setVariableValue(variable, variable.options[0]);
       }
 

public/css/less/submenu.less

@@ -132,5 +132,7 @@
 }
 
 .dash-nav-link {
+  padding: 8px 7px;
+  display: inline-block;
   color: @textColor;
 }

public/test/specs/templateValuesSrv-specs.js

@@ -68,7 +68,7 @@ define([
         expect(variable.current.value.length).to.be(2);
         expect(variable.current.value[0]).to.be("new");
         expect(variable.current.value[1]).to.be("other");
-        expect(variable.current.text).to.be("new, other");
+        expect(variable.current.text).to.be("new + other");
       });
     });