From bf85a90037714c3ba290c9966f435adbfa90b074 Mon Sep 17 00:00:00 2001
From: Simon Knox <simon@gitlab.com>
Date: Mon, 4 Dec 2017 16:19:07 +0000
Subject: issue note component rename

---
 .../notes/components/discussion_locked_widget.vue  |  26 +++
 .../notes/components/issue_comment_form.vue        |  15 +-
 .../notes/components/issue_discussion.vue          |  22 +-
 .../components/issue_discussion_locked_widget.vue  |  22 --
 .../javascripts/notes/components/issue_note.vue    |  12 +-
 .../notes/components/issue_note_actions.vue        | 167 ---------------
 .../notes/components/issue_note_attachment.vue     |  37 ----
 .../notes/components/issue_note_awards_list.vue    | 227 ---------------------
 .../notes/components/issue_note_body.vue           |  18 +-
 .../notes/components/issue_note_edited_text.vue    |  47 -----
 .../notes/components/issue_note_header.vue         | 118 -----------
 .../components/issue_note_signed_out_widget.vue    |  28 ---
 .../javascripts/notes/components/note_actions.vue  | 167 +++++++++++++++
 .../notes/components/note_attachment.vue           |  37 ++++
 .../notes/components/note_awards_list.vue          | 227 +++++++++++++++++++++
 .../notes/components/note_edited_text.vue          |  47 +++++
 .../javascripts/notes/components/note_header.vue   | 118 +++++++++++
 .../notes/components/note_signed_out_widget.vue    |  27 +++
 .../sidebar/components/lock/edit_form.vue          |   9 +-
 .../sidebar/components/lock/lock_issue_sidebar.vue |   9 +-
 .../vue_shared/components/notes/system_note.vue    |   8 +-
 .../javascripts/vue_shared/mixins/issuable.js      |  13 +-
 .../notes/components/issue_note_actions_spec.js    |  91 ---------
 .../notes/components/issue_note_attachment_spec.js |  23 ---
 .../components/issue_note_awards_list_spec.js      |  56 -----
 .../components/issue_note_edited_text_spec.js      |  47 -----
 .../notes/components/issue_note_header_spec.js     |  94 ---------
 .../issue_note_signed_out_widget_spec.js           |  37 ----
 .../notes/components/note_actions_spec.js          |  91 +++++++++
 .../notes/components/note_attachment_spec.js       |  23 +++
 .../notes/components/note_awards_list_spec.js      |  56 +++++
 .../notes/components/note_edited_text_spec.js      |  47 +++++
 .../notes/components/note_header_spec.js           |  94 +++++++++
 .../components/note_signed_out_widget_spec.js      |  37 ++++
 34 files changed, 1048 insertions(+), 1049 deletions(-)
 create mode 100644 app/assets/javascripts/notes/components/discussion_locked_widget.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_note_actions.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_note_attachment.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_note_awards_list.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_note_edited_text.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_note_header.vue
 delete mode 100644 app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue
 create mode 100644 app/assets/javascripts/notes/components/note_actions.vue
 create mode 100644 app/assets/javascripts/notes/components/note_attachment.vue
 create mode 100644 app/assets/javascripts/notes/components/note_awards_list.vue
 create mode 100644 app/assets/javascripts/notes/components/note_edited_text.vue
 create mode 100644 app/assets/javascripts/notes/components/note_header.vue
 create mode 100644 app/assets/javascripts/notes/components/note_signed_out_widget.vue
 delete mode 100644 spec/javascripts/notes/components/issue_note_actions_spec.js
 delete mode 100644 spec/javascripts/notes/components/issue_note_attachment_spec.js
 delete mode 100644 spec/javascripts/notes/components/issue_note_awards_list_spec.js
 delete mode 100644 spec/javascripts/notes/components/issue_note_edited_text_spec.js
 delete mode 100644 spec/javascripts/notes/components/issue_note_header_spec.js
 delete mode 100644 spec/javascripts/notes/components/issue_note_signed_out_widget_spec.js
 create mode 100644 spec/javascripts/notes/components/note_actions_spec.js
 create mode 100644 spec/javascripts/notes/components/note_attachment_spec.js
 create mode 100644 spec/javascripts/notes/components/note_awards_list_spec.js
 create mode 100644 spec/javascripts/notes/components/note_edited_text_spec.js
 create mode 100644 spec/javascripts/notes/components/note_header_spec.js
 create mode 100644 spec/javascripts/notes/components/note_signed_out_widget_spec.js

diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
new file mode 100644
index 00000000000..e6f7ee56ff3
--- /dev/null
+++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
@@ -0,0 +1,26 @@
+<script>
+  import Icon from '~/vue_shared/components/icon.vue';
+  import Issuable from '~/vue_shared/mixins/issuable';
+
+  export default {
+    mixins: [
+      Issuable,
+    ],
+    components: {
+      Icon,
+    },
+  };
+</script>
+
+<template>
+  <div class="disabled-comment text-center">
+    <span class="issuable-note-warning inline">
+      <icon
+        name="lock"
+        :size="16"
+        class="icon">
+      </icon>
+      <span>This {{ issuableDisplayName }} is locked. Only <b>project members</b> can comment.</span>
+     </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index dbc900f4c04..78986a450c2 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -8,8 +8,8 @@
   import * as constants from '../constants';
   import eventHub from '../event_hub';
   import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
-  import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
-  import issueDiscussionLockedWidget from './issue_discussion_locked_widget.vue';
+  import noteSignedOutWidget from './note_signed_out_widget.vue';
+  import discussionLockedWidget from './discussion_locked_widget.vue';
   import markdownField from '../../vue_shared/components/markdown/field.vue';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import issuableStateMixin from '../mixins/issuable_state';
@@ -29,8 +29,8 @@
     },
     components: {
       issueWarning,
-      issueNoteSignedOutWidget,
-      issueDiscussionLockedWidget,
+      noteSignedOutWidget,
+      discussionLockedWidget,
       markdownField,
       userAvatarLink,
     },
@@ -240,8 +240,11 @@
 
 <template>
   <div>
-    <issue-note-signed-out-widget v-if="!isLoggedIn" />
-    <issue-discussion-locked-widget v-else-if="!canCreateNote" />
+    <note-signed-out-widget v-if="!isLoggedIn" />
+    <discussion-locked-widget
+      issuable-type="issue"
+      v-else-if="!canCreateNote"
+    />
     <ul
       v-else
       class="notes notes-form timeline">
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index 26f729d8875..460fde9b62a 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -4,10 +4,9 @@
   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 noteHeader from './note_header.vue';
+  import noteSignedOutWidget from './note_signed_out_widget.vue';
+  import noteEditedText from './note_edited_text.vue';
   import issueNoteForm from './issue_note_form.vue';
   import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
   import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
@@ -28,10 +27,9 @@
     components: {
       issueNote,
       userAvatarLink,
-      issueNoteHeader,
-      issueNoteActions,
-      issueNoteSignedOutWidget,
-      issueNoteEditedText,
+      noteHeader,
+      noteSignedOutWidget,
+      noteEditedText,
       issueNoteForm,
       placeholderNote,
       placeholderSystemNote,
@@ -171,7 +169,7 @@
       <div class="timeline-content">
         <div class="discussion">
           <div class="discussion-header">
-            <issue-note-header
+            <note-header
               :author="author"
               :created-at="discussion.created_at"
               :note-id="discussion.id"
@@ -179,8 +177,8 @@
               @toggleHandler="toggleDiscussionHandler"
               action-text="started a discussion"
               class="discussion"
-              />
-            <issue-note-edited-text
+            />
+            <note-edited-text
               v-if="lastUpdatedAt"
               :edited-at="lastUpdatedAt"
               :edited-by="lastUpdatedBy"
@@ -220,7 +218,7 @@
                     @cancelFormEdition="cancelReplyForm"
                     ref="noteForm"
                     />
-                  <issue-note-signed-out-widget v-if="!canReply" />
+                  <note-signed-out-widget v-if="!canReply" />
                 </div>
               </div>
             </div>
diff --git a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
deleted file mode 100644
index 64466b04b40..00000000000
--- a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import Icon from '../../vue_shared/components/icon.vue';
-
-  export default {
-    component: {
-      Icon,
-    },
-  };
-</script>
-
-<template>
-  <div class="disabled-comment text-center">
-    <span class="issuable-note-warning inline">
-      <icon
-        name="lock"
-        :size="16"
-        class="icon">
-      </icon>
-      <span>This issue is locked. Only <b>project members</b> can comment.</span>
-     </span>
-  </div>
-</template>
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 40318f9a600..8c81c5d6df3 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -2,8 +2,8 @@
   import { mapGetters, mapActions } from 'vuex';
   import Flash from '../../flash';
   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 noteHeader from './note_header.vue';
+  import noteActions from './note_actions.vue';
   import issueNoteBody from './issue_note_body.vue';
   import eventHub from '../event_hub';
 
@@ -23,8 +23,8 @@
     },
     components: {
       userAvatarLink,
-      issueNoteHeader,
-      issueNoteActions,
+      noteHeader,
+      noteActions,
       issueNoteBody,
     },
     computed: {
@@ -155,13 +155,13 @@
       </div>
       <div class="timeline-content">
         <div class="note-header">
-          <issue-note-header
+          <note-header
             :author="author"
             :created-at="note.created_at"
             :note-id="note.id"
             action-text="commented"
             />
-          <issue-note-actions
+          <note-actions
             :author-id="author.id"
             :note-id="note.id"
             :access-level="note.human_access"
diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue
deleted file mode 100644
index feb3e73194b..00000000000
--- a/app/assets/javascripts/notes/components/issue_note_actions.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<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 note-role-access">{{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
deleted file mode 100644
index 7134a3eb47e..00000000000
--- a/app/assets/javascripts/notes/components/issue_note_attachment.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<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
deleted file mode 100644
index c3a340139e7..00000000000
--- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<script>
-  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 Flash from '../../flash';
-  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
index 5f9003bfd87..a16c5f6a785 100644
--- a/app/assets/javascripts/notes/components/issue_note_body.vue
+++ b/app/assets/javascripts/notes/components/issue_note_body.vue
@@ -1,7 +1,7 @@
 <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 noteEditedText from './note_edited_text.vue';
+  import noteAwardsList from './note_awards_list.vue';
+  import noteAttachment from './note_attachment.vue';
   import issueNoteForm from './issue_note_form.vue';
   import TaskList from '../../task_list';
   import autosave from '../mixins/autosave';
@@ -26,9 +26,9 @@
       autosave,
     ],
     components: {
-      issueNoteEditedText,
-      issueNoteAwardsList,
-      issueNoteAttachment,
+      noteEditedText,
+      noteAwardsList,
+      noteAttachment,
       issueNoteForm,
     },
     computed: {
@@ -101,20 +101,20 @@
       v-model="note.note"
       :data-update-url="note.path"
       class="hidden js-task-list-field"></textarea>
-    <issue-note-edited-text
+    <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
+    <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
+    <note-attachment
       v-if="note.attachment"
       :attachment="note.attachment"
       />
diff --git a/app/assets/javascripts/notes/components/issue_note_edited_text.vue b/app/assets/javascripts/notes/components/issue_note_edited_text.vue
deleted file mode 100644
index 49e09f0ecc5..00000000000
--- a/app/assets/javascripts/notes/components/issue_note_edited_text.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<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_header.vue b/app/assets/javascripts/notes/components/issue_note_header.vue
deleted file mode 100644
index 63aa3d777d0..00000000000
--- a/app/assets/javascripts/notes/components/issue_note_header.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<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_signed_out_widget.vue b/app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue
deleted file mode 100644
index 77af3594c1c..00000000000
--- a/app/assets/javascripts/notes/components/issue_note_signed_out_widget.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<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/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
new file mode 100644
index 00000000000..45fc6196be4
--- /dev/null
+++ b/app/assets/javascripts/notes/components/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: 'noteActions',
+    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 note-role-access">{{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/note_attachment.vue b/app/assets/javascripts/notes/components/note_attachment.vue
new file mode 100644
index 00000000000..cd9571a4002
--- /dev/null
+++ b/app/assets/javascripts/notes/components/note_attachment.vue
@@ -0,0 +1,37 @@
+<script>
+  export default {
+    name: 'noteAttachment',
+    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/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
new file mode 100644
index 00000000000..c3a340139e7
--- /dev/null
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -0,0 +1,227 @@
+<script>
+  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 Flash from '../../flash';
+  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/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue
new file mode 100644
index 00000000000..49e09f0ecc5
--- /dev/null
+++ b/app/assets/javascripts/notes/components/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/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
new file mode 100644
index 00000000000..63aa3d777d0
--- /dev/null
+++ b/app/assets/javascripts/notes/components/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/note_signed_out_widget.vue b/app/assets/javascripts/notes/components/note_signed_out_widget.vue
new file mode 100644
index 00000000000..45d3c2de355
--- /dev/null
+++ b/app/assets/javascripts/notes/components/note_signed_out_widget.vue
@@ -0,0 +1,27 @@
+<script>
+  import { mapGetters } from 'vuex';
+
+  export default {
+    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/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index c7a6edc7c70..242e826d471 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -18,11 +18,6 @@ export default {
       required: true,
       type: Function,
     },
-
-    issuableType: {
-      required: true,
-      type: String,
-    },
   },
 
   mixins: [
@@ -39,13 +34,13 @@ export default {
   <div class="dropdown open">
     <div class="dropdown-menu sidebar-item-warning-message">
       <p class="text" v-if="isLocked">
-        Unlock this {{ issuableDisplayName(issuableType) }}?
+        Unlock this {{ issuableDisplayName }}?
         <strong>Everyone</strong>
         will be able to comment.
       </p>
 
       <p class="text" v-else>
-        Lock this {{ issuableDisplayName(issuableType) }}?
+        Lock this {{ issuableDisplayName }}?
         Only
         <strong>project members</strong>
         will be able to comment.
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index 9aff53cf8af..04c3a96bf74 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -23,11 +23,6 @@ export default {
         return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
       },
     },
-
-    issuableType: {
-      required: true,
-      type: String,
-    },
   },
 
   mixins: [
@@ -59,7 +54,7 @@ export default {
         discussion_locked: locked,
       })
       .then(() => location.reload())
-      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName(this.issuableType)}`)));
+      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName}`)));
     },
   },
 };
@@ -77,7 +72,7 @@ export default {
     </div>
 
     <div class="title hide-collapsed">
-      Lock {{issuableDisplayName(issuableType) }}
+      Lock {{ issuableDisplayName }}
       <button
         v-if="isEditable"
         class="pull-right lock-edit btn btn-blank"
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 98f8f32557d..2248699c399 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -17,7 +17,7 @@
    *   />
    */
   import { mapGetters } from 'vuex';
-  import issueNoteHeader from '../../../notes/components/issue_note_header.vue';
+  import noteHeader from '~/notes/components/note_header.vue';
   import { spriteIcon } from '../../../lib/utils/common_utils';
 
   export default {
@@ -29,7 +29,7 @@
       },
     },
     components: {
-      issueNoteHeader,
+      noteHeader,
     },
     computed: {
       ...mapGetters([
@@ -60,12 +60,12 @@
       </div>
       <div class="timeline-content">
         <div class="note-header">
-          <issue-note-header
+          <note-header
             :author="note.author"
             :created-at="note.created_at"
             :note-id="note.id"
             :action-text-html="note.note_html"
-            />
+          />
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/mixins/issuable.js b/app/assets/javascripts/vue_shared/mixins/issuable.js
index 263361587e0..fab0919d96e 100644
--- a/app/assets/javascripts/vue_shared/mixins/issuable.js
+++ b/app/assets/javascripts/vue_shared/mixins/issuable.js
@@ -1,9 +1,14 @@
 export default {
-  methods: {
-    issuableDisplayName(issuableType) {
-      const displayName = issuableType.replace(/_/, ' ');
+  props: {
+    issuableType: {
+      required: true,
+      type: String,
+    },
+  },
 
-      return this.__ ? this.__(displayName) : displayName;
+  computed: {
+    issuableDisplayName() {
+      return this.issuableType.replace(/_/g, ' ');
     },
   },
 };
diff --git a/spec/javascripts/notes/components/issue_note_actions_spec.js b/spec/javascripts/notes/components/issue_note_actions_spec.js
deleted file mode 100644
index 7bcc061f167..00000000000
--- a/spec/javascripts/notes/components/issue_note_actions_spec.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import Vue from 'vue';
-import store from '~/notes/stores';
-import issueActions from '~/notes/components/issue_note_actions.vue';
-import { userDataMock } from '../mock_data';
-
-describe('issse_note_actions component', () => {
-  let vm;
-  let Component;
-
-  beforeEach(() => {
-    Component = Vue.extend(issueActions);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('user is logged in', () => {
-    let props;
-
-    beforeEach(() => {
-      props = {
-        accessLevel: 'Master',
-        authorId: 26,
-        canDelete: true,
-        canEdit: true,
-        canReportAsAbuse: true,
-        noteId: 539,
-        reportAbusePath: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
-      };
-
-      store.dispatch('setUserData', userDataMock);
-
-      vm = new Component({
-        store,
-        propsData: props,
-      }).$mount();
-    });
-
-    it('should render access level badge', () => {
-      expect(vm.$el.querySelector('.note-role').textContent.trim()).toEqual(props.accessLevel);
-    });
-
-    it('should render emoji link', () => {
-      expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
-    });
-
-    describe('actions dropdown', () => {
-      it('should be possible to edit the comment', () => {
-        expect(vm.$el.querySelector('.js-note-edit')).toBeDefined();
-      });
-
-      it('should be possible to report as abuse', () => {
-        expect(vm.$el.querySelector(`a[href="${props.reportAbusePath}"]`)).toBeDefined();
-      });
-
-      it('should be possible to delete comment', () => {
-        expect(vm.$el.querySelector('.js-note-delete')).toBeDefined();
-      });
-    });
-  });
-
-  describe('user is not logged in', () => {
-    let props;
-
-    beforeEach(() => {
-      store.dispatch('setUserData', {});
-      props = {
-        accessLevel: 'Master',
-        authorId: 26,
-        canDelete: false,
-        canEdit: false,
-        canReportAsAbuse: false,
-        noteId: 539,
-        reportAbusePath: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
-      };
-      vm = new Component({
-        store,
-        propsData: props,
-      }).$mount();
-    });
-
-    it('should not render emoji link', () => {
-      expect(vm.$el.querySelector('.js-add-award')).toEqual(null);
-    });
-
-    it('should not render actions dropdown', () => {
-      expect(vm.$el.querySelector('.more-actions')).toEqual(null);
-    });
-  });
-});
diff --git a/spec/javascripts/notes/components/issue_note_attachment_spec.js b/spec/javascripts/notes/components/issue_note_attachment_spec.js
deleted file mode 100644
index 8f33b874ad6..00000000000
--- a/spec/javascripts/notes/components/issue_note_attachment_spec.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Vue from 'vue';
-import issueNoteAttachment from '~/notes/components/issue_note_attachment.vue';
-
-describe('issue note attachment', () => {
-  it('should render properly', () => {
-    const props = {
-      attachment: {
-        filename: 'dk.png',
-        image: true,
-        url: '/dk.png',
-      },
-    };
-
-    const Component = Vue.extend(issueNoteAttachment);
-    const vm = new Component({
-      propsData: props,
-    }).$mount();
-
-    expect(vm.$el.classList.contains('note-attachment')).toBeTruthy();
-    expect(vm.$el.querySelector('img').src).toContain(props.attachment.url);
-    expect(vm.$el.querySelector('a').href).toContain(props.attachment.url);
-  });
-});
diff --git a/spec/javascripts/notes/components/issue_note_awards_list_spec.js b/spec/javascripts/notes/components/issue_note_awards_list_spec.js
deleted file mode 100644
index c689c452143..00000000000
--- a/spec/javascripts/notes/components/issue_note_awards_list_spec.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import Vue from 'vue';
-import store from '~/notes/stores';
-import awardsNote from '~/notes/components/issue_note_awards_list.vue';
-import { noteableDataMock, notesDataMock } from '../mock_data';
-
-describe('issue_note_awards_list component', () => {
-  let vm;
-  let awardsMock;
-
-  beforeEach(() => {
-    const Component = Vue.extend(awardsNote);
-
-    store.dispatch('setNoteableData', noteableDataMock);
-    store.dispatch('setNotesData', notesDataMock);
-    awardsMock = [
-      {
-        name: 'flag_tz',
-        user: { id: 1, name: 'Administrator', username: 'root' },
-      },
-      {
-        name: 'cartwheel_tone3',
-        user: { id: 12, name: 'Bobbie Stehr', username: 'erin' },
-      },
-    ];
-
-    vm = new Component({
-      store,
-      propsData: {
-        awards: awardsMock,
-        noteAuthorId: 2,
-        noteId: 545,
-        toggleAwardPath: '/gitlab-org/gitlab-ce/notes/545/toggle_award_emoji',
-      },
-    }).$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('should render awarded emojis', () => {
-    expect(vm.$el.querySelector('.js-awards-block button [data-name="flag_tz"]')).toBeDefined();
-    expect(vm.$el.querySelector('.js-awards-block button [data-name="cartwheel_tone3"]')).toBeDefined();
-  });
-
-  it('should be possible to remove awareded emoji', () => {
-    spyOn(vm, 'handleAward').and.callThrough();
-    vm.$el.querySelector('.js-awards-block button').click();
-
-    expect(vm.handleAward).toHaveBeenCalledWith('flag_tz');
-  });
-
-  it('should be possible to add new emoji', () => {
-    expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
-  });
-});
diff --git a/spec/javascripts/notes/components/issue_note_edited_text_spec.js b/spec/javascripts/notes/components/issue_note_edited_text_spec.js
deleted file mode 100644
index 6603241eb64..00000000000
--- a/spec/javascripts/notes/components/issue_note_edited_text_spec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import Vue from 'vue';
-import issueNoteEditedText from '~/notes/components/issue_note_edited_text.vue';
-
-describe('issue_note_edited_text', () => {
-  let vm;
-  let props;
-
-  beforeEach(() => {
-    const Component = Vue.extend(issueNoteEditedText);
-    props = {
-      actionText: 'Edited',
-      className: 'foo-bar',
-      editedAt: '2017-08-04T09:52:31.062Z',
-      editedBy: {
-        avatar_url: 'path',
-        id: 1,
-        name: 'Root',
-        path: '/root',
-        state: 'active',
-        username: 'root',
-      },
-    };
-
-    vm = new Component({
-      propsData: props,
-    }).$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('should render block with provided className', () => {
-    expect(vm.$el.className).toEqual(props.className);
-  });
-
-  it('should render provided actionText', () => {
-    expect(vm.$el.textContent).toContain(props.actionText);
-  });
-
-  it('should render provided user information', () => {
-    const authorLink = vm.$el.querySelector('.js-vue-author');
-
-    expect(authorLink.getAttribute('href')).toEqual(props.editedBy.path);
-    expect(authorLink.textContent.trim()).toEqual(props.editedBy.name);
-  });
-});
diff --git a/spec/javascripts/notes/components/issue_note_header_spec.js b/spec/javascripts/notes/components/issue_note_header_spec.js
deleted file mode 100644
index 83ea18508ae..00000000000
--- a/spec/javascripts/notes/components/issue_note_header_spec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import Vue from 'vue';
-import issueNoteHeader from '~/notes/components/issue_note_header.vue';
-import store from '~/notes/stores';
-
-describe('issue_note_header component', () => {
-  let vm;
-  let Component;
-
-  beforeEach(() => {
-    Component = Vue.extend(issueNoteHeader);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('individual note', () => {
-    beforeEach(() => {
-      vm = new Component({
-        store,
-        propsData: {
-          actionText: 'commented',
-          actionTextHtml: '',
-          author: {
-            avatar_url: null,
-            id: 1,
-            name: 'Root',
-            path: '/root',
-            state: 'active',
-            username: 'root',
-          },
-          createdAt: '2017-08-02T10:51:58.559Z',
-          includeToggle: false,
-          noteId: 1394,
-        },
-      }).$mount();
-    });
-
-    it('should render user information', () => {
-      expect(
-        vm.$el.querySelector('.note-header-author-name').textContent.trim(),
-      ).toEqual('Root');
-      expect(
-        vm.$el.querySelector('.note-header-info a').getAttribute('href'),
-      ).toEqual('/root');
-    });
-
-    it('should render timestamp link', () => {
-      expect(vm.$el.querySelector('a[href="#note_1394"]')).toBeDefined();
-    });
-  });
-
-  describe('discussion', () => {
-    beforeEach(() => {
-      vm = new Component({
-        store,
-        propsData: {
-          actionText: 'started a discussion',
-          actionTextHtml: '',
-          author: {
-            avatar_url: null,
-            id: 1,
-            name: 'Root',
-            path: '/root',
-            state: 'active',
-            username: 'root',
-          },
-          createdAt: '2017-08-02T10:51:58.559Z',
-          includeToggle: true,
-          noteId: 1395,
-        },
-      }).$mount();
-    });
-
-    it('should render toggle button', () => {
-      expect(vm.$el.querySelector('.js-vue-toggle-button')).toBeDefined();
-    });
-
-    it('should toggle the disucssion icon', (done) => {
-      expect(
-        vm.$el.querySelector('.js-vue-toggle-button i').classList.contains('fa-chevron-up'),
-      ).toEqual(true);
-
-      vm.$el.querySelector('.js-vue-toggle-button').click();
-
-      Vue.nextTick(() => {
-        expect(
-          vm.$el.querySelector('.js-vue-toggle-button i').classList.contains('fa-chevron-down'),
-        ).toEqual(true);
-        done();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/notes/components/issue_note_signed_out_widget_spec.js b/spec/javascripts/notes/components/issue_note_signed_out_widget_spec.js
deleted file mode 100644
index f20d9ce9268..00000000000
--- a/spec/javascripts/notes/components/issue_note_signed_out_widget_spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Vue from 'vue';
-import issueNoteSignedOut from '~/notes/components/issue_note_signed_out_widget.vue';
-import store from '~/notes/stores';
-import { notesDataMock } from '../mock_data';
-
-describe('issue_note_signed_out_widget component', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(issueNoteSignedOut);
-    store.dispatch('setNotesData', notesDataMock);
-
-    vm = new Component({
-      store,
-    }).$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('should render sign in link provided in the store', () => {
-    expect(
-      vm.$el.querySelector(`a[href="${notesDataMock.newSessionPath}"]`).textContent,
-    ).toEqual('sign in');
-  });
-
-  it('should render register link provided in the store', () => {
-    expect(
-      vm.$el.querySelector(`a[href="${notesDataMock.registerPath}"]`).textContent,
-    ).toEqual('register');
-  });
-
-  it('should render information text', () => {
-    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
-  });
-});
diff --git a/spec/javascripts/notes/components/note_actions_spec.js b/spec/javascripts/notes/components/note_actions_spec.js
new file mode 100644
index 00000000000..ab81aabb992
--- /dev/null
+++ b/spec/javascripts/notes/components/note_actions_spec.js
@@ -0,0 +1,91 @@
+import Vue from 'vue';
+import store from '~/notes/stores';
+import noteActions from '~/notes/components/note_actions.vue';
+import { userDataMock } from '../mock_data';
+
+describe('issse_note_actions component', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(noteActions);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('user is logged in', () => {
+    let props;
+
+    beforeEach(() => {
+      props = {
+        accessLevel: 'Master',
+        authorId: 26,
+        canDelete: true,
+        canEdit: true,
+        canReportAsAbuse: true,
+        noteId: 539,
+        reportAbusePath: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
+      };
+
+      store.dispatch('setUserData', userDataMock);
+
+      vm = new Component({
+        store,
+        propsData: props,
+      }).$mount();
+    });
+
+    it('should render access level badge', () => {
+      expect(vm.$el.querySelector('.note-role').textContent.trim()).toEqual(props.accessLevel);
+    });
+
+    it('should render emoji link', () => {
+      expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
+    });
+
+    describe('actions dropdown', () => {
+      it('should be possible to edit the comment', () => {
+        expect(vm.$el.querySelector('.js-note-edit')).toBeDefined();
+      });
+
+      it('should be possible to report as abuse', () => {
+        expect(vm.$el.querySelector(`a[href="${props.reportAbusePath}"]`)).toBeDefined();
+      });
+
+      it('should be possible to delete comment', () => {
+        expect(vm.$el.querySelector('.js-note-delete')).toBeDefined();
+      });
+    });
+  });
+
+  describe('user is not logged in', () => {
+    let props;
+
+    beforeEach(() => {
+      store.dispatch('setUserData', {});
+      props = {
+        accessLevel: 'Master',
+        authorId: 26,
+        canDelete: false,
+        canEdit: false,
+        canReportAsAbuse: false,
+        noteId: 539,
+        reportAbusePath: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
+      };
+      vm = new Component({
+        store,
+        propsData: props,
+      }).$mount();
+    });
+
+    it('should not render emoji link', () => {
+      expect(vm.$el.querySelector('.js-add-award')).toEqual(null);
+    });
+
+    it('should not render actions dropdown', () => {
+      expect(vm.$el.querySelector('.more-actions')).toEqual(null);
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/note_attachment_spec.js b/spec/javascripts/notes/components/note_attachment_spec.js
new file mode 100644
index 00000000000..b14a518b622
--- /dev/null
+++ b/spec/javascripts/notes/components/note_attachment_spec.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import noteAttachment from '~/notes/components/note_attachment.vue';
+
+describe('issue note attachment', () => {
+  it('should render properly', () => {
+    const props = {
+      attachment: {
+        filename: 'dk.png',
+        image: true,
+        url: '/dk.png',
+      },
+    };
+
+    const Component = Vue.extend(noteAttachment);
+    const vm = new Component({
+      propsData: props,
+    }).$mount();
+
+    expect(vm.$el.classList.contains('note-attachment')).toBeTruthy();
+    expect(vm.$el.querySelector('img').src).toContain(props.attachment.url);
+    expect(vm.$el.querySelector('a').href).toContain(props.attachment.url);
+  });
+});
diff --git a/spec/javascripts/notes/components/note_awards_list_spec.js b/spec/javascripts/notes/components/note_awards_list_spec.js
new file mode 100644
index 00000000000..15995ec5a05
--- /dev/null
+++ b/spec/javascripts/notes/components/note_awards_list_spec.js
@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import store from '~/notes/stores';
+import awardsNote from '~/notes/components/note_awards_list.vue';
+import { noteableDataMock, notesDataMock } from '../mock_data';
+
+describe('note_awards_list component', () => {
+  let vm;
+  let awardsMock;
+
+  beforeEach(() => {
+    const Component = Vue.extend(awardsNote);
+
+    store.dispatch('setNoteableData', noteableDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+    awardsMock = [
+      {
+        name: 'flag_tz',
+        user: { id: 1, name: 'Administrator', username: 'root' },
+      },
+      {
+        name: 'cartwheel_tone3',
+        user: { id: 12, name: 'Bobbie Stehr', username: 'erin' },
+      },
+    ];
+
+    vm = new Component({
+      store,
+      propsData: {
+        awards: awardsMock,
+        noteAuthorId: 2,
+        noteId: 545,
+        toggleAwardPath: '/gitlab-org/gitlab-ce/notes/545/toggle_award_emoji',
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render awarded emojis', () => {
+    expect(vm.$el.querySelector('.js-awards-block button [data-name="flag_tz"]')).toBeDefined();
+    expect(vm.$el.querySelector('.js-awards-block button [data-name="cartwheel_tone3"]')).toBeDefined();
+  });
+
+  it('should be possible to remove awareded emoji', () => {
+    spyOn(vm, 'handleAward').and.callThrough();
+    vm.$el.querySelector('.js-awards-block button').click();
+
+    expect(vm.handleAward).toHaveBeenCalledWith('flag_tz');
+  });
+
+  it('should be possible to add new emoji', () => {
+    expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
+  });
+});
diff --git a/spec/javascripts/notes/components/note_edited_text_spec.js b/spec/javascripts/notes/components/note_edited_text_spec.js
new file mode 100644
index 00000000000..e0b991c32ec
--- /dev/null
+++ b/spec/javascripts/notes/components/note_edited_text_spec.js
@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import noteEditedText from '~/notes/components/note_edited_text.vue';
+
+describe('note_edited_text', () => {
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    const Component = Vue.extend(noteEditedText);
+    props = {
+      actionText: 'Edited',
+      className: 'foo-bar',
+      editedAt: '2017-08-04T09:52:31.062Z',
+      editedBy: {
+        avatar_url: 'path',
+        id: 1,
+        name: 'Root',
+        path: '/root',
+        state: 'active',
+        username: 'root',
+      },
+    };
+
+    vm = new Component({
+      propsData: props,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render block with provided className', () => {
+    expect(vm.$el.className).toEqual(props.className);
+  });
+
+  it('should render provided actionText', () => {
+    expect(vm.$el.textContent).toContain(props.actionText);
+  });
+
+  it('should render provided user information', () => {
+    const authorLink = vm.$el.querySelector('.js-vue-author');
+
+    expect(authorLink.getAttribute('href')).toEqual(props.editedBy.path);
+    expect(authorLink.textContent.trim()).toEqual(props.editedBy.name);
+  });
+});
diff --git a/spec/javascripts/notes/components/note_header_spec.js b/spec/javascripts/notes/components/note_header_spec.js
new file mode 100644
index 00000000000..16a76b11321
--- /dev/null
+++ b/spec/javascripts/notes/components/note_header_spec.js
@@ -0,0 +1,94 @@
+import Vue from 'vue';
+import noteHeader from '~/notes/components/note_header.vue';
+import store from '~/notes/stores';
+
+describe('note_header component', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(noteHeader);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('individual note', () => {
+    beforeEach(() => {
+      vm = new Component({
+        store,
+        propsData: {
+          actionText: 'commented',
+          actionTextHtml: '',
+          author: {
+            avatar_url: null,
+            id: 1,
+            name: 'Root',
+            path: '/root',
+            state: 'active',
+            username: 'root',
+          },
+          createdAt: '2017-08-02T10:51:58.559Z',
+          includeToggle: false,
+          noteId: 1394,
+        },
+      }).$mount();
+    });
+
+    it('should render user information', () => {
+      expect(
+        vm.$el.querySelector('.note-header-author-name').textContent.trim(),
+      ).toEqual('Root');
+      expect(
+        vm.$el.querySelector('.note-header-info a').getAttribute('href'),
+      ).toEqual('/root');
+    });
+
+    it('should render timestamp link', () => {
+      expect(vm.$el.querySelector('a[href="#note_1394"]')).toBeDefined();
+    });
+  });
+
+  describe('discussion', () => {
+    beforeEach(() => {
+      vm = new Component({
+        store,
+        propsData: {
+          actionText: 'started a discussion',
+          actionTextHtml: '',
+          author: {
+            avatar_url: null,
+            id: 1,
+            name: 'Root',
+            path: '/root',
+            state: 'active',
+            username: 'root',
+          },
+          createdAt: '2017-08-02T10:51:58.559Z',
+          includeToggle: true,
+          noteId: 1395,
+        },
+      }).$mount();
+    });
+
+    it('should render toggle button', () => {
+      expect(vm.$el.querySelector('.js-vue-toggle-button')).toBeDefined();
+    });
+
+    it('should toggle the disucssion icon', (done) => {
+      expect(
+        vm.$el.querySelector('.js-vue-toggle-button i').classList.contains('fa-chevron-up'),
+      ).toEqual(true);
+
+      vm.$el.querySelector('.js-vue-toggle-button').click();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.js-vue-toggle-button i').classList.contains('fa-chevron-down'),
+        ).toEqual(true);
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/note_signed_out_widget_spec.js b/spec/javascripts/notes/components/note_signed_out_widget_spec.js
new file mode 100644
index 00000000000..6cba8053888
--- /dev/null
+++ b/spec/javascripts/notes/components/note_signed_out_widget_spec.js
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import noteSignedOut from '~/notes/components/note_signed_out_widget.vue';
+import store from '~/notes/stores';
+import { notesDataMock } from '../mock_data';
+
+describe('note_signed_out_widget component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(noteSignedOut);
+    store.dispatch('setNotesData', notesDataMock);
+
+    vm = new Component({
+      store,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render sign in link provided in the store', () => {
+    expect(
+      vm.$el.querySelector(`a[href="${notesDataMock.newSessionPath}"]`).textContent,
+    ).toEqual('sign in');
+  });
+
+  it('should render register link provided in the store', () => {
+    expect(
+      vm.$el.querySelector(`a[href="${notesDataMock.registerPath}"]`).textContent,
+    ).toEqual('register');
+  });
+
+  it('should render information text', () => {
+    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
+  });
+});
-- 
cgit v1.2.1