Merge branch '24877-bulk-edit-only-keeps-common-labels-when-searching' into 'master'

Improve bulk assignment

This MR improves current implementation of Label dropdown when used for bulk assignment on issuable pages (/:namespace/:project/issues, /:namespace/:project/merge_requests)

Previously this dropdown relied on `<input>` tags to get its active items and also to calculate items with indeterminate state.

Relying on `<input>` tags is not enough when we want to set/get multiple states on a dropdown.

For this case we want to get/set:

- Marked items 
- Unmarked items that were initially marked
- Unmarked items that were initially indeterminate
- Items with indeterminate state.

This MR makes the Label dropdown to save its own state as `data` so it will be easy to get and set whatever state we want no matter if the dropdown is filtering which is the issue that I initially wanted to solve as you can see in the following gif.

**Before** 
![2016-12-07_11.44.48](/uploads/cb697161b8b39cdee72fdbb95a531100/2016-12-07_11.44.48.gif)

**After**
![2016-12-07_11.32.43](/uploads/338255a302de0dd1367474f33232d2a3/2016-12-07_11.32.43.gif)

As you can see in the first gif the `bug` label is removed from the selected issues but the `enhancement` label should set but the `critical` should be kept. This is fixed on the next gif.

Fixes #24877

See merge request !7765

1 files changed, 9 insertions, 17 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 68a345d83f9..57dabfe05e4 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -23,7 +23,6 @@
       this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
       $inputContainer = this.input.parent();
       $clearButton = $inputContainer.find('.js-dropdown-input-clear');
-      this.indeterminateIds = [];
       $clearButton.on('click', (function(_this) {
         // Clear click
         return function(e) {
@@ -348,12 +347,12 @@
           $el = $(this);
           selected = self.rowClicked($el);
           if (self.options.clicked) {
-            self.options.clicked(selected, $el, e);
+            self.options.clicked(selected[0], $el, e, selected[1]);
           }
 
           // Update label right after all modifications in dropdown has been done
           if (self.options.toggleLabel) {
-            self.updateLabel(selected, $el, self);
+            self.updateLabel(selected[0], $el, self);
           }
 
           $el.trigger('blur');
@@ -444,12 +443,6 @@
       this.resetRows();
       this.addArrowKeyEvent();
 
-      if (this.options.setIndeterminateIds) {
-        this.options.setIndeterminateIds.call(this);
-      }
-      if (this.options.setActiveIds) {
-        this.options.setActiveIds.call(this);
-      }
       // Makes indeterminate items effective
       if (this.fullData && this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
         this.parseData(this.fullData);
@@ -483,11 +476,6 @@
       if (this.options.filterable) {
         $input.blur().val("");
       }
-      // Triggering 'keyup' will re-render the dropdown which is not always required
-      // specially if we want to keep the state of the dropdown needed for bulk-assignment
-      if (!this.options.persistWhenHide) {
-        $input.trigger("input");
-      }
       if (this.dropdown.find(".dropdown-toggle-page").length) {
         $('.dropdown-menu', this.dropdown).removeClass(PAGE_TWO_CLASS);
       }
@@ -620,7 +608,8 @@
     };
 
     GitLabDropdown.prototype.rowClicked = function(el) {
-      var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value;
+      var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value, isMarking;
+
       fieldName = this.options.fieldName;
       isInput = $(this.el).is('input');
       if (this.renderedData) {
@@ -641,7 +630,7 @@
           el.addClass(ACTIVE_CLASS);
         }
 
-        return selectedObject;
+        return [selectedObject];
       }
 
       field = [];
@@ -659,6 +648,7 @@
       }
 
       if (el.hasClass(ACTIVE_CLASS)) {
+        isMarking = false;
         el.removeClass(ACTIVE_CLASS);
         if (field && field.length) {
           if (isInput) {
@@ -668,6 +658,7 @@
           }
         }
       } else if (el.hasClass(INDETERMINATE_CLASS)) {
+        isMarking = true;
         el.addClass(ACTIVE_CLASS);
         el.removeClass(INDETERMINATE_CLASS);
         if (field && field.length && value == null) {
@@ -677,6 +668,7 @@
           this.addInput(fieldName, value, selectedObject);
         }
       } else {
+        isMarking = true;
         if (!this.options.multiSelect || el.hasClass('dropdown-clear-active')) {
           this.dropdown.find("." + ACTIVE_CLASS).removeClass(ACTIVE_CLASS);
           if (!isInput) {
@@ -697,7 +689,7 @@
         }
       }
 
-      return selectedObject;
+      return [selectedObject, isMarking];
     };
 
     GitLabDropdown.prototype.focusTextInput = function() {