Merge branch 'fix-textarea-expansion' into 'master'

Add textarea autoresize after comment

## What does this MR do?
Adds an autoresize after a comment is posted

## Are there points in the code the reviewer needs to double check?
Shouldn't be

## Why was this MR needed?
To keep the UI consistent (the same as if you were to refresh it)

## Screenshots (if relevant)
Before:
![IyCczzXfaf](/uploads/2229bad47e3f3821f1efaa6868a52025/IyCczzXfaf.gif)

After:
![E6O0kRBrJq](/uploads/4aec6b436ff172ba281c2c2a4481906d/E6O0kRBrJq.gif)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #21667

See merge request !6152

CHANGELOG

@@ -24,6 +24,7 @@ v 8.12.0 (unreleased)
   - Remove suggested colors hover underline (ClemMakesApps)
   - Shorten task status phrase (ClemMakesApps)
   - Add hover color to emoji icon (ClemMakesApps)
+  - Add textarea autoresize after comment (ClemMakesApps)
   - Fix branches page dropdown sort alignment (ClemMakesApps)
   - Add white background for no readme container (ClemMakesApps)
   - API: Expose issue confidentiality flag. (Robert Schilling)

app/assets/javascripts/notes.js

@@ -331,7 +331,12 @@
       form.find(".js-md-write-button").click();
       form.find(".js-note-text").val("").trigger("input");
       form.find(".js-note-text").data("autosave").reset();
-      return this.updateTargetButtons(e);
+
+      var event = document.createEvent('Event');
+      event.initEvent('autosize:update', true, false);
+      form.find('.js-autosize')[0].dispatchEvent(event);
+
+      this.updateTargetButtons(e);
     };
 
     Notes.prototype.reenableTargetFormSubmitButton = function() {

spec/javascripts/fixtures/comments.html.haml

@@ -0,0 +1,21 @@
+.flash-container.timeline-content
+.timeline-icon.hidden-xs.hidden-sm
+  %a.author_link
+    %img
+.timeline-content.timeline-content-form
+  %form.new-note.js-quick-submit.common-note-form.gfm-form.js-main-target-form
+    .md-area
+      .md-header
+      .md-write-holder
+        .zen-backdrop.div-dropzone-wrapper
+          .div-dropzone-wrapper
+            .div-dropzone.dz-clickable
+              %textarea.note-textarea.js-note-text.js-gfm-input.js-autosize.markdown-area
+    .note-form-actions.clearfix
+      %input.btn.btn-nr.btn-create.append-right-10.comment-btn.js-comment-button{ type: 'submit' }
+      %a.btn.btn-nr.btn-reopen.btn-comment.js-note-target-reopen
+        Reopen issue
+      %a.btn.btn-nr.btn-close.btn-comment.js-note-target-close
+        Close issue
+      %a.btn.btn-cancel.js-note-discard
+        Discard draft

spec/javascripts/notes_spec.js

@@ -1,8 +1,7 @@
-
 /*= require notes */
-
-
+/*= require autosize */
 /*= require gl_form */
+/*= require lib/utils/text_utility */
 
 (function() {
   window.gon || (window.gon = {});
@@ -12,30 +11,64 @@
   };
 
   describe('Notes', function() {
-    return describe('task lists', function() {
+    describe('task lists', function() {
       fixture.preload('issue_note.html');
+
       beforeEach(function() {
         fixture.load('issue_note.html');
         $('form').on('submit', function(e) {
-          return e.preventDefault();
+          e.preventDefault();
         });
-        return this.notes = new Notes();
+        this.notes = new Notes();
       });
+
       it('modifies the Markdown field', function() {
         $('input[type=checkbox]').attr('checked', true).trigger('change');
-        return expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
+        expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
       });
-      return it('submits the form on tasklist:changed', function() {
-        var submitted;
-        submitted = false;
+
+      it('submits the form on tasklist:changed', function() {
+        var submitted = false;
         $('form').on('submit', function(e) {
           submitted = true;
-          return e.preventDefault();
+          e.preventDefault();
         });
+
         $('.js-task-list-field').trigger('tasklist:changed');
-        return expect(submitted).toBe(true);
+        expect(submitted).toBe(true);
       });
     });
+
+    describe('comments', function() {
+      var commentsTemplate = 'comments.html';
+      var textarea = '.js-note-text';
+      fixture.preload(commentsTemplate);
+
+      beforeEach(function() {
+        fixture.load(commentsTemplate);
+        this.notes = new Notes();
+
+        this.autoSizeSpy = spyOnEvent($(textarea), 'autosize:update');
+        spyOn(this.notes, 'renderNote').and.stub();
+
+        $(textarea).data('autosave', {
+          reset: function() {}
+        });
+
+        $('form').on('submit', function(e) {
+          e.preventDefault();
+          $('.js-main-target-form').trigger('ajax:success');
+        });
+      });
+
+      it('autosizes after comment submission', function() {
+        $(textarea).text('This is an example comment note');
+        expect(this.autoSizeSpy).not.toHaveBeenTriggered();
+
+        $('.js-comment-button').click();
+        expect(this.autoSizeSpy).toHaveBeenTriggered();
+      })
+    });
   });
 
 }).call(this);