Added description template selector

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

@@ -41,6 +41,11 @@ export default {
       required: false,
       default: '',
     },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     const store = new Store({
@@ -146,7 +151,8 @@ export default {
       :show-form="showForm"
       :issuable-ref="issuableRef"
       :title-html="state.titleHtml"
-      :title-text="state.titleText" />
+      :title-text="state.titleText"
+      :issuable-templates="issuableTemplates" />
     <description-component
       v-if="state.descriptionHtml"
       :can-update="canUpdate"

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

+<script>
+  export default {
+    props: {
+      issuableTemplates: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
+    mounted() {
+      return new gl.IssuableTemplateSelectors();
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="dropdown js-issuable-selector-wrap"
+    data-issuable-type="issue">
+    <button
+      class="dropdown-menu-toggle js-issuable-selector"
+      type="button"
+      :data-data="JSON.stringify(issuableTemplates)"
+      data-field-name="issuable_template"
+      data-selected="null"
+      data-project-path="gitlab-ce"
+      data-namespace-path="gitlab-org"
+      data-toggle="dropdown">
+      <span class="dropdown-toggle-text ">
+        Choose a template
+      </span>
+      <i
+        aria-hidden="true"
+        class="fa fa-chevron-down">
+      </i>
+    </button>
+    <div class="dropdown-menu dropdown-select">
+      <div class="dropdown-title">
+        Choose a template
+        <button
+        class="dropdown-title-button dropdown-menu-close"
+        aria-label="Close"
+        type="button">
+          <i
+            aria-hidden="true"
+            class="fa fa-times dropdown-menu-close-icon">
+          </i>
+        </button>
+      </div>
+      <div class="dropdown-input">
+        <input
+          type="search"
+          class="dropdown-input-field"
+          placeholder="Filter"
+          autocomplete="off" />
+        <i
+          aria-hidden="true"
+          class="fa fa-search dropdown-input-search">
+        </i>
+        <i
+          role="button"
+          aria-hidden="true"
+          class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
+        </i>
+      </div>
+      <div class="dropdown-content ">
+      </div>
+      <div class="dropdown-footer">
+        <ul class="dropdown-footer-list">
+          <li>
+            <a class="no-template">
+              No template
+            </a>
+          </li>
+          <li>
+            <a class="reset-template">
+              Reset template
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>

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

 <script>
+  import descriptionTemplate from './template.vue';
+
   export default {
     props: {
       store: {
         type: Object,
         required: true,
       },
+      issuableTemplates: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
     },
     data() {
       return {
         state: this.store.formState,
       };
     },
+    components: {
+      descriptionTemplate,
+    },
   };
 </script>
 
 <template>
-  <fieldset>
+  <fieldset class="row">
+    <div class="col-sm-4 col-lg-3">
+      <description-template
+        :issuable-templates="issuableTemplates" />
+    </div>
+    <div class="col-sm-8 col-lg-9">
       <label
         class="sr-only"
         for="issue-title">
@@ -28,5 +43,6 @@
         placeholder="Issue title"
         aria-label="Issue title"
         v-model="state.title" />
+    </div>
   </fieldset>
 </template>

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

@@ -35,6 +35,11 @@
         type: Boolean,
         required: true,
       },
+      issuableTemplates: {
+        type: Array,
+        required: true,
+        default: () => [],
+      },
     },
     watch: {
       titleHtml() {
@@ -56,7 +61,8 @@
   <div>
     <title-field
       v-if="showForm"
-      :store="store" />
+      :store="store"
+      :issuable-templates="issuableTemplates" />
     <h2
       v-else
       class="title"

app/assets/javascripts/issue_show/index.js

@@ -4,6 +4,8 @@ import issuableApp from './components/app.vue';
 import '../vue_shared/vue_resource_interceptor';
 
 document.addEventListener('DOMContentLoaded', () => {
+  const initialDataEl = document.getElementById('js-issuable-app-initial-data');
+  const initialData = JSON.parse(initialDataEl.innerHTML.replace(/"/g, '"'));
   $('.issuable-edit').on('click', (e) => {
     e.preventDefault();
 
@@ -35,6 +37,7 @@ document.addEventListener('DOMContentLoaded', () => {
         initialTitle: issuableTitleElement.innerHTML,
         initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
         initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+        issuableTemplates: initialData.templates,
       };
     },
     render(createElement) {
@@ -47,6 +50,7 @@ document.addEventListener('DOMContentLoaded', () => {
           initialTitle: this.initialTitle,
           initialDescriptionHtml: this.initialDescriptionHtml,
           initialDescriptionText: this.initialDescriptionText,
+          issuableTemplates: this.issuableTemplates,
         },
       });
     },

app/helpers/issuables_helper.rb

@@ -199,6 +199,12 @@ module IssuablesHelper
     issuable_filter_params.any? { |k| params.key?(k) }
   end
 
+  def issuable_initial_data(issuable)
+    {
+      templates: issuable_templates(issuable)
+    }.to_json
+  end
+
   private
 
   def sidebar_gutter_collapsed?

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

@@ -51,6 +51,7 @@
 
 .issue-details.issuable-details
   .detail-page-description.content-block
+    %script#js-issuable-app-initial-data{ type: "application/json" }= issuable_initial_data(@issue)
     #js-issuable-app{ "data" => { "endpoint" => namespace_project_issue_path(@project.namespace, @project, @issue),
       "can-update" => can?(current_user, :update_issue, @issue).to_s,
       "can-destroy" => can?(current_user, :destroy_issue, @issue).to_s,