[ci skip] Emit events up to prevent accessing refs of refs

11 files changed, 61 insertions, 70 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 6761f15becc..5b8b7a67fa8 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -10,12 +10,12 @@
 
   export default {
     data() {
-      const { getUserData, getIssueData } = this.$store.getters;
+      const { getUserData, getIssueData, getNotesData } = this.$store.getters;
 
       return {
         note: '',
-        markdownDocsUrl: getIssueData.markdownDocs,
-        quickActionsDocsUrl: getIssueData.quickActionsDocs,
+        markdownDocsUrl: getNotesData.markdownDocs,
+        quickActionsDocsUrl: getNotesData.quickActionsDocs,
         markdownPreviewUrl: getIssueData.preview_note_path,
         noteType: constants.COMMENT,
         issueState: getIssueData.state,
@@ -89,7 +89,7 @@
                   this.handleError();
                 }
               } else {
-                this.discard();
+                return Flash('Something went wrong while adding your comment. Please try again.');
               }
             })
             .catch(() => {
@@ -126,9 +126,6 @@
       setNoteType(type) {
         this.noteType = type;
       },
-      handleError() {
-        Flash('Something went wrong while adding your comment. Please try again.');
-      },
       editMyLastNote() {
         if (this.note === '') {
           const myLastNoteId = $('.js-my-note').last().attr('id');
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index d490578ce6f..49edac407dd 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -19,6 +19,7 @@
       return {
         isEditing: false,
         isDeleting: false,
+        currentUserId: window.gon.current_user_id,
       };
     },
     components: {
@@ -38,12 +39,12 @@
         return {
           'is-editing': this.isEditing,
           'disabled-content': this.isDeleting,
-          'js-my-note': this.author.id === window.gon.current_user_id,
+          'js-my-note': this.author.id === this.currentUserId,
           target: this.targetNoteHash === this.noteAnchorId,
         };
       },
       canReportAsAbuse() {
-        return this.note.report_abuse_path && this.author.id !== window.gon.current_user_id;
+        return this.note.report_abuse_path && this.author.id !== this.currentUserId;
       },
       noteAnchorId() {
         return `note_${this.note.id}`;
@@ -59,8 +60,8 @@
         this.isEditing = true;
       },
       deleteHandler() {
-        const msg = 'Are you sure you want to delete this list?';
-        const isConfirmed = confirm(msg); // eslint-disable-line
+        // eslint-disable-next-line no-alert
+        const isConfirmed = confirm('Are you sure you want to delete this list?');
 
         if (isConfirmed) {
           this.isDeleting = true;
@@ -88,17 +89,15 @@
         this.updateNote(data)
           .then(() => {
             this.isEditing = false;
+            // TODO: this could be moved down, by setting a prop
             $(this.$refs.noteBody.$el).renderGFM();
           })
           .catch(() => Flash('Something went wrong while editing your comment. Please try again.'));
       },
-      formCancelHandler(shouldConfirm) {
-        if (shouldConfirm && this.$refs.noteBody.$refs.noteForm.isDirty) {
-          const msg = 'Are you sure you want to cancel editing this comment?';
-          const isConfirmed = confirm(msg); // eslint-disable-line
-          if (!isConfirmed) {
-            return;
-          }
+      formCancelHandler(shouldConfirm, isDirty) {
+        if (shouldConfirm && isDirty) {
+          // eslint-disable-next-line no-alert
+          if (!confirm('Are you sure you want to cancel editing this comment?')) return;
         }
 
         this.isEditing = false;
@@ -135,7 +134,7 @@
             :author="author"
             :created-at="note.created_at"
             :note-id="note.id"
-            actionText="commented"
+            action-text="commented"
             />
           <issue-note-actions
             :author-id="author.id"
@@ -153,8 +152,8 @@
           :note="note"
           :can-edit="note.current_user.can_edit"
           :is-editing="isEditing"
-          :form-update-handler="formUpdateHandler"
-          :form-cancel-handler="formCancelHandler"
+          @handleFormUpdate="formUpdateHandler"
+          @cancelFormEdition="formCancelHandler"
           ref="noteBody"
           />
       </div>
diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue
index f08081e3577..dd2c55073b4 100644
--- a/app/assets/javascripts/notes/components/issue_note_actions.vue
+++ b/app/assets/javascripts/notes/components/issue_note_actions.vue
@@ -53,6 +53,7 @@
         emojiSmiling,
         emojiSmile,
         emojiSmiley,
+        currentUserId: window.gon.current_user_id,
       };
     },
     components: {
@@ -60,13 +61,13 @@
     },
     computed: {
       shouldShowActionsDropdown() {
-        return window.gon.current_user_id && (this.canEdit || this.canReportAsAbuse);
+        return this.currentUserId && (this.canEdit || this.canReportAsAbuse);
       },
       canAddAwardEmoji() {
-        return window.gon.current_user_id;
+        return this.currentUserId;
       },
-      isAuthoredByMe() {
-        return this.authorId === window.gon.current_user_id;
+      isAuthoredByCurrentUser() {
+        return this.authorId === this.currentUserId
       },
     },
   };
@@ -82,7 +83,7 @@
     <a
       v-tooltip
       v-if="canAddAwardEmoji"
-      :class="{ 'js-user-authored': isAuthoredByMe }"
+      :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
       class="note-action-button note-emoji-button js-add-award js-note-emoji"
       data-position="right"
       href="#"
diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
index 9770b57fc03..479e3c8762a 100644
--- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
@@ -91,7 +91,7 @@
       },
       getAwardClassBindings(awardList, awardName) {
         return {
-          active: this.amIAwarded(awardList),
+          active: this.hasReactionByCurrentUser(awardList),
           disabled: !this.canInteractWithEmoji(awardList, awardName),
         };
       },
@@ -107,18 +107,16 @@
 
         return this.canAward && isAllowed;
       },
-      amIAwarded(awardList) {
-        const isAwarded = awardList.filter(award => award.user.id === this.myUserId);
-
-        return isAwarded.length;
+      hasReactionByCurrentUser(awardList) {
+        return awardList.filter(award => award.user.id === this.myUserId).length;
       },
       awardTitle(awardsList) {
-        const amIAwarded = this.amIAwarded(awardsList);
-        const TOOLTIP_NAME_COUNT = amIAwarded ? 9 : 10;
+        const hasReactionByCurrentUser = this.hasReactionByCurrentUser(awardsList);
+        const TOOLTIP_NAME_COUNT = hasReactionByCurrentUser ? 9 : 10;
         let awardList = awardsList;
 
         // Filter myself from list if I am awarded.
-        if (amIAwarded) {
+        if (hasReactionByCurrentUser) {
           awardList = awardList.filter(award => award.user.id !== this.myUserId);
         }
 
@@ -129,7 +127,7 @@
         const remainingAwardList = awardList.slice(TOOLTIP_NAME_COUNT, awardList.length);
 
         // Add myself to the begining of the list so title will start with You.
-        if (amIAwarded) {
+        if (hasReactionByCurrentUser) {
           namesToShow.unshift('You');
         }
 
diff --git a/app/assets/javascripts/notes/components/issue_note_body.vue b/app/assets/javascripts/notes/components/issue_note_body.vue
index dee8bb0c7f9..c7dc146985b 100644
--- a/app/assets/javascripts/notes/components/issue_note_body.vue
+++ b/app/assets/javascripts/notes/components/issue_note_body.vue
@@ -51,11 +51,12 @@
           });
         }
       },
-      handleFormUpdate() {
-        this.formUpdateHandler({
-          note: this.$refs.noteForm.note,
-        });
+      handleFormUpdate(note) {
+        this.$emit('handleFormUpdate', note);
       },
+      formCancelHandler(shouldConfirm, isDirty) {
+        this.$emit('cancelFormEdition', shouldConfirm, isDirty);
+      }
     },
     mounted() {
       this.renderGFM();
@@ -78,10 +79,11 @@
     <issue-note-form
       v-if="isEditing"
       ref="noteForm"
-      :update-handler="handleFormUpdate"
-      :cancel-handler="formCancelHandler"
+      @handleFormUpdate="handleFormUpdate"
+      @cancelFormEdition="formCancelHandler"
       :note-body="noteBody"
-      :note-id="note.id" />
+      :note-id="note.id"
+      />
     <textarea
       v-if="canEdit"
       v-model="note.note"
@@ -91,12 +93,14 @@
       v-if="note.last_edited_by"
       :edited-at="note.last_edited_at"
       :edited-by="note.last_edited_by"
-      actionText="Edited" />
+      actionText="Edited"
+      />
     <issue-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" />
+      :toggle-award-path="note.toggle_award_path"
+      />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue
index 3a8e7239a01..75aca2d5cc9 100644
--- a/app/assets/javascripts/notes/components/issue_note_form.vue
+++ b/app/assets/javascripts/notes/components/issue_note_form.vue
@@ -13,14 +13,6 @@
         type: Number,
         required: false,
       },
-      updateHandler: {
-        type: Function,
-        required: true,
-      },
-      cancelHandler: {
-        type: Function,
-        required: true,
-      },
       saveButtonTitle: {
         type: String,
         required: false,
@@ -42,18 +34,13 @@
       markdownField,
     },
     computed: {
-      isDirty() {
-        return this.initialNote !== this.note;
-      },
       noteHash() {
         return `#note_${this.noteId}`;
       },
     },
     methods: {
       handleUpdate() {
-        this.updateHandler({
-          note: this.note,
-        });
+        this.$emit('handleFormUpdate', note);
       },
       editMyLastNote() {
         if (this.note === '') {
@@ -67,6 +54,10 @@
           }
         }
       },
+      cancelHandler(shouldConfirm = false) {
+        // Sends information about confirm message and if the textarea has changed
+        this.$emit('cancelFormEdition', shouldConfirm, this.initialNote !== this.note);
+      }
     },
     mounted() {
       this.$refs.textarea.focus();
@@ -95,7 +86,9 @@
         rel="noopener noreferrer">updated comment</a>
         to ensure information is not lost.
     </div>
-    <form class="edit-note common-note-form">
+    <form
+      @submit="handleUpdate"
+      class="edit-note common-note-form">
       <markdown-field
         :markdown-preview-url="markdownPreviewUrl"
         :markdown-docs="markdownDocsUrl"
@@ -118,8 +111,7 @@
       </markdown-field>
       <div class="note-form-actions clearfix">
         <button
-          @click="handleUpdate"
-          type="button"
+          type="submit"
           class="btn btn-nr btn-save">
           {{saveButtonTitle}}
         </button>
diff --git a/app/assets/javascripts/notes/components/issue_note_header.vue b/app/assets/javascripts/notes/components/issue_note_header.vue
index 49f7980b272..17f3fe3b000 100644
--- a/app/assets/javascripts/notes/components/issue_note_header.vue
+++ b/app/assets/javascripts/notes/components/issue_note_header.vue
@@ -93,7 +93,7 @@
           @click="updateTargetNoteHash">
           <time-ago-tooltip
             :time="createdAt"
-            tooltipPlacement="bottom"
+            tooltip-placement="bottom"
             />
         </a>
       </span>
diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
index 4da82434ed1..21f9e7089bb 100644
--- a/app/assets/javascripts/notes/components/issue_notes_app.vue
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -47,13 +47,11 @@
     },
     computed: {
       ...mapGetters([
+        'notes',
         'getNotesDataByProp',
       ]),
     },
     methods: {
-      ...mapGetters([
-        'getNotesDataByProp',
-      ]),
       ...mapActions({
         actionFetchNotes: 'fetchNotes',
         poll: 'poll',
diff --git a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue b/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
index 9c041728047..80a8ef56a83 100644
--- a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
+++ b/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
@@ -14,7 +14,7 @@
   <li class="note system-note timeline-entry being-posted fade-in-half">
    <div class="timeline-entry-inner">
      <div class="timeline-content">
-       <i>{{note.body}}</i>
+       <em>{{note.body}}</em>
      </div>
    </div>
   </li>
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index 4c5b06f4791..5a234564f18 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -18,6 +18,8 @@ document.addEventListener('DOMContentLoaded', () => new Vue({
         newSessionPath: notesDataset.newSessionPath,
         registerPath: notesDataset.registerPath,
         notesPath: notesDataset.notesPath,
+        markdownDocs: notesDataset.markdownDocs,
+        quickActionsDocs: notesDataset.quickActionsDocs,
       },
     };
   },
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 7f806fcd675..e1e0aec8a83 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -175,17 +175,17 @@ export const toggleAward = ({ commit, getters, dispatch }, data) => {
           constants.EMOJI_THUMBSUP;
 
         const targetNote = getters.notesById[noteId];
-        let noteHasAward = false;
+        let noteHasAwardByCurrentUser = false;
 
         targetNote.award_emoji.forEach((a) => {
           if (a.name === counterAward && a.user.id === window.gon.current_user_id) {
-            noteHasAward = true;
+            noteHasAwardByCurrentUser = true;
           }
         });
 
-        if (noteHasAward) {
+        if (noteHasAwardByCurrentUser) {
           Object.assign(data, { awardName: counterAward });
-          Object.assign(data, { kipMutalityCheck: true });
+          Object.assign(data, { skipMutalityCheck: true });
 
           dispatch(types.TOGGLE_AWARD, data);
         }