Merge branch 'issue-edit-inline' into issue-edit-inline-confidential

[ci skip]

6 files changed, 85 insertions, 3 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index a4d517ddded..87757b1a35d 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -45,6 +45,14 @@ export default {
       type: Boolean,
       required: true,
     },
+    markdownPreviewUrl: {
+      type: String,
+      required: true,
+    },
+    markdownDocs: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     const store = new Store({
@@ -75,6 +83,7 @@ export default {
       this.store.formState = {
         title: this.state.titleText,
         confidential: this.isConfidential,
+        description: this.state.descriptionText,
       };
     },
     closeForm() {
@@ -155,7 +164,9 @@ export default {
     <form-component
       v-if="canUpdate && showForm"
       :form-state="formState"
-      :can-destroy="canDestroy" />
+      :can-destroy="canDestroy"
+      :markdown-docs="markdownDocs"
+      :markdown-preview-url="markdownPreviewUrl" />
     <div v-else>
       <title-component
         :issuable-ref="issuableRef"
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 4ad3eb7dfd7..3281ec6b172 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -18,11 +18,13 @@
       },
       updatedAt: {
         type: String,
-        required: true,
+        required: false,
+        default: '',
       },
       taskStatus: {
         type: String,
-        required: true,
+        required: false,
+        default: '',
       },
     },
     data() {
@@ -83,6 +85,7 @@
 
 <template>
   <div
+    v-if="descriptionHtml"
     class="description"
     :class="{
       'js-task-list-container': canUpdate
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..b4c31811a0b
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -0,0 +1,47 @@
+<script>
+  /* global Flash */
+  import markdownField from '../../../vue_shared/components/markdown/field.vue';
+
+  export default {
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+      markdownField,
+    },
+  };
+</script>
+
+<template>
+  <div class="common-note-form">
+    <label
+      class="sr-only"
+      for="issue-description">
+      Description
+    </label>
+    <markdown-field
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs">
+      <textarea
+        id="issue-description"
+        class="note-textarea js-gfm-input js-autosize markdown-area"
+        data-supports-slash-commands="false"
+        aria-label="Description"
+        v-model="formState.description"
+        ref="textatea"
+        slot="textarea">
+      </textarea>
+    </markdown-field>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 862558562e5..a653609c78e 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -1,5 +1,6 @@
 <script>
   import titleField from './fields/title.vue';
+  import descriptionField from './fields/description.vue';
   import editActions from './edit_actions.vue';
   import confidentialCheckbox from './fields/confidential_checkbox.vue';
 
@@ -13,9 +14,18 @@
         type: Object,
         required: true,
       },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       titleField,
+      descriptionField,
       editActions,
       confidentialCheckbox,
     },
@@ -28,6 +38,10 @@
       :form-state="formState" />
     <confidential-checkbox
       :form-state="formState" />
+    <description-field
+      :form-state="formState"
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs" />
     <edit-actions
       :can-destroy="canDestroy" />
   </form>
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index b1e8f467979..3b69be05cf3 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -26,6 +26,8 @@ document.addEventListener('DOMContentLoaded', () => {
         endpoint,
         issuableRef,
         isConfidential,
+        markdownPreviewUrl,
+        markdownDocs,
       } = issuableElement.dataset;
 
       return {
@@ -37,6 +39,8 @@ document.addEventListener('DOMContentLoaded', () => {
         initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
         initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
         isConfidential: gl.utils.convertPermissionToBoolean(isConfidential),
+        markdownPreviewUrl,
+        markdownDocs,
       };
     },
     render(createElement) {
@@ -50,6 +54,8 @@ document.addEventListener('DOMContentLoaded', () => {
           initialDescriptionHtml: this.initialDescriptionHtml,
           initialDescriptionText: this.initialDescriptionText,
           isConfidential: this.isConfidential,
+          markdownPreviewUrl: this.markdownPreviewUrl,
+          markdownDocs: this.markdownDocs,
         },
       });
     },
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index 5af63369211..d90716bef80 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -15,6 +15,7 @@ export default class Store {
     this.formState = {
       title: '',
       confidential: false,
+      description: '',
     };
   }