Merge branch '53796-discard-draft-comment-button-to-easy-to-accidentally-hit-on-mobile' into 'master'

Resolve "Discard draft comment button to easy to accidentally hit on mobile"

Closes #53796

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

6 files changed, 10 insertions, 29 deletions

diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index f842d2d74db..f5e2e46237f 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -51,8 +51,6 @@ export default class GLForm {
     // form and textarea event listeners
     this.addEventListeners();
     addMarkdownListeners(this.form);
-    // hide discard button
-    this.form.find('.js-note-discard').hide();
     this.form.show();
     if (this.isAutosizeable) this.setupAutosize();
   }
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index dfb53c986fc..c3443c300e3 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -138,8 +138,6 @@ export default class Notes {
     this.$wrapperEl.on('click', '.js-note-delete', this.removeNote);
     // delete note attachment
     this.$wrapperEl.on('click', '.js-note-attachment-delete', this.removeAttachment);
-    // reset main target form when clicking discard
-    this.$wrapperEl.on('click', '.js-note-discard', this.resetMainTargetForm);
     // update the file name when an attachment is selected
     this.$wrapperEl.on('change', '.js-note-attachment-input', this.updateFormAttachment);
     // reply to diff/discussion notes
@@ -191,7 +189,6 @@ export default class Notes {
     this.$wrapperEl.off('keyup input', '.js-note-text');
     this.$wrapperEl.off('click', '.js-note-target-reopen');
     this.$wrapperEl.off('click', '.js-note-target-close');
-    this.$wrapperEl.off('click', '.js-note-discard');
     this.$wrapperEl.off('keydown', '.js-note-text');
     this.$wrapperEl.off('click', '.js-comment-resolve-button');
     this.$wrapperEl.off('click', '.system-note-commit-list-toggler');
@@ -986,11 +983,9 @@ export default class Notes {
     form.find('#note_position').val(dataHolder.attr('data-position'));
 
     form
-      .find('.js-note-discard')
+      .find('.js-close-discussion-note-form')
       .show()
-      .removeClass('js-note-discard')
-      .addClass('js-close-discussion-note-form')
-      .text(form.find('.js-close-discussion-note-form').data('cancelText'));
+      .removeClass('hide');
     form.find('.js-note-target-close').remove();
     form.find('.js-note-new-discussion').remove();
     this.setupNoteForm(form);
@@ -1194,12 +1189,11 @@ export default class Notes {
   }
 
   updateTargetButtons(e) {
-    var closebtn, closetext, discardbtn, form, reopenbtn, reopentext, textarea;
+    var closebtn, closetext, form, reopenbtn, reopentext, textarea;
     textarea = $(e.target);
     form = textarea.parents('form');
     reopenbtn = form.find('.js-note-target-reopen');
     closebtn = form.find('.js-note-target-close');
-    discardbtn = form.find('.js-note-discard');
 
     if (textarea.val().trim().length > 0) {
       reopentext = reopenbtn.attr('data-alternative-text');
@@ -1216,9 +1210,6 @@ export default class Notes {
       if (closebtn.is(':not(.btn-comment-and-close)')) {
         closebtn.addClass('btn-comment-and-close');
       }
-      if (discardbtn.is(':hidden')) {
-        return discardbtn.show();
-      }
     } else {
       reopentext = reopenbtn.data('originalText');
       closetext = closebtn.data('originalText');
@@ -1234,9 +1225,6 @@ export default class Notes {
       if (closebtn.is('.btn-comment-and-close')) {
         closebtn.removeClass('btn-comment-and-close');
       }
-      if (discardbtn.is(':visible')) {
-        return discardbtn.hide();
-      }
     }
   }
 
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index ce56beb1e6b..8bf02327cd2 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -431,15 +431,6 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                 :label="issueActionButtonTitle"
                 @click="handleSave(true);"
               />
-
-              <button
-                v-if="note.length"
-                type="button"
-                class="btn btn-cancel js-note-discard"
-                @click="discard"
-              >
-                Discard draft
-              </button>
             </div>
           </form>
         </div>
diff --git a/app/views/shared/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index c360f1ffe2a..493c6241257 100644
--- a/app/views/shared/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -40,5 +40,5 @@
 
       = yield(:note_actions)
 
-      %a.btn.btn-cancel.js-note-discard{ role: "button", data: {cancel_text: "Cancel" } }
-        Discard draft
+      %a.btn.btn-cancel.js-close-discussion-note-form.hide{ role: "button", data: {cancel_text: "Cancel" } }
+        Cancel
diff --git a/changelogs/unreleased/53796-discard-draft-comment-button-to-easy-to-accidentally-hit-on-mobile.yml b/changelogs/unreleased/53796-discard-draft-comment-button-to-easy-to-accidentally-hit-on-mobile.yml
new file mode 100644
index 00000000000..083b5f21a52
--- /dev/null
+++ b/changelogs/unreleased/53796-discard-draft-comment-button-to-easy-to-accidentally-hit-on-mobile.yml
@@ -0,0 +1,5 @@
+---
+title: Removed discard draft comment button form notes
+merge_request: 24185
+author:
+type: removed
diff --git a/spec/javascripts/notes/components/comment_form_spec.js b/spec/javascripts/notes/components/comment_form_spec.js
index 3c57fe51352..362963ddaf4 100644
--- a/spec/javascripts/notes/components/comment_form_spec.js
+++ b/spec/javascripts/notes/components/comment_form_spec.js
@@ -223,7 +223,6 @@ describe('issue_comment_form component', () => {
             'Comment & close issue',
           );
 
-          expect(vm.$el.querySelector('.js-note-discard')).toBeDefined();
           done();
         });
       });