Trying to make progres on persisting selection state, restoring selection state for new multi variable dropdown, proving to be really complex

public/app/directives/variableValueSelect.js

@@ -13,24 +13,20 @@ function (angular, app, _) {
       var vm = this;
 
       vm.show = function() {
-        vm.oldLinkText = vm.variable.current.text;
+        vm.oldVariableText = vm.variable.current.text;
         vm.highlightIndex = -1;
 
         var currentValues = vm.variable.current.value;
-
         if (_.isString(currentValues)) {
           currentValues  = [currentValues];
         }
 
         vm.options = _.map(vm.variable.options, function(option) {
-          if (_.indexOf(currentValues, option.value) >= 0) {
-            option.selected = true;
-          }
+          if (_.indexOf(currentValues, option.value) >= 0) { option.selected = true; }
           return option;
         });
 
-        vm.search = {query: '', options: vm.options};
-        vm.selectedValuesCount = currentValues.length;
+        vm.selectedValues = _.filter(vm.options, {selected: true});
         vm.selectedTags = vm.selectedTags || [];
 
         if (!vm.tags) {
@@ -39,14 +35,26 @@ function (angular, app, _) {
           });
         }
 
+        vm.search = {query: '', options: vm.options};
         vm.dropdownVisible = true;
       };
 
       vm.updateLinkText = function() {
+        // var currentValues = vm.variable.current.text;
+        //
+        // if (vm.variable.current.tags) {
+        //   selectedOptions = _.filter(selectedOptions, function(test) {
+        //     for (var i = 0; i < vm.variable.current.tags; i++) {
+        //       var tag = vm.selectedTags[i];
+        //       if (_.indexOf(tag.values, test.text) !== -1) {
+        //         return false;
+        //       }
+        //     }
+        //     return true;
+        //   });
+        // }
+        //
         vm.linkText = vm.variable.current.text;
-        if (vm.oldLinkText && vm.oldLinkText !== vm.linkText) {
-          vm.onUpdated();
-        }
       };
 
       vm.clearSelections = function() {
@@ -62,17 +70,13 @@ function (angular, app, _) {
         var tagValuesPromise;
         if (!tag.values) {
           tagValuesPromise = vm.getValuesForTag({tagKey: tag.text});
-          // if (tag.text === 'backend') {
-          //   tag.values = ['backend_01', 'backend_02', 'backend_03', 'backend_04'];
-          // } else {
-          //   tag.values = ['web_server_01', 'web_server_02', 'web_server_03', 'web_server_04'];
-          // }
         } else {
           tagValuesPromise = $q.when(tag.values);
         }
 
         tagValuesPromise.then(function(values) {
           tag.values = values;
+          tag.valuesText = values.join(', ');
           _.each(vm.options, function(option) {
             if (_.indexOf(tag.values, option.value) !== -1) {
               option.selected = tag.selected;
@@ -105,7 +109,7 @@ function (angular, app, _) {
         vm.highlightIndex = (vm.highlightIndex + direction) % vm.search.options.length;
       };
 
-      vm.optionSelected = function(option, event, commitChange, excludeOthers) {
+      vm.selectValue = function(option, event, commitChange, excludeOthers) {
         if (!option) { return; }
 
         option.selected = !option.selected;
@@ -140,43 +144,34 @@ function (angular, app, _) {
       };
 
       vm.selectionsChanged = function(commitChange) {
-        var selected = _.filter(vm.options, {selected: true});
+        vm.selectedValues = _.filter(vm.options, {selected: true});
 
-        if (selected.length > 1 && selected.length !== vm.options.length) {
-          if (selected[0].text === 'All') {
-            selected[0].selected = false;
-            selected = selected.slice(1, selected.length);
+        if (vm.selectedValues.length > 1 && vm.selectedValues.length !== vm.options.length) {
+          if (vm.selectedValues[0].text === 'All') {
+            vm.selectedValues[0].selected = false;
+            vm.selectedValues = vm.selectedValues.slice(1, vm.selectedValues.length);
           }
         }
 
         // validate selected tags
-        _.each(vm.selectedTags, function(tag) {
-          _.each(tag.values, function(value) {
-            if (!_.findWhere(selected, {value: value})) {
-              tag.selected = false;
-            }
-          });
-        });
-
-        vm.selectedTags = _.filter(vm.tags, {selected: true});
-
-        var valuesNotInTag = _.filter(selected, function(test) {
-          for (var i = 0; i < vm.selectedTags.length; i++) {
-            var tag = vm.selectedTags[i];
-            if (_.indexOf(tag.values, test.value) !== -1) {
-              return false;
-            }
+        _.each(vm.tags, function(tag) {
+          if (tag.selected)  {
+            _.each(tag.values, function(value) {
+              if (!_.findWhere(vm.selectedValues, {value: value})) {
+                tag.selected = false;
+              }
+            });
           }
-          return true;
         });
 
-        vm.variable.current.value = _.pluck(selected, 'value');
-        vm.variable.current.text = _.pluck(valuesNotInTag, 'text').join(', ');
-        vm.selectedValuesCount = selected.length;
+        vm.selectedTags = _.filter(vm.tags, {selected: true});
+        vm.variable.current.value = _.pluck(vm.selectedValues, 'value');
+        vm.variable.current.text = _.pluck(vm.selectedValues, 'text').join(' + ');
+        vm.variable.current.tags = vm.selectedTags;
 
         // only single value
-        if (vm.selectedValuesCount === 1) {
-          vm.variable.current.value = selected[0].value;
+        if (vm.selectedValues.length === 1) {
+          vm.variable.current.value = vm.selectedValues[0].value;
         }
 
         if (commitChange) {
@@ -186,14 +181,17 @@ function (angular, app, _) {
 
       vm.commitChanges = function() {
         // make sure one option is selected
-        var selected = _.filter(vm.options, {selected: true});
-        if (selected.length === 0) {
+        if (vm.selectedValues.length === 0) {
           vm.options[0].selected = true;
           vm.selectionsChanged(false);
         }
 
         vm.dropdownVisible = false;
         vm.updateLinkText();
+
+        if (vm.variable.current.text !== vm.oldVariableText) {
+          vm.onUpdated();
+        }
       };
 
       vm.queryChanged = function() {

public/app/features/dashboard/partials/variableValueSelect.html

@@ -15,9 +15,9 @@
 			<div class="variable-options-column">
 				<a class="variable-options-column-header" ng-if="vm.variable.multi" ng-class="{'many-selected': vm.selectedValuesCount > 1}" bs-tooltip="'Clear selections'" data-placement="top" ng-click="vm.clearSelections()">
 					<span class="variable-option-icon"></span>
-					Selected ({{vm.selectedValuesCount}})
+					Selected ({{vm.selectedValues.length}})
 				</a>
-				<a class="variable-option pointer" bindonce ng-repeat="option in vm.search.options" ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" ng-click="vm.optionSelected(option, $event)">
+				<a class="variable-option pointer" bindonce ng-repeat="option in vm.search.options" ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" ng-click="vm.selectValue(option, $event)">
 					<span class="variable-option-icon"></span>
 					<span>{{option.text}}</span>
 				</a>

public/app/features/templating/templateValuesSrv.js

@@ -130,6 +130,10 @@ function (angular, _, kbn) {
           // if parameter has current value
           // if it exists in options array keep value
           if (variable.current) {
+            // if current value is an array do not do anything
+            if (_.isArray(variable.current.value)) {
+              return $q.when([]);
+            }
             var currentOption = _.findWhere(variable.options, { text: variable.current.text });
             if (currentOption) {
               return self.setVariableValue(variable, currentOption);

public/test/specs/selectDropdownCtrl-specs.js

@@ -19,6 +19,7 @@ function () {
       ctrl.getValuesForTag = function(obj) {
         return $q.when(tagValuesMap[obj.tagKey]);
       };
+      ctrl.onUpdated = sinon.spy();
     }));
 
     describe("Given simple variable", function() {
@@ -35,13 +36,14 @@ function () {
     describe("Given variable with tags and dropdown is opened", function() {
       beforeEach(function() {
         ctrl.variable = {
-          current: {text: 'hej', value: 'hej'},
+          current: {text: 'server-1', value: 'server-1'},
           options: [
             {text: 'server-1', value: 'server-1'},
             {text: 'server-2', value: 'server-2'},
             {text: 'server-3', value: 'server-3'},
           ],
-          tags: ["key1", "key2", "key3"]
+          tags: ["key1", "key2", "key3"],
+          multi: true
         };
         tagValuesMap.key1 = ['server-1', 'server-3'];
         tagValuesMap.key2 = ['server-2', 'server-3'];
@@ -59,10 +61,30 @@ function () {
         expect(ctrl.options.length).to.be(3);
       });
 
+      it("should init selected values array", function() {
+        expect(ctrl.selectedValues.length).to.be(1);
+      });
+
+      it("should set linkText", function() {
+        expect(ctrl.linkText).to.be('server-1');
+      });
+
+      describe('after adititional value is selected', function() {
+        beforeEach(function() {
+          ctrl.selectValue(ctrl.options[2], {});
+          ctrl.commitChanges();
+        });
+
+        it('should update link text', function() {
+          expect(ctrl.linkText).to.be('server-1 + server-3');
+        });
+      });
+
       describe('When tag is selected', function() {
         beforeEach(function() {
           ctrl.selectTag(ctrl.tags[0]);
           rootScope.$digest();
+          ctrl.commitChanges();
         });
 
         it("should select tag", function() {
@@ -72,6 +94,11 @@ function () {
         it("should select values", function() {
           expect(ctrl.options[0].selected).to.be(true);
           expect(ctrl.options[2].selected).to.be(true);
+          expect(ctrl.linkText).to.be('server-1 + server-2');
+        });
+
+        it("link text should not include tag values", function() {
+          expect(ctrl.linkText).to.not.contain('server-1');
         });
 
         describe('and then dropdown is opened and closed without changes', function() {
@@ -99,7 +126,7 @@ function () {
 
         describe('and then value is unselected', function() {
           beforeEach(function() {
-            ctrl.optionSelected(ctrl.options[0]);
+            ctrl.selectValue(ctrl.options[0], {});
           });
 
           it("should deselect tag", function() {