Merge branch 'acet-disabled-comment-textarea-while-requesting' into 'master'

Disable comment textarea while submitting a new comment.

Closes #37858

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

2 files changed, 41 insertions, 0 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index fa7ac994058..1a7da84a424 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -272,6 +272,7 @@
                   v-model="note"
                   ref="textarea"
                   slot="textarea"
+                  :disabled="isSubmitting"
                   placeholder="Write a comment or drag your files here..."
                   @keydown.up="editCurrentUserLastNote()"
                   @keydown.meta.enter="handleSave()">
diff --git a/spec/javascripts/notes/components/issue_comment_form_spec.js b/spec/javascripts/notes/components/issue_comment_form_spec.js
index 1c8b1b98242..3f659af5c3b 100644
--- a/spec/javascripts/notes/components/issue_comment_form_spec.js
+++ b/spec/javascripts/notes/components/issue_comment_form_spec.js
@@ -33,6 +33,30 @@ describe('issue_comment_form component', () => {
       expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
     });
 
+    describe('handleSave', () => {
+      it('should request to save note when note is entered', () => {
+        vm.note = 'hello world';
+        spyOn(vm, 'saveNote').and.returnValue(new Promise(() => {}));
+        spyOn(vm, 'resizeTextarea');
+        spyOn(vm, 'stopPolling');
+
+        vm.handleSave();
+        expect(vm.isSubmitting).toEqual(true);
+        expect(vm.note).toEqual('');
+        expect(vm.saveNote).toHaveBeenCalled();
+        expect(vm.stopPolling).toHaveBeenCalled();
+        expect(vm.resizeTextarea).toHaveBeenCalled();
+      });
+
+      it('should toggle issue state when no note', () => {
+        spyOn(vm, 'toggleIssueState');
+
+        vm.handleSave();
+
+        expect(vm.toggleIssueState).toHaveBeenCalled();
+      });
+    });
+
     describe('textarea', () => {
       it('should render textarea with placeholder', () => {
         expect(
@@ -40,6 +64,22 @@ describe('issue_comment_form component', () => {
         ).toEqual('Write a comment or drag your files here...');
       });
 
+      it('should make textarea disabled while requesting', (done) => {
+        const $submitButton = $(vm.$el.querySelector('.js-comment-submit-button'));
+        vm.note = 'hello world';
+        spyOn(vm, 'stopPolling');
+        spyOn(vm, 'saveNote').and.returnValue(new Promise(() => {}));
+
+        vm.$nextTick(() => { // Wait for vm.note change triggered. It should enable $submitButton.
+          $submitButton.trigger('click');
+
+          vm.$nextTick(() => { // Wait for vm.isSubmitting triggered. It should disable textarea.
+            expect(vm.$el.querySelector('.js-main-target-form textarea').disabled).toBeTruthy();
+            done();
+          });
+        });
+      });
+
       it('should support quick actions', () => {
         expect(
           vm.$el.querySelector('.js-main-target-form textarea').getAttribute('data-supports-quick-actions'),