IssueNotesRefactor: Implement show/hide of discussion reply form.

3 files changed, 33 insertions, 4 deletions

diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index b362ef4b53e..27e997e223b 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -4,6 +4,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 IssueNoteEditedText from './issue_note_edited_text.vue';
+import IssueNoteForm from './issue_note_form.vue';
 
 export default {
   props: {
@@ -16,6 +17,7 @@ export default {
     return {
       registerLink: '#',
       signInLink: '#',
+      isReplying: false,
     };
   },
   computed: {
@@ -32,6 +34,7 @@ export default {
     IssueNoteHeader,
     IssueNoteActions,
     IssueNoteEditedText,
+    IssueNoteForm,
   },
   mounted() {
     // We need to grab the register and sign in links from DOM for the time being.
@@ -49,6 +52,15 @@ export default {
         discussionId: this.note.id,
       });
     },
+    showReplyForm() {
+      this.isReplying = true;
+    },
+    cancelReplyForm() {
+      this.isReplying = false;
+    },
+    saveReply() {
+      this.isReplying = false;
+    },
   },
 };
 </script>
@@ -95,10 +107,16 @@ export default {
                 <div class="flash-container"></div>
                 <div class="discussion-reply-holder">
                   <button
-                    v-if="note.can_reply"
+                    v-if="note.can_reply && !isReplying"
+                    @click="showReplyForm"
                     type="button"
-                    class="btn btn-text-field js-discussion-reply-button"
+                    class="btn btn-text-field"
                     title="Add a reply">Reply...</button>
+                    <issue-note-form
+                      v-if="isReplying"
+                      saveButtonTitle="Comment"
+                      :updateHandler="saveReply"
+                      :cancelHandler="cancelReplyForm" />
                   <div
                     v-if="!note.can_reply"
                     class="disabled-comment text-center">
diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue
index 86fd9c063e9..0b234b5192d 100644
--- a/app/assets/javascripts/notes/components/issue_note_form.vue
+++ b/app/assets/javascripts/notes/components/issue_note_form.vue
@@ -5,7 +5,8 @@ export default {
   props: {
     noteBody: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     updateHandler: {
       type: Function,
@@ -15,6 +16,11 @@ export default {
       type: Function,
       required: true,
     },
+    saveButtonTitle: {
+      type: String,
+      required: false,
+      default: 'Save comment',
+    }
   },
   data() {
     return {
@@ -40,6 +46,7 @@ export default {
 
     this.markdownDocsUrl = markdownDocs;
     this.markdownPreviewUrl = markdownPreviewUrl;
+    this.$refs.textarea.focus();
   },
 };
 </script>
@@ -68,7 +75,7 @@ export default {
           @click="handleUpdate"
           type="button"
           class="btn btn-nr btn-save">
-          Save comment
+          {{saveButtonTitle}}
         </button>
         <button
           @click="cancelHandler"
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 8cdb3f34ae5..e25694fd0cf 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -250,6 +250,10 @@ ul.related-merge-requests > li {
   }
 }
 
+.discussion-reply-holder .note-edit-form {
+  display: block;
+}
+
 @media (min-width: $screen-sm-min) {
   .emoji-block .row {
     display: flex;