Commit 3301ca10 authored by Phil Hughes's avatar Phil Hughes

Fixed up the template dropdown to correctly work

[ci skip]
parent f1b0b4a4
......@@ -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"
......
<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>
......
......@@ -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="{
......
......@@ -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,
},
});
},
......
......@@ -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
......
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');
});
});
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();
});
});
});
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();
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment