Fixed up the template dropdown to correctly work

[ci skip]

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

@@ -54,6 +54,14 @@ export default {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     const store = new Store({
@@ -161,7 +169,9 @@ export default {
       :can-destroy="canDestroy"
       :issuable-templates="issuableTemplates"
       :markdown-docs="markdownDocs"
-      :markdown-preview-url="markdownPreviewUrl" />
+      :markdown-preview-url="markdownPreviewUrl"
+      :project-path="projectPath"
+      :project-namespace="projectNamespace" />
     <div v-else>
       <title-component
         :issuable-ref="issuableRef"

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

 <script>
   export default {
     props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
       issuableTemplates: {
         type: Array,
         required: false,
         default: () => [],
       },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      projectNamespace: {
+        type: String,
+        required: true,
+      },
     },
     mounted() {
-      return new gl.IssuableTemplateSelectors();
+      // Create the editor for the template
+      const editor = $('.detail-page-description .note-textarea');
+      editor.setValue = (val) => {
+        this.formState.description = val;
+      };
+      editor.getValue = () => this.formState.description;
+
+      this.issuableTemplate = new gl.IssuableTemplateSelectors({
+        $dropdowns: $(this.$refs.toggle),
+        editor,
+      });
     },
   };
 </script>
@@ -20,13 +42,14 @@
     <button
       class="dropdown-menu-toggle js-issuable-selector"
       type="button"
-      :data-data="JSON.stringify(issuableTemplates)"
+      ref="toggle"
       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 ">
+      data-toggle="dropdown"
+      :data-namespace-path="projectNamespace"
+      :data-project-path="projectPath"
+      :data-data="JSON.stringify(issuableTemplates)">
+      <span class="dropdown-toggle-text">
         Choose a template
       </span>
       <i
@@ -63,8 +86,7 @@
           class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
         </i>
       </div>
-      <div class="dropdown-content ">
-      </div>
+      <div class="dropdown-content"></div>
       <div class="dropdown-footer">
         <ul class="dropdown-footer-list">
           <li>

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

@@ -27,6 +27,14 @@
         type: String,
         required: true,
       },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      projectNamespace: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       titleField,
@@ -49,7 +57,10 @@
         class="col-sm-4 col-lg-3"
         v-if="hasIssuableTemplates">
         <description-template
-          :issuable-templates="issuableTemplates" />
+          :form-state="formState"
+          :issuable-templates="issuableTemplates"
+          :project-path="projectPath"
+          :project-namespace="projectNamespace" />
       </div>
       <div
         :class="{

app/assets/javascripts/issue_show/index.js

@@ -42,6 +42,8 @@ document.addEventListener('DOMContentLoaded', () => {
         issuableTemplates: initialData.templates,
         markdownPreviewUrl,
         markdownDocs,
+        projectPath: initialData.project_path,
+        projectNamespace: initialData.namespace_path,
       };
     },
     render(createElement) {
@@ -57,6 +59,8 @@ document.addEventListener('DOMContentLoaded', () => {
           issuableTemplates: this.issuableTemplates,
           markdownPreviewUrl: this.markdownPreviewUrl,
           markdownDocs: this.markdownDocs,
+          projectPath: this.projectPath,
+          projectNamespace: this.projectNamespace,
         },
       });
     },

app/helpers/issuables_helper.rb

@@ -201,7 +201,9 @@ module IssuablesHelper
 
   def issuable_initial_data(issuable)
     {
-      templates: issuable_templates(issuable)
+      templates: issuable_templates(issuable),
+      project_path: ref_project.path,
+      namespace_path: ref_project.namespace.full_path
     }.to_json
   end
 

spec/javascripts/issue_show/components/fields/description_template_spec.js

+import Vue from 'vue';
+import descriptionTemplate from '~/issue_show/components/fields/description_template.vue';
+import '~/templates/issuable_template_selector';
+import '~/templates/issuable_template_selectors';
+
+describe('Issue description template component', () => {
+  let vm;
+  let formState;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(descriptionTemplate);
+    formState = {
+      description: 'test',
+    };
+
+    vm = new Component({
+      propsData: {
+        formState,
+        issuableTemplates: [{ name: 'test' }],
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('renders templates as JSON array in data attribute', () => {
+    expect(
+      vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data'),
+    ).toBe('[{"name":"test"}]');
+  });
+
+  it('updates formState when changing template', () => {
+    vm.issuableTemplate.editor.setValue('test new template');
+
+    expect(
+      formState.description,
+    ).toBe('test new template');
+  });
+
+  it('returns formState description with editor getValue', () => {
+    formState.description = 'testing new template';
+
+    expect(
+      vm.issuableTemplate.editor.getValue(),
+    ).toBe('testing new template');
+  });
+});

spec/javascripts/issue_show/components/fields/title_spec.js

 import Vue from 'vue';
 import Store from '~/issue_show/stores';
 import titleField from '~/issue_show/components/fields/title.vue';
-import '~/templates/issuable_template_selectors';
 
 describe('Title field component', () => {
   let vm;
@@ -28,23 +27,4 @@ describe('Title field component', () => {
       vm.$el.querySelector('.form-control').value,
     ).toBe('test');
   });
-
-  it('does not render template selector if no templates exist', () => {
-    expect(
-      vm.$el.querySelector('.js-issuable-selector-wrap'),
-    ).toBeNull();
-  });
-
-  it('renders template selector when templates exists', (done) => {
-    spyOn(gl, 'IssuableTemplateSelectors');
-    vm.issuableTemplates = ['test'];
-
-    Vue.nextTick(() => {
-      expect(
-        vm.$el.querySelector('.js-issuable-selector-wrap'),
-      ).not.toBeNull();
-
-      done();
-    });
-  });
 });

spec/javascripts/issue_show/components/form_spec.js

+import Vue from 'vue';
+import formComponent from '~/issue_show/components/form.vue';
+import '~/templates/issuable_template_selector';
+import '~/templates/issuable_template_selectors';
+
+describe('Inline edit form component', () => {
+  let vm;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(formComponent);
+
+    vm = new Component({
+      propsData: {
+        canDestroy: true,
+        formState: {
+          title: 'b',
+          description: 'a',
+        },
+        markdownPreviewUrl: '/',
+        markdownDocs: '/',
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('does not render template selector if no templates exist', () => {
+    expect(
+      vm.$el.querySelector('.js-issuable-selector-wrap'),
+    ).toBeNull();
+  });
+
+  it('renders template selector when templates exists', (done) => {
+    spyOn(gl, 'IssuableTemplateSelectors');
+    vm.issuableTemplates = ['test'];
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.js-issuable-selector-wrap'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+});