Merge branch 'disable-btn-mr-when-posting-comment' into 'master'

Disables the button when submitting comment.

Closes #39661

See merge request gitlab-org/gitlab-ce!17918

app/assets/javascripts/notes.js

@@ -1727,6 +1727,7 @@ export default class Notes {
     // Get Form metadata
     const $submitBtn = $(e.target);
+    $submitBtn.prop('disabled', true);
     let $form = $submitBtn.parents('form');
     const $closeBtn = $form.find('.js-note-target-close');
     const isDiscussionNote =
@@ -1761,7 +1762,6 @@ export default class Notes {
     // If comment is to resolve discussion, disable submit buttons while
     // comment posting is finished.
     if (isDiscussionResolve) {
-      $submitBtn.disable();
       $form.find('.js-comment-submit-button').disable();
     }
@@ -1816,6 +1816,7 @@ export default class Notes {
       .then(res => {
         const note = res.data;
+        $submitBtn.prop('disabled', false);
         // Submission successful! remove placeholder
         $notesContainer.find(`#${noteUniqueId}`).remove();
@@ -1899,7 +1900,7 @@ export default class Notes {
       .catch(() => {
         // Submission failed, remove placeholder note and show Flash error message
         $notesContainer.find(`#${noteUniqueId}`).remove();
-
+        $submitBtn.prop('disabled', false);
         const blurEvent = new CustomEvent('blur.imageDiff', {
           detail: e,
         });

spec/javascripts/notes_spec.js

@@ -549,6 +549,20 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
         });
       });
+      it('should disable the submit button when comment button is clicked', (done) => {
+        expect($form.find('.js-comment-submit-button').is(':disabled')).toEqual(false);
+
+        mockNotesPost();
+        $('.js-comment-button').click();
+        expect($form.find('.js-comment-submit-button').is(':disabled')).toEqual(true);
+
+        setTimeout(() => {
+          expect($form.find('.js-comment-submit-button').is(':disabled')).toEqual(false);
+
+          done();
+        });
+      });
+
       it('should show actual note element when new comment is done posting', (done) => {
         mockNotesPost();