Implement initial version of Vue notes for issues. 🎉 🎉

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

+<script>
+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 IssueNoteEditedText from './issue_note_edited_text.vue';
+
+export default {
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      registerLink: '#',
+      signInLink: '#',
+    }
+  },
+  computed: {
+    discussion() {
+      return this.note.notes[0];
+    },
+    author() {
+      return this.discussion.author;
+    },
+  },
+  components: {
+    IssueNote,
+    UserAvatarLink,
+    IssueNoteHeader,
+    IssueNoteActions,
+    IssueNoteEditedText,
+  },
+  mounted() {
+    // We need to grab the register and sign in links from DOM for the time being.
+    const registerLink = document.querySelector('.js-disabled-comment .js-register-link');
+    const signInLink = document.querySelector('.js-disabled-comment .js-sign-in-link');
+
+    if (registerLink && signInLink) {
+      this.registerLink = registerLink.getAttribute('href');
+      this.signInLink = signInLink.getAttribute('href');
+    }
+  },
+}
+</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"
+              :createdAt="discussion.created_at"
+              :notePath="discussion.path"
+              :includeToggle="true"
+              :discussionId="note.id"
+              actionText="started a discussion" />
+            <issue-note-edited-text
+              v-if="note.last_updated_by"
+              :editedAt="note.last_updated_at"
+              :editedBy="note.last_updated_by"
+              actionText="Last updated"
+              className="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">
+                  <issue-note
+                    v-for="note in note.notes"
+                    key="note.id"
+                    :note="note" />
+                </ul>
+                <div class="flash-container"></div>
+                <div class="discussion-reply-holder">
+                  <button
+                    v-if="note.can_reply"
+                    type="button"
+                    class="btn btn-text-field js-discussion-reply-button"
+                    title="Add a reply"></button>
+                  <div
+                    v-if="!note.can_reply"
+                    class="disabled-comment text-center">
+                    Please
+                    <a :href="registerLink">register</a>
+                    or
+                    <a :href="signInLink">sign in</a>
+                    to reply
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</template>

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

+<script>
+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 IssueNoteEditedText from './issue_note_edited_text.vue';
+
+export default {
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    UserAvatarLink,
+    IssueNoteHeader,
+    IssueNoteActions,
+    IssueNoteBody,
+    IssueNoteEditedText,
+  },
+  computed: {
+    author() {
+      return this.note.author;
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="note 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="note-header">
+          <issue-note-header
+            :author="author"
+            :createdAt="note.created_at"
+            :notePath="note.path"
+            actionText="commented" />
+          <issue-note-actions
+            :accessLevel="note.human_access"
+            :canAward="note.emoji_awardable"
+            :canEdit="note.can_edit"
+            :canDelete="note.can_edit"
+            :reportAbusePath="note.report_abuse_path" />
+        </div>
+        <issue-note-body :note="note" />
+        <issue-note-edited-text
+          v-if="note.last_edited_by"
+          :editedAt="note.last_edited_at"
+          :editedBy="note.last_edited_by"
+          actionText="Edited" />
+      </div>
+    </div>
+  </li>
+</template>

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

+<script>
+import emojiSmiling from '../icons/emoji_slightly_smiling_face.svg';
+import emojiSmile from '../icons/emoji_smile.svg';
+import emojiSmiley from '../icons/emoji_smiley.svg';
+
+export default {
+  props: {
+    accessLevel: {
+      type: String,
+      required: true,
+    },
+    reportAbusePath: {
+      type: String,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      required: true,
+    },
+    canDelete: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      emojiSmiling,
+      emojiSmile,
+      emojiSmiley,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="note-actions">
+    <span class="note-role">
+      {{accessLevel}}
+    </span>
+    <a
+      class="note-action-button note-emoji-button js-add-award js-note-emoji js-user-authored has-tooltip" data-position="right"
+      href="#"
+      title="Add reaction">
+        <i
+          aria-hidden="true"
+          data-hidden="true"
+          class="fa fa-spinner fa-spin"></i>
+        <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 class="dropdown more-actions">
+      <button
+        type="button"
+        title="More actions"
+        class="note-action-button more-actions-toggle has-tooltip btn btn-transparent"
+        data-toggle="dropdown"
+        data-container="body">
+          <i
+            aria-hidden="true"
+            class="fa fa-ellipsis-v icon"></i>
+      </button>
+      <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
+        <template v-if="canEdit">
+          <li>
+            <button
+              type="button"
+              class="js-note-edit btn btn-transparent">
+              Edit comment
+            </button>
+          </li>
+          <li class="divider"></li>
+        </template>
+        <li v-if="reportAbusePath">
+          <a :href="reportAbusePath">
+            Report as abuse
+          </a>
+        </li>
+        <li>
+          <a class="js-note-delete">
+            <span class="text-danger">
+              Delete comment
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

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

+<script>
+export default {
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="note-body">
+    <div
+      v-html="note.note_html"
+      class="note-text md"></div>
+  </div>
+</template>

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

+<script>
+import TimeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  props: {
+    actionText: {
+      type: String,
+      required: true,
+    },
+    editedAt: {
+      type: String,
+      required: true,
+    },
+    editedBy: {
+      type: Object,
+      required: true,
+    },
+    className: {
+      type: String,
+      required: false,
+      default: 'edited-text',
+    },
+  },
+  components: {
+    TimeAgoTooltip,
+  },
+}
+</script>
+
+<template>
+  <div :class="className">
+    <span>{{actionText}} </span>
+    <span> by </span>
+    <a
+      :href="editedBy.path"
+      class="author_link">
+      <span>{{editedBy.name}}</span>
+    </a>
+    <time-ago-tooltip
+      :time="editedAt"
+      tooltipPlacement="bottom" />
+  </div>
+</template>

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

+<script>
+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: true,
+    },
+    notePath: {
+      type: String,
+      required: true,
+    },
+    includeToggle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    discussionId: {
+      type: String,
+      required: false,
+    }
+  },
+  components: {
+    TimeAgoTooltip,
+  },
+  methods: {
+    doShit() {
+      this.$store.commit('toggleDiscussion', {
+        discussionId: this.discussionId,
+      });
+    },
+  },
+};
+</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">
+        {{actionText}}
+        <a :href="notePath">
+          <time-ago-tooltip
+            :time="createdAt"
+            tooltipPlacement="bottom" />
+        </a>
+      </span>
+    </span>
+    <div
+      v-if="includeToggle"
+      class="discussion-actions">
+      <button
+        @click="doShit"
+        class="note-action-button discussion-toggle-button js-toggle-button"
+        type="button">
+          <i
+            aria-hidden="true"
+            class="fa fa-chevron-up"></i>
+          Toggle discussion
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -2,6 +2,8 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import storeOptions from '../stores/issue_notes_store';
+import IssueNote from './issue_note.vue';
+import IssueDiscussion from './issue_discussion.vue';
 
 Vue.use(Vuex);
 const store = new Vuex.Store(storeOptions);
@@ -14,6 +16,18 @@ export default {
       isLoading: true,
     };
   },
+  components: {
+    IssueNote,
+    IssueDiscussion,
+  },
+  methods: {
+    component(note) {
+      return note.individual_note ? IssueNote : IssueDiscussion;
+    },
+    componentData(note) {
+      return note.individual_note ? note.notes[0] : note;
+    }
+  },
   mounted() {
     const path = this.$el.parentNode.dataset.discussionsPath;
     this.$store.dispatch('fetchNotes', path)
@@ -31,7 +45,16 @@ export default {
       class="loading">
       <i
         aria-hidden="true"
-        class="fa fa-spinner fa-spin" />
+        class="fa fa-spinner fa-spin"></i>
     </div>
+    <ul
+      class="notes main-notes-list timeline"
+      id="notes-list">
+      <component
+        v-for="note in $store.getters.notes"
+        :is="component(note)"
+        :note="componentData(note)"
+        :key="note.id" />
+    </ul>
   </div>
 </template>

app/assets/javascripts/notes/icons/emoji_slightly_smiling_face.svg

+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M13.29 11.098a4.328 4.328 0 0 1-1.618 2.285c-.79.578-1.68.867-2.672.867-.992 0-1.883-.29-2.672-.867a4.328 4.328 0 0 1-1.617-2.285.721.721 0 0 1 .047-.569.715.715 0 0 1 .445-.369.721.721 0 0 1 .568.047.715.715 0 0 1 .37.445c.195.625.556 1.131 1.084 1.518A2.93 2.93 0 0 0 9 12.75a2.93 2.93 0 0 0 1.775-.58 2.913 2.913 0 0 0 1.084-1.518.711.711 0 0 1 .375-.445.737.737 0 0 1 .575-.047c.195.063.34.186.433.37.094.183.11.372.047.568zM7.5 6c0 .414-.146.768-.44 1.06-.292.294-.646.44-1.06.44-.414 0-.768-.146-1.06-.44A1.445 1.445 0 0 1 4.5 6c0-.414.146-.768.44-1.06.292-.294.646-.44 1.06-.44.414 0 .768.146 1.06.44.294.292.44.646.44 1.06zm6 0c0 .414-.146.768-.44 1.06-.292.294-.646.44-1.06.44-.414 0-.768-.146-1.06-.44A1.445 1.445 0 0 1 10.5 6c0-.414.146-.768.44-1.06.292-.294.646-.44 1.06-.44.414 0 .768.146 1.06.44.294.292.44.646.44 1.06zm3 3a7.29 7.29 0 0 0-.598-2.912 7.574 7.574 0 0 0-1.6-2.39 7.574 7.574 0 0 0-2.39-1.6A7.29 7.29 0 0 0 9 1.5a7.29 7.29 0 0 0-2.912.598 7.574 7.574 0 0 0-2.39 1.6 7.574 7.574 0 0 0-1.6 2.39A7.29 7.29 0 0 0 1.5 9c0 1.016.2 1.986.598 2.912a7.574 7.574 0 0 0 1.6 2.39 7.574 7.574 0 0 0 2.39 1.6A7.29 7.29 0 0 0 9 16.5a7.29 7.29 0 0 0 2.912-.598 7.574 7.574 0 0 0 2.39-1.6 7.574 7.574 0 0 0 1.6-2.39A7.29 7.29 0 0 0 16.5 9zM18 9a8.804 8.804 0 0 1-1.207 4.518 8.96 8.96 0 0 1-3.275 3.275A8.804 8.804 0 0 1 9 18a8.804 8.804 0 0 1-4.518-1.207 8.96 8.96 0 0 1-3.275-3.275A8.804 8.804 0 0 1 0 9c0-1.633.402-3.139 1.207-4.518a8.96 8.96 0 0 1 3.275-3.275A8.804 8.804 0 0 1 9 0c1.633 0 3.139.402 4.518 1.207a8.96 8.96 0 0 1 3.275 3.275A8.804 8.804 0 0 1 18 9z" fill-rule="evenodd"/></svg>

app/assets/javascripts/notes/icons/emoji_smile.svg

+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M13.29 11.098a4.328 4.328 0 0 1-1.618 2.285c-.79.578-1.68.867-2.672.867-.992 0-1.883-.29-2.672-.867a4.328 4.328 0 0 1-1.617-2.285.721.721 0 0 1 .047-.569.715.715 0 0 1 .445-.369c.195-.062 7.41-.062 7.606 0 .195.063.34.186.433.37.094.183.11.372.047.568zM14 6.37c0 .398-.04.755-.513.755-.473 0-.498-.272-1.237-.272-.74 0-.74.215-1.165.215-.425 0-.585-.3-.585-.698 0-.397.17-.736.513-1.017.341-.281.754-.422 1.237-.422.483 0 .896.14 1.237.422.342.28.513.62.513 1.017zm-6.5 0c0 .398-.04.755-.513.755-.473 0-.498-.272-1.237-.272-.74 0-.74.215-1.165.215-.425 0-.585-.3-.585-.698 0-.397.17-.736.513-1.017.341-.281.754-.422 1.237-.422.483 0 .896.14 1.237.422.342.28.513.62.513 1.017zm9 2.63a7.29 7.29 0 0 0-.598-2.912 7.574 7.574 0 0 0-1.6-2.39 7.574 7.574 0 0 0-2.39-1.6A7.29 7.29 0 0 0 9 1.5a7.29 7.29 0 0 0-2.912.598 7.574 7.574 0 0 0-2.39 1.6 7.574 7.574 0 0 0-1.6 2.39A7.29 7.29 0 0 0 1.5 9c0 1.016.2 1.986.598 2.912a7.574 7.574 0 0 0 1.6 2.39 7.574 7.574 0 0 0 2.39 1.6A7.29 7.29 0 0 0 9 16.5a7.29 7.29 0 0 0 2.912-.598 7.574 7.574 0 0 0 2.39-1.6 7.574 7.574 0 0 0 1.6-2.39A7.29 7.29 0 0 0 16.5 9zM18 9a8.804 8.804 0 0 1-1.207 4.518 8.96 8.96 0 0 1-3.275 3.275A8.804 8.804 0 0 1 9 18a8.804 8.804 0 0 1-4.518-1.207 8.96 8.96 0 0 1-3.275-3.275A8.804 8.804 0 0 1 0 9c0-1.633.402-3.139 1.207-4.518a8.96 8.96 0 0 1 3.275-3.275A8.804 8.804 0 0 1 9 0c1.633 0 3.139.402 4.518 1.207a8.96 8.96 0 0 1 3.275 3.275A8.804 8.804 0 0 1 18 9z" fill-rule="evenodd"/></svg>

app/assets/javascripts/notes/icons/emoji_smiley.svg

+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M13.29 11.098a4.328 4.328 0 0 1-1.618 2.285c-.79.578-1.68.867-2.672.867-.992 0-1.883-.29-2.672-.867a4.328 4.328 0 0 1-1.617-2.285.721.721 0 0 1 .047-.569.715.715 0 0 1 .445-.369c.195-.062 7.41-.062 7.606 0 .195.063.34.186.433.37.094.183.11.372.047.568h.001zM7.5 6c0 .414-.146.768-.44 1.06A1.44 1.44 0 0 1 6 7.5a1.44 1.44 0 0 1-1.06-.44A1.445 1.445 0 0 1 4.5 6c0-.414.146-.768.44-1.06A1.44 1.44 0 0 1 6 4.5c.414 0 .768.146 1.06.44.294.292.44.646.44 1.06zm6 0c0 .414-.146.768-.44 1.06A1.44 1.44 0 0 1 12 7.5a1.44 1.44 0 0 1-1.06-.44A1.445 1.445 0 0 1 10.5 6c0-.414.146-.768.44-1.06A1.44 1.44 0 0 1 12 4.5c.414 0 .768.146 1.06.44.294.292.44.646.44 1.06zm3 3a7.29 7.29 0 0 0-.598-2.912 7.574 7.574 0 0 0-1.6-2.39 7.574 7.574 0 0 0-2.39-1.6A7.29 7.29 0 0 0 9 1.5a7.29 7.29 0 0 0-2.912.598 7.574 7.574 0 0 0-2.39 1.6 7.574 7.574 0 0 0-1.6 2.39A7.29 7.29 0 0 0 1.5 9c0 1.016.2 1.986.598 2.912a7.574 7.574 0 0 0 1.6 2.39 7.574 7.574 0 0 0 2.39 1.6c.92.397 1.91.6 2.912.598a7.29 7.29 0 0 0 2.912-.598 7.574 7.574 0 0 0 2.39-1.6 7.574 7.574 0 0 0 1.6-2.39c.397-.92.6-1.91.598-2.912zM18 9a8.804 8.804 0 0 1-1.207 4.518 8.96 8.96 0 0 1-3.275 3.275A8.804 8.804 0 0 1 9 18a8.804 8.804 0 0 1-4.518-1.207 8.96 8.96 0 0 1-3.275-3.275A8.804 8.804 0 0 1 0 9c0-1.633.402-3.139 1.207-4.518a8.96 8.96 0 0 1 3.275-3.275A8.804 8.804 0 0 1 9 0c1.633 0 3.139.402 4.518 1.207a8.96 8.96 0 0 1 3.275 3.275A8.804 8.804 0 0 1 18 9z" fill-rule="nonzero"/></svg>

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

@@ -7,11 +7,20 @@ const state = {
   notes: [],
 };
 
-const getters = {};
+const getters = {
+  notes(storeState) {
+    return storeState.notes;
+  },
+};
 
 const mutations = {
-  setNotes(vmState, notes) {
-    vmState.notes = notes;
+  setNotes(storeState, notes) {
+    storeState.notes = notes;
+  },
+  toggleDiscussion(storeState, { discussionId }) {
+    const [ discussion ] = storeState.notes.filter((note) => note.id === discussionId);
+
+    discussion.expanded = !discussion.expanded;
   },
 };
 
@@ -24,7 +33,7 @@ const actions = {
         context.commit('setNotes', res);
       })
       .catch(() => {
-        new Flash('Something went while fetching issue comments. Please try again.'); // eslint-disable-line
+        new Flash('Something went wrong while fetching issue comments. Please try again.'); // eslint-disable-line
       });
   },
 };

app/assets/stylesheets/pages/issuable.scss

@@ -453,6 +453,7 @@
   color: $gray-darkest;
   display: block;
   margin: 16px 0 0;
+  font-size: 85%;
 
   .author_link {
     color: $gray-darkest;

app/views/shared/notes/_notes_with_form.html.haml

@@ -15,11 +15,11 @@
         .timeline-content.timeline-content-form
           = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
 - elsif !current_user
-  .disabled-comment.text-center.prepend-top-default
+  .disabled-comment.text-center.prepend-top-default.js-disabled-comment
     Please
-    = link_to "register", new_session_path(:user, redirect_to_referer: 'yes')
+    = link_to "register", new_session_path(:user, redirect_to_referer: 'yes'), class: 'js-register-link'
     or
-    = link_to "sign in", new_session_path(:user, redirect_to_referer: 'yes')
+    = link_to "sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'js-sign-in-link'
     to comment
 
 :javascript