Send ajax request for label update only if they are changed (#19472 !5071)

CHANGELOG

@@ -3,6 +3,7 @@ Please view this file on the master branch, on stable branches it's out of date.
 v 8.13.0 (unreleased)
   - Speed-up group milestones show page
   - Fix robots.txt disallowing access to groups starting with "s" (Matt Harrison)
+  - Only update issuable labels if they have been changed
   - Revoke button in Applications Settings underlines on hover.
   - Add organization field to user profile

app/assets/javascripts/labels_select.js

@@ -4,7 +4,7 @@
       var _this;
       _this = this;
       $('.js-label-select').each(function(i, dropdown) {
-        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip;
+        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected;
         $dropdown = $(dropdown);
         projectId = $dropdown.data('project-id');
         labelUrl = $dropdown.data('labels');
@@ -24,6 +24,11 @@
         $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
         $value = $block.find('.value');
         $loading = $block.find('.block-loading').fadeOut();
+        initialSelected = $selectbox
+          .find('input[name="' + $dropdown.data('field-name') + '"]')
+          .map(function () {
+            return this.value;
+          }).get();
         if (issueUpdateURL != null) {
           issueURLSplit = issueUpdateURL.split('/');
         }
@@ -43,6 +48,10 @@
           selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").map(function() {
             return this.value;
           }).get();
+
+          if (_.isEqual(initialSelected, selected)) return;
+          initialSelected = selected;
+
           data = {};
           data[abilityName] = {};
           data[abilityName].label_ids = selected;

spec/features/issues_spec.rb

@@ -369,6 +369,24 @@ describe 'Issues', feature: true do
     end
   end
+  describe 'update labels from issue#show', js: true do
+    let(:issue) { create(:issue, project: project, author: @user, assignee: @user) }
+    let!(:label) { create(:label, project: project) }
+
+    before do
+      visit namespace_project_issue_path(project.namespace, project, issue)
+    end
+
+    it 'will not send ajax request when no data is changed' do
+      page.within '.labels' do
+        click_link 'Edit'
+        first('.dropdown-menu-close').click
+
+        expect(page).not_to have_selector('.block-loading')
+      end
+    end
+  end
+
   describe 'update assignee from issue#show' do
     let(:issue) { create(:issue, project: project, author: @user, assignee: @user) }

spec/javascripts/labels_issue_sidebar_spec.js.es6

@@ -48,9 +48,9 @@
       setTimeout(() => {
         expect($('.dropdown-content a').length).toBe(10);
-        $('.dropdow-content a').each((i, $link) => {
-          if (i < 5) {
-            $link.get(0).click();
+        $('.dropdown-content a').each(function (i) {
+          if (i < saveLabelCount) {
+            $(this).get(0).click();
           }
         });
@@ -70,9 +70,9 @@
       setTimeout(() => {
         expect($('.dropdown-content a').length).toBe(10);
-        $('.dropdow-content a').each((i, $link) => {
-          if (i < 5) {
-            $link.get(0).click();
+        $('.dropdown-content a').each(function (i) {
+          if (i < saveLabelCount) {
+            $(this).get(0).click();
           }
         });
@@ -86,4 +86,3 @@
     });
   });
 })();
-