Add instant comments support

app/assets/javascripts/behaviors/quick_submit.js

@@ -43,8 +43,8 @@ $(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
   const $submitButton = $form.find('input[type=submit], button[type=submit]');
 
   if (!$submitButton.attr('disabled')) {
+    $submitButton.trigger('click', [e]);
     $submitButton.disable();
-    $form.submit();
   }
 });
 

app/assets/javascripts/lib/utils/common_utils.js

@@ -35,6 +35,14 @@
       });
     };
 
+    w.gl.utils.ajaxPost = function(url, data) {
+      return $.ajax({
+        type: 'POST',
+        url: url,
+        data: data,
+      });
+    };
+
     w.gl.utils.extractLast = function(term) {
       return this.split(term).pop();
     };

app/assets/stylesheets/framework/animations.scss

@@ -159,3 +159,31 @@ a {
 .fade-in {
   animation: fadeIn $fade-in-duration 1;
 }
+
+@keyframes fadeInHalf {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0.5;
+  }
+}
+
+.fade-in-half {
+  animation: fadeInHalf $fade-in-duration 1;
+}
+
+@keyframes fadeInFull {
+  0% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in-full {
+  animation: fadeInFull $fade-in-duration 1;
+}

app/assets/stylesheets/pages/notes.scss

@@ -57,6 +57,25 @@ ul.notes {
     position: relative;
     border-bottom: 1px solid $white-normal;
 
+    &.being-posted {
+      pointer-events: none;
+      opacity: 0.5;
+
+      .dummy-avatar {
+        display: inline-block;
+        height: 40px;
+        width: 40px;
+        border-radius: 50%;
+        background-color: $kdb-border;
+        border: 1px solid darken($kdb-border, 25%);
+      }
+
+      .note-headline-light,
+      .fa-spinner {
+        margin-left: 3px;
+      }
+    }
+
     &.note-discussion {
       &.timeline-entry {
         padding: 14px 10px;
@@ -687,6 +706,10 @@ ul.notes {
   }
 }
 
+.discussion-notes .flash-container {
+  margin-bottom: 0;
+}
+
 // Merge request notes in diffs
 .diff-file {
   // Diff is side by side

app/views/discussions/_notes.html.haml

 .discussion-notes
   %ul.notes{ data: { discussion_id: discussion.id } }
     = render partial: "shared/notes/note", collection: discussion.notes, as: :note
+    .flash-container
 
   - if current_user
     .discussion-reply-holder

app/views/projects/notes/_edit_form.html.haml

@@ -9,6 +9,6 @@
     .note-form-actions.clearfix
       .settings-message.note-edit-warning.js-finish-edit-warning
         Finish editing this message first!
-      = submit_tag 'Save comment', class: 'btn btn-nr btn-save js-comment-button'
+      = submit_tag 'Save comment', class: 'btn btn-nr btn-save js-comment-save-button'
       %button.btn.btn-nr.btn-cancel.note-edit-cancel{ type: 'button' }
         Cancel

changelogs/unreleased/27614-instant-comments.yml

+---
+title: Add support for instantly updating comments
+merge_request: 10760
+author:

features/steps/project/merge_requests.rb

@@ -458,6 +458,8 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
       click_button "Comment"
     end
 
+    wait_for_ajax
+
     page.within ".files>div:nth-child(2) .note-body > .note-text" do
       expect(page).to have_content "Line is correct"
     end
@@ -470,6 +472,8 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
       fill_in "note_note", with: "Line is wrong on here"
       click_button "Comment"
     end
+
+    wait_for_ajax
   end
 
   step 'I should still see a comment like "Line is correct" in the second file' do
@@ -574,6 +578,9 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
       fill_in "note_note", with: message
       click_button "Comment"
     end
+
+    wait_for_ajax
+
     page.within(".notes_holder", visible: true) do
       expect(page).to have_content message
     end

features/steps/shared/note.rb

@@ -24,6 +24,8 @@ module SharedNote
       fill_in "note[note]", with: "XML attached"
       click_button "Comment"
     end
+
+    wait_for_ajax
   end
 
   step 'I preview a comment text like "Bug fixed :smile:"' do
@@ -37,6 +39,8 @@ module SharedNote
     page.within(".js-main-target-form") do
       click_button "Comment"
     end
+
+    wait_for_ajax
   end
 
   step 'I write a comment like ":+1: Nice"' do

spec/features/merge_requests/user_posts_notes_spec.rb

@@ -98,6 +98,7 @@ describe 'Merge requests > User posts notes', :js do
           find('.btn-save').click
         end
 
+        wait_for_ajax
         find('.note').hover
         find('.js-note-edit').click
 

spec/features/merge_requests/user_uses_slash_commands_spec.rb

@@ -160,6 +160,7 @@ feature 'Merge Requests > User uses slash commands', feature: true, js: true do
         it 'changes target branch from a note' do
           write_note("message start \n/target_branch merge-test\n message end.")
 
+          wait_for_ajax
           expect(page).not_to have_content('/target_branch')
           expect(page).to have_content('message start')
           expect(page).to have_content('message end.')

spec/javascripts/lib/utils/common_utils_spec.js

@@ -362,5 +362,16 @@ require('~/lib/utils/common_utils');
         gl.utils.setCiStatusFavicon(BUILD_URL);
       });
     });
+
+    describe('gl.utils.ajaxPost', () => {
+      it('should perform `$.ajax` call and do `POST` request', () => {
+        const requestURL = '/some/random/api';
+        const data = { keyname: 'value' };
+        const ajaxSpy = spyOn($, 'ajax').and.callFake(() => {});
+
+        gl.utils.ajaxPost(requestURL, data);
+        expect(ajaxSpy.calls.allArgs()[0][0].type).toEqual('POST');
+      });
+    });
   });
 })();

spec/support/features/issuable_slash_commands_shared_examples.rb

@@ -58,6 +58,7 @@ shared_examples 'issuable record that supports slash commands in its description
         expect(page).not_to have_content '/label ~bug'
         expect(page).not_to have_content '/milestone %"ASAP"'
 
+        wait_for_ajax
         issuable.reload
         note = issuable.notes.user.first
 

spec/support/time_tracking_shared_examples.rb

@@ -8,6 +8,7 @@ shared_examples 'issuable time tracker' do
   it 'updates the sidebar component when estimate is added' do
     submit_time('/estimate 3w 1d 1h')
 
+    wait_for_ajax
     page.within '.time-tracking-estimate-only-pane' do
       expect(page).to have_content '3w 1d 1h'
     end
@@ -16,6 +17,7 @@ shared_examples 'issuable time tracker' do
   it 'updates the sidebar component when spent is added' do
     submit_time('/spend 3w 1d 1h')
 
+    wait_for_ajax
     page.within '.time-tracking-spend-only-pane' do
       expect(page).to have_content '3w 1d 1h'
     end
@@ -25,6 +27,7 @@ shared_examples 'issuable time tracker' do
     submit_time('/estimate 3w 1d 1h')
     submit_time('/spend 3w 1d 1h')
 
+    wait_for_ajax
     page.within '.time-tracking-comparison-pane' do
       expect(page).to have_content '3w 1d 1h'
     end
@@ -34,6 +37,7 @@ shared_examples 'issuable time tracker' do
     submit_time('/estimate 3w 1d 1h')
     submit_time('/remove_estimate')
 
+    wait_for_ajax
     page.within '#issuable-time-tracker' do
       expect(page).to have_content 'No estimate or time spent'
     end
@@ -43,6 +47,7 @@ shared_examples 'issuable time tracker' do
     submit_time('/spend 3w 1d 1h')
     submit_time('/remove_time_spent')
 
+    wait_for_ajax
     page.within '#issuable-time-tracker' do
       expect(page).to have_content 'No estimate or time spent'
     end