From b1affe07a1ff0b7f10cdc94b91dfea97d92b015c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 12 May 2017 12:54:10 +0100
Subject: Issue inline edit title field

[ci skip]
---
 .../javascripts/issue_show/components/app.vue      | 20 +++++++++++-
 .../issue_show/components/fields/title.vue         | 32 +++++++++++++++++++
 .../javascripts/issue_show/components/title.vue    | 36 ++++++++++++++++------
 app/assets/javascripts/issue_show/index.js         | 17 ----------
 app/assets/javascripts/issue_show/stores/index.js  |  4 ++-
 spec/javascripts/issue_show/components/app_spec.js | 12 ++++++++
 .../issue_show/components/fields/title_spec.js     | 30 ++++++++++++++++++
 .../issue_show/components/title_spec.js            | 13 ++++++--
 8 files changed, 133 insertions(+), 31 deletions(-)
 create mode 100644 app/assets/javascripts/issue_show/components/fields/title.vue
 create mode 100644 spec/javascripts/issue_show/components/fields/title_spec.js

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index a9418dd0bb2..5c253bfd0c1 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -57,8 +57,14 @@ export default {
       store,
       state: store.state,
       formState: store.formState,
+      showForm: false,
     };
   },
+  computed: {
+    elementType() {
+      return this.showForm ? 'form' : 'div';
+    },
+  },
   components: {
     descriptionComponent,
     titleComponent,
@@ -90,6 +96,14 @@ 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({
@@ -117,17 +131,21 @@ export default {
 
     eventHub.$on('delete.issuable', this.deleteIssuable);
     eventHub.$on('update.issuable', this.updateIssuable);
+    eventHub.$on('open.form', this.openForm);
   },
   beforeDestroy() {
     eventHub.$off('delete.issuable', this.deleteIssuable);
     eventHub.$off('update.issuable', this.updateIssuable);
+    eventHub.$on('open.form', this.openForm);
   },
 };
 </script>
 
 <template>
-  <div>
+  <div :is="elementType">
     <title-component
+      :store="store"
+      :show-form="showForm"
       :issuable-ref="issuableRef"
       :title-html="state.titleHtml"
       :title-text="state.titleText" />
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
new file mode 100644
index 00000000000..732a4021205
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -0,0 +1,32 @@
+<script>
+  export default {
+    props: {
+      store: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        state: this.store.formState,
+      };
+    },
+  };
+</script>
+
+<template>
+  <fieldset>
+    <label
+      class="sr-only"
+      for="issue-title">
+      Title
+    </label>
+    <input
+      id="issue-title"
+      class="form-control"
+      type="text"
+      placeholder="Issue title"
+      aria-label="Issue title"
+      v-model="state.title" />
+  </fieldset>
+</template>
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index a9dabd4cff1..a61ce414891 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -1,8 +1,12 @@
 <script>
   import animateMixin from '../mixins/animate';
+  import titleField from './fields/title.vue';
 
   export default {
     mixins: [animateMixin],
+    components: {
+      titleField,
+    },
     data() {
       return {
         preAnimation: false,
@@ -23,6 +27,14 @@
         type: String,
         required: true,
       },
+      store: {
+        type: Object,
+        required: true,
+      },
+      showForm: {
+        type: Boolean,
+        required: true,
+      },
     },
     watch: {
       titleHtml() {
@@ -41,13 +53,19 @@
 </script>
 
 <template>
-  <h2
-    class="title"
-    :class="{
-      'issue-realtime-pre-pulse': preAnimation,
-      'issue-realtime-trigger-pulse': pulseAnimation
-    }"
-    v-html="titleHtml"
-  >
-  </h2>
+  <div>
+    <title-field
+      v-if="showForm"
+      :store="store" />
+    <h2
+      v-else
+      class="title"
+      :class="{
+        'issue-realtime-pre-pulse': preAnimation,
+        'issue-realtime-trigger-pulse': pulseAnimation
+      }"
+      v-html="titleHtml"
+    >
+    </h2>
+  </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index 246ccf66323..58a8d0590e1 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -35,25 +35,8 @@ document.addEventListener('DOMContentLoaded', () => {
         initialTitle: issuableTitleElement.innerHTML,
         initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
         initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
-        showForm: false,
       };
     },
-    methods: {
-      openForm() {
-        this.showForm = true;
-      },
-      closeForm() {
-        this.showForm = false;
-      },
-    },
-    created() {
-      eventHub.$on('open.form', this.openForm);
-      eventHub.$on('close.form', this.closeForm);
-    },
-    beforeDestroy() {
-      eventHub.$off('open.form', this.openForm);
-      eventHub.$off('close.form', this.closeForm);
-    },
     render(createElement) {
       return createElement('issuable-app', {
         props: {
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index b2c1b9d1c6e..0ab52c307a0 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -12,7 +12,9 @@ export default class Store {
       taskStatus: '',
       updatedAt: '',
     };
-    this.formState = {};
+    this.formState = {
+      title: '',
+    };
   }
 
   updateState(data) {
diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 1f46d836e1e..1c47ba49b18 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -75,6 +75,18 @@ describe('Issuable output', () => {
     });
   });
 
+  it('changes element to `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;
diff --git a/spec/javascripts/issue_show/components/fields/title_spec.js b/spec/javascripts/issue_show/components/fields/title_spec.js
new file mode 100644
index 00000000000..69afcd24df9
--- /dev/null
+++ b/spec/javascripts/issue_show/components/fields/title_spec.js
@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import Store from '~/issue_show/stores';
+import titleField from '~/issue_show/components/fields/title.vue';
+
+describe('Title field component', () => {
+  let vm;
+  let store;
+
+  beforeEach(() => {
+    const Component = Vue.extend(titleField);
+    store = new Store({
+      titleHtml: '',
+      descriptionHtml: '',
+      issuableRef: '',
+    });
+    store.formState.title = 'test';
+
+    vm = new Component({
+      propsData: {
+        store,
+      },
+    }).$mount();
+  });
+
+  it('renders form control with formState title', () => {
+    expect(
+      vm.$el.querySelector('.form-control').value,
+    ).toBe('test');
+  });
+});
diff --git a/spec/javascripts/issue_show/components/title_spec.js b/spec/javascripts/issue_show/components/title_spec.js
index 2f953e7e92e..45ec8718eb6 100644
--- a/spec/javascripts/issue_show/components/title_spec.js
+++ b/spec/javascripts/issue_show/components/title_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import Store from '~/issue_show/stores';
 import titleComponent from '~/issue_show/components/title.vue';
 
 describe('Title component', () => {
@@ -11,13 +12,19 @@ describe('Title component', () => {
         issuableRef: '#1',
         titleHtml: 'Testing <img />',
         titleText: 'Testing',
+        showForm: false,
+        store: new Store({
+          titleHtml: '',
+          descriptionHtml: '',
+          issuableRef: '',
+        }),
       },
     }).$mount();
   });
 
   it('renders title HTML', () => {
     expect(
-      vm.$el.innerHTML.trim(),
+      vm.$el.querySelector('h2').innerHTML.trim(),
     ).toBe('Testing <img>');
   });
 
@@ -39,12 +46,12 @@ describe('Title component', () => {
 
     Vue.nextTick(() => {
       expect(
-        vm.$el.classList.contains('issue-realtime-pre-pulse'),
+        vm.$el.querySelector('h2').classList.contains('issue-realtime-pre-pulse'),
       ).toBeTruthy();
 
       setTimeout(() => {
         expect(
-          vm.$el.classList.contains('issue-realtime-trigger-pulse'),
+          vm.$el.querySelector('h2').classList.contains('issue-realtime-trigger-pulse'),
         ).toBeTruthy();
 
         done();
-- 
cgit v1.2.1


From b5b5b4af0c390a9246e0ef6051b95af1c5e40297 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 12 May 2017 15:52:45 +0100
Subject: Added description field to inline edit form

[ci skip]
---
 app/assets/javascripts/dropzone_input.js           |   3 +-
 .../javascripts/issue_show/components/app.vue      |  25 ++---
 .../issue_show/components/description.vue          |  55 +++++++----
 .../issue_show/components/fields/description.vue   |  40 ++++++++
 app/assets/javascripts/issue_show/index.js         |   4 +-
 app/assets/javascripts/issue_show/stores/index.js  |   1 +
 .../vue_shared/components/markdown/field.vue       | 102 +++++++++++++++++++++
 .../vue_shared/components/markdown/header.vue      |  97 ++++++++++++++++++++
 .../vue_shared/components/markdown/toolbar.vue     |  26 ++++++
 .../components/markdown/toolbar_button.vue         |  48 ++++++++++
 app/views/projects/issues/show.html.haml           |   1 +
 11 files changed, 372 insertions(+), 30 deletions(-)
 create mode 100644 app/assets/javascripts/issue_show/components/fields/description.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/markdown/field.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/markdown/header.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue

diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index b3a76fbb43e..3843539a3b8 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/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;
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: '',
     };
   }
 
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
new file mode 100644
index 00000000000..d0424a18579
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -0,0 +1,102 @@
+<script>
+  /* global Flash */
+  import markdownHeader from './header.vue';
+  import markdownToolbar from './toolbar.vue';
+
+  export default {
+    props: {
+      markdownPreviewUrl: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    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 etc.
+      */
+      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 />
+      </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>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
new file mode 100644
index 00000000000..4c9f112a2ab
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -0,0 +1,97 @@
+<script>
+  import toolbarButton from './toolbar_button.vue';
+
+  export default {
+    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"
+            data-toggle="tooltip"
+            title="Go full screen"
+            type="button">
+            <i
+              aria-hidden="true"
+              class="fa fa-arrows-alt fa-fw">
+            </i>
+          </button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
new file mode 100644
index 00000000000..47f41ba4c03
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -0,0 +1,26 @@
+<script>
+
+</script>
+
+<template>
+  <div class="comment-toolbar clearfix">
+    <div class="toolbar-text">
+      <a
+        href="/docs"
+        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>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
new file mode 100644
index 00000000000..c87a3c1e910
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -0,0 +1,48 @@
+<script>
+  export default {
+    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,
+      },
+    },
+  };
+</script>
+
+<template>
+  <button
+    type="button"
+    class="toolbar-btn js-md hidden-xs"
+    tabindex="-1"
+    :data-md-tag="tag"
+    :data-md-block="tagBlock"
+    :data-md-prepend="prepend"
+    data-container="body"
+    data-toggle="tooltip"
+    :title="buttonTitle"
+    :aria-label="buttonTitle">
+    <i
+      aria-hidden="true"
+      class="fa fa-fw"
+      :class="'fa-' + icon">
+    </i>
+  </button>
+</template>
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index d0783009a58..a552771d167 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -55,6 +55,7 @@
       "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),
     } }
       %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?
-- 
cgit v1.2.1


From 7791d498a06a2e9ffca7f891a9e7627e6a9c1abf Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 12 May 2017 15:59:45 +0100
Subject: Added accessibility data to description field

[ci skip]
---
 app/assets/javascripts/issue_show/components/fields/description.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index d131c0d75ea..a9caed36287 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -26,11 +26,16 @@
 
 <template>
   <div>
+    <label for="issue-description">
+      Description
+    </label>
     <markdown-field
       :markdown-preview-url="markdownPreviewUrl">
       <textarea
+        id="issue-description"
         class="note-textarea js-gfm-input js-autosize markdown-area"
         data-supports-slash-commands="false"
+        aria-label="Description"
         v-model="state.description"
         ref="textatea"
         slot="textarea">
-- 
cgit v1.2.1


From aa6d92aedb61bdc9f5c1edec95dfe3f938a4d08f Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 12 May 2017 16:07:35 +0100
Subject: Added sr-only to label for description

[ci skip]
---
 app/assets/javascripts/issue_show/components/fields/description.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index a9caed36287..ba8d2d4869b 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -26,7 +26,9 @@
 
 <template>
   <div>
-    <label for="issue-description">
+    <label
+      class="sr-only"
+      for="issue-description">
       Description
     </label>
     <markdown-field
-- 
cgit v1.2.1


From 96a46521002f17aff2fc09f02778432ae049c6ee Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 15 May 2017 12:28:42 +0100
Subject: Added markdown docs link

[ci skip]
---
 .../javascripts/issue_show/components/app.vue      | 11 ++++---
 .../issue_show/components/description.vue          | 38 ++++++++++++----------
 .../issue_show/components/fields/description.vue   |  7 +++-
 app/assets/javascripts/issue_show/index.js         |  3 ++
 .../vue_shared/components/markdown/field.vue       |  7 +++-
 .../vue_shared/components/markdown/toolbar.vue     | 11 +++++--
 app/views/projects/issues/show.html.haml           |  1 +
 7 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 695d849e017..6ec66da0ed4 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -45,6 +45,10 @@ export default {
       type: String,
       required: true,
     },
+    markdownDocs: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     const store = new Store({
@@ -152,11 +156,8 @@ export default {
       :store="store"
       :show-form="showForm"
       :can-update="canUpdate"
-      :description-html="state.descriptionHtml"
-      :description-text="state.descriptionText"
-      :updated-at="state.updatedAt"
-      :task-status="state.taskStatus"
-      :markdown-preview-url="markdownPreviewUrl" />
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs" />
     <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 b7a0a1bf7e4..fb542c70489 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -9,22 +9,6 @@
         type: Boolean,
         required: true,
       },
-      descriptionHtml: {
-        type: String,
-        required: true,
-      },
-      descriptionText: {
-        type: String,
-        required: true,
-      },
-      updatedAt: {
-        type: String,
-        required: true,
-      },
-      taskStatus: {
-        type: String,
-        required: true,
-      },
       store: {
         type: Object,
         required: true,
@@ -37,14 +21,33 @@
         type: String,
         required: true,
       },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
+        state: this.store.state,
         preAnimation: false,
         pulseAnimation: false,
         timeAgoEl: $('.js-issue-edited-ago'),
       };
     },
+    computed: {
+      descriptionHtml() {
+        return this.state.descriptionHtml;
+      },
+      descriptionText() {
+        return this.state.descriptionText;
+      },
+      updatedAt() {
+        return this.state.updated_at;
+      },
+      taskStatus() {
+        return this.state.taskStatus;
+      },
+    },
     watch: {
       descriptionHtml() {
         this.animateChange();
@@ -102,7 +105,8 @@
     <description-field
       v-if="showForm"
       :store="store"
-      :markdown-preview-url="markdownPreviewUrl" />
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs" />
     <div
       v-else-if="descriptionHtml"
       class="description"
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index ba8d2d4869b..bade7634e72 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -12,6 +12,10 @@
         type: String,
         required: true,
       },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
@@ -32,7 +36,8 @@
       Description
     </label>
     <markdown-field
-      :markdown-preview-url="markdownPreviewUrl">
+      :markdown-preview-url="markdownPreviewUrl"
+      :markdown-docs="markdownDocs">
       <textarea
         id="issue-description"
         class="note-textarea js-gfm-input js-autosize markdown-area"
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index 77c77237647..d13e24a468b 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -26,6 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
         endpoint,
         issuableRef,
         markdownPreviewUrl,
+        markdownDocs,
       } = issuableElement.dataset;
 
       return {
@@ -37,6 +38,7 @@ document.addEventListener('DOMContentLoaded', () => {
         initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
         initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
         markdownPreviewUrl,
+        markdownDocs,
       };
     },
     render(createElement) {
@@ -50,6 +52,7 @@ document.addEventListener('DOMContentLoaded', () => {
           initialDescriptionHtml: this.initialDescriptionHtml,
           initialDescriptionText: this.initialDescriptionText,
           markdownPreviewUrl: this.markdownPreviewUrl,
+          markdownDocs: this.markdownDocs,
         },
       });
     },
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index d0424a18579..f08ebac260e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -10,6 +10,10 @@
         required: false,
         default: '',
       },
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
@@ -84,7 +88,8 @@
             aria-hidden="true">
           </i>
         </a>
-        <markdown-toolbar />
+        <markdown-toolbar
+          :markdown-docs="markdownDocs" />
       </div>
     </div>
     <div
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 47f41ba4c03..93252293ba6 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,12 +1,19 @@
 <script>
-
+  export default {
+    props: {
+      markdownDocs: {
+        type: String,
+        required: true,
+      },
+    },
+  };
 </script>
 
 <template>
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
       <a
-        href="/docs"
+        :href="markdownDocs"
         target="_blank"
         tabindex="-1">
         Markdown is supported
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index a552771d167..2b095648dcf 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -56,6 +56,7 @@
       "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?
-- 
cgit v1.2.1


From f53d703f44a52fc4eb50fda9ad30e5227fa8e84a Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 16 May 2017 10:42:17 +0100
Subject: Fixed else-if in description

[ci skip]
---
 app/assets/javascripts/issue_show/components/description.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index fc73d5db899..3281ec6b172 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -85,7 +85,7 @@
 
 <template>
   <div
-    v-else-if="descriptionHtml"
+    v-if="descriptionHtml"
     class="description"
     :class="{
       'js-task-list-container': canUpdate
-- 
cgit v1.2.1


From 9b93a3f2773135d9cbac3c16a5f66c42916e1f65 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 16 May 2017 12:01:13 +0100
Subject: Use the tooltip mixin

[ci skip]
---
 .../javascripts/vue_shared/components/markdown/field.vue |  2 +-
 .../vue_shared/components/markdown/header.vue            |  8 ++++++--
 .../vue_shared/components/markdown/toolbar_button.vue    | 16 +++++++++++++---
 app/assets/javascripts/vue_shared/mixins/tooltip.js      | 12 ++++++++++--
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index f08ebac260e..68bbd263f02 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -60,7 +60,7 @@
     },
     mounted() {
       /*
-        GLForm class handles all the toolbar buttons etc.
+        GLForm class handles all the toolbar buttons
       */
       return new gl.GLForm($(this.$refs['gl-form']));
     },
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 4c9f112a2ab..7884b25c5ef 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,7 +1,11 @@
 <script>
+  import tooltipMixin from '../../mixins/tooltip';
   import toolbarButton from './toolbar_button.vue';
 
   export default {
+    mixins: [
+      tooltipMixin,
+    ],
     props: {
       previewMarkdown: {
         type: Boolean,
@@ -82,9 +86,9 @@
             class="toolbar-btn js-zen-enter"
             data-container="body"
             tabindex="-1"
-            data-toggle="tooltip"
             title="Go full screen"
-            type="button">
+            type="button"
+            ref="tooltip">
             <i
               aria-hidden="true"
               class="fa fa-arrows-alt fa-fw">
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index c87a3c1e910..096be507625 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -1,5 +1,10 @@
 <script>
+  import tooltipMixin from '../../mixins/tooltip';
+
   export default {
+    mixins: [
+      tooltipMixin,
+    ],
     props: {
       buttonTitle: {
         type: String,
@@ -24,6 +29,11 @@
         default: false,
       },
     },
+    computed: {
+      iconClass() {
+        return `fa-${this.icon}`;
+      },
+    },
   };
 </script>
 
@@ -32,17 +42,17 @@
     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"
-    data-container="body"
-    data-toggle="tooltip"
     :title="buttonTitle"
     :aria-label="buttonTitle">
     <i
       aria-hidden="true"
       class="fa fa-fw"
-      :class="'fa-' + icon">
+      :class="iconClass">
     </i>
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/mixins/tooltip.js b/app/assets/javascripts/vue_shared/mixins/tooltip.js
index 9bb948bff66..2e3b716a36c 100644
--- a/app/assets/javascripts/vue_shared/mixins/tooltip.js
+++ b/app/assets/javascripts/vue_shared/mixins/tooltip.js
@@ -1,9 +1,17 @@
 export default {
   mounted() {
-    $(this.$refs.tooltip).tooltip();
+    this.$nextTick(() => {
+      $(this.$refs.tooltip).tooltip();
+    });
   },
 
   updated() {
-    $(this.$refs.tooltip).tooltip('fixTitle');
+    this.$nextTick(() => {
+      $(this.$refs.tooltip).tooltip('fixTitle');
+    });
+  },
+
+  beforeDestroy() {
+    $(this.$refs.tooltip).tooltip('destroy');
   },
 };
-- 
cgit v1.2.1