Commit 94f3df64 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'winh-rename-create-item-form' into 'master'

Rename CreateItemForm component to CreateEpicForm in epics tree

See merge request !17249
parents c13704b5 44c9b4de
......@@ -33,10 +33,10 @@ export default {
},
methods: {
onFormSubmit() {
this.$emit('createItemFormSubmit', this.inputValue.trim());
this.$emit('createEpicFormSubmit', this.inputValue.trim());
},
onFormCancel() {
this.$emit('createItemFormCancel');
this.$emit('createEpicFormCancel');
},
},
};
......
......@@ -4,7 +4,7 @@ import { mapState, mapActions, mapGetters } from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui';
import AddItemForm from 'ee/related_issues/components/add_issuable_form.vue';
import CreateItemForm from './create_item_form.vue';
import CreateEpicForm from './create_epic_form.vue';
import TreeItemRemoveModal from './tree_item_remove_modal.vue';
import RelatedItemsTreeHeader from './related_items_tree_header.vue';
......@@ -21,7 +21,7 @@ export default {
RelatedItemsTreeHeader,
RelatedItemsTreeBody,
AddItemForm,
CreateItemForm,
CreateEpicForm,
TreeItemRemoveModal,
},
computed: {
......@@ -32,7 +32,7 @@ export default {
'itemAddInProgress',
'itemCreateInProgress',
'showAddItemForm',
'showCreateItemForm',
'showCreateEpicForm',
'autoCompleteEpics',
'autoCompleteIssues',
'pendingReferences',
......@@ -55,7 +55,7 @@ export default {
...mapActions([
'fetchItems',
'toggleAddItemForm',
'toggleCreateItemForm',
'toggleCreateEpicForm',
'setPendingReferences',
'addPendingReferences',
'removePendingReference',
......@@ -84,7 +84,7 @@ export default {
this.addItem();
}
},
handleCreateItemFormSubmit(newValue) {
handleCreateEpicFormSubmit(newValue) {
this.createItem({
itemTitle: newValue,
});
......@@ -94,8 +94,8 @@ export default {
this.setPendingReferences([]);
this.setItemInputValue('');
},
handleCreateItemFormCancel() {
this.toggleCreateItemForm({ toggleState: false, actionType: this.actionType });
handleCreateEpicFormCancel() {
this.toggleCreateEpicForm({ toggleState: false, actionType: this.actionType });
this.setItemInputValue('');
},
},
......@@ -117,7 +117,7 @@ export default {
>
<related-items-tree-header :class="{ 'border-bottom-0': itemsFetchResultEmpty }" />
<div
v-if="showAddItemForm || showCreateItemForm"
v-if="showAddItemForm || showCreateEpicForm"
class="card-body add-item-form-container"
:class="{ 'border-bottom-0': itemsFetchResultEmpty }"
>
......@@ -135,11 +135,11 @@ export default {
@addIssuableFormSubmit="handleAddItemFormSubmit"
@addIssuableFormCancel="handleAddItemFormCancel"
/>
<create-item-form
v-if="showCreateItemForm"
<create-epic-form
v-if="showCreateEpicForm"
:is-submitting="itemCreateInProgress"
@createItemFormSubmit="handleCreateItemFormSubmit"
@createItemFormCancel="handleCreateItemFormCancel"
@createEpicFormSubmit="handleCreateEpicFormSubmit"
@createEpicFormCancel="handleCreateEpicFormCancel"
/>
</div>
<related-items-tree-body
......
......@@ -32,7 +32,7 @@ export default {
},
},
methods: {
...mapActions(['toggleAddItemForm', 'toggleCreateItemForm']),
...mapActions(['toggleAddItemForm', 'toggleCreateEpicForm']),
handleActionClick({ id, actionType }) {
if (id === 0) {
this.toggleAddItemForm({
......@@ -40,7 +40,7 @@ export default {
toggleState: true,
});
} else {
this.toggleCreateItemForm({
this.toggleCreateEpicForm({
actionType,
toggleState: true,
});
......
......@@ -244,8 +244,8 @@ export const removeItem = ({ dispatch }, { parentItem, item }) => {
};
export const toggleAddItemForm = ({ commit }, data) => commit(types.TOGGLE_ADD_ITEM_FORM, data);
export const toggleCreateItemForm = ({ commit }, data) =>
commit(types.TOGGLE_CREATE_ITEM_FORM, data);
export const toggleCreateEpicForm = ({ commit }, data) =>
commit(types.TOGGLE_CREATE_EPIC_FORM, data);
export const setPendingReferences = ({ commit }, data) =>
commit(types.SET_PENDING_REFERENCES, data);
......@@ -342,7 +342,7 @@ export const receiveCreateItemSuccess = (
isSubItem: false,
});
dispatch('toggleCreateItemForm', {
dispatch('toggleCreateEpicForm', {
actionType,
toggleState: false,
});
......
......@@ -21,7 +21,7 @@ export const EXPAND_ITEM = 'EXPAND_ITEM';
export const COLLAPSE_ITEM = 'COLLAPSE_ITEM';
export const TOGGLE_ADD_ITEM_FORM = 'TOGGLE_ADD_ITEM_FORM';
export const TOGGLE_CREATE_ITEM_FORM = 'TOGGLE_CREATE_ITEM_FORM';
export const TOGGLE_CREATE_EPIC_FORM = 'TOGGLE_CREATE_EPIC_FORM';
export const SET_PENDING_REFERENCES = 'SET_PENDING_REFERENCES';
export const ADD_PENDING_REFERENCES = 'ADD_PENDING_REFERENCES';
......
......@@ -123,12 +123,12 @@ export default {
[types.TOGGLE_ADD_ITEM_FORM](state, { actionType, toggleState }) {
state.actionType = actionType;
state.showAddItemForm = toggleState;
state.showCreateItemForm = false;
state.showCreateEpicForm = false;
},
[types.TOGGLE_CREATE_ITEM_FORM](state, { actionType, toggleState }) {
[types.TOGGLE_CREATE_EPIC_FORM](state, { actionType, toggleState }) {
state.actionType = actionType;
state.showCreateItemForm = toggleState;
state.showCreateEpicForm = toggleState;
state.showAddItemForm = false;
},
......
......@@ -22,7 +22,7 @@ export default () => ({
itemAddInProgress: false,
itemCreateInProgress: false,
showAddItemForm: false,
showCreateItemForm: false,
showCreateEpicForm: false,
autoCompleteEpics: false,
autoCompleteIssues: false,
removeItemModalProps: {
......
......@@ -364,7 +364,7 @@ describe('RelatedItemsTree', () => {
});
describe(types.TOGGLE_ADD_ITEM_FORM, () => {
it('should set value of `actionType`, `showAddItemForm` as it is and `showCreateItemForm` as false on state', () => {
it('should set value of `actionType`, `showAddItemForm` as it is and `showCreateEpicForm` as false on state', () => {
const data = {
actionType: 'Epic',
toggleState: true,
......@@ -374,21 +374,21 @@ describe('RelatedItemsTree', () => {
expect(state.actionType).toBe(data.actionType);
expect(state.showAddItemForm).toBe(data.toggleState);
expect(state.showCreateItemForm).toBe(false);
expect(state.showCreateEpicForm).toBe(false);
});
});
describe(types.TOGGLE_CREATE_ITEM_FORM, () => {
it('should set value of `actionType`, `showCreateItemForm` as it is and `showAddItemForm` as false on state', () => {
describe(types.TOGGLE_CREATE_EPIC_FORM, () => {
it('should set value of `actionType`, `showCreateEpicForm` as it is and `showAddItemForm` as false on state', () => {
const data = {
actionType: 'Epic',
toggleState: true,
};
mutations[types.TOGGLE_CREATE_ITEM_FORM](state, data);
mutations[types.TOGGLE_CREATE_EPIC_FORM](state, data);
expect(state.actionType).toBe(data.actionType);
expect(state.showCreateItemForm).toBe(data.toggleState);
expect(state.showCreateEpicForm).toBe(data.toggleState);
expect(state.showAddItemForm).toBe(false);
});
});
......
import { mount, createLocalVue } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import CreateItemForm from 'ee/related_items_tree/components/create_item_form.vue';
import CreateEpicForm from 'ee/related_items_tree/components/create_epic_form.vue';
const createComponent = (isSubmitting = false) => {
const localVue = createLocalVue();
return mount(CreateItemForm, {
return mount(CreateEpicForm, {
localVue,
propsData: {
isSubmitting,
......@@ -15,7 +15,7 @@ const createComponent = (isSubmitting = false) => {
};
describe('RelatedItemsTree', () => {
describe('CreateItemForm', () => {
describe('CreateEpicForm', () => {
let wrapper;
beforeEach(() => {
......@@ -68,22 +68,22 @@ describe('RelatedItemsTree', () => {
describe('methods', () => {
describe('onFormSubmit', () => {
it('emits `createItemFormSubmit` event on component with input value as param', () => {
it('emits `createEpicFormSubmit` event on component with input value as param', () => {
const value = 'foo';
wrapper.find('input.form-control').setValue(value);
wrapper.vm.onFormSubmit();
expect(wrapper.emitted().createItemFormSubmit).toBeTruthy();
expect(wrapper.emitted().createItemFormSubmit[0]).toEqual([value]);
expect(wrapper.emitted().createEpicFormSubmit).toBeTruthy();
expect(wrapper.emitted().createEpicFormSubmit[0]).toEqual([value]);
});
});
describe('onFormCancel', () => {
it('emits `createItemFormCancel` event on component', () => {
it('emits `createEpicFormCancel` event on component', () => {
wrapper.vm.onFormCancel();
expect(wrapper.emitted().createItemFormCancel).toBeTruthy();
expect(wrapper.emitted().createEpicFormCancel).toBeTruthy();
});
});
});
......
......@@ -105,12 +105,12 @@ describe('RelatedItemsTreeApp', () => {
});
});
describe('handleCreateItemFormSubmit', () => {
describe('handleCreateEpicFormSubmit', () => {
it('calls `createItem` action with `itemTitle` param', () => {
const newValue = 'foo';
spyOn(wrapper.vm, 'createItem');
wrapper.vm.handleCreateItemFormSubmit(newValue);
wrapper.vm.handleCreateEpicFormSubmit(newValue);
expect(wrapper.vm.createItem).toHaveBeenCalledWith({
itemTitle: newValue,
......@@ -147,13 +147,13 @@ describe('RelatedItemsTreeApp', () => {
});
});
describe('handleCreateItemFormCancel', () => {
it('calls `toggleCreateItemForm` actions with params `toggleState` and `actionType`', () => {
spyOn(wrapper.vm, 'toggleCreateItemForm');
describe('handleCreateEpicFormCancel', () => {
it('calls `toggleCreateEpicForm` actions with params `toggleState` and `actionType`', () => {
spyOn(wrapper.vm, 'toggleCreateEpicForm');
wrapper.vm.handleCreateItemFormCancel();
wrapper.vm.handleCreateEpicFormCancel();
expect(wrapper.vm.toggleCreateItemForm).toHaveBeenCalledWith({
expect(wrapper.vm.toggleCreateEpicForm).toHaveBeenCalledWith({
toggleState: false,
actionType: '',
});
......@@ -162,7 +162,7 @@ describe('RelatedItemsTreeApp', () => {
it('calls `setItemInputValue` action with empty string', () => {
spyOn(wrapper.vm, 'setItemInputValue');
wrapper.vm.handleCreateItemFormCancel();
wrapper.vm.handleCreateEpicFormCancel();
expect(wrapper.vm.setItemInputValue).toHaveBeenCalledWith('');
});
......
......@@ -70,15 +70,15 @@ describe('RelatedItemsTree', () => {
});
});
it('calls `toggleCreateItemForm` action when provided `id` param value is not `0`', () => {
spyOn(wrapper.vm, 'toggleCreateItemForm');
it('calls `toggleCreateEpicForm` action when provided `id` param value is not `0`', () => {
spyOn(wrapper.vm, 'toggleCreateEpicForm');
wrapper.vm.handleActionClick({
id: 1,
actionType,
});
expect(wrapper.vm.toggleCreateItemForm).toHaveBeenCalledWith({
expect(wrapper.vm.toggleCreateEpicForm).toHaveBeenCalledWith({
actionType,
toggleState: true,
});
......
......@@ -732,13 +732,13 @@ describe('RelatedItemTree', () => {
});
});
describe('toggleCreateItemForm', () => {
it('should set `state.showCreateItemForm` to true', done => {
describe('toggleCreateEpicForm', () => {
it('should set `state.showCreateEpicForm` to true', done => {
testAction(
actions.toggleCreateItemForm,
actions.toggleCreateEpicForm,
{},
{},
[{ type: types.TOGGLE_CREATE_ITEM_FORM, payload: {} }],
[{ type: types.TOGGLE_CREATE_EPIC_FORM, payload: {} }],
[],
done,
);
......@@ -997,7 +997,7 @@ describe('RelatedItemTree', () => {
payload: { children: [createdEpic], isSubItem: false },
},
{
type: 'toggleCreateItemForm',
type: 'toggleCreateEpicForm',
payload: { actionType: ActionType.Epic, toggleState: false },
},
],
......
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