[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({
-    el: '#js-vue-notes',
-    components: {
-      issueNotesApp,
-    },
-    data() {
-      const notesDataset = document.getElementById('js-vue-notes').dataset;
-
-      return {
-        issueData: JSON.parse(notesDataset.issueData),
-        currentUserData: JSON.parse(notesDataset.currentUserData),
-        notesData: {
-          lastFetchedAt: notesDataset.lastFetchedAt,
-          discussionsPath: notesDataset.discussionsPath,
-          newSessionPath: notesDataset.newSessionPath,
-          registerPath: notesDataset.registerPath,
-          notesPath: notesDataset.notesPath,
-          markdownDocs: notesDataset.markdownDocs,
-          quickActionsDocs: notesDataset.quickActionsDocs,
-        },
-      };
-    },
-    render(createElement) {
-      return createElement('issue-notes-app', {
-        attrs: {
-          ref: 'notes',
-        },
-        props: {
-          issueData: this.issueData,
-          notesData: this.notesData,
-          userData: this.currentUserData,
-        },
-      });
-    },
-  });
-
-  // This is used in note_polling_spec
-  window.issueNotes = {
-    refresh() {
-      vm.$refs.notes.$store.dispatch('poll');
-    },
-  };
-});
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: '#js-vue-notes',
+  components: {
+    issueNotesApp,
+  },
+  data() {
+    const notesDataset = document.getElementById('js-vue-notes').dataset;
 
+    return {
+      issueData: JSON.parse(notesDataset.issueData),
+      currentUserData: JSON.parse(notesDataset.currentUserData),
+      notesData: {
+        lastFetchedAt: notesDataset.lastFetchedAt,
+        discussionsPath: notesDataset.discussionsPath,
+        newSessionPath: notesDataset.newSessionPath,
+        registerPath: notesDataset.registerPath,
+        notesPath: notesDataset.notesPath,
+        markdownDocs: notesDataset.markdownDocs,
+        quickActionsDocs: notesDataset.quickActionsDocs,
+      },
+    };
+  },
+  render(createElement) {
+    return createElement('issue-notes-app', {
+      attrs: {
+        ref: 'notes',
+      },
+      props: {
+        issueData: this.issueData,
+        notesData: this.notesData,
+        userData: this.currentUserData,
+      },
+    });
+  },
+}));