Merge branch 'single-edit-comment-widget-2' into 'master'

Refactor discussion edit widget to have only one at a time.

Closes #23227

See merge request !8356

5 files changed, 142 insertions, 50 deletions

diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index 7dc2d13e5d8..04814fa0843 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -35,8 +35,8 @@
         autosize(this.textarea);
         // form and textarea event listeners
         this.addEventListeners();
-        gl.text.init(this.form);
       }
+      gl.text.init(this.form);
       // hide discard button
       this.form.find('.js-note-discard').hide();
       return this.form.show();
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 0a0e73e0ccc..31a71379af3 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -106,8 +106,9 @@
       );
     };
 
-    gl.utils.getPagePath = function() {
-      return $('body').data('page').split(':')[0];
+    gl.utils.getPagePath = function(index) {
+      index = index || 0;
+      return $('body').data('page').split(':')[index];
     };
 
     gl.utils.parseUrl = function (url) {
@@ -127,6 +128,17 @@
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };
 
+    gl.utils.scrollToElement = function($el) {
+      var top = $el.offset().top;
+      gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height();
+      gl.navLinksHeight = gl.navLinksHeight || $('.nav-links').height();
+      gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height();
+
+      return $('body, html').animate({
+        scrollTop: top - (gl.navBarHeight + gl.navLinksHeight + gl.mrTabsHeight)
+      }, 200);
+    };
+
   })(window);
 
 }).call(this);
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index a8b9a352870..8de5a6191b6 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -52,6 +52,12 @@
       this.setupMainTargetNoteForm();
       this.initTaskList();
       this.collapseLongCommitList();
+
+      // We are in the Merge Requests page so we need another edit form for Changes tab
+      if (gl.utils.getPagePath(1) === 'merge_requests') {
+        $('.note-edit-form').clone()
+          .addClass('mr-note-edit-form').insertAfter('.note-edit-form');
+      }
     }
 
     Notes.prototype.addBinding = function() {
@@ -63,7 +69,7 @@
       // change note in UI after update
       $(document).on("ajax:success", "form.edit-note", this.updateNote);
       // Edit note link
-      $(document).on("click", ".js-note-edit", this.showEditForm);
+      $(document).on("click", ".js-note-edit", this.showEditForm.bind(this));
       $(document).on("click", ".note-edit-cancel", this.cancelEdit);
       // Reopen and close actions for Issue/MR combined with note form submit
       $(document).on("click", ".js-comment-button", this.updateCloseButton);
@@ -466,6 +472,7 @@
       var $html, $note_li;
       // Convert returned HTML to a jQuery object so we can modify it further
       $html = $(note.html);
+      this.revertNoteEditForm();
       gl.utils.localTimeAgo($('.js-timeago', $html));
       $html.renderGFM();
       $html.find('.js-task-list-container').taskList('enable');
@@ -480,48 +487,56 @@
     };
 
 
+    Notes.prototype.checkContentToAllowEditing = function($el) {
+      var initialContent = $el.find('.original-note-content').text().trim();
+      var currentContent = $el.find('.note-textarea').val();
+      var isAllowed = true;
+
+      if (currentContent === initialContent) {
+        this.removeNoteEditForm($el);
+      }
+      else {
+        var $buttons = $el.find('.note-form-actions');
+        var isWidgetVisible = gl.utils.isInViewport($el.get(0));
+
+        if (!isWidgetVisible) {
+          gl.utils.scrollToElement($el);
+        }
+
+        $el.find('.js-edit-warning').show();
+        isAllowed = false;
+      }
+
+      return isAllowed;
+    }
+
+
     /*
     Called in response to clicking the edit note link
 
     Replaces the note text with the note edit form
     Adds a data attribute to the form with the original content of the note for cancellations
-     */
-
+    */
     Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) {
-      var $noteText, done, form, note;
       e.preventDefault();
-      note = $(this).closest(".note");
-      note.addClass("is-editting");
-      form = note.find(".note-edit-form");
-      form.addClass('current-note-edit-form');
-      // Show the attachment delete link
-      note.find(".js-note-attachment-delete").show();
-      done = function($noteText) {
-        var noteTextVal;
-        // Neat little trick to put the cursor at the end
-        noteTextVal = $noteText.val();
-        // Store the original note text in a data attribute to retrieve if a user cancels edit.
-        form.find('form.edit-note').data('original-note', noteTextVal);
-        return $noteText.val('').val(noteTextVal);
-      };
-      new GLForm(form);
-      if ((scrollTo != null) && (myLastNote != null)) {
-        // scroll to the bottom
-        // so the open of the last element doesn't make a jump
-        $('html, body').scrollTop($(document).height());
-        return $('html, body').animate({
-          scrollTop: myLastNote.offset().top - 150
-        }, 500, function() {
-          var $noteText;
-          $noteText = form.find(".js-note-text");
-          $noteText.focus();
-          return done($noteText);
-        });
-      } else {
-        $noteText = form.find('.js-note-text');
-        $noteText.focus();
-        return done($noteText);
+
+      var $target = $(e.target);
+      var $editForm = $(this.getEditFormSelector($target));
+      var $note = $target.closest('.note');
+      var $currentlyEditing = $('.note.is-editting:visible');
+
+      if ($currentlyEditing.length) {
+        var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
+
+        if (!isEditAllowed) {
+          return;
+        }
       }
+
+      $note.find('.js-note-attachment-delete').show();
+      $editForm.addClass('current-note-edit-form');
+      $note.addClass('is-editting');
+      this.putEditFormInPlace($target);
     };
 
 
@@ -532,19 +547,41 @@
      */
 
     Notes.prototype.cancelEdit = function(e) {
-      var note;
       e.preventDefault();
-      note = $(e.target).closest('.note');
+      var $target = $(e.target);
+      var note = $target.closest('.note');
+      note.find('.js-edit-warning').hide();
+      this.revertNoteEditForm($target);
       return this.removeNoteEditForm(note);
     };
 
+    Notes.prototype.revertNoteEditForm = function($target) {
+      $target = $target || $('.note.is-editting:visible');
+      var selector = this.getEditFormSelector($target);
+      var $editForm = $(selector);
+
+      $editForm.insertBefore('.notes-form');
+      $editForm.find('.js-comment-button').enable();
+      $editForm.find('.js-edit-warning').hide();
+    };
+
+    Notes.prototype.getEditFormSelector = function($el) {
+      var selector = '.note-edit-form:not(.mr-note-edit-form)';
+
+      if ($el.parents('#diffs').length) {
+        selector = '.note-edit-form.mr-note-edit-form';
+      }
+
+      return selector;
+    };
+
     Notes.prototype.removeNoteEditForm = function(note) {
-      var form;
-      form = note.find(".current-note-edit-form");
-      note.removeClass("is-editting");
-      form.removeClass("current-note-edit-form");
+      var form = note.find('.current-note-edit-form');
+      note.removeClass('is-editting');
+      form.removeClass('current-note-edit-form');
+      form.find('.js-edit-warning').hide();
       // Replace markdown textarea text with original note text.
-      return form.find(".js-note-text").val(form.find('form.edit-note').data('original-note'));
+      return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note'));
     };
 
 
@@ -837,15 +874,44 @@
 
     Notes.prototype.initTaskList = function() {
       this.enableTaskList();
-      return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList);
+      return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList.bind(this));
     };
 
     Notes.prototype.enableTaskList = function() {
       return $('.note .js-task-list-container').taskList('enable');
     };
 
-    Notes.prototype.updateTaskList = function() {
-      return $('form', this).submit();
+    Notes.prototype.putEditFormInPlace = function($el) {
+      var $editForm = $(this.getEditFormSelector($el));
+      var $note = $el.closest('.note');
+
+      $editForm.insertAfter($note.find('.note-text'));
+
+      var $originalContentEl = $note.find('.original-note-content');
+      var originalContent = $originalContentEl.text().trim();
+      var postUrl = $originalContentEl.data('post-url');
+      var targetId = $originalContentEl.data('target-id');
+      var targetType = $originalContentEl.data('target-type');
+
+      new GLForm($editForm.find('form'));
+
+      $editForm.find('form').attr('action', postUrl);
+      $editForm.find('.js-form-target-id').val(targetId);
+      $editForm.find('.js-form-target-type').val(targetType);
+      $editForm.find('.js-note-text').focus().val(originalContent);
+      $editForm.find('.js-md-write-button').trigger('click');
+      $editForm.find('.referenced-users').hide();
+    }
+
+    Notes.prototype.updateTaskList = function(e) {
+      var $target = $(e.target);
+      var $list = $target.closest('.js-task-list-container');
+      var $editForm = $(this.getEditFormSelector($target));
+      var $note = $list.closest('.note');
+
+      this.putEditFormInPlace($list);
+      $editForm.find('#note_note').val($note.find('.original-task-list').val());
+      $('form', $list).submit();
     };
 
     Notes.prototype.updateNotesCount = function(updateCount) {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 9f1c6a8a264..f984b469609 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -27,6 +27,7 @@
 .new-note,
 .note-edit-form {
   .note-form-actions {
+    position: relative;
     margin-top: $gl-padding;
   }
 
@@ -265,3 +266,18 @@
     }
   }
 }
+
+.note-edit-warning.settings-message {
+  display: none;
+  padding: 5px 10px;
+  position: absolute;
+  left: 127px;
+  top: 2px;
+
+  @media (max-width: $screen-xs-max) {
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 38c548908f8..ad4c31ca29e 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -588,13 +588,11 @@ ul.notes {
 
 // Merge request notes in diffs
 .diff-file {
-
   // Diff is side by side
   .notes_content.parallel .note-header .note-headline-light {
     display: block;
     position: relative;
   }
-
   // Diff is inline
   .notes_content .note-header .note-headline-light {
     display: inline-block;