IssueNotesRefactor: Implement note edit widget.

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

@@ -11,6 +11,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isEditing: false,
+    }
+  },
   components: {
     UserAvatarLink,
     IssueNoteHeader,
@@ -22,11 +27,24 @@ export default {
       return this.note.author;
     },
   },
+  methods: {
+    editHandler() {
+      this.isEditing = true;
+    },
+    formUpdateHandler(data) {
+      console.log('update requested', data);
+    },
+    formCancelHandler() {
+      this.isEditing = false;
+    },
+  },
 };
 </script>
 
 <template>
-  <li class="note timeline-entry">
+  <li
+    class="note timeline-entry"
+    :class="{ 'is-editing': isEditing }">
     <div class="timeline-entry-inner">
       <div class="timeline-icon">
         <user-avatar-link
@@ -47,9 +65,14 @@ export default {
             :canAward="note.emoji_awardable"
             :canEdit="note.can_edit"
             :canDelete="note.can_edit"
-            :reportAbusePath="note.report_abuse_path" />
+            :reportAbusePath="note.report_abuse_path"
+            :editHandler="editHandler" />
         </div>
-        <issue-note-body :note="note" />
+        <issue-note-body
+          :note="note"
+          :isEditing="isEditing"
+          :formUpdateHandler="formUpdateHandler"
+          :formCancelHandler="formCancelHandler" />
       </div>
     </div>
   </li>

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

@@ -21,6 +21,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    editHandler: {
+      type: Function,
+      required: true,
+    },
   },
   data() {
     return {
@@ -70,8 +74,9 @@ export default {
         <template v-if="canEdit">
           <li>
             <button
+              @click="editHandler"
               type="button"
-              class="js-note-edit btn btn-transparent">
+              class="btn btn-transparent">
               Edit comment
             </button>
           </li>

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

 <script>
 import IssueNoteEditedText from './issue_note_edited_text.vue';
 import IssueNoteAwardsList from './issue_note_awards_list.vue';
+import IssueNoteForm from './issue_note_form.vue';
 
 export default {
   props: {
@@ -8,19 +9,48 @@ export default {
       type: Object,
       required: true,
     },
+    isEditing: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    formUpdateHandler: {
+      type: Function,
+      required: true,
+    },
+    formCancelHandler: {
+      type: Function,
+      required: true,
+    }
   },
   components: {
     IssueNoteEditedText,
     IssueNoteAwardsList,
+    IssueNoteForm,
+  },
+  methods: {
+    renderGFM() {
+      $(this.$refs['note-body']).renderGFM();
+    },
+  },
+  mounted() {
+    this.renderGFM();
   },
 };
 </script>
 
 <template>
-  <div class="note-body">
+  <div
+    ref="note-body"
+    class="note-body">
     <div
       v-html="note.note_html"
       class="note-text md"></div>
+    <issue-note-form
+      v-if="isEditing"
+      :updateHandler="formUpdateHandler"
+      :cancelHandler="formCancelHandler"
+      :noteBody="note.note" />
     <issue-note-edited-text
       v-if="note.last_edited_by"
       :editedAt="note.last_edited_at"

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

+<script>
+import MarkdownField from '../../vue_shared/components/markdown/field.vue';
+
+export default {
+  props: {
+    noteBody: {
+      type: String,
+      required: true,
+    },
+    updateHandler: {
+      type: Function,
+      required: true,
+    },
+    cancelHandler: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      note: this.noteBody,
+      markdownPreviewUrl: '',
+      markdownDocsUrl: '',
+    }
+  },
+  components: {
+    MarkdownField,
+  },
+  methods: {
+    handleUpdate() {
+      this.updateHandler({
+        note: this.note,
+      });
+    },
+  },
+  mounted() {
+    const issuableDataEl = document.getElementById('js-issuable-app-initial-data');
+    const issueData = JSON.parse(issuableDataEl.innerHTML.replace(/&quot;/g, '"'));
+    const { markdownDocs, markdownPreviewUrl } = issueData;
+
+    this.markdownDocsUrl = markdownDocs;
+    this.markdownPreviewUrl = markdownPreviewUrl;
+  },
+};
+</script>
+
+<template>
+  <div class="note-edit-form">
+    <form class="edit-note common-note-form">
+      <markdown-field
+        :markdown-preview-url="markdownPreviewUrl"
+        :markdown-docs="markdownDocsUrl"
+        :addSpacingClasses="false">
+        <textarea
+          id="note-body"
+          class="note-textarea js-gfm-input js-autosize markdown-area"
+          data-supports-slash-commands="false"
+          aria-label="Description"
+          v-model="note"
+          ref="textarea"
+          slot="textarea"
+          placeholder="Write a comment or drag your files here..."
+          @keydown.meta.enter="handleUpdate">
+        </textarea>
+      </markdown-field>
+      <div class="note-form-actions clearfix">
+        <button
+          @click="handleUpdate"
+          type="button"
+          class="btn btn-nr btn-save">
+          Save comment
+        </button>
+        <button
+          @click="cancelHandler"
+          class="btn btn-nr btn-cancel"
+          type="button">
+          Cancel
+        </button>
+      </div>
+    </form>
+  </div>
+</template>

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

@@ -33,7 +33,7 @@ export default {
     TimeAgoTooltip,
   },
   methods: {
-    doShit() {
+    toggle() {
       this.$store.commit('toggleDiscussion', {
         discussionId: this.discussionId,
       });
@@ -66,7 +66,7 @@ export default {
       v-if="includeToggle"
       class="discussion-actions">
       <button
-        @click="doShit"
+        @click="toggle"
         class="note-action-button discussion-toggle-button js-toggle-button"
         type="button">
           <i