IssueNotesRefactor: Add referenced users and commands to markdown field.

app/assets/javascripts/notes/components/issue_comment_form.vue

@@ -13,8 +13,8 @@ export default {
 
     return {
       note: '',
-      markdownPreviewUrl: '',
       markdownDocsUrl: '',
+      markdownPreviewUrl: gl.issueData.preview_note_path,
       noteType: 'comment',
       issueState: state,
       endpoint: create_note_path,
@@ -142,10 +142,8 @@ export default {
   mounted() {
     const issuableDataEl = document.getElementById('js-issuable-app-initial-data');
     const issueData = JSON.parse(issuableDataEl.innerHTML.replace(/"/g, '"'));
-    const { markdownDocs, markdownPreviewUrl } = issueData;
 
-    this.markdownDocsUrl = markdownDocs;
-    this.markdownPreviewUrl = markdownPreviewUrl;
+    this.markdownDocsUrl = issueData.markdownDocs;
 
     eventHub.$on('issueStateChanged', (isClosed) => {
       this.issueState = isClosed ? 'closed' : 'reopened';

app/assets/javascripts/notes/components/issue_note_form.vue

@@ -31,7 +31,7 @@ export default {
     return {
       initialNote: this.noteBody,
       note: this.noteBody,
-      markdownPreviewUrl: '',
+      markdownPreviewUrl: gl.issueData.preview_note_path,
       markdownDocsUrl: '',
       conflictWhileEditing: false,
     };
@@ -69,10 +69,8 @@ export default {
   mounted() {
     const issuableDataEl = document.getElementById('js-issuable-app-initial-data');
     const issueData = JSON.parse(issuableDataEl.innerHTML.replace(/"/g, '"'));
-    const { markdownDocs, markdownPreviewUrl } = issueData;
 
-    this.markdownDocsUrl = markdownDocs;
-    this.markdownPreviewUrl = markdownPreviewUrl;
+    this.markdownDocsUrl = issueData.markdownDocs;
     this.$refs.textarea.focus();
   },
   watch: {

app/assets/javascripts/notes/index.js

@@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const vm = new Vue({
     el: '#js-notes',
     components: {
-      issueNotes
+      issueNotes,
     },
     template: `
       <issue-notes ref="notes" />

app/assets/javascripts/notes/stores/issue_notes_store.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-param-reassign */
+/* global Flash */
 
 import service from '../services/issue_notes_service';
 import utils from './issue_notes_utils';
@@ -263,7 +264,7 @@ const actions = {
         const msg = 'Your comment could not be submitted! Please check your network connection and try again.';
         Flash(msg, 'alert', $(noteData.flashContainer));
         context.commit('removePlaceholderNotes');
-      })
+      });
   },
   poll(context) {
     const { notesPath } = $('.js-notes-wrapper')[0].dataset;

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -3,6 +3,8 @@
   import markdownHeader from './header.vue';
   import markdownToolbar from './toolbar.vue';
 
+  const REFERENCED_USERS_THRESHOLD = 10;
+
   export default {
     props: {
       markdownPreviewUrl: {
@@ -23,6 +25,8 @@
     data() {
       return {
         markdownPreview: '',
+        referencedCommands: '',
+        referencedUsers: '',
         markdownPreviewLoading: false,
         previewMarkdown: false,
       };
@@ -31,6 +35,11 @@
       markdownHeader,
       markdownToolbar,
     },
+    computed: {
+      shouldShowReferencedUsers() {
+        return this.referencedUsers.length >= REFERENCED_USERS_THRESHOLD;
+      },
+    },
     methods: {
       toggleMarkdownPreview() {
         this.previewMarkdown = !this.previewMarkdown;
@@ -53,6 +62,8 @@
           .then((data) => {
             this.markdownPreviewLoading = false;
             this.markdownPreview = data.body;
+            this.referencedCommands = data.references.commands;
+            this.referencedUsers = data.references.users;
 
             if (!this.markdownPreview) {
               this.markdownPreview = 'Nothing to preview.';
@@ -118,5 +129,27 @@
         Loading...
       </span>
     </div>
+    <template v-if="previewMarkdown && !markdownPreviewLoading">
+      <div
+        v-if="referencedCommands"
+        v-html="referencedCommands"
+        class="referenced-commands"></div>
+      <div
+        v-if="shouldShowReferencedUsers"
+        class="referenced-users">
+          <span>
+            <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>
+            </strong> people to the discussion. Proceed with caution.
+          </span>
+        </div>
+    </template>
   </div>
 </template>