Commit 40d7f9de authored by Mikhail's avatar Mikhail Committed by Mark Florian

Refactor prop mutation in issue form

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/357830.
parent 94a781d6
......@@ -327,9 +327,12 @@ export default {
});
},
updateFormState(state) {
this.store.setFormState(state);
},
updateAndShowForm(templates = {}) {
if (!this.showForm) {
this.showForm = true;
this.store.setFormState({
title: this.state.titleText,
description: this.state.descriptionText,
......@@ -338,6 +341,7 @@ export default {
updateLoading: false,
issuableTemplates: templates,
});
this.showForm = true;
}
},
......@@ -369,6 +373,10 @@ export default {
},
updateIssuable() {
this.store.setFormState({
updateLoading: true,
});
const {
store: { formState },
issueState,
......@@ -376,7 +384,9 @@ export default {
const issuablePayload = issueState.isDirty
? { ...formState, issue_type: issueState.issueType }
: formState;
this.clearFlash();
return this.service
.updateIssuable(issuablePayload)
.then((res) => res.data)
......@@ -473,6 +483,7 @@ export default {
:can-attach-file="canAttachFile"
:enable-autocomplete="enableAutocomplete"
:issuable-type="issuableType"
@updateForm="updateFormState"
/>
</div>
<div v-else>
......
......@@ -288,17 +288,17 @@ export default {
}"
class="md"
></div>
<!-- eslint-disable vue/no-mutating-props -->
<textarea
v-if="descriptionText"
v-model="descriptionText"
:value="descriptionText"
:data-update-url="updateUrl"
class="hidden js-task-list-field"
dir="auto"
data-testid="textarea"
>
</textarea>
<!-- eslint-enable vue/no-mutating-props -->
<gl-modal
ref="modal"
modal-id="create-task-modal"
......
......@@ -9,8 +9,8 @@ export default {
},
mixins: [updateMixin],
props: {
formState: {
type: Object,
value: {
type: String,
required: true,
},
markdownPreviewPath: {
......@@ -52,24 +52,23 @@ export default {
:quick-actions-docs-path="quickActionsDocsPath"
:can-attach-file="canAttachFile"
:enable-autocomplete="enableAutocomplete"
:textarea-value="formState.description"
:textarea-value="value"
>
<template #textarea>
<!-- eslint-disable vue/no-mutating-props -->
<textarea
id="issue-description"
ref="textarea"
v-model="formState.description"
:value="value"
class="note-textarea js-gfm-input js-autosize markdown-area qa-description-textarea"
dir="auto"
data-supports-quick-actions="true"
:aria-label="__('Description')"
:placeholder="__('Write a comment or drag your files here…')"
@input="$emit('input', $event.target.value)"
@keydown.meta.enter="updateIssuable"
@keydown.ctrl.enter="updateIssuable"
>
</textarea>
<!-- eslint-enable vue/no-mutating-props -->
</template>
</markdown-field>
</div>
......
......@@ -8,8 +8,8 @@ export default {
GlIcon,
},
props: {
formState: {
type: Object,
value: {
type: String,
required: true,
},
issuableTemplates: {
......@@ -39,10 +39,9 @@ export default {
// Create the editor for the template
const editor = document.querySelector('.detail-page-description .note-textarea') || {};
editor.setValue = (val) => {
// eslint-disable-next-line vue/no-mutating-props
this.formState.description = val;
this.$emit('input', val);
};
editor.getValue = () => this.formState.description;
editor.getValue = () => this.value;
this.issuableTemplate = new IssuableTemplateSelectors({
$dropdowns: $(this.$refs.toggle),
......
......@@ -4,8 +4,8 @@ import updateMixin from '../../mixins/update';
export default {
mixins: [updateMixin],
props: {
formState: {
type: Object,
value: {
type: String,
required: true,
},
},
......@@ -15,19 +15,18 @@ export default {
<template>
<fieldset>
<label class="sr-only" for="issuable-title">{{ __('Title') }}</label>
<!-- eslint-disable vue/no-mutating-props -->
<input
id="issuable-title"
ref="input"
v-model="formState.title"
:value="value"
class="form-control qa-title-input gl-border-gray-200"
dir="auto"
type="text"
:placeholder="__('Title')"
:aria-label="__('Title')"
@input="$emit('input', $event.target.value)"
@keydown.meta.enter="updateIssuable"
@keydown.ctrl.enter="updateIssuable"
/>
<!-- eslint-enable vue/no-mutating-props -->
</fieldset>
</template>
......@@ -86,6 +86,10 @@ export default {
},
data() {
return {
formData: {
title: this.formState.title,
description: this.formState.description,
},
showOutdatedDescriptionWarning: false,
};
},
......@@ -100,6 +104,14 @@ export default {
return this.issuableType === IssuableType.Issue;
},
},
watch: {
formData: {
handler(value) {
this.$emit('updateForm', value);
},
deep: true,
},
},
created() {
eventHub.$on('delete.issuable', this.resetAutosave);
eventHub.$on('update.issuable', this.resetAutosave);
......@@ -191,16 +203,17 @@ export default {
>
<div class="row gl-mb-3">
<div class="col-12">
<issuable-title-field ref="title" :form-state="formState" />
<issuable-title-field ref="title" v-model="formData.title" />
</div>
</div>
<div class="row">
<div v-if="isIssueType" class="col-12 col-md-4 pr-md-0">
<issuable-type-field ref="issue-type" />
</div>
<div v-if="hasIssuableTemplates" class="col-12 col-md-4 pl-md-2">
<description-template-field
:form-state="formState"
v-model="formData.description"
:issuable-templates="issuableTemplates"
:project-path="projectPath"
:project-id="projectId"
......@@ -208,14 +221,16 @@ export default {
/>
</div>
</div>
<description-field
ref="description"
:form-state="formState"
v-model="formData.description"
:markdown-preview-path="markdownPreviewPath"
:markdown-docs-path="markdownDocsPath"
:can-attach-file="canAttachFile"
:enable-autocomplete="enableAutocomplete"
/>
<edit-actions
:endpoint="endpoint"
:form-state="formState"
......
......@@ -3,7 +3,6 @@ import eventHub from '../event_hub';
export default {
methods: {
updateIssuable() {
this.formState.updateLoading = true;
eventHub.$emit('update.issuable');
},
},
......
......@@ -15,9 +15,7 @@ describe('Description field component', () => {
markdownPreviewPath: '/',
markdownDocsPath: '/',
quickActionsDocsPath: '/',
formState: {
description,
},
value: description,
},
stubs: {
MarkdownField,
......
import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';
import descriptionTemplate from '~/issues/show/components/fields/description_template.vue';
describe('Issue description template component with templates as hash', () => {
let vm;
let formState;
let wrapper;
const defaultOptions = {
propsData: {
value: 'test',
issuableTemplates: {
test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
},
projectId: 1,
projectPath: '/',
namespacePath: '/',
projectNamespace: '/',
},
};
beforeEach(() => {
const Component = Vue.extend(descriptionTemplate);
formState = {
description: 'test',
};
const findIssuableSelector = () => wrapper.find('.js-issuable-selector');
vm = new Component({
propsData: {
formState,
issuableTemplates: {
test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
},
projectId: 1,
projectPath: '/',
namespacePath: '/',
projectNamespace: '/',
},
}).$mount();
const createComponent = (options = defaultOptions) => {
wrapper = shallowMount(descriptionTemplate, options);
};
afterEach(() => {
wrapper.destroy();
});
it('renders templates as JSON hash in data attribute', () => {
expect(vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data')).toBe(
createComponent();
expect(findIssuableSelector().attributes('data-data')).toBe(
'{"test":[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]}',
);
});
it('updates formState when changing template', () => {
vm.issuableTemplate.editor.setValue('test new template');
it('emits input event', () => {
createComponent();
wrapper.vm.issuableTemplate.editor.setValue('test new template');
expect(formState.description).toBe('test new template');
expect(wrapper.emitted('input')).toEqual([['test new template']]);
});
it('returns formState description with editor getValue', () => {
formState.description = 'testing new template';
expect(vm.issuableTemplate.editor.getValue()).toBe('testing new template');
it('returns value with editor getValue', () => {
createComponent();
expect(wrapper.vm.issuableTemplate.editor.getValue()).toBe('test');
});
});
describe('Issue description template component with templates as array', () => {
let vm;
let formState;
beforeEach(() => {
const Component = Vue.extend(descriptionTemplate);
formState = {
description: 'test',
};
vm = new Component({
propsData: {
formState,
issuableTemplates: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
projectId: 1,
projectPath: '/',
namespacePath: '/',
projectNamespace: '/',
},
}).$mount();
});
it('renders templates as JSON array in data attribute', () => {
expect(vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data')).toBe(
'[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]',
);
describe('Issue description template component with templates as array', () => {
it('renders templates as JSON array in data attribute', () => {
createComponent({
propsData: {
value: 'test',
issuableTemplates: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
projectId: 1,
projectPath: '/',
namespacePath: '/',
projectNamespace: '/',
},
});
expect(findIssuableSelector().attributes('data-data')).toBe(
'[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]',
);
});
});
});
......@@ -12,9 +12,7 @@ describe('Title field component', () => {
wrapper = shallowMount(TitleField, {
propsData: {
formState: {
title: 'test',
},
value: 'test',
},
});
});
......
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