1 files changed, 36 insertions, 41 deletions

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 72d7e22fba0..c6a524f68cb 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -7,10 +7,7 @@ import { __, sprintf } from '~/locale';
 import Flash from '../../flash';
 import Autosave from '../../autosave';
 import TaskList from '../../task_list';
-import {
-  capitalizeFirstCharacter,
-  convertToCamelCase,
-} from '../../lib/utils/text_utility';
+import { capitalizeFirstCharacter, convertToCamelCase, splitCamelCase } from '../../lib/utils/text_utility';
 import * as constants from '../constants';
 import eventHub from '../event_hub';
 import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
@@ -56,21 +53,23 @@ export default {
     ]),
     ...mapState(['isToggleStateButtonLoading']),
     noteableDisplayName() {
-      return this.noteableType.replace(/_/g, ' ');
+      return splitCamelCase(this.noteableType).toLowerCase();
     },
     isLoggedIn() {
       return this.getUserData.id;
     },
     commentButtonTitle() {
-      return this.noteType === constants.COMMENT
-        ? 'Comment'
-        : 'Start discussion';
+      return this.noteType === constants.COMMENT ? 'Comment' : 'Start discussion';
+    },
+    startDiscussionDescription() {
+      let text = 'Discuss a specific suggestion or question';
+      if (this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE) {
+        text += ' that needs to be resolved';
+      }
+      return `${text}.`;
     },
     isOpen() {
-      return (
-        this.openState === constants.OPENED ||
-        this.openState === constants.REOPENED
-      );
+      return this.openState === constants.OPENED || this.openState === constants.REOPENED;
     },
     canCreateNote() {
       return this.getNoteableData.current_user.can_create_note;
@@ -117,6 +116,9 @@ export default {
     endpoint() {
       return this.getNoteableData.create_note_path;
     },
+    issuableTypeTitle() {
+      return this.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE ? 'merge request' : 'issue';
+    },
   },
   watch: {
     note(newNote) {
@@ -129,9 +131,7 @@ export default {
   mounted() {
     // jQuery is needed here because it is a custom event being dispatched with jQuery.
     $(document).on('issuable:change', (e, isClosed) => {
-      this.toggleIssueLocalState(
-        isClosed ? constants.CLOSED : constants.REOPENED,
-      );
+      this.toggleIssueLocalState(isClosed ? constants.CLOSED : constants.REOPENED);
     });
 
     this.initAutoSave();
@@ -168,6 +168,7 @@ export default {
               noteable_id: this.getNoteableData.id,
               note: this.note,
             },
+            merge_request_diff_head_sha: this.getNoteableData.diff_head_sha,
           },
         };
 
@@ -227,9 +228,7 @@ Please check your network connection and try again.`;
             this.toggleStateButtonLoading(false);
             Flash(
               sprintf(
-                __(
-                  'Something went wrong while closing the %{issuable}. Please try again later',
-                ),
+                __('Something went wrong while closing the %{issuable}. Please try again later'),
                 { issuable: this.noteableDisplayName },
               ),
             );
@@ -242,9 +241,7 @@ Please check your network connection and try again.`;
             this.toggleStateButtonLoading(false);
             Flash(
               sprintf(
-                __(
-                  'Something went wrong while reopening the %{issuable}. Please try again later',
-                ),
+                __('Something went wrong while reopening the %{issuable}. Please try again later'),
                 { issuable: this.noteableDisplayName },
               ),
             );
@@ -281,9 +278,7 @@ Please check your network connection and try again.`;
     },
     initAutoSave() {
       if (this.isLoggedIn) {
-        const noteableType = capitalizeFirstCharacter(
-          convertToCamelCase(this.noteableType),
-        );
+        const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType));
 
         this.autosave = new Autosave($(this.$refs.textarea), [
           'Note',
@@ -312,8 +307,8 @@ Please check your network connection and try again.`;
   <div>
     <note-signed-out-widget v-if="!isLoggedIn" />
     <discussion-locked-widget
-      issuable-type="issue"
-      v-else-if="isLocked(getNoteableData) && !canCreateNote"
+      v-else-if="!canCreateNote"
+      :issuable-type="issuableTypeTitle"
     />
     <ul
       v-else-if="canCreateNote"
@@ -345,23 +340,23 @@ Please check your network connection and try again.`;
               />
 
               <markdown-field
+                ref="markdownField"
                 :markdown-preview-path="markdownPreviewPath"
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
-                :add-spacing-classes="false"
-                ref="markdownField">
+                :add-spacing-classes="false">
                 <textarea
                   id="note-body"
+                  ref="textarea"
+                  slot="textarea"
+                  v-model="note"
+                  :disabled="isSubmitting"
                   name="note[note]"
-                  class="note-textarea js-vue-comment-form
+                  class="note-textarea js-vue-comment-form js-note-text
 js-gfm-input js-autosize markdown-area js-vue-textarea"
                   data-supports-quick-actions="true"
                   aria-label="Description"
-                  v-model="note"
-                  ref="textarea"
-                  slot="textarea"
-                  :disabled="isSubmitting"
-                  placeholder="Write a comment or drag your files here..."
+                  placeholder="Write a comment or drag your files here…"
                   @keydown.up="editCurrentUserLastNote()"
                   @keydown.meta.enter="handleSave()"
                   @keydown.ctrl.enter="handleSave()">
@@ -372,10 +367,10 @@ js-gfm-input js-autosize markdown-area js-vue-textarea"
                   class="float-left btn-group
 append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
                   <button
-                    @click.prevent="handleSave()"
                     :disabled="isSubmitButtonDisabled"
                     class="btn btn-create comment-btn js-comment-button js-comment-submit-button"
-                    type="submit">
+                    type="submit"
+                    @click.prevent="handleSave()">
                     {{ __(commentButtonTitle) }}
                   </button>
                   <button
@@ -423,7 +418,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                         <div class="description">
                           <strong>Start discussion</strong>
                           <p>
-                            Discuss a specific suggestion or question.
+                            {{ startDiscussionDescription }}
                           </p>
                         </div>
                       </button>
@@ -434,20 +429,20 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                 <loading-button
                   v-if="canUpdateIssue"
                   :loading="isToggleStateButtonLoading"
-                  @click="handleSave(true)"
                   :container-class="[
                     actionButtonClassNames,
                     'btn btn-comment btn-comment-and-close js-action-button'
                   ]"
                   :disabled="isToggleStateButtonLoading || isSubmitting"
                   :label="issueActionButtonTitle"
+                  @click="handleSave(true)"
                 />
 
                 <button
-                  type="button"
                   v-if="note.length"
-                  @click="discard"
-                  class="btn btn-cancel js-note-discard">
+                  type="button"
+                  class="btn btn-cancel js-note-discard"
+                  @click="discard">
                   Discard draft
                 </button>
               </div>