Merge branch 'osw-suggest-diff-line-change' into 'master'

Allow suggesting single line changes in diffs

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

1 files changed, 37 insertions, 1 deletions

diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index c0bee600181..bcf5d334da4 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -1,10 +1,12 @@
 <script>
+import { mapActions } from 'vuex';
 import $ from 'jquery';
 import noteEditedText from './note_edited_text.vue';
 import noteAwardsList from './note_awards_list.vue';
 import noteAttachment from './note_attachment.vue';
 import noteForm from './note_form.vue';
 import autosave from '../mixins/autosave';
+import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 
 export default {
   components: {
@@ -12,6 +14,7 @@ export default {
     noteAwardsList,
     noteAttachment,
     noteForm,
+    Suggestions,
   },
   mixins: [autosave],
   props: {
@@ -19,6 +22,11 @@ export default {
       type: Object,
       required: true,
     },
+    line: {
+      type: Object,
+      required: false,
+      default: null,
+    },
     canEdit: {
       type: Boolean,
       required: true,
@@ -28,11 +36,22 @@ export default {
       required: false,
       default: false,
     },
+    helpPagePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     noteBody() {
       return this.note.note;
     },
+    hasSuggestion() {
+      return this.note.suggestions && this.note.suggestions.length;
+    },
+    lineType() {
+      return this.line ? this.line.type : null;
+    },
   },
   mounted() {
     this.renderGFM();
@@ -53,6 +72,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(['submitSuggestion']),
     renderGFM() {
       $(this.$refs['note-body']).renderGFM();
     },
@@ -62,19 +82,35 @@ export default {
     formCancelHandler(shouldConfirm, isDirty) {
       this.$emit('cancelForm', shouldConfirm, isDirty);
     },
+    applySuggestion({ suggestionId, flashContainer, callback }) {
+      const { discussion_id: discussionId, id: noteId } = this.note;
+
+      this.submitSuggestion({ discussionId, noteId, suggestionId, flashContainer, callback });
+    },
   },
 };
 </script>
 
 <template>
   <div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body">
-    <div class="note-text md" v-html="note.note_html"></div>
+    <suggestions
+      v-if="hasSuggestion && !isEditing"
+      :suggestions="note.suggestions"
+      :note-html="note.note_html"
+      :line-type="lineType"
+      :help-page-path="helpPagePath"
+      @apply="applySuggestion"
+    />
+    <div v-else class="note-text md" v-html="note.note_html"></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"
       :is-editing="isEditing"
       :note-body="noteBody"
       :note-id="note.id"
+      :line="line"
+      :note="note"
+      :help-page-path="helpPagePath"
       :markdown-version="note.cached_markdown_version"
       @handleFormUpdate="handleFormUpdate"
       @cancelForm="formCancelHandler"