Added description field to inline edit form

[ci skip]

5 files changed, 96 insertions, 29 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 5c253bfd0c1..695d849e017 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -41,8 +41,8 @@ export default {
       required: false,
       default: '',
     },
-    showForm: {
-      type: Boolean,
+    markdownPreviewUrl: {
+      type: String,
       required: true,
     },
   },
@@ -71,6 +71,13 @@ export default {
     editActions,
   },
   methods: {
+    openForm() {
+      this.showForm = true;
+      this.store.formState = {
+        title: this.state.titleText,
+        description: this.state.descriptionText,
+      };
+    },
     updateIssuable() {
       this.service.updateIssuable(this.formState)
         .then(() => {
@@ -96,14 +103,6 @@ export default {
         });
     },
   },
-  methods: {
-    openForm() {
-      this.showForm = true;
-      this.store.formState = {
-        title: this.state.titleText,
-      };
-    },
-  },
   created() {
     this.service = new Service(this.endpoint);
     this.poll = new Poll({
@@ -150,12 +149,14 @@ export default {
       :title-html="state.titleHtml"
       :title-text="state.titleText" />
     <description-component
-      v-if="state.descriptionHtml"
+      :store="store"
+      :show-form="showForm"
       :can-update="canUpdate"
       :description-html="state.descriptionHtml"
       :description-text="state.descriptionText"
       :updated-at="state.updatedAt"
-      :task-status="state.taskStatus" />
+      :task-status="state.taskStatus"
+      :markdown-preview-url="markdownPreviewUrl" />
     <edit-actions
       v-if="canUpdate && showForm"
       :can-destroy="canDestroy" />
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 4ad3eb7dfd7..b7a0a1bf7e4 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -1,5 +1,6 @@
 <script>
   import animateMixin from '../mixins/animate';
+  import descriptionField from './fields/description.vue';
 
   export default {
     mixins: [animateMixin],
@@ -24,6 +25,18 @@
         type: String,
         required: true,
       },
+      store: {
+        type: Object,
+        required: true,
+      },
+      showForm: {
+        type: Boolean,
+        required: true,
+      },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
@@ -75,6 +88,9 @@
         }
       },
     },
+    components: {
+      descriptionField,
+    },
     mounted() {
       this.renderGFM();
     },
@@ -82,24 +98,31 @@
 </script>
 
 <template>
-  <div
-    class="description"
-    :class="{
-      'js-task-list-container': canUpdate
-    }">
+  <div :class="{ 'common-note-form': showForm }">
+    <description-field
+      v-if="showForm"
+      :store="store"
+      :markdown-preview-url="markdownPreviewUrl" />
     <div
-      class="wiki"
+      v-else-if="descriptionHtml"
+      class="description"
       :class="{
-        'issue-realtime-pre-pulse': preAnimation,
-        'issue-realtime-trigger-pulse': pulseAnimation
-      }"
-      v-html="descriptionHtml"
-      ref="gfm-content">
+        'js-task-list-container': canUpdate
+      }">
+      <div
+        class="wiki"
+        :class="{
+          'issue-realtime-pre-pulse': preAnimation,
+          'issue-realtime-trigger-pulse': pulseAnimation
+        }"
+        v-html="descriptionHtml"
+        ref="gfm-content">
+      </div>
+      <textarea
+        class="hidden js-task-list-field"
+        v-if="descriptionText"
+        v-model="descriptionText">
+      </textarea>
     </div>
-    <textarea
-      class="hidden js-task-list-field"
-      v-if="descriptionText"
-      v-model="descriptionText">
-    </textarea>
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
new file mode 100644
index 00000000000..d131c0d75ea
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -0,0 +1,40 @@
+<script>
+  /* global Flash */
+  import markdownField from '../../../vue_shared/components/markdown/field.vue';
+
+  export default {
+    props: {
+      store: {
+        type: Object,
+        required: true,
+      },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        state: this.store.formState,
+      };
+    },
+    components: {
+      markdownField,
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <markdown-field
+      :markdown-preview-url="markdownPreviewUrl">
+      <textarea
+        class="note-textarea js-gfm-input js-autosize markdown-area"
+        data-supports-slash-commands="false"
+        v-model="state.description"
+        ref="textatea"
+        slot="textarea">
+      </textarea>
+    </markdown-field>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index 58a8d0590e1..77c77237647 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -25,6 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
         canDestroy,
         endpoint,
         issuableRef,
+        markdownPreviewUrl,
       } = issuableElement.dataset;
 
       return {
@@ -35,6 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
         initialTitle: issuableTitleElement.innerHTML,
         initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
         initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+        markdownPreviewUrl,
       };
     },
     render(createElement) {
@@ -47,7 +49,7 @@ document.addEventListener('DOMContentLoaded', () => {
           initialTitle: this.initialTitle,
           initialDescriptionHtml: this.initialDescriptionHtml,
           initialDescriptionText: this.initialDescriptionText,
-          showForm: this.showForm,
+          markdownPreviewUrl: this.markdownPreviewUrl,
         },
       });
     },
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index 0ab52c307a0..3232875000d 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -14,6 +14,7 @@ export default class Store {
     };
     this.formState = {
       title: '',
+      description: '',
     };
   }