IssueNotesRefactor: Implement awarding emoji from emoji dropdown.

app/assets/javascripts/awards_handler.js

@@ -2,6 +2,7 @@
 /* global Flash */
 
 import Cookies from 'js-cookie';
+import issueNotesEventHub from './notes/event_hub';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
@@ -234,12 +235,23 @@ class AwardsHandler {
   }
 
   addAward(votesBlock, awardUrl, emoji, checkMutuality, callback) {
+    if (this.isInIssuePage()) {
+      const id = votesBlock[0].id.replace('note_', '');
+
+      $('.emoji-menu').removeClass('is-visible');
+      $('.js-add-award.is-active').removeClass('is-active');
+
+      return issueNotesEventHub.$emit('toggleAward', { awardName: emoji, noteId: id });
+    }
+
     const normalizedEmoji = this.emoji.normalizeEmojiName(emoji);
     const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
+
     this.postEmoji($emojiButton, awardUrl, normalizedEmoji, () => {
       this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality);
       return typeof callback === 'function' ? callback() : undefined;
     });
+
     $('.emoji-menu').removeClass('is-visible');
     $('.js-add-award.is-active').removeClass('is-active');
   }
@@ -267,7 +279,18 @@ class AwardsHandler {
     }
   }
 
+  isInIssuePage() {
+    const page = gl.utils.getPagePath(1);
+    const action = gl.utils.getPagePath(2);
+
+    return page === 'issues' && action === 'show';
+  }
+
   getVotesBlock() {
+    if (this.isInIssuePage()) {
+      return $('.js-add-award.is-active').closest('.note.timeline-entry');
+    }
+
     const currentBlock = $('.js-awards-block.current');
     let resultantVotesBlock = currentBlock;
     if (currentBlock.length === 0) {

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

@@ -73,6 +73,9 @@ export default {
 
       return orderedAwards;
     },
+    isAuthoredByMe() {
+      return this.noteAuthorId === window.gon.current_user_id;
+    },
   },
   methods: {
     getAwardHTML(name) {
@@ -178,10 +181,11 @@ export default {
         v-if="canAward"
         class="award-menu-holder">
         <button
+          :class="{ 'js-user-authored': isAuthoredByMe }"
+          class="award-control btn has-tooltip js-add-award"
+          title="Add reaction"
           aria-label="Add reaction"
-          class="award-control btn has-tooltip"
           data-placement="bottom"
-          title="Add reaction"
           type="button">
           <span
             v-html="emojiSmiling"

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

@@ -4,6 +4,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import storeOptions from '../stores/issue_notes_store';
+import eventHub from '../event_hub';
 import IssueNote from './issue_note.vue';
 import IssueDiscussion from './issue_discussion.vue';
 import IssueSystemNote from './issue_system_note.vue';
@@ -29,6 +30,7 @@ export default {
   computed: {
     ...Vuex.mapGetters([
       'notes',
+      'notesById',
     ]),
   },
   methods: {
@@ -87,6 +89,13 @@ export default {
           new Flash('Something went wrong while fetching latest comments.'); // eslint-disable-line
         });
     }, 6000);
+
+    eventHub.$on('toggleAward', (data) => {
+      const { awardName, noteId } = data;
+      const endpoint = this.notesById[noteId].toggle_award_path;
+
+      this.$store.dispatch('toggleAward', { endpoint, awardName, noteId });
+    });
   },
 };
 </script>

app/assets/javascripts/notes/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();