1 files changed, 89 insertions, 8 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 43def2673eb..2f7ed4a982c 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,17 +1,21 @@
 <script>
 import $ from 'jquery';
+import _ from 'underscore';
 import { __ } from '~/locale';
+import { stripHtml } from '~/lib/utils/text_utility';
 import Flash from '../../../flash';
 import GLForm from '../../../gl_form';
 import markdownHeader from './header.vue';
 import markdownToolbar from './toolbar.vue';
 import icon from '../icon.vue';
+import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 
 export default {
   components: {
     markdownHeader,
     markdownToolbar,
     icon,
+    Suggestions,
   },
   props: {
     markdownPreviewPath: {
@@ -48,12 +52,33 @@ export default {
       required: false,
       default: true,
     },
+    line: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    note: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    canSuggest: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    helpPagePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
       markdownPreview: '',
       referencedCommands: '',
       referencedUsers: '',
+      hasSuggestion: false,
       markdownPreviewLoading: false,
       previewMarkdown: false,
     };
@@ -63,6 +88,39 @@ export default {
       const referencedUsersThreshold = 10;
       return this.referencedUsers.length >= referencedUsersThreshold;
     },
+    lineContent() {
+      const FIRST_CHAR_REGEX = /^(\+|-)/;
+      const [firstSuggestion] = this.suggestions;
+      if (firstSuggestion) {
+        return firstSuggestion.from_content;
+      }
+
+      if (this.line) {
+        const { rich_text: richText, text } = this.line;
+
+        if (text) {
+          return text.replace(FIRST_CHAR_REGEX, '');
+        }
+
+        return _.unescape(stripHtml(richText).replace(/\n/g, ''));
+      }
+
+      return '';
+    },
+    lineNumber() {
+      let lineNumber;
+      if (this.line) {
+        const { new_line: newLine, old_line: oldLine } = this.line;
+        lineNumber = newLine || oldLine;
+      }
+      return lineNumber;
+    },
+    suggestions() {
+      return this.note.suggestions || [];
+    },
+    lineType() {
+      return this.line ? this.line.type : '';
+    },
   },
   mounted() {
     /*
@@ -122,6 +180,7 @@ export default {
       if (data.references) {
         this.referencedCommands = data.references.commands;
         this.referencedUsers = data.references.users;
+        this.hasSuggestion = data.references.suggestions && data.references.suggestions.length;
       }
 
       this.$nextTick(() => {
@@ -147,6 +206,8 @@ export default {
   >
     <markdown-header
       :preview-markdown="previewMarkdown"
+      :line-content="lineContent"
+      :can-suggest="canSuggest"
       @preview-markdown="showPreviewTab"
       @write-markdown="showWriteTab"
     />
@@ -163,19 +224,39 @@ export default {
         />
       </div>
     </div>
-    <div
-      v-show="previewMarkdown"
-      ref="markdown-preview"
-      class="md-preview js-vue-md-preview md md-preview-holder"
-      v-html="markdownPreview"
-    ></div>
+    <template v-if="hasSuggestion">
+      <div
+        v-show="previewMarkdown"
+        ref="markdown-preview"
+        class="md-preview js-vue-md-preview md md-preview-holder"
+      >
+        <suggestions
+          v-if="hasSuggestion"
+          :note-html="markdownPreview"
+          :from-line="lineNumber"
+          :from-content="lineContent"
+          :line-type="lineType"
+          :disabled="true"
+          :suggestions="suggestions"
+          :help-page-path="helpPagePath"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <div
+        v-show="previewMarkdown"
+        ref="markdown-preview"
+        class="md-preview js-vue-md-preview md md-preview-holder"
+        v-html="markdownPreview"
+      ></div>
+    </template>
     <template v-if="previewMarkdown && !markdownPreviewLoading">
       <div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div>
       <div v-if="shouldShowReferencedUsers" class="referenced-users">
         <span>
-          <i class="fa fa-exclamation-triangle" aria-hidden="true"> </i> You are about to add
+          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> You are about to add
           <strong>
-            <span class="js-referenced-users-count"> {{ referencedUsers.length }} </span>
+            <span class="js-referenced-users-count">{{ referencedUsers.length }}</span>
           </strong>
           people to the discussion. Proceed with caution.
         </span>