IssueNotesRefactor: Implement up arrow to edit last note.issue-discussions-refactor

4 files changed, 39 insertions, 2 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index e4f7a1dbb79..e070ee0ff3a 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -4,6 +4,7 @@
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import MarkdownField from '../../vue_shared/components/markdown/field.vue';
 import IssueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
+import eventHub from '../event_hub';
 
 export default {
   props: {},
@@ -101,6 +102,17 @@ export default {
     handleError() {
       new Flash('Something went wrong while adding your comment. Please try again.'); // eslint-disable-line
     },
+    editMyLastNote() {
+      if (this.note === '') {
+        const myLastNoteId = $('.js-my-note').last().attr('id');
+
+        if (myLastNoteId) {
+          eventHub.$emit('EnterEditMode', {
+            noteId: parseInt(myLastNoteId.replace('note_', ''), 10),
+          });
+        }
+      }
+    },
   },
   mounted() {
     const issuableDataEl = document.getElementById('js-issuable-app-initial-data');
@@ -143,6 +155,7 @@ export default {
               ref="textarea"
               slot="textarea"
               placeholder="Write a comment or drag your files here..."
+              @keydown.up="editMyLastNote"
               @keydown.meta.enter="handleSave()">
             </textarea>
           </markdown-field>
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 1dd4786d605..e2fe638bef8 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -6,6 +6,7 @@ import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_
 import IssueNoteHeader from './issue_note_header.vue';
 import IssueNoteActions from './issue_note_actions.vue';
 import IssueNoteBody from './issue_note_body.vue';
+import eventHub from '../event_hub';
 
 export default {
   props: {
@@ -37,6 +38,7 @@ export default {
       return {
         'is-editing': this.isEditing,
         'disabled-content': this.isDeleting,
+        'js-my-note': this.author.id === window.gon.current_user_id,
         target: this.targetNoteHash === this.noteAnchorId,
       };
     },
@@ -100,6 +102,14 @@ export default {
       this.isEditing = false;
     },
   },
+  created() {
+    eventHub.$on('EnterEditMode', ({ noteId }) => {
+      if (noteId === this.note.id) {
+        this.isEditing = true;
+        this.$store.dispatch('scrollToNoteIfNeeded', $(this.$el));
+      }
+    });
+  },
 };
 </script>
 
diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue
index b322f777968..86ff8bd8c69 100644
--- a/app/assets/javascripts/notes/components/issue_note_form.vue
+++ b/app/assets/javascripts/notes/components/issue_note_form.vue
@@ -1,5 +1,6 @@
 <script>
 import MarkdownField from '../../vue_shared/components/markdown/field.vue';
+import eventHub from '../event_hub';
 
 export default {
   props: {
@@ -39,6 +40,18 @@ export default {
         note: this.note,
       });
     },
+    editMyLastNote() {
+      if (this.note === '') {
+        const discussion = $(this.$el).closest('.discussion-notes');
+        const myLastNoteId = discussion.find('.js-my-note').last().attr('id');
+
+        if (myLastNoteId) {
+          eventHub.$emit('EnterEditMode', {
+            noteId: parseInt(myLastNoteId.replace('note_', ''), 10),
+          });
+        }
+      }
+    },
   },
   computed: {
     isDirty() {
@@ -75,6 +88,7 @@ export default {
           slot="textarea"
           placeholder="Write a comment or drag your files here..."
           @keydown.meta.enter="handleUpdate"
+          @keydown.up="editMyLastNote"
           @keydown.esc="cancelHandler(true)">
         </textarea>
       </markdown-field>
diff --git a/app/assets/javascripts/notes/stores/issue_notes_store.js b/app/assets/javascripts/notes/stores/issue_notes_store.js
index 3e6b883bd4b..a5811515fc4 100644
--- a/app/assets/javascripts/notes/stores/issue_notes_store.js
+++ b/app/assets/javascripts/notes/stores/issue_notes_store.js
@@ -197,10 +197,10 @@ const actions = {
 
         if (!skipMutalityCheck && (awardName === 'thumbsup' || awardName === 'thumbsdown')) {
           const counterAward = awardName === 'thumbsup' ? 'thumbsdown' : 'thumbsup';
-          const note = context.getters.notesById[noteId];
+          const targetNote = context.getters.notesById[noteId];
           let amIAwarded = false;
 
-          note.award_emoji.forEach((a) => {
+          targetNote.award_emoji.forEach((a) => {
             if (a.name === counterAward && a.user.id === window.gon.current_user_id) {
               amIAwarded = true;
             }