IssueNotesRefactor: Implement up arrow to edit last note.

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>

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>
 

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>

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;
             }

app/views/shared/issuable/_close_reopen_button.html.haml

@@ -4,9 +4,9 @@
 
 - if can_update && is_current_user
   = link_to "Close #{display_issuable_type}", close_issuable_url(issuable), method: button_method,
-            class: "hidden-xs hidden-sm btn btn-grouped btn-close #{issuable_button_visibility(issuable, true)}", title: "Close #{display_issuable_type}"
+            class: "hidden-xs hidden-sm btn btn-grouped btn-close js-btn-issue-action #{issuable_button_visibility(issuable, true)}", title: "Close #{display_issuable_type}"
   = link_to "Reopen #{display_issuable_type}", reopen_issuable_url(issuable), method: button_method,
-            class: "hidden-xs hidden-sm btn btn-grouped btn-reopen #{issuable_button_visibility(issuable, false)}", title: "Reopen #{display_issuable_type}"
+            class: "hidden-xs hidden-sm btn btn-grouped btn-reopen js-btn-issue-action #{issuable_button_visibility(issuable, false)}", title: "Reopen #{display_issuable_type}"
 - elsif can_update && !is_current_user
   = render 'shared/issuable/close_reopen_report_toggle', issuable: issuable
 - else