diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index b8df6359c1e..ee873ba4b77 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -7,23 +7,17 @@ import MarkdownField from '../../vue_shared/components/markdown/field.vue';
 export default {
   props: {},
   data() {
+    const { create_note_path, state } = window.gl.issueData;
+    const { currentUserData } = window.gl;
+
     return {
       note: '',
       markdownPreviewUrl: '',
       markdownDocsUrl: '',
-
-      // FIXME: @fatihacet - Fix the mock data below.
       noteType: 'comment',
-      issueState: 'open',
-      endpoint: '/gitlab-org/gitlab-ce/notes',
-      author: {
-        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-        id: 1,
-        name: 'Administrator',
-        path: '/root',
-        state: 'active',
-        username: 'root',
-      },
+      issueState: state,
+      endpoint: create_note_path,
+      author: currentUserData,
     };
   },
   components: {
@@ -47,13 +41,12 @@ export default {
   methods: {
     handleSave() {
       const data = {
-        endpoint: `${this.endpoint}?full_data=1`,
+        endpoint: this.endpoint,
         noteData: {
-          target_type: 'issue',
-          target_id: '89',
+          full_data: true,
           note: {
             noteable_type: 'Issue',
-            noteable_id: 89,
+            noteable_id: window.gl.issueData.id,
             note: this.note,
           }
         },
@@ -64,12 +57,14 @@ export default {
       }
 
       this.$store.dispatch('createNewNote', data)
-        .then(() => {
+        .then((res) => {
+          if (res.errors) {
+            return this.handleError();
+          }
+
           this.discard();
         })
-        .catch(() => {
-          new Flash('Something went wrong while adding your comment. Please try again.'); // eslint-disable-line
-        });
+        .catch(this.handleError);
     },
     discard() {
       this.note = '';
@@ -78,6 +73,9 @@ export default {
     setNoteType(type) {
       this.noteType = type;
     },
+    handleError() {
+      new Flash('Something went wrong while adding your comment. Please try again.'); // eslint-disable-line
+    },
   },
   mounted() {
     const issuableDataEl = document.getElementById('js-issuable-app-initial-data');
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index f2ab8ba278e..cf4f63968ec 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -19,7 +19,7 @@ export default {
     return {
       registerLink: '#',
       signInLink: '#',
-      newNotePath: '',
+      newNotePath: window.gl.issueData.create_note_path,
       isReplying: false,
     };
   },
@@ -30,6 +30,9 @@ export default {
     author() {
       return this.discussion.author;
     },
+    canReply() {
+      return window.gl.issueData.current_user.can_create_note;
+    },
   },
   components: {
     IssueNote,
@@ -48,10 +51,6 @@ export default {
       this.registerLink = registerLink.getAttribute('href');
       this.signInLink = signInLink.getAttribute('href');
     }
-
-    // TODO: @fatihacet - Reimplement this when we have data for it.
-    // const newNotePath = document.querySelector('.js-main-target-form').getAttribute('action');
-    // this.newNotePath = `${newNotePath}?full_data=1`;
   },
   methods: {
     toggleDiscussion() {
@@ -73,6 +72,7 @@ export default {
           target_type: 'issue',
           target_id: this.discussion.noteable_id,
           note: { note },
+          full_data: true,
         },
       };
 
@@ -130,7 +130,7 @@ export default {
                 <div class="flash-container"></div>
                 <div class="discussion-reply-holder">
                   <button
-                    v-if="note.can_reply && !isReplying"
+                    v-if="canReply && !isReplying"
                     @click="showReplyForm"
                     type="button"
                     class="btn btn-text-field"
@@ -141,7 +141,7 @@ export default {
                       :updateHandler="saveReply"
                       :cancelHandler="cancelReplyForm" />
                   <div
-                    v-if="!note.can_reply"
+                    v-if="!canReply"
                     class="disabled-comment text-center">
                     Please
                     <a :href="registerLink">register</a>
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index eb39cbd5e7c..9a7ad1db7bb 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -104,8 +104,8 @@ export default {
           <issue-note-actions
             :accessLevel="note.human_access"
             :canAward="note.emoji_awardable"
-            :canEdit="note.can_edit"
-            :canDelete="note.can_edit"
+            :canEdit="note.current_user.can_edit"
+            :canDelete="note.current_user.can_edit"
             :reportAbusePath="note.report_abuse_path"
             :editHandler="editHandler"
             :deleteHandler="deleteHandler" />
diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
index f0e499aa477..2fc50c05c7c 100644
--- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { glEmojiTag } from '~/behaviors/gl_emoji';
+import * as Emoji from '../../emoji';
 import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
 import emojiSmile from 'icons/_emoji_smile.svg';
 import emojiSmiley from 'icons/_emoji_smiley.svg';
@@ -66,7 +66,7 @@ export default {
   },
   methods: {
     getAwardHTML(name) {
-      return glEmojiTag(name);
+      return Emoji.glEmojiTag(name);
     },
     getAwardClassBindings(awardList, awardName) {
       return {
diff --git a/app/assets/javascripts/notes/stores/issue_notes_store.js b/app/assets/javascripts/notes/stores/issue_notes_store.js
index 8881ba2aa9a..9914b001c25 100644
--- a/app/assets/javascripts/notes/stores/issue_notes_store.js
+++ b/app/assets/javascripts/notes/stores/issue_notes_store.js
@@ -53,8 +53,16 @@ const mutations = {
     }
   },
   addNewNote(storeState, note) {
-    // TODO: @fatihacet - When we get the correct data from server update the store
-    // storeState.notes.push(note);
+    const { discussion_id, type } = note;
+    const noteData = {
+      expanded: true,
+      id: discussion_id,
+      individual_note: !(type === 'DiscussionNote'),
+      notes: [ note ],
+      reply_id: discussion_id,
+    };
+
+    storeState.notes.push(noteData);
   },
 };
 
@@ -100,7 +108,10 @@ const actions = {
       .createNewNote(endpoint, noteData)
       .then(res => res.json())
       .then((res) => {
-        context.commit('addNewNote', res);
+        if (!res.errors) {
+          context.commit('addNewNote', res);
+        }
+        return res;
       });
   },
 };