Merge branch 'issue-edit-inline-description-field' into 'issue-edit-inline'

Issue edit inline description field

See merge request !11336

app/assets/javascripts/dropzone_input.js

@@ -142,7 +142,8 @@ window.DropzoneInput = (function() {
       $(child).val(beforeSelection + formattedText + afterSelection);
       textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
       textarea.style.height = `${textarea.scrollHeight}px`;
-      return form_textarea.trigger("input");
+      form_textarea.trigger("input");
+      form_textarea.get(0).dispatchEvent(new Event('input'));
     };
     getFilename = function(e) {
       var value;

app/assets/javascripts/issue_show/components/app.vue

@@ -41,6 +41,14 @@ export default {
       required: false,
       default: '',
     },
+    markdownPreviewUrl: {
+      type: String,
+      required: true,
+    },
+    markdownDocs: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     const store = new Store({
@@ -70,6 +78,7 @@ export default {
       this.showForm = true;
       this.store.formState = {
         title: this.state.titleText,
+        description: this.state.descriptionText,
       };
     },
     closeForm() {
@@ -144,7 +153,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"

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

app/assets/javascripts/issue_show/components/fields/description.vue

+<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>

app/assets/javascripts/issue_show/components/form.vue

 <script>
   import titleField from './fields/title.vue';
+  import descriptionField from './fields/description.vue';
   import editActions from './edit_actions.vue';
 
   export default {
@@ -12,9 +13,18 @@
         type: Object,
         required: true,
       },
+      markdownPreviewUrl: {
+        type: String,
+        required: true,
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       titleField,
+      descriptionField,
       editActions,
     },
   };
@@ -24,6 +34,10 @@
   <form>
     <title-field
       :form-state="formState" />
+    <description-field
+      :form-state="formState"
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs" />
     <edit-actions
       :can-destroy="canDestroy" />
   </form>

app/assets/javascripts/issue_show/index.js

@@ -25,6 +25,8 @@ document.addEventListener('DOMContentLoaded', () => {
         canDestroy,
         endpoint,
         issuableRef,
+        markdownPreviewUrl,
+        markdownDocs,
       } = issuableElement.dataset;
 
       return {
@@ -35,6 +37,8 @@ document.addEventListener('DOMContentLoaded', () => {
         initialTitle: issuableTitleElement.innerHTML,
         initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
         initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+        markdownPreviewUrl,
+        markdownDocs,
       };
     },
     render(createElement) {
@@ -47,6 +51,8 @@ document.addEventListener('DOMContentLoaded', () => {
           initialTitle: this.initialTitle,
           initialDescriptionHtml: this.initialDescriptionHtml,
           initialDescriptionText: this.initialDescriptionText,
+          markdownPreviewUrl: this.markdownPreviewUrl,
+          markdownDocs: this.markdownDocs,
         },
       });
     },

app/assets/javascripts/issue_show/stores/index.js

@@ -14,6 +14,7 @@ export default class Store {
     };
     this.formState = {
       title: '',
+      description: '',
     };
   }
 

app/assets/javascripts/vue_shared/components/markdown/field.vue

+<script>
+  /* global Flash */
+  import markdownHeader from './header.vue';
+  import markdownToolbar from './toolbar.vue';
+
+  export default {
+    props: {
+      markdownPreviewUrl: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        markdownPreview: '',
+        markdownPreviewLoading: false,
+        previewMarkdown: false,
+      };
+    },
+    components: {
+      markdownHeader,
+      markdownToolbar,
+    },
+    methods: {
+      toggleMarkdownPreview() {
+        this.previewMarkdown = !this.previewMarkdown;
+
+        if (!this.previewMarkdown) {
+          this.markdownPreview = '';
+        } else {
+          this.markdownPreviewLoading = true;
+          this.$http.post(
+            this.markdownPreviewUrl,
+            {
+              /*
+                Can't use `$refs` as the component is technically in the parent component
+                so we access the VNode & then get the element
+              */
+              text: this.$slots.textarea[0].elm.value,
+            },
+          )
+          .then((res) => {
+            const data = res.json();
+
+            this.markdownPreviewLoading = false;
+            this.markdownPreview = data.body;
+
+            this.$nextTick(() => {
+              $(this.$refs['markdown-preview']).renderGFM();
+            });
+          })
+          .catch(() => new Flash('Error loading markdown preview'));
+        }
+      },
+    },
+    mounted() {
+      /*
+        GLForm class handles all the toolbar buttons
+      */
+      return new gl.GLForm($(this.$refs['gl-form']));
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="md-area prepend-top-default append-bottom-default"
+    ref="gl-form">
+    <markdown-header
+      :preview-markdown="previewMarkdown"
+      @toggle-markdown="toggleMarkdownPreview" />
+    <div
+      class="md-write-holder"
+      v-show="!previewMarkdown">
+      <div class="zen-backdrop">
+        <slot name="textarea"></slot>
+        <a
+          class="zen-control zen-control-leave js-zen-leave"
+          href="#"
+          aria-label="Enter zen mode">
+          <i
+            class="fa fa-compress"
+            aria-hidden="true">
+          </i>
+        </a>
+        <markdown-toolbar
+          :markdown-docs="markdownDocs" />
+      </div>
+    </div>
+    <div
+      class="md md-preview-holder md-preview"
+      v-show="previewMarkdown">
+      <div
+        ref="markdown-preview"
+        v-html="markdownPreview">
+      </div>
+      <span v-if="markdownPreviewLoading">
+        Loading...
+      </span>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/markdown/header.vue

+<script>
+  import tooltipMixin from '../../mixins/tooltip';
+  import toolbarButton from './toolbar_button.vue';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      previewMarkdown: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    components: {
+      toolbarButton,
+    },
+    methods: {
+      toggleMarkdownPreview(e) {
+        e.target.blur();
+
+        this.$emit('toggle-markdown');
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="md-header">
+    <ul class="nav-links clearfix">
+      <li :class="{ active: !previewMarkdown }">
+        <a
+          href="#md-write-holder"
+          tabindex="-1"
+          @click.prevent="toggleMarkdownPreview($event)">
+          Write
+        </a>
+      </li>
+      <li :class="{ active: previewMarkdown }">
+        <a
+          href="#md-preview-holder"
+          tabindex="-1"
+          @click.prevent="toggleMarkdownPreview($event)">
+          Preview
+        </a>
+      </li>
+      <li class="pull-right">
+        <div class="toolbar-group">
+          <toolbar-button
+            tag="**"
+            button-title="Add bold text"
+            icon="bold" />
+          <toolbar-button
+            tag="*"
+            button-title="Add italic text"
+            icon="italic" />
+          <toolbar-button
+            tag="> "
+            :prepend="true"
+            button-title="Insert a quote"
+            icon="quote-right" />
+          <toolbar-button
+            tag="`"
+            tag-block="```"
+            button-title="Insert code"
+            icon="code" />
+          <toolbar-button
+            tag="* "
+            :prepend="true"
+            button-title="Add a bullet list"
+            icon="list-ul" />
+          <toolbar-button
+            tag="1. "
+            :prepend="true"
+            button-title="Add a numbered list"
+            icon="list-ol" />
+          <toolbar-button
+            tag="* [ ] "
+            :prepend="true"
+            button-title="Add a task list"
+            icon="check-square-o" />
+        </div>
+        <div class="toolbar-group">
+          <button
+            aria-label="Go full screen"
+            class="toolbar-btn js-zen-enter"
+            data-container="body"
+            tabindex="-1"
+            title="Go full screen"
+            type="button"
+            ref="tooltip">
+            <i
+              aria-hidden="true"
+              class="fa fa-arrows-alt fa-fw">
+            </i>
+          </button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/markdown/toolbar.vue

+<script>
+  export default {
+    props: {
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="comment-toolbar clearfix">
+    <div class="toolbar-text">
+      <a
+        :href="markdownDocs"
+        target="_blank"
+        tabindex="-1">
+        Markdown is supported
+      </a>
+    </div>
+    <button
+      class="toolbar-button markdown-selector"
+      type="button"
+      tabindex="-1">
+      <i
+        class="fa fa-file-image-o toolbar-button-icon"
+        aria-hidden="true">
+      </i>
+      Attach a file
+    </button>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue

+<script>
+  import tooltipMixin from '../../mixins/tooltip';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      buttonTitle: {
+        type: String,
+        required: true,
+      },
+      icon: {
+        type: String,
+        required: true,
+      },
+      tag: {
+        type: String,
+        required: true,
+      },
+      tagBlock: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      prepend: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      iconClass() {
+        return `fa-${this.icon}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <button
+    type="button"
+    class="toolbar-btn js-md hidden-xs"
+    tabindex="-1"
+    ref="tooltip"
+    data-container="body"
+    :data-md-tag="tag"
+    :data-md-block="tagBlock"
+    :data-md-prepend="prepend"
+    :title="buttonTitle"
+    :aria-label="buttonTitle">
+    <i
+      aria-hidden="true"
+      class="fa fa-fw"
+      :class="iconClass">
+    </i>
+  </button>
+</template>

app/assets/javascripts/vue_shared/mixins/tooltip.js

 export default {
   mounted() {
+    this.$nextTick(() => {
       $(this.$refs.tooltip).tooltip();
+    });
   },
 
   updated() {
+    this.$nextTick(() => {
       $(this.$refs.tooltip).tooltip('fixTitle');
+    });
+  },
+
+  beforeDestroy() {
+    $(this.$refs.tooltip).tooltip('destroy');
   },
 };

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

@@ -55,6 +55,8 @@
       "can-update" => can?(current_user, :update_issue, @issue).to_s,
       "can-destroy" => can?(current_user, :destroy_issue, @issue).to_s,
       "issuable-ref" => @issue.to_reference,
+      "markdown-preview-url" => preview_markdown_path(@project),
+      "markdown-docs" => help_page_path('user/markdown'),
     } }
       %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?

spec/javascripts/issue_show/components/app_spec.js

@@ -75,18 +75,6 @@ describe('Issuable output', () => {
     });
   });
 
-  it('changes element for `form` when open', (done) => {
-    vm.showForm = true;
-
-    Vue.nextTick(() => {
-      expect(
-        vm.$el.tagName,
-      ).toBe('FORM');
-
-      done();
-    });
-  });
-
   it('does not show actions if permissions are incorrect', (done) => {
     vm.showForm = true;
     vm.canUpdate = false;