diff options
author | Phil Hughes <me@iamphill.com> | 2017-05-16 18:18:52 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-16 18:18:52 +0300 |
commit | 3301ca10552e7d95d7fb5108a180caa38ddfb9c5 (patch) | |
tree | 887747508b92bce8809c1be2eb4f166a878f7bca | |
parent | f1b0b4a40ffecf3900c9ca4b69e54d5c8f47bd17 (diff) |
Fixed up the template dropdown to correctly work
[ci skip]
8 files changed, 152 insertions, 31 deletions
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue index 25b6b207d51..37326d2ae5b 100644 --- a/app/assets/javascripts/issue_show/components/app.vue +++ b/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" diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue index 074d0df3803..7bd3c79b03e 100644 --- a/app/assets/javascripts/issue_show/components/fields/description_template.vue +++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue @@ -1,14 +1,36 @@ <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> diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue index 5c1e0568819..429cb9fdf50 100644 --- a/app/assets/javascripts/issue_show/components/form.vue +++ b/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="{ diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js index f6d31d7144b..fdfd9732a91 100644 --- a/app/assets/javascripts/issue_show/index.js +++ b/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, }, }); }, diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb index 8358fd43e72..7922527014a 100644 --- a/app/helpers/issuables_helper.rb +++ b/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 diff --git a/spec/javascripts/issue_show/components/fields/description_template_spec.js b/spec/javascripts/issue_show/components/fields/description_template_spec.js new file mode 100644 index 00000000000..d6702e4a8f7 --- /dev/null +++ b/spec/javascripts/issue_show/components/fields/description_template_spec.js @@ -0,0 +1,47 @@ +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'); + }); +}); diff --git a/spec/javascripts/issue_show/components/fields/title_spec.js b/spec/javascripts/issue_show/components/fields/title_spec.js index 91a2ada8d9b..53ae038a6a2 100644 --- a/spec/javascripts/issue_show/components/fields/title_spec.js +++ b/spec/javascripts/issue_show/components/fields/title_spec.js @@ -1,7 +1,6 @@ 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(); - }); - }); }); diff --git a/spec/javascripts/issue_show/components/form_spec.js b/spec/javascripts/issue_show/components/form_spec.js new file mode 100644 index 00000000000..a2bf1de0576 --- /dev/null +++ b/spec/javascripts/issue_show/components/form_spec.js @@ -0,0 +1,45 @@ +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(); + }); + }); +}); |