Merge branch 'master' of gitlab.com:gitlab-org/gitlab-ce

16 files changed, 1995 insertions, 0 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
new file mode 100644
index 00000000000..16f4e22aa9b
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -0,0 +1,347 @@
+<script>
+  /* global Flash, Autosave */
+  import { mapActions, mapGetters } from 'vuex';
+  import _ from 'underscore';
+  import '../../autosave';
+  import TaskList from '../../task_list';
+  import * as constants from '../constants';
+  import eventHub from '../event_hub';
+  import confidentialIssue from '../../vue_shared/components/issue/confidential_issue_warning.vue';
+  import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
+  import markdownField from '../../vue_shared/components/markdown/field.vue';
+  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+
+  export default {
+    name: 'issueCommentForm',
+    data() {
+      return {
+        note: '',
+        noteType: constants.COMMENT,
+        // Can't use mapGetters,
+        // this needs to be in the data object because it belongs to the state
+        issueState: this.$store.getters.getIssueData.state,
+        isSubmitting: false,
+        isSubmitButtonDisabled: true,
+      };
+    },
+    components: {
+      confidentialIssue,
+      issueNoteSignedOutWidget,
+      markdownField,
+      userAvatarLink,
+    },
+    watch: {
+      note(newNote) {
+        this.setIsSubmitButtonDisabled(newNote, this.isSubmitting);
+      },
+      isSubmitting(newValue) {
+        this.setIsSubmitButtonDisabled(this.note, newValue);
+      },
+    },
+    computed: {
+      ...mapGetters([
+        'getCurrentUserLastNote',
+        'getUserData',
+        'getIssueData',
+        'getNotesData',
+      ]),
+      isLoggedIn() {
+        return this.getUserData.id;
+      },
+      commentButtonTitle() {
+        return this.noteType === constants.COMMENT ? 'Comment' : 'Start discussion';
+      },
+      isIssueOpen() {
+        return this.issueState === constants.OPENED || this.issueState === constants.REOPENED;
+      },
+      issueActionButtonTitle() {
+        if (this.note.length) {
+          const actionText = this.isIssueOpen ? 'close' : 'reopen';
+
+          return this.noteType === constants.COMMENT ? `Comment & ${actionText} issue` : `Start discussion & ${actionText} issue`;
+        }
+
+        return this.isIssueOpen ? 'Close issue' : 'Reopen issue';
+      },
+      actionButtonClassNames() {
+        return {
+          'btn-reopen': !this.isIssueOpen,
+          'btn-close': this.isIssueOpen,
+          'js-note-target-close': this.isIssueOpen,
+          'js-note-target-reopen': !this.isIssueOpen,
+        };
+      },
+      markdownDocsPath() {
+        return this.getNotesData.markdownDocsPath;
+      },
+      quickActionsDocsPath() {
+        return this.getNotesData.quickActionsDocsPath;
+      },
+      markdownPreviewPath() {
+        return this.getIssueData.preview_note_path;
+      },
+      author() {
+        return this.getUserData;
+      },
+      canUpdateIssue() {
+        return this.getIssueData.current_user.can_update;
+      },
+      endpoint() {
+        return this.getIssueData.create_note_path;
+      },
+      isConfidentialIssue() {
+        return this.getIssueData.confidential;
+      },
+    },
+    methods: {
+      ...mapActions([
+        'saveNote',
+        'removePlaceholderNotes',
+      ]),
+      setIsSubmitButtonDisabled(note, isSubmitting) {
+        if (!_.isEmpty(note) && !isSubmitting) {
+          this.isSubmitButtonDisabled = false;
+        } else {
+          this.isSubmitButtonDisabled = true;
+        }
+      },
+      handleSave(withIssueAction) {
+        if (this.note.length) {
+          const noteData = {
+            endpoint: this.endpoint,
+            flashContainer: this.$el,
+            data: {
+              note: {
+                noteable_type: constants.NOTEABLE_TYPE,
+                noteable_id: this.getIssueData.id,
+                note: this.note,
+              },
+            },
+          };
+
+          if (this.noteType === constants.DISCUSSION) {
+            noteData.data.note.type = constants.DISCUSSION_NOTE;
+          }
+          this.isSubmitting = true;
+          this.note = ''; // Empty textarea while being requested. Repopulate in catch
+
+          this.saveNote(noteData)
+            .then((res) => {
+              this.isSubmitting = false;
+              if (res.errors) {
+                if (res.errors.commands_only) {
+                  this.discard();
+                } else {
+                  Flash(
+                    'Something went wrong while adding your comment. Please try again.',
+                    'alert',
+                    $(this.$refs.commentForm),
+                  );
+                }
+              } else {
+                this.discard();
+              }
+
+              if (withIssueAction) {
+                this.toggleIssueState();
+              }
+            })
+            .catch(() => {
+              this.isSubmitting = false;
+              this.discard(false);
+              const msg = 'Your comment could not be submitted! Please check your network connection and try again.';
+              Flash(msg, 'alert', $(this.$el));
+              this.note = noteData.data.note.note; // Restore textarea content.
+              this.removePlaceholderNotes();
+            });
+        } else {
+          this.toggleIssueState();
+        }
+      },
+      toggleIssueState() {
+        this.issueState = this.isIssueOpen ? constants.CLOSED : constants.REOPENED;
+
+        // This is out of scope for the Notes Vue component.
+        // It was the shortest path to update the issue state and relevant places.
+        const btnClass = this.isIssueOpen ? 'btn-reopen' : 'btn-close';
+        $(`.js-btn-issue-action.${btnClass}:visible`).trigger('click');
+      },
+      discard(shouldClear = true) {
+        // `blur` is needed to clear slash commands autocomplete cache if event fired.
+        // `focus` is needed to remain cursor in the textarea.
+        this.$refs.textarea.blur();
+        this.$refs.textarea.focus();
+
+        if (shouldClear) {
+          this.note = '';
+        }
+
+        // reset autostave
+        this.autosave.reset();
+      },
+      setNoteType(type) {
+        this.noteType = type;
+      },
+      editCurrentUserLastNote() {
+        if (this.note === '') {
+          const lastNote = this.getCurrentUserLastNote;
+
+          if (lastNote) {
+            eventHub.$emit('enterEditMode', {
+              noteId: lastNote.id,
+            });
+          }
+        }
+      },
+      initAutoSave() {
+        if (this.isLoggedIn) {
+          this.autosave = new Autosave($(this.$refs.textarea), ['Note', 'Issue', this.getIssueData.id], 'issue');
+        }
+      },
+      initTaskList() {
+        return new TaskList({
+          dataType: 'note',
+          fieldName: 'note',
+          selector: '.notes',
+        });
+      },
+    },
+    mounted() {
+      // jQuery is needed here because it is a custom event being dispatched with jQuery.
+      $(document).on('issuable:change', (e, isClosed) => {
+        this.issueState = isClosed ? constants.CLOSED : constants.REOPENED;
+      });
+
+      this.initAutoSave();
+      this.initTaskList();
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <issue-note-signed-out-widget v-if="!isLoggedIn" />
+    <ul
+      v-else
+      class="notes notes-form timeline">
+      <li class="timeline-entry">
+        <div class="timeline-entry-inner">
+          <div class="flash-container error-alert timeline-content"></div>
+          <div class="timeline-icon hidden-xs hidden-sm">
+            <user-avatar-link
+              v-if="author"
+              :link-href="author.path"
+              :img-src="author.avatar_url"
+              :img-alt="author.name"
+              :img-size="40"
+              />
+          </div>
+          <div class="timeline-content timeline-content-form">
+            <form
+              ref="commentForm"
+              class="new-note js-quick-submit common-note-form gfm-form js-main-target-form">
+              <confidentialIssue v-if="isConfidentialIssue" />
+              <div class="error-alert"></div>
+              <markdown-field
+                :markdown-preview-path="markdownPreviewPath"
+                :markdown-docs-path="markdownDocsPath"
+                :quick-actions-docs-path="quickActionsDocsPath"
+                :add-spacing-classes="false"
+                :is-confidential-issue="isConfidentialIssue">
+                <textarea
+                  id="note-body"
+                  name="note[note]"
+                  class="note-textarea js-vue-comment-form 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"
+                  placeholder="Write a comment or drag your files here..."
+                  @keydown.up="editCurrentUserLastNote()"
+                  @keydown.meta.enter="handleSave()">
+                </textarea>
+              </markdown-field>
+              <div class="note-form-actions">
+                <div class="pull-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">
+                    {{commentButtonTitle}}
+                  </button>
+                  <button
+                    :disabled="isSubmitButtonDisabled"
+                    name="button"
+                    type="button"
+                    class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle"
+                    data-toggle="dropdown"
+                    aria-label="Open comment type dropdown">
+                    <i
+                      aria-hidden="true"
+                      class="fa fa-caret-down toggle-icon">
+                    </i>
+                  </button>
+
+                  <ul class="note-type-dropdown dropdown-open-top dropdown-menu">
+                    <li :class="{ 'droplab-item-selected': noteType === 'comment' }">
+                      <button
+                        type="button"
+                        class="btn btn-transparent"
+                        @click.prevent="setNoteType('comment')">
+                        <i
+                          aria-hidden="true"
+                          class="fa fa-check icon">
+                        </i>
+                        <div class="description">
+                          <strong>Comment</strong>
+                          <p>
+                            Add a general comment to this issue.
+                          </p>
+                        </div>
+                      </button>
+                    </li>
+                    <li class="divider droplab-item-ignore"></li>
+                    <li :class="{ 'droplab-item-selected': noteType === 'discussion' }">
+                      <button
+                        type="button"
+                        class="btn btn-transparent"
+                        @click.prevent="setNoteType('discussion')">
+                        <i
+                          aria-hidden="true"
+                          class="fa fa-check icon">
+                          </i>
+                        <div class="description">
+                          <strong>Start discussion</strong>
+                          <p>
+                            Discuss a specific suggestion or question.
+                          </p>
+                        </div>
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+                <button
+                  type="button"
+                  @click="handleSave(true)"
+                  v-if="canUpdateIssue"
+                  :class="actionButtonClassNames"
+                  class="btn btn-comment btn-comment-and-close">
+                  {{issueActionButtonTitle}}
+                </button>
+                <button
+                  type="button"
+                  v-if="note.length"
+                  @click="discard"
+                  class="btn btn-cancel js-note-discard">
+                  Discard draft
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
new file mode 100644
index 00000000000..b131ef4b182
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -0,0 +1,232 @@
+<script>
+  /* global Flash */
+  import { mapActions, mapGetters } from 'vuex';
+  import { SYSTEM_NOTE } from '../constants';
+  import issueNote from './issue_note.vue';
+  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+  import issueNoteHeader from './issue_note_header.vue';
+  import issueNoteActions from './issue_note_actions.vue';
+  import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
+  import issueNoteEditedText from './issue_note_edited_text.vue';
+  import issueNoteForm from './issue_note_form.vue';
+  import placeholderNote from './issue_placeholder_note.vue';
+  import placeholderSystemNote from './issue_placeholder_system_note.vue';
+  import autosave from '../mixins/autosave';
+
+  export default {
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        isReplying: false,
+      };
+    },
+    components: {
+      issueNote,
+      userAvatarLink,
+      issueNoteHeader,
+      issueNoteActions,
+      issueNoteSignedOutWidget,
+      issueNoteEditedText,
+      issueNoteForm,
+      placeholderNote,
+      placeholderSystemNote,
+    },
+    mixins: [
+      autosave,
+    ],
+    computed: {
+      ...mapGetters([
+        'getIssueData',
+      ]),
+      discussion() {
+        return this.note.notes[0];
+      },
+      author() {
+        return this.discussion.author;
+      },
+      canReply() {
+        return this.getIssueData.current_user.can_create_note;
+      },
+      newNotePath() {
+        return this.getIssueData.create_note_path;
+      },
+      lastUpdatedBy() {
+        const { notes } = this.note;
+
+        if (notes.length > 1) {
+          return notes[notes.length - 1].author;
+        }
+
+        return null;
+      },
+      lastUpdatedAt() {
+        const { notes } = this.note;
+
+        if (notes.length > 1) {
+          return notes[notes.length - 1].created_at;
+        }
+
+        return null;
+      },
+    },
+    methods: {
+      ...mapActions([
+        'saveNote',
+        'toggleDiscussion',
+        'removePlaceholderNotes',
+      ]),
+      componentName(note) {
+        if (note.isPlaceholderNote) {
+          if (note.placeholderType === SYSTEM_NOTE) {
+            return placeholderSystemNote;
+          }
+          return placeholderNote;
+        }
+
+        return issueNote;
+      },
+      componentData(note) {
+        return note.isPlaceholderNote ? note.notes[0] : note;
+      },
+      toggleDiscussionHandler() {
+        this.toggleDiscussion({ discussionId: this.note.id });
+      },
+      showReplyForm() {
+        this.isReplying = true;
+      },
+      cancelReplyForm(shouldConfirm) {
+        if (shouldConfirm && this.$refs.noteForm.isDirty) {
+          // eslint-disable-next-line no-alert
+          if (!confirm('Are you sure you want to cancel creating this comment?')) {
+            return;
+          }
+        }
+
+        this.resetAutoSave();
+        this.isReplying = false;
+      },
+      saveReply(noteText, form, callback) {
+        const replyData = {
+          endpoint: this.newNotePath,
+          flashContainer: this.$el,
+          data: {
+            in_reply_to_discussion_id: this.note.reply_id,
+            target_type: 'issue',
+            target_id: this.discussion.noteable_id,
+            note: { note: noteText },
+          },
+        };
+        this.isReplying = false;
+
+        this.saveNote(replyData)
+          .then(() => {
+            this.resetAutoSave();
+            callback();
+          })
+          .catch((err) => {
+            this.removePlaceholderNotes();
+            this.isReplying = true;
+            this.$nextTick(() => {
+              const msg = 'Your comment could not be submitted! Please check your network connection and try again.';
+              Flash(msg, 'alert', $(this.$el));
+              this.$refs.noteForm.note = noteText;
+              callback(err);
+            });
+          });
+      },
+    },
+    mounted() {
+      if (this.isReplying) {
+        this.initAutoSave();
+      }
+    },
+    updated() {
+      if (this.isReplying) {
+        if (!this.autosave) {
+          this.initAutoSave();
+        } else {
+          this.setAutoSave();
+        }
+      }
+    },
+  };
+</script>
+
+<template>
+  <li class="note note-discussion timeline-entry">
+    <div class="timeline-entry-inner">
+      <div class="timeline-icon">
+        <user-avatar-link
+          :link-href="author.path"
+          :img-src="author.avatar_url"
+          :img-alt="author.name"
+          :img-size="40"
+          />
+      </div>
+      <div class="timeline-content">
+        <div class="discussion">
+          <div class="discussion-header">
+            <issue-note-header
+              :author="author"
+              :created-at="discussion.created_at"
+              :note-id="discussion.id"
+              :include-toggle="true"
+              @toggleHandler="toggleDiscussionHandler"
+              action-text="started a discussion"
+              class="discussion"
+              />
+            <issue-note-edited-text
+              v-if="lastUpdatedAt"
+              :edited-at="lastUpdatedAt"
+              :edited-by="lastUpdatedBy"
+              action-text="Last updated"
+              class-name="discussion-headline-light js-discussion-headline"
+              />
+            </div>
+          </div>
+          <div
+            v-if="note.expanded"
+            class="discussion-body">
+            <div class="panel panel-default">
+              <div class="discussion-notes">
+                <ul class="notes">
+                  <component
+                    v-for="note in note.notes"
+                    :is="componentName(note)"
+                    :note="componentData(note)"
+                    :key="note.id"
+                    />
+                </ul>
+                <div
+                  :class="{ 'is-replying': isReplying }"
+                  class="discussion-reply-holder">
+                  <button
+                    v-if="canReply && !isReplying"
+                    @click="showReplyForm"
+                    type="button"
+                    class="js-vue-discussion-reply btn btn-text-field"
+                    title="Add a reply">Reply...</button>
+                  <issue-note-form
+                    v-if="isReplying"
+                    save-button-title="Comment"
+                    :discussion="note"
+                    :is-editing="false"
+                    @handleFormUpdate="saveReply"
+                    @cancelFormEdition="cancelReplyForm"
+                    ref="noteForm"
+                    />
+                  <issue-note-signed-out-widget v-if="!canReply" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
new file mode 100644
index 00000000000..3483f6c7538
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -0,0 +1,186 @@
+<script>
+  /* global Flash */
+
+  import { mapGetters, mapActions } from 'vuex';
+  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+  import issueNoteHeader from './issue_note_header.vue';
+  import issueNoteActions from './issue_note_actions.vue';
+  import issueNoteBody from './issue_note_body.vue';
+  import eventHub from '../event_hub';
+
+  export default {
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        isEditing: false,
+        isDeleting: false,
+        isRequesting: false,
+      };
+    },
+    components: {
+      userAvatarLink,
+      issueNoteHeader,
+      issueNoteActions,
+      issueNoteBody,
+    },
+    computed: {
+      ...mapGetters([
+        'targetNoteHash',
+        'getUserData',
+      ]),
+      author() {
+        return this.note.author;
+      },
+      classNameBindings() {
+        return {
+          'is-editing': this.isEditing && !this.isRequesting,
+          'is-requesting being-posted': this.isRequesting,
+          'disabled-content': this.isDeleting,
+          target: this.targetNoteHash === this.noteAnchorId,
+        };
+      },
+      canReportAsAbuse() {
+        return this.note.report_abuse_path && this.author.id !== this.getUserData.id;
+      },
+      noteAnchorId() {
+        return `note_${this.note.id}`;
+      },
+    },
+    methods: {
+      ...mapActions([
+        'deleteNote',
+        'updateNote',
+        'scrollToNoteIfNeeded',
+      ]),
+      editHandler() {
+        this.isEditing = true;
+      },
+      deleteHandler() {
+        // eslint-disable-next-line no-alert
+        if (confirm('Are you sure you want to delete this list?')) {
+          this.isDeleting = true;
+
+          this.deleteNote(this.note)
+            .then(() => {
+              this.isDeleting = false;
+            })
+            .catch(() => {
+              Flash('Something went wrong while deleting your note. Please try again.');
+              this.isDeleting = false;
+            });
+        }
+      },
+      formUpdateHandler(noteText, parentElement, callback) {
+        const data = {
+          endpoint: this.note.path,
+          note: {
+            target_type: 'issue',
+            target_id: this.note.noteable_id,
+            note: { note: noteText },
+          },
+        };
+        this.isRequesting = true;
+        this.oldContent = this.note.note_html;
+        this.note.note_html = noteText;
+
+        this.updateNote(data)
+          .then(() => {
+            this.isEditing = false;
+            this.isRequesting = false;
+            $(this.$refs.noteBody.$el).renderGFM();
+            this.$refs.noteBody.resetAutoSave();
+            callback();
+          })
+          .catch(() => {
+            this.isRequesting = false;
+            this.isEditing = true;
+            this.$nextTick(() => {
+              const msg = 'Something went wrong while editing your comment. Please try again.';
+              Flash(msg, 'alert', $(this.$el));
+              this.recoverNoteContent(noteText);
+              callback();
+            });
+          });
+      },
+      formCancelHandler(shouldConfirm, isDirty) {
+        if (shouldConfirm && isDirty) {
+          // eslint-disable-next-line no-alert
+          if (!confirm('Are you sure you want to cancel editing this comment?')) return;
+        }
+        this.$refs.noteBody.resetAutoSave();
+        if (this.oldContent) {
+          this.note.note_html = this.oldContent;
+          this.oldContent = null;
+        }
+        this.isEditing = false;
+      },
+      recoverNoteContent(noteText) {
+        // we need to do this to prevent noteForm inconsistent content warning
+        // this is something we intentionally do so we need to recover the content
+        this.note.note = noteText;
+        this.$refs.noteBody.$refs.noteForm.note = noteText; // TODO: This could be better
+      },
+    },
+    created() {
+      eventHub.$on('enterEditMode', ({ noteId }) => {
+        if (noteId === this.note.id) {
+          this.isEditing = true;
+          this.scrollToNoteIfNeeded($(this.$el));
+        }
+      });
+    },
+  };
+</script>
+
+<template>
+  <li
+    class="note timeline-entry"
+    :id="noteAnchorId"
+    :class="classNameBindings"
+    :data-award-url="note.toggle_award_path">
+    <div class="timeline-entry-inner">
+      <div class="timeline-icon">
+        <user-avatar-link
+          :link-href="author.path"
+          :img-src="author.avatar_url"
+          :img-alt="author.name"
+          :img-size="40"
+          />
+      </div>
+      <div class="timeline-content">
+        <div class="note-header">
+          <issue-note-header
+            :author="author"
+            :created-at="note.created_at"
+            :note-id="note.id"
+            action-text="commented"
+            />
+          <issue-note-actions
+            :author-id="author.id"
+            :note-id="note.id"
+            :access-level="note.human_access"
+            :can-edit="note.current_user.can_edit"
+            :can-delete="note.current_user.can_edit"
+            :can-report-as-abuse="canReportAsAbuse"
+            :report-abuse-path="note.report_abuse_path"
+            @handleEdit="editHandler"
+            @handleDelete="deleteHandler"
+            />
+        </div>
+        <issue-note-body
+          :note="note"
+          :can-edit="note.current_user.can_edit"
+          :is-editing="isEditing"
+          @handleFormUpdate="formUpdateHandler"
+          @cancelFormEdition="formCancelHandler"
+          ref="noteBody"
+          />
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue
new file mode 100644
index 00000000000..60c172321d1
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_actions.vue
@@ -0,0 +1,167 @@
+<script>
+  import { mapGetters } from 'vuex';
+  import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
+  import emojiSmile from 'icons/_emoji_smile.svg';
+  import emojiSmiley from 'icons/_emoji_smiley.svg';
+  import editSvg from 'icons/_icon_pencil.svg';
+  import ellipsisSvg from 'icons/_ellipsis_v.svg';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
+
+  export default {
+    name: 'issueNoteActions',
+    props: {
+      authorId: {
+        type: Number,
+        required: true,
+      },
+      noteId: {
+        type: Number,
+        required: true,
+      },
+      accessLevel: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      reportAbusePath: {
+        type: String,
+        required: true,
+      },
+      canEdit: {
+        type: Boolean,
+        required: true,
+      },
+      canDelete: {
+        type: Boolean,
+        required: true,
+      },
+      canReportAsAbuse: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    directives: {
+      tooltip,
+    },
+    components: {
+      loadingIcon,
+    },
+    computed: {
+      ...mapGetters([
+        'getUserDataByProp',
+      ]),
+      shouldShowActionsDropdown() {
+        return this.currentUserId && (this.canEdit || this.canReportAsAbuse);
+      },
+      canAddAwardEmoji() {
+        return this.currentUserId;
+      },
+      isAuthoredByCurrentUser() {
+        return this.authorId === this.currentUserId;
+      },
+      currentUserId() {
+        return this.getUserDataByProp('id');
+      },
+    },
+    methods: {
+      onEdit() {
+        this.$emit('handleEdit');
+      },
+      onDelete() {
+        this.$emit('handleDelete');
+      },
+    },
+    created() {
+      this.emojiSmiling = emojiSmiling;
+      this.emojiSmile = emojiSmile;
+      this.emojiSmiley = emojiSmiley;
+      this.editSvg = editSvg;
+      this.ellipsisSvg = ellipsisSvg;
+    },
+  };
+</script>
+
+<template>
+  <div class="note-actions">
+    <span
+      v-if="accessLevel"
+      class="note-role">{{accessLevel}}</span>
+    <div
+      v-if="canAddAwardEmoji"
+      class="note-actions-item">
+      <a
+        v-tooltip
+        :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
+        class="note-action-button note-emoji-button js-add-award js-note-emoji"
+        data-position="right"
+        data-placement="bottom"
+        data-container="body"
+        href="#"
+        title="Add reaction">
+          <loading-icon :inline="true" />
+          <span
+            v-html="emojiSmiling"
+            class="link-highlight award-control-icon-neutral">
+          </span>
+          <span
+            v-html="emojiSmiley"
+            class="link-highlight award-control-icon-positive">
+          </span>
+          <span
+            v-html="emojiSmile"
+            class="link-highlight award-control-icon-super-positive">
+          </span>
+      </a>
+    </div>
+    <div
+      v-if="canEdit"
+      class="note-actions-item">
+      <button
+        @click="onEdit"
+        v-tooltip
+        type="button"
+        title="Edit comment"
+        class="note-action-button js-note-edit btn btn-transparent"
+        data-container="body"
+        data-placement="bottom">
+          <span
+            v-html="editSvg"
+            class="link-highlight"></span>
+      </button>
+    </div>
+    <div
+      v-if="shouldShowActionsDropdown"
+      class="dropdown more-actions note-actions-item">
+      <button
+        v-tooltip
+        type="button"
+        title="More actions"
+        class="note-action-button more-actions-toggle btn btn-transparent"
+        data-toggle="dropdown"
+        data-container="body"
+        data-placement="bottom">
+          <span
+            class="icon"
+            v-html="ellipsisSvg"></span>
+      </button>
+      <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
+        <li v-if="canReportAsAbuse">
+          <a :href="reportAbusePath">
+            Report as abuse
+          </a>
+        </li>
+        <li v-if="canEdit">
+          <button
+            @click.prevent="onDelete"
+            class="btn btn-transparent js-note-delete js-note-delete"
+            type="button">
+            <span class="text-danger">
+              Delete comment
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note_attachment.vue b/app/assets/javascripts/notes/components/issue_note_attachment.vue
new file mode 100644
index 00000000000..7134a3eb47e
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_attachment.vue
@@ -0,0 +1,37 @@
+<script>
+  export default {
+    name: 'issueNoteAttachment',
+    props: {
+      attachment: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="note-attachment">
+    <a
+      v-if="attachment.image"
+      :href="attachment.url"
+      target="_blank"
+      rel="noopener noreferrer">
+      <img
+        :src="attachment.url"
+        class="note-image-attach" />
+    </a>
+    <div class="attachment">
+      <a
+        v-if="attachment.url"
+        :href="attachment.url"
+        target="_blank"
+        rel="noopener noreferrer">
+        <i
+          class="fa fa-paperclip"
+          aria-hidden="true"></i>
+        {{attachment.filename}}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
new file mode 100644
index 00000000000..d42e61e3899
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
@@ -0,0 +1,228 @@
+<script>
+  /* global Flash */
+
+  import { mapActions, mapGetters } from 'vuex';
+  import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
+  import emojiSmile from 'icons/_emoji_smile.svg';
+  import emojiSmiley from 'icons/_emoji_smiley.svg';
+  import { glEmojiTag } from '../../emoji';
+  import tooltip from '../../vue_shared/directives/tooltip';
+
+  export default {
+    props: {
+      awards: {
+        type: Array,
+        required: true,
+      },
+      toggleAwardPath: {
+        type: String,
+        required: true,
+      },
+      noteAuthorId: {
+        type: Number,
+        required: true,
+      },
+      noteId: {
+        type: Number,
+        required: true,
+      },
+    },
+    directives: {
+      tooltip,
+    },
+    computed: {
+      ...mapGetters([
+        'getUserData',
+      ]),
+      // `this.awards` is an array with emojis but they are not grouped by emoji name. See below.
+      // [ { name: foo, user: user1 }, { name: bar, user: user1 }, { name: foo, user: user2 } ]
+      // This method will group emojis by their name as an Object. See below.
+      // {
+      //   foo: [ { name: foo, user: user1 }, { name: foo, user: user2 } ],
+      //   bar: [ { name: bar, user: user1 } ]
+      // }
+      // We need to do this otherwise we will render the same emoji over and over again.
+      groupedAwards() {
+        const awards = this.awards.reduce((acc, award) => {
+          if (Object.prototype.hasOwnProperty.call(acc, award.name)) {
+            acc[award.name].push(award);
+          } else {
+            Object.assign(acc, { [award.name]: [award] });
+          }
+
+          return acc;
+        }, {});
+
+        const orderedAwards = {};
+        const { thumbsdown, thumbsup } = awards;
+        // Always show thumbsup and thumbsdown first
+        if (thumbsup) {
+          orderedAwards.thumbsup = thumbsup;
+          delete awards.thumbsup;
+        }
+        if (thumbsdown) {
+          orderedAwards.thumbsdown = thumbsdown;
+          delete awards.thumbsdown;
+        }
+
+        return Object.assign({}, orderedAwards, awards);
+      },
+      isAuthoredByMe() {
+        return this.noteAuthorId === this.getUserData.id;
+      },
+      isLoggedIn() {
+        return this.getUserData.id;
+      },
+    },
+    methods: {
+      ...mapActions([
+        'toggleAwardRequest',
+      ]),
+      getAwardHTML(name) {
+        return glEmojiTag(name);
+      },
+      getAwardClassBindings(awardList, awardName) {
+        return {
+          active: this.hasReactionByCurrentUser(awardList),
+          disabled: !this.canInteractWithEmoji(awardList, awardName),
+        };
+      },
+      canInteractWithEmoji(awardList, awardName) {
+        let isAllowed = true;
+        const restrictedEmojis = ['thumbsup', 'thumbsdown'];
+
+        // Users can not add :+1: and :-1: to their own notes
+        if (this.getUserData.id === this.noteAuthorId && restrictedEmojis.indexOf(awardName) > -1) {
+          isAllowed = false;
+        }
+
+        return this.getUserData.id && isAllowed;
+      },
+      hasReactionByCurrentUser(awardList) {
+        return awardList.filter(award => award.user.id === this.getUserData.id).length;
+      },
+      awardTitle(awardsList) {
+        const hasReactionByCurrentUser = this.hasReactionByCurrentUser(awardsList);
+        const TOOLTIP_NAME_COUNT = hasReactionByCurrentUser ? 9 : 10;
+        let awardList = awardsList;
+
+        // Filter myself from list if I am awarded.
+        if (hasReactionByCurrentUser) {
+          awardList = awardList.filter(award => award.user.id !== this.getUserData.id);
+        }
+
+        // Get only 9-10 usernames to show in tooltip text.
+        const namesToShow = awardList.slice(0, TOOLTIP_NAME_COUNT).map(award => award.user.name);
+
+        // Get the remaining list to use in `and x more` text.
+        const remainingAwardList = awardList.slice(TOOLTIP_NAME_COUNT, awardList.length);
+
+        // Add myself to the begining of the list so title will start with You.
+        if (hasReactionByCurrentUser) {
+          namesToShow.unshift('You');
+        }
+
+        let title = '';
+
+        // We have 10+ awarded user, join them with comma and add `and x more`.
+        if (remainingAwardList.length) {
+          title = `${namesToShow.join(', ')}, and ${remainingAwardList.length} more.`;
+        } else if (namesToShow.length > 1) {
+          // Join all names with comma but not the last one, it will be added with and text.
+          title = namesToShow.slice(0, namesToShow.length - 1).join(', ');
+          // If we have more than 2 users we need an extra comma before and text.
+          title += namesToShow.length > 2 ? ',' : '';
+          title += ` and ${namesToShow.slice(-1)}`; // Append and text
+        } else { // We have only 2 users so join them with and.
+          title = namesToShow.join(' and ');
+        }
+
+        return title;
+      },
+      handleAward(awardName) {
+        if (!this.isLoggedIn) {
+          return;
+        }
+
+        let parsedName;
+
+        // 100 and 1234 emoji are a number. Callback for v-for click sends it as a string
+        switch (awardName) {
+          case '100':
+            parsedName = 100;
+            break;
+          case '1234':
+            parsedName = 1234;
+            break;
+          default:
+            parsedName = awardName;
+            break;
+        }
+
+        const data = {
+          endpoint: this.toggleAwardPath,
+          noteId: this.noteId,
+          awardName: parsedName,
+        };
+
+        this.toggleAwardRequest(data)
+          .catch(() => Flash('Something went wrong on our end.'));
+      },
+    },
+    created() {
+      this.emojiSmiling = emojiSmiling;
+      this.emojiSmile = emojiSmile;
+      this.emojiSmiley = emojiSmiley;
+    },
+  };
+</script>
+
+<template>
+  <div class="note-awards">
+    <div class="awards js-awards-block">
+      <button
+        v-tooltip
+        v-for="(awardList, awardName, index) in groupedAwards"
+        :key="index"
+        :class="getAwardClassBindings(awardList, awardName)"
+        :title="awardTitle(awardList)"
+        @click="handleAward(awardName)"
+        class="btn award-control"
+        data-placement="bottom"
+        type="button">
+        <span v-html="getAwardHTML(awardName)"></span>
+        <span class="award-control-text js-counter">
+          {{awardList.length}}
+        </span>
+      </button>
+      <div
+        v-if="isLoggedIn"
+        class="award-menu-holder">
+        <button
+          v-tooltip
+          :class="{ 'js-user-authored': isAuthoredByMe }"
+          class="award-control btn js-add-award"
+          title="Add reaction"
+          aria-label="Add reaction"
+          data-placement="bottom"
+          type="button">
+          <span
+            v-html="emojiSmiling"
+            class="award-control-icon award-control-icon-neutral">
+          </span>
+          <span
+            v-html="emojiSmiley"
+            class="award-control-icon award-control-icon-positive">
+          </span>
+          <span
+            v-html="emojiSmile"
+            class="award-control-icon award-control-icon-super-positive">
+          </span>
+          <i
+            aria-hidden="true"
+            class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note_body.vue b/app/assets/javascripts/notes/components/issue_note_body.vue
new file mode 100644
index 00000000000..5f9003bfd87
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_body.vue
@@ -0,0 +1,122 @@
+<script>
+  import issueNoteEditedText from './issue_note_edited_text.vue';
+  import issueNoteAwardsList from './issue_note_awards_list.vue';
+  import issueNoteAttachment from './issue_note_attachment.vue';
+  import issueNoteForm from './issue_note_form.vue';
+  import TaskList from '../../task_list';
+  import autosave from '../mixins/autosave';
+
+  export default {
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+      canEdit: {
+        type: Boolean,
+        required: true,
+      },
+      isEditing: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    mixins: [
+      autosave,
+    ],
+    components: {
+      issueNoteEditedText,
+      issueNoteAwardsList,
+      issueNoteAttachment,
+      issueNoteForm,
+    },
+    computed: {
+      noteBody() {
+        return this.note.note;
+      },
+    },
+    methods: {
+      renderGFM() {
+        $(this.$refs['note-body']).renderGFM();
+      },
+      initTaskList() {
+        if (this.canEdit) {
+          this.taskList = new TaskList({
+            dataType: 'note',
+            fieldName: 'note',
+            selector: '.notes',
+          });
+        }
+      },
+      handleFormUpdate(note, parentElement, callback) {
+        this.$emit('handleFormUpdate', note, parentElement, callback);
+      },
+      formCancelHandler(shouldConfirm, isDirty) {
+        this.$emit('cancelFormEdition', shouldConfirm, isDirty);
+      },
+    },
+    mounted() {
+      this.renderGFM();
+      this.initTaskList();
+
+      if (this.isEditing) {
+        this.initAutoSave();
+      }
+    },
+    updated() {
+      this.initTaskList();
+      this.renderGFM();
+
+      if (this.isEditing) {
+        if (!this.autosave) {
+          this.initAutoSave();
+        } else {
+          this.setAutoSave();
+        }
+      }
+    },
+  };
+</script>
+
+<template>
+  <div
+    :class="{ 'js-task-list-container': canEdit }"
+    ref="note-body"
+    class="note-body">
+    <div
+      v-html="note.note_html"
+      class="note-text md"></div>
+    <issue-note-form
+      v-if="isEditing"
+      ref="noteForm"
+      @handleFormUpdate="handleFormUpdate"
+      @cancelFormEdition="formCancelHandler"
+      :is-editing="isEditing"
+      :note-body="noteBody"
+      :note-id="note.id"
+      />
+    <textarea
+      v-if="canEdit"
+      v-model="note.note"
+      :data-update-url="note.path"
+      class="hidden js-task-list-field"></textarea>
+    <issue-note-edited-text
+      v-if="note.last_edited_at"
+      :edited-at="note.last_edited_at"
+      :edited-by="note.last_edited_by"
+      action-text="Edited"
+      />
+    <issue-note-awards-list
+      v-if="note.award_emoji.length"
+      :note-id="note.id"
+      :note-author-id="note.author.id"
+      :awards="note.award_emoji"
+      :toggle-award-path="note.toggle_award_path"
+      />
+    <issue-note-attachment
+      v-if="note.attachment"
+      :attachment="note.attachment"
+      />
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note_edited_text.vue b/app/assets/javascripts/notes/components/issue_note_edited_text.vue
new file mode 100644
index 00000000000..49e09f0ecc5
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_edited_text.vue
@@ -0,0 +1,47 @@
+<script>
+  import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+
+  export default {
+    name: 'editedNoteText',
+    props: {
+      actionText: {
+        type: String,
+        required: true,
+      },
+      editedAt: {
+        type: String,
+        required: true,
+      },
+      editedBy: {
+        type: Object,
+        required: false,
+      },
+      className: {
+        type: String,
+        required: false,
+        default: 'edited-text',
+      },
+    },
+    components: {
+      timeAgoTooltip,
+    },
+  };
+</script>
+
+<template>
+  <div :class="className">
+    {{actionText}}
+    <time-ago-tooltip
+      :time="editedAt"
+      tooltip-placement="bottom"
+      />
+    <template v-if="editedBy">
+      by
+      <a
+        :href="editedBy.path"
+        class="js-vue-author author_link">
+        {{editedBy.name}}
+      </a>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue
new file mode 100644
index 00000000000..626c0f2ce18
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_form.vue
@@ -0,0 +1,166 @@
+<script>
+  import { mapGetters } from 'vuex';
+  import eventHub from '../event_hub';
+  import confidentialIssue from '../../vue_shared/components/issue/confidential_issue_warning.vue';
+  import markdownField from '../../vue_shared/components/markdown/field.vue';
+
+  export default {
+    name: 'issueNoteForm',
+    props: {
+      noteBody: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      noteId: {
+        type: Number,
+        required: false,
+      },
+      saveButtonTitle: {
+        type: String,
+        required: false,
+        default: 'Save comment',
+      },
+      discussion: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      isEditing: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        note: this.noteBody,
+        conflictWhileEditing: false,
+        isSubmitting: false,
+      };
+    },
+    components: {
+      confidentialIssue,
+      markdownField,
+    },
+    computed: {
+      ...mapGetters([
+        'getDiscussionLastNote',
+        'getIssueDataByProp',
+        'getNotesDataByProp',
+        'getUserDataByProp',
+      ]),
+      noteHash() {
+        return `#note_${this.noteId}`;
+      },
+      markdownPreviewPath() {
+        return this.getIssueDataByProp('preview_note_path');
+      },
+      markdownDocsPath() {
+        return this.getNotesDataByProp('markdownDocsPath');
+      },
+      quickActionsDocsPath() {
+        return !this.isEditing ? this.getNotesDataByProp('quickActionsDocsPath') : undefined;
+      },
+      currentUserId() {
+        return this.getUserDataByProp('id');
+      },
+      isDisabled() {
+        return !this.note.length || this.isSubmitting;
+      },
+      isConfidentialIssue() {
+        return this.getIssueDataByProp('confidential');
+      },
+    },
+    methods: {
+      handleUpdate() {
+        this.isSubmitting = true;
+
+        this.$emit('handleFormUpdate', this.note, this.$refs.editNoteForm, () => {
+          this.isSubmitting = false;
+        });
+      },
+      editMyLastNote() {
+        if (this.note === '') {
+          const lastNoteInDiscussion = this.getDiscussionLastNote(this.discussion);
+
+          if (lastNoteInDiscussion) {
+            eventHub.$emit('enterEditMode', {
+              noteId: lastNoteInDiscussion.id,
+            });
+          }
+        }
+      },
+      cancelHandler(shouldConfirm = false) {
+        // Sends information about confirm message and if the textarea has changed
+        this.$emit('cancelFormEdition', shouldConfirm, this.noteBody !== this.note);
+      },
+    },
+    mounted() {
+      this.$refs.textarea.focus();
+    },
+    watch: {
+      noteBody() {
+        if (this.note === this.noteBody) {
+          this.note = this.noteBody;
+        } else {
+          this.conflictWhileEditing = true;
+        }
+      },
+    },
+  };
+</script>
+
+<template>
+  <div ref="editNoteForm" class="note-edit-form current-note-edit-form">
+    <div
+      v-if="conflictWhileEditing"
+      class="js-conflict-edit-warning alert alert-danger">
+      This comment has changed since you started editing, please review the
+      <a
+        :href="noteHash"
+        target="_blank"
+        rel="noopener noreferrer">updated comment</a>
+        to ensure information is not lost.
+    </div>
+    <div class="flash-container timeline-content"></div>
+    <form
+      class="edit-note common-note-form js-quick-submit gfm-form">
+      <confidentialIssue v-if="isConfidentialIssue" />
+      <markdown-field
+        :markdown-preview-path="markdownPreviewPath"
+        :markdown-docs-path="markdownDocsPath"
+        :quick-actions-docs-path="quickActionsDocsPath"
+        :add-spacing-classes="false">
+        <textarea
+          id="note_note"
+          name="note[note]"
+          class="note-textarea js-gfm-input js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
+          :data-supports-quick-actions="!isEditing"
+          aria-label="Description"
+          v-model="note"
+          ref="textarea"
+          slot="textarea"
+          placeholder="Write a comment or drag your files here..."
+          @keydown.meta.enter="handleUpdate()"
+          @keydown.up="editMyLastNote()"
+          @keydown.esc="cancelHandler(true)">
+        </textarea>
+      </markdown-field>
+      <div class="note-form-actions clearfix">
+        <button
+          type="button"
+          @click="handleUpdate()"
+          :disabled="isDisabled"
+          class="js-vue-issue-save btn btn-save">
+          {{saveButtonTitle}}
+        </button>
+        <button
+          @click="cancelHandler()"
+          class="btn btn-cancel note-edit-cancel"
+          type="button">
+          Cancel
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note_header.vue b/app/assets/javascripts/notes/components/issue_note_header.vue
new file mode 100644
index 00000000000..63aa3d777d0
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_header.vue
@@ -0,0 +1,118 @@
+<script>
+  import { mapActions } from 'vuex';
+  import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+
+  export default {
+    props: {
+      author: {
+        type: Object,
+        required: true,
+      },
+      createdAt: {
+        type: String,
+        required: true,
+      },
+      actionText: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      actionTextHtml: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      noteId: {
+        type: Number,
+        required: true,
+      },
+      includeToggle: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isExpanded: true,
+      };
+    },
+    components: {
+      timeAgoTooltip,
+    },
+    computed: {
+      toggleChevronClass() {
+        return this.isExpanded ? 'fa-chevron-up' : 'fa-chevron-down';
+      },
+      noteTimestampLink() {
+        return `#note_${this.noteId}`;
+      },
+    },
+    methods: {
+      ...mapActions([
+        'setTargetNoteHash',
+      ]),
+      handleToggle() {
+        this.isExpanded = !this.isExpanded;
+        this.$emit('toggleHandler');
+      },
+      updateTargetNoteHash() {
+        this.setTargetNoteHash(this.noteTimestampLink);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="note-header-info">
+    <a :href="author.path">
+      <span class="note-header-author-name">
+        {{author.name}}
+      </span>
+      <span class="note-headline-light">
+        @{{author.username}}
+      </span>
+    </a>
+    <span class="note-headline-light">
+      <span class="note-headline-meta">
+        <template v-if="actionText">
+          {{actionText}}
+        </template>
+        <span
+          v-if="actionTextHtml"
+          v-html="actionTextHtml"
+          class="system-note-message">
+        </span>
+        <a
+          :href="noteTimestampLink"
+          @click="updateTargetNoteHash"
+          class="note-timestamp">
+          <time-ago-tooltip
+            :time="createdAt"
+            tooltip-placement="bottom"
+            />
+        </a>
+        <i
+          class="fa fa-spinner fa-spin editing-spinner"
+          aria-label="Comment is being updated"
+          aria-hidden="true">
+        </i>
+      </span>
+    </span>
+    <div
+      v-if="includeToggle"
+      class="discussion-actions">
+      <button
+        @click="handleToggle"
+        class="note-action-button discussion-toggle-button js-vue-toggle-button"
+        type="button">
+          <i
+            :class="toggleChevronClass"
+            class="fa"
+            aria-hidden="true">
+          </i>
+          Toggle discussion
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_note_icons.js b/app/assets/javascripts/notes/components/issue_note_icons.js
new file mode 100644
index 00000000000..d8e3cb4bc01
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_icons.js
@@ -0,0 +1,37 @@
+import iconArrowCircle from 'icons/_icon_arrow_circle_o_right.svg';
+import iconCheck from 'icons/_icon_check_square_o.svg';
+import iconClock from 'icons/_icon_clock_o.svg';
+import iconCodeFork from 'icons/_icon_code_fork.svg';
+import iconComment from 'icons/_icon_comment_o.svg';
+import iconCommit from 'icons/_icon_commit.svg';
+import iconEdit from 'icons/_icon_edit.svg';
+import iconEye from 'icons/_icon_eye.svg';
+import iconEyeSlash from 'icons/_icon_eye_slash.svg';
+import iconMerge from 'icons/_icon_merge.svg';
+import iconMerged from 'icons/_icon_merged.svg';
+import iconRandom from 'icons/_icon_random.svg';
+import iconClosed from 'icons/_icon_status_closed.svg';
+import iconStatusOpen from 'icons/_icon_status_open.svg';
+import iconStopwatch from 'icons/_icon_stopwatch.svg';
+import iconTags from 'icons/_icon_tags.svg';
+import iconUser from 'icons/_icon_user.svg';
+
+export default {
+  icon_arrow_circle_o_right: iconArrowCircle,
+  icon_check_square_o: iconCheck,
+  icon_clock_o: iconClock,
+  icon_code_fork: iconCodeFork,
+  icon_comment_o: iconComment,
+  icon_commit: iconCommit,
+  icon_edit: iconEdit,
+  icon_eye: iconEye,
+  icon_eye_slash: iconEyeSlash,
+  icon_merge: iconMerge,
+  icon_merged: iconMerged,
+  icon_random: iconRandom,
+  icon_status_closed: iconClosed,
+  icon_status_open: iconStatusOpen,
+  icon_stopwatch: iconStopwatch,
+  icon_tags: iconTags,
+  icon_user: iconUser,
+};
diff --git a/app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue b/app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue
new file mode 100644
index 00000000000..77af3594c1c
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue
@@ -0,0 +1,28 @@
+<script>
+  import { mapGetters } from 'vuex';
+
+  export default {
+    name: 'singInLinksNotes',
+    computed: {
+      ...mapGetters([
+        'getNotesDataByProp',
+      ]),
+      registerLink() {
+        return this.getNotesDataByProp('registerPath');
+      },
+      signInLink() {
+        return this.getNotesDataByProp('newSessionPath');
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="disabled-comment text-center">
+    Please
+    <a :href="registerLink">register</a>
+    or
+    <a :href="signInLink">sign in</a>
+    to reply
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
new file mode 100644
index 00000000000..b6fc5e5036f
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -0,0 +1,151 @@
+<script>
+  /* global Flash */
+  import { mapGetters, mapActions } from 'vuex';
+  import store from '../stores/';
+  import * as constants from '../constants';
+  import issueNote from './issue_note.vue';
+  import issueDiscussion from './issue_discussion.vue';
+  import issueSystemNote from './issue_system_note.vue';
+  import issueCommentForm from './issue_comment_form.vue';
+  import placeholderNote from './issue_placeholder_note.vue';
+  import placeholderSystemNote from './issue_placeholder_system_note.vue';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+  export default {
+    name: 'issueNotesApp',
+    props: {
+      issueData: {
+        type: Object,
+        required: true,
+      },
+      notesData: {
+        type: Object,
+        required: true,
+      },
+      userData: {
+        type: Object,
+        required: false,
+        default: {},
+      },
+    },
+    store,
+    data() {
+      return {
+        isLoading: true,
+      };
+    },
+    components: {
+      issueNote,
+      issueDiscussion,
+      issueSystemNote,
+      issueCommentForm,
+      loadingIcon,
+      placeholderNote,
+      placeholderSystemNote,
+    },
+    computed: {
+      ...mapGetters([
+        'notes',
+        'getNotesDataByProp',
+      ]),
+    },
+    methods: {
+      ...mapActions({
+        actionFetchNotes: 'fetchNotes',
+        poll: 'poll',
+        actionToggleAward: 'toggleAward',
+        scrollToNoteIfNeeded: 'scrollToNoteIfNeeded',
+        setNotesData: 'setNotesData',
+        setIssueData: 'setIssueData',
+        setUserData: 'setUserData',
+        setLastFetchedAt: 'setLastFetchedAt',
+        setTargetNoteHash: 'setTargetNoteHash',
+      }),
+      getComponentName(note) {
+        if (note.isPlaceholderNote) {
+          if (note.placeholderType === constants.SYSTEM_NOTE) {
+            return placeholderSystemNote;
+          }
+          return placeholderNote;
+        } else if (note.individual_note) {
+          return note.notes[0].system ? issueSystemNote : issueNote;
+        }
+
+        return issueDiscussion;
+      },
+      getComponentData(note) {
+        return note.individual_note ? note.notes[0] : note;
+      },
+      fetchNotes() {
+        return this.actionFetchNotes(this.getNotesDataByProp('discussionsPath'))
+          .then(() => this.initPolling())
+          .then(() => {
+            this.isLoading = false;
+          })
+          .then(() => this.$nextTick())
+          .then(() => this.checkLocationHash())
+          .catch(() => {
+            this.isLoading = false;
+            Flash('Something went wrong while fetching issue comments. Please try again.');
+          });
+      },
+      initPolling() {
+        this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));
+
+        this.poll();
+      },
+      checkLocationHash() {
+        const hash = gl.utils.getLocationHash();
+        const element = document.getElementById(hash);
+
+        if (hash && element) {
+          this.setTargetNoteHash(hash);
+          this.scrollToNoteIfNeeded($(element));
+        }
+      },
+    },
+    created() {
+      this.setNotesData(this.notesData);
+      this.setIssueData(this.issueData);
+      this.setUserData(this.userData);
+    },
+    mounted() {
+      this.fetchNotes();
+
+      const parentElement = this.$el.parentElement;
+
+      if (parentElement &&
+        parentElement.classList.contains('js-vue-notes-event')) {
+        parentElement.addEventListener('toggleAward', (event) => {
+          const { awardName, noteId } = event.detail;
+          this.actionToggleAward({ awardName, noteId });
+        });
+      }
+    },
+  };
+</script>
+
+<template>
+  <div id="notes">
+    <div
+      v-if="isLoading"
+      class="js-loading loading">
+      <loading-icon />
+    </div>
+
+    <ul
+      v-if="!isLoading"
+      id="notes-list"
+      class="notes main-notes-list timeline">
+
+      <component
+        v-for="note in notes"
+        :is="getComponentName(note)"
+        :note="getComponentData(note)"
+        :key="note.id"
+        />
+    </ul>
+
+    <issue-comment-form />
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_placeholder_note.vue b/app/assets/javascripts/notes/components/issue_placeholder_note.vue
new file mode 100644
index 00000000000..6921d91372f
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_placeholder_note.vue
@@ -0,0 +1,53 @@
+<script>
+  import { mapGetters } from 'vuex';
+  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+
+  export default {
+    name: 'issuePlaceholderNote',
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      userAvatarLink,
+    },
+    computed: {
+      ...mapGetters([
+        'getUserData',
+      ]),
+    },
+  };
+</script>
+
+<template>
+  <li class="note being-posted fade-in-half timeline-entry">
+    <div class="timeline-entry-inner">
+      <div class="timeline-icon">
+        <user-avatar-link
+          :link-href="getUserData.path"
+          :img-src="getUserData.avatar_url"
+          :img-size="40"
+          />
+      </div>
+      <div
+        :class="{ discussion: !note.individual_note }"
+        class="timeline-content">
+        <div class="note-header">
+          <div class="note-header-info">
+            <a :href="getUserData.path">
+              <span class="hidden-xs">{{getUserData.name}}</span>
+              <span class="note-headline-light">@{{getUserData.username}}</span>
+            </a>
+          </div>
+        </div>
+        <div class="note-body">
+          <div class="note-text">
+            <p>{{note.body}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue b/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
new file mode 100644
index 00000000000..80a8ef56a83
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
@@ -0,0 +1,21 @@
+<script>
+  export default {
+    name: 'placeholderSystemNote',
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <li class="note system-note timeline-entry being-posted fade-in-half">
+   <div class="timeline-entry-inner">
+     <div class="timeline-content">
+       <em>{{note.body}}</em>
+     </div>
+   </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_system_note.vue b/app/assets/javascripts/notes/components/issue_system_note.vue
new file mode 100644
index 00000000000..5bb8f871b9d
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_system_note.vue
@@ -0,0 +1,55 @@
+<script>
+  import { mapGetters } from 'vuex';
+  import iconsMap from './issue_note_icons';
+  import issueNoteHeader from './issue_note_header.vue';
+
+  export default {
+    name: 'systemNote',
+    props: {
+      note: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      issueNoteHeader,
+    },
+    computed: {
+      ...mapGetters([
+        'targetNoteHash',
+      ]),
+      noteAnchorId() {
+        return `note_${this.note.id}`;
+      },
+      isTargetNote() {
+        return this.targetNoteHash === this.noteAnchorId;
+      },
+    },
+    created() {
+      this.svg = iconsMap[this.note.system_note_icon_name];
+    },
+  };
+</script>
+
+<template>
+  <li
+    :id="noteAnchorId"
+    :class="{ target: isTargetNote }"
+    class="note system-note timeline-entry">
+    <div class="timeline-entry-inner">
+      <div
+        class="timeline-icon"
+        v-html="svg">
+      </div>
+      <div class="timeline-content">
+        <div class="note-header">
+          <issue-note-header
+            :author="note.author"
+            :created-at="note.created_at"
+            :note-id="note.id"
+            :action-text-html="note.note_html" />
+        </div>
+      </div>
+    </div>
+  </li>
+</template>