Improve issuable's bulk assignment implementation

This fixes the case when the user wants to add a label. The user has to use the dropdown’s filter input to look for a label and click it in order to see the bug.

Step to reproduce

- Select at least two issues, one label should be present in all issues, other label should be present in at least one.

- On the label dropdown: Deselect label that is present in all issues, look for another issue using the filter input and click it.

- Click on `Update issues`

Before: Unmarked label were kept on selected issues.
Now: Unmarked label is removed from selected issues

1 files changed, 52 insertions, 40 deletions

diff --git a/app/assets/javascripts/issues_bulk_assignment.js.es6 b/app/assets/javascripts/issues_bulk_assignment.js.es6
index 9697fb33566..8c0eaac8924 100644
--- a/app/assets/javascripts/issues_bulk_assignment.js.es6
+++ b/app/assets/javascripts/issues_bulk_assignment.js.es6
@@ -2,9 +2,10 @@
 ((global) => {
 
   class IssuableBulkActions {
-    constructor({ container, form, issues } = {}) {
-      this.container = container || $('.content'),
+    constructor({ container, form, issues, page } = {}) {
+      this.prefixId = page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_';
       this.form = form || this.getElement('.bulk-update');
+      this.$labelDropdown = this.form.find('.js-label-select');
       this.issues = issues || this.getElement('.issues-list .issue');
       this.form.data('bulkActions', this);
       this.willUpdateLabels = false;
@@ -13,10 +14,6 @@
       Issuable.initChecks();
     }
 
-    getElement(selector) {
-      return this.container.find(selector);
-    }
-
     bindEvents() {
       return this.form.off('submit').on('submit', this.onFormSubmit.bind(this));
     }
@@ -70,10 +67,7 @@
 
     getUnmarkedIndeterminedLabels() {
       const result = [];
-      const labelsToKeep = [];
-
-      this.getElement('.labels-filter .is-indeterminate')
-        .each((i, el) => labelsToKeep.push($(el).data('labelId')));
+      const labelsToKeep = this.$labelDropdown.data('indeterminate');
 
       this.getLabelsFromSelection().forEach((id) => {
         if (labelsToKeep.indexOf(id) === -1) {
@@ -103,45 +97,63 @@
         }
       };
       if (this.willUpdateLabels) {
-        this.getLabelsToApply().map(function(id) {
-          return formData.update.add_label_ids.push(id);
-        });
-        this.getLabelsToRemove().map(function(id) {
-          return formData.update.remove_label_ids.push(id);
-        });
+        formData.update.add_label_ids = this.$labelDropdown.data('marked');
+        formData.update.remove_label_ids = this.$labelDropdown.data('unmarked');
       }
       return formData;
     }
 
-    getLabelsToApply() {
-      const labelIds = [];
-      const $labels = this.form.find('.labels-filter input[name="update[label_ids][]"]');
-      $labels.each(function(k, label) {
-        if (label) {
-          return labelIds.push(parseInt($(label).val()));
-        }
-      });
-      return labelIds;
+    setOriginalDropdownData() {
+      $('.bulk-update .js-label-select').data('common', this.getOriginalCommonIds());
+      $('.bulk-update .js-label-select').data('marked', this.getOriginalMarkedIds());
+      $('.bulk-update .js-label-select').data('indeterminate', this.getOriginalIndeterminateIds());
     }
 
+    // From issuable's initial bulk selection
+    getOriginalCommonIds() {
+      let labelIds = [];
 
-    /**
-     * Returns Label IDs that will be removed from issue selection
-     * @return {Array} Array of labels IDs
-     */
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
+      });
+      return _.intersection.apply(this, labelIds);
+    }
 
-    getLabelsToRemove() {
-      const result = [];
-      const indeterminatedLabels = this.getUnmarkedIndeterminedLabels();
-      const labelsToApply = this.getLabelsToApply();
-      indeterminatedLabels.map(function(id) {
-        // We need to exclude label IDs that will be applied
-        // By not doing this will cause issues from selection to not add labels at all
-        if (labelsToApply.indexOf(id) === -1) {
-          return result.push(id);
-        }
+    // From issuable's initial bulk selection
+    getOriginalMarkedIds() {
+      var labelIds = [];
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
       });
-      return result;
+      return _.intersection.apply(_, labelIds);
+    }
+
+    // From issuable's initial bulk selection
+    getOriginalIndeterminateIds() {
+      let uniqueIds = [];
+      let labelIds = [];
+      let issuableLabels = [];
+
+      // Collect unique label IDs for all checked issues
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        issuableLabels = this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels');
+        issuableLabels.forEach((labelId) => {
+          // Store unique IDs
+          if (uniqueIds.indexOf(labelId) === -1) {
+            uniqueIds.push(labelId);
+          }
+        });
+        // Store array of IDs per issuable
+        labelIds.push(issuableLabels);
+      });
+      // Add uniqueIds to add it as argument for _.intersection
+      labelIds.unshift(uniqueIds);
+      // Return IDs that are present but not in all selected issueables
+      return _.difference(uniqueIds, _.intersection.apply(this, labelIds));
+    }
+
+    getElement(selector) {
+      return $('.content').find(selector);
     }
   }