IssueNotesRefactor: Implement main note form.

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

+<script>
+/* global Flash */
+
+import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import MarkdownField from '../../vue_shared/components/markdown/field.vue';
+
+export default {
+  props: {},
+  data() {
+    return {
+      note: '',
+      markdownPreviewUrl: '',
+      markdownDocsUrl: '',
+
+      // FIXME: @fatihacet - Fix the mock data below.
+      noteType: 'comment',
+      issueState: 'open',
+      endpoint: '/gitlab-org/gitlab-ce/notes',
+      author: {
+        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        id: 1,
+        name: 'Administrator',
+        path: '/root',
+        state: 'active',
+        username: 'root',
+      },
+    };
+  },
+  components: {
+    UserAvatarLink,
+    MarkdownField,
+  },
+  computed: {
+    commentButtonTitle() {
+      return this.noteType === 'comment' ? 'Comment' : 'Start discussion';
+    },
+    issueActionButtonTitle() {
+      if (this.note.length) {
+        const actionText = this.issueState === 'open' ? 'close' : 'reopen';
+
+        return this.noteType === 'comment' ? `Comment & ${actionText} issue` : `Start discussion & ${actionText} issue`;
+      }
+
+      return this.issueState === 'open' ? 'Close issue' : 'Reopen issue';
+    },
+  },
+  methods: {
+    handleSave() {
+      const data = {
+        endpoint: `${this.endpoint}?full_data=1`,
+        noteData: {
+          target_type: 'issue',
+          target_id: '89',
+          note: {
+            noteable_type: 'Issue',
+            noteable_id: 89,
+            note: this.note,
+          }
+        },
+      };
+
+      if (this.noteType === 'discussion') {
+        data.noteData.note.type = 'DiscussionNote';
+      }
+
+      this.$store.dispatch('createNewNote', data)
+        .then(() => {
+          this.discard();
+        })
+        .catch(() => {
+          new Flash('Something went wrong while adding your comment. Please try again.'); // eslint-disable-line
+        });
+    },
+    discard() {
+      this.note = '';
+      this.$refs.textarea.focus();
+    },
+    setNoteType(type) {
+      this.noteType = type;
+    },
+  },
+  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>
+  <ul class="notes notes-form timeline new-note">
+    <li class="timeline-entry">
+      <div class="timeline-icon hidden-xs hidden-sm">
+        <user-avatar-link
+          :linkHref="author.path"
+          :imgSrc="author.avatar_url"
+          :imgAlt="author.name"
+          :imgSize="40" />
+      </div>
+      <div class="timeline-content timeline-content-form 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="true"
+            data-supports-quick-actions="true"
+            aria-label="Description"
+            v-model="note"
+            ref="textarea"
+            slot="textarea"
+            placeholder="Write a comment or drag your files here..."
+            @keydown.meta.enter="handleSave">
+          </textarea>
+        </markdown-field>
+        <div class="note-form-actions clearfix">
+          <div class="pull-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown">
+            <input
+              @click="handleSave"
+              :disabled="!note.length"
+              :value="commentButtonTitle"
+              class="btn btn-nr btn-create comment-btn js-comment-button js-comment-submit-button"
+              type="submit" />
+            <button
+              :disabled="!note.length"
+              name="button"
+              type="button"
+              class="btn btn-nr comment-btn note-type-toggle js-note-new-discussion"
+              data-toggle="dropdown"
+              aria-label="Open comment type dropdown">
+              <i
+                aria-hidden="true"
+                class="fa fa-caret-down toggle-icon"></i>
+            </button>
+            <ul
+              class="dropdown-menu note-type-dropdown dropdown-open-top">
+              <li
+                :class="{ 'item-selected': noteType === 'comment' }"
+                @click.prevent="setNoteType('comment')">
+                <a href="#">
+                  <i
+                    aria-hidden="true"
+                    class="fa fa-check"></i>
+                  <div class="description">
+                    <strong>Comment</strong>
+                    <p>
+                      Add a general comment to this issue.
+                    </p>
+                  </div>
+                </a>
+              </li>
+              <li class="divider"></li>
+              <li
+                :class="{ 'item-selected': noteType === 'discussion' }"
+                @click.prevent="setNoteType('discussion')">
+                <a href="#">
+                  <i
+                    aria-hidden="true"
+                    class="fa fa-check"></i>
+                  <div class="description">
+                    <strong>Start discussion</strong>
+                    <p>
+                      Discuss a specific suggestion or question.
+                    </p>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <a
+            :class="{'btn-reopen': issueState === 'closed', 'btn-close': issueState === 'open'}"
+            class="btn btn-nr btn-comment">
+            {{issueActionButtonTitle}}
+          </a>
+          <a
+            v-if="note.length"
+            @click="discard"
+            class="btn btn-cancel js-note-discard"
+            role="button">
+            Discard draft
+          </a>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>

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

@@ -49,8 +49,9 @@ export default {
       this.signInLink = signInLink.getAttribute('href');
     }
 
-    const newNotePath = document.querySelector('.js-main-target-form').getAttribute('action');
-    this.newNotePath = `${newNotePath}?full_data=1`;
+    // TODO: @fatihacet - Reimplement this when we have data for it.
+    // const newNotePath = document.querySelector('.js-main-target-form').getAttribute('action');
+    // this.newNotePath = `${newNotePath}?full_data=1`;
   },
   methods: {
     toggleDiscussion() {

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

@@ -61,7 +61,8 @@ export default {
         <textarea
           id="note-body"
           class="note-textarea js-gfm-input js-autosize markdown-area"
-          data-supports-slash-commands="false"
+          data-supports-slash-commands="true"
+          data-supports-quick-actions="true"
           aria-label="Description"
           v-model="note"
           ref="textarea"

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

@@ -7,6 +7,7 @@ import storeOptions from '../stores/issue_notes_store';
 import IssueNote from './issue_note.vue';
 import IssueDiscussion from './issue_discussion.vue';
 import IssueSystemNote from './issue_system_note.vue';
+import IssueCommentForm from './issue_comment_form.vue';
 
 Vue.use(Vuex);
 const store = new Vuex.Store(storeOptions);
@@ -23,6 +24,7 @@ export default {
     IssueNote,
     IssueDiscussion,
     IssueSystemNote,
+    IssueCommentForm,
   },
   methods: {
     component(note) {
@@ -55,17 +57,19 @@ export default {
       v-if="isLoading"
       class="loading">
       <i
-        aria-hidden="true"
-        class="fa fa-spinner fa-spin"></i>
+        class="fa fa-spinner fa-spin"
+        aria-hidden="true"></i>
     </div>
     <ul
-      class="notes main-notes-list timeline"
-      id="notes-list">
+      v-if="!isLoading"
+      id="notes-list"
+      class="notes main-notes-list timeline">
       <component
         v-for="note in $store.getters.notes"
         :is="component(note)"
         :note="componentData(note)"
         :key="note.id" />
     </ul>
+    <issue-comment-form v-if="!isLoading" />
   </div>
 </template>

app/assets/javascripts/notes/services/issue_notes_service.js

@@ -16,4 +16,7 @@ export default {
   updateNote(endpoint, data) {
     return Vue.http.put(endpoint, data, { emulateJSON: true });
   },
+  createNewNote(endpoint, data) {
+    return Vue.http.post(endpoint, data, { emulateJSON: true });
+  }
 };

app/assets/javascripts/notes/stores/issue_notes_store.js

@@ -52,6 +52,10 @@ const mutations = {
       noteObj.notes.splice(noteObj.notes.indexOf(comment), 1, note);
     }
   },
+  addNewNote(storeState, note) {
+    // TODO: @fatihacet - When we get the correct data from server update the store
+    // storeState.notes.push(note);
+  },
 };
 
 const actions = {
@@ -90,6 +94,15 @@ const actions = {
         context.commit('updateNote', res);
       });
   },
+  createNewNote(context, data) {
+    const { endpoint, noteData } = data;
+    return service
+      .createNewNote(endpoint, noteData)
+      .then(res => res.json())
+      .then((res) => {
+        context.commit('addNewNote', res);
+      });
+  },
 };
 
 export default {

app/assets/stylesheets/framework/dropdowns.scss

@@ -369,6 +369,10 @@
   transform: translateY(0);
 }
 
+.comment-type-dropdown.open .dropdown-menu {
+  display: block;
+}
+
 .filtered-search-box-input-container {
   .dropdown-menu,
   .dropdown-menu-nav {

app/views/projects/issues/_discussion.html.haml

@@ -10,5 +10,5 @@
     = webpack_bundle_tag 'notes'
 
 
-#notes{style: "margin-top: 150px"}
-  = render 'shared/notes/notes_with_form', :autocomplete => true
+/ #notes{style: "margin-top: 150px"}
+/   = render 'shared/notes/notes_with_form', :autocomplete => true