[ci skip] Removes use of window object in all components

Improves performance by removing emojis from data object

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

@@ -19,7 +19,6 @@
       return {
         isEditing: false,
         isDeleting: false,
-        currentUserId: window.gon.current_user_id,
       };
     },
     components: {
@@ -31,6 +30,7 @@
     computed: {
       ...mapGetters([
         'targetNoteHash',
+        'getUserData',
       ]),
       author() {
         return this.note.author;
@@ -43,7 +43,7 @@
         };
       },
       canReportAsAbuse() {
-        return this.note.report_abuse_path && this.author.id !== this.currentUserId;
+        return this.note.report_abuse_path && this.author.id !== this.getUserData.id;
       },
       noteAnchorId() {
         return `note_${this.note.id}`;

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

 <script>
   /* global Flash */
 
-  import { mapActions } from 'vuex';
+  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';
@@ -30,18 +30,10 @@
     directives: {
       tooltip,
     },
-    data() {
-      const userId = window.gon.current_user_id;
-
-      return {
-        emojiSmiling,
-        emojiSmile,
-        emojiSmiley,
-        canAward: !!userId,
-        myUserId: userId,
-      };
-    },
     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.
@@ -76,7 +68,10 @@
         return Object.assign({}, orderedAwards, awards);
       },
       isAuthoredByMe() {
-        return this.noteAuthorId === window.gon.current_user_id;
+        return this.noteAuthorId === this.getUserData.id;
+      },
+      isLoggedIn() {
+        return this.getUserData.id;
       },
     },
     methods: {
@@ -95,17 +90,16 @@
       canInteractWithEmoji(awardList, awardName) {
         let isAllowed = true;
         const restrictedEmojis = ['thumbsup', 'thumbsdown'];
-        const { myUserId, noteAuthorId } = this;
 
         // Users can not add :+1: and :-1: to their own notes
-        if (myUserId === noteAuthorId && restrictedEmojis.indexOf(awardName) > -1) {
+        if (this.getUserData.id === this.noteAuthorId && restrictedEmojis.indexOf(awardName) > -1) {
           isAllowed = false;
         }
 
-        return this.canAward && isAllowed;
+        return this.getUserData.id && isAllowed;
       },
       hasReactionByCurrentUser(awardList) {
-        return awardList.filter(award => award.user.id === this.myUserId).length;
+        return awardList.filter(award => award.user.id === this.getUserData.id).length;
       },
       awardTitle(awardsList) {
         const hasReactionByCurrentUser = this.hasReactionByCurrentUser(awardsList);
@@ -114,7 +108,7 @@
 
         // Filter myself from list if I am awarded.
         if (hasReactionByCurrentUser) {
-          awardList = awardList.filter(award => award.user.id !== this.myUserId);
+          awardList = awardList.filter(award => award.user.id !== this.getUserData.id);
         }
 
         // Get only 9-10 usernames to show in tooltip text.
@@ -157,6 +151,11 @@
           .catch(() => Flash('Something went wrong on our end.'));
       },
     },
+    created() {
+      this.emojiSmiling = emojiSmiling;
+      this.emojiSmile = this.emojiSmile;
+      this.emojiSmiley = this.emojiSmiley;
+    },
   };
 </script>
 
@@ -179,7 +178,7 @@
         </span>
       </button>
       <div
-        v-if="canAward"
+        v-if="isLoggedIn"
         class="award-menu-holder">
         <button
           v-tooltip

app/assets/javascripts/notes/index.js

 import Vue from 'vue';
 import issueNotesApp from './components/issue_notes_app.vue';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const vm = new Vue({
+document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#js-vue-notes',
   components: {
     issueNotesApp,
@@ -36,13 +35,4 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   },
-  });
-
-  // This is used in note_polling_spec
-  window.issueNotes = {
-    refresh() {
-      vm.$refs.notes.$store.dispatch('poll');
-    },
-  };
-});
-
+}));