Skip to content

G
gitlab-ce
Commit 7e3d5d0b authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Add BoardNewItem to use with Issue & Epic creation 

Adds BoardNewItem component to use with Issue and Epic
creation from group boards.
parent a05f26bf
Hide whitespace changes
Inline Side-by-side
Showing with 431 additions and 266 deletions
app/assets/javascripts/boards/components/board_new_issue.vue
View file @ 7e3d5d0b
<script>
import { GlButton } from '@gitlab/ui';
import { mapActions, mapGetters, mapState } from 'vuex';
import { getMilestone } from 'ee_else_ce/boards/boards_util';
import BoardNewIssueMixin from 'ee_else_ce/boards/mixins/board_new_issue';
import { __ } from '~/locale';
import { toggleFormEventPrefix } from '../constants';
import eventHub from '../eventhub';
import BoardNewItem from './board_new_item.vue';
import ProjectSelect from './project_select.vue';
export default {
name: 'BoardNewIssue',
i18n: {
cancel: __('Cancel'),
},
components: {
BoardNewItem,
ProjectSelect,
GlButton,
},
mixins: [BoardNewIssueMixin],
inject: ['groupId'],
......@@ -25,106 +23,55 @@ export default {
required: true,
},
},
data() {
return {
title: '',
};
},
computed: {
...mapState(['selectedProject']),
...mapGetters(['isGroupBoard', 'isEpicBoard']),
/**
* We've extended this component in EE where
* submitButtonTitle returns a different string
* hence this is kept as a computed prop.
*/
submitButtonTitle() {
return __('Create issue');
...mapState(['selectedProject', 'fullPath']),
...mapGetters(['isGroupBoard']),
formEventPrefix() {
return toggleFormEventPrefix.issue;
},
disabled() {
if (this.isGroupBoard) {
return this.title === '' || !this.selectedProject.name;
}
return this.title === '';
disableSubmit() {
return this.isGroupBoard ? !this.selectedProject.name : false;
},
inputFieldId() {
// eslint-disable-next-line @gitlab/require-i18n-strings
return `${this.list.id}-title`;
projectPath() {
return this.isGroupBoard ? this.selectedProject.fullPath : this.fullPath;
},
},
mounted() {
this.$refs.input.focus();
eventHub.$on('setSelectedProject', this.setSelectedProject);
},
methods: {
...mapActions(['addListNewIssue']),
submit() {
const { title } = this;
submit({ title }) {
const labels = this.list.label ? [this.list.label] : [];
const assignees = this.list.assignee ? [this.list.assignee] : [];
const milestone = getMilestone(this.list);
eventHub.$emit(`scroll-board-list-${this.list.id}`);
return this.addListNewIssue({
list: this.list,
issueInput: {
title,
labelIds: labels?.map((l) => l.id),
assigneeIds: assignees?.map((a) => a?.id),
milestoneId: milestone?.id,
projectPath: this.selectedProject.fullPath,
...this.extraIssueInput(),
projectPath: this.projectPath,
},
list: this.list,
}).then(() => {
this.reset();
this.cancel();
});
},
reset() {
this.title = '';
eventHub.$emit(`${toggleFormEventPrefix.issue}${this.list.id}`);
cancel() {
eventHub.$emit(`${this.formEventPrefix}${this.list.id}`);
},
},
};
</script>
<template>
<div class="board-new-issue-form">
<div class="board-card position-relative p-3 rounded">
<form ref="submitForm" @submit.prevent="submit">
<label :for="inputFieldId" class="label-bold">{{ __('Title') }}</label>
<input
:id="inputFieldId"
ref="input"
v-model="title"
class="form-control"
type="text"
name="issue_title"
autocomplete="off"
/>
<project-select v-if="isGroupBoard && !isEpicBoard" :group-id="groupId" :list="list" />
<div class="clearfix gl-mt-3">
<gl-button
ref="submitButton"
:disabled="disabled"
class="float-left js-no-auto-disable"
variant="confirm"
category="primary"
type="submit"
>
{{ submitButtonTitle }}
</gl-button>
<gl-button
ref="cancelButton"
class="float-right"
type="button"
variant="default"
@click="reset"
>
{{ $options.i18n.cancel }}
</gl-button>
</div>
</form>
</div>
</div>
<board-new-item
:list="list"
:form-event-prefix="formEventPrefix"
:submit-button-title="__('Create issue')"
:disable-submit="disableSubmit"
@form-submit="submit"
@form-cancel="cancel"
>
<project-select v-if="isGroupBoard" :group-id="groupId" :list="list" />
</board-new-item>
</template>
app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
View file @ 7e3d5d0b
......@@ -11,7 +11,7 @@ import ProjectSelect from './project_select_deprecated.vue';
// This component is being replaced in favor of './board_new_issue.vue' for GraphQL boards
export default {
name: 'BoardNewIssue',
name: 'BoardNewIssueDeprecated',
components: {
ProjectSelect,
GlButton,
......
app/assets/javascripts/boards/components/board_new_item.vue 0 → 100644
View file @ 7e3d5d0b
<script>
import { GlForm, GlFormInput, GlButton } from '@gitlab/ui';
import { __ } from '~/locale';
import eventHub from '../eventhub';
export default {
i18n: {
cancel: __('Cancel'),
},
components: {
GlForm,
GlFormInput,
GlButton,
},
props: {
list: {
type: Object,
required: true,
},
formEventPrefix: {
type: String,
required: true,
},
disableSubmit: {
type: Boolean,
required: false,
default: false,
},
submitButtonTitle: {
type: String,
required: false,
default: __('Create issue'),
},
},
data() {
return {
title: '',
};
},
computed: {
inputFieldId() {
// eslint-disable-next-line @gitlab/require-i18n-strings
return `${this.list.id}-title`;
},
},
methods: {
handleFormCancel() {
this.title = '';
this.$emit('form-cancel');
},
handleFormSubmit() {
const { title, list } = this;
eventHub.$emit(`scroll-board-list-${this.list.id}`);
this.$emit('form-submit', {
title,
list,
});
},
},
};
</script>
<template>
<div class="board-new-issue-form">
<div class="board-card position-relative gl-p-5 rounded">
<gl-form @submit.prevent="handleFormSubmit" @reset="handleFormCancel">
<label :for="inputFieldId" class="gl-font-weight-bold">{{ __('Title') }}</label>
<gl-form-input
:id="inputFieldId"
v-model.trim="title"
:autofocus="true"
autocomplete="off"
type="text"
name="issue_title"
/>
<slot></slot>
<div class="gl-clearfix gl-mt-4">
<gl-button
:disabled="!title || disableSubmit"
class="gl-float-left js-no-auto-disable"
variant="confirm"
type="submit"
>
{{ submitButtonTitle }}
</gl-button>
<gl-button class="gl-float-right js-no-auto-disable" type="reset">
{{ $options.i18n.cancel }}
</gl-button>
</div>
</gl-form>
</div>
</div>
</template>
ee/app/assets/javascripts/boards/components/board_new_epic.vue
View file @ 7e3d5d0b
<script>
// This is a false violation of @gitlab/no-runtime-template-compiler, since it
// extends a valid Vue single file component.
/* eslint-disable @gitlab/no-runtime-template-compiler */
import { mapActions, mapGetters } from 'vuex';
import BoardNewIssueFoss from '~/boards/components/board_new_issue.vue';
import BoardNewItem from '~/boards/components/board_new_item.vue';
import { toggleFormEventPrefix } from '~/boards/constants';
import eventHub from '~/boards/eventhub';
import createFlash from '~/flash';
import { __, s__ } from '~/locale';
import { fullEpicBoardId } from '../boards_util';
export default {
extends: BoardNewIssueFoss,
inject: {
boardId: {
default: '',
components: {
BoardNewItem,
},
inject: ['boardId'],
props: {
list: {
type: Object,
required: true,
},
},
computed: {
...mapGetters(['isGroupBoard']),
submitButtonTitle() {
return __('Create epic');
formEventPrefix() {
return toggleFormEventPrefix.epic;
},
disabled() {
return this.title === '';
formEvent() {
return `${this.formEventPrefix}${this.list.id}`;
},
},
methods: {
...mapActions(['addListNewEpic']),
submit() {
const {
title,
boardId,
list: { id },
} = this;
eventHub.$emit(`scroll-board-list-${id}`);
this.addListNewEpic({
submit({ title }) {
return this.addListNewEpic({
epicInput: {
title,
boardId: fullEpicBoardId(boardId),
listId: id,
boardId: fullEpicBoardId(this.boardId),
listId: this.list.id,
},
list: this.list,
})
.then(() => {
this.reset();
})
.catch((error) => {
createFlash({
message: s__('Board|Failed to create epic. Please try again.'),
captureError: true,
error,
});
});
}).then(() => {
eventHub.$emit(this.formEvent);
});
},
reset() {
this.title = '';
eventHub.$emit(`${toggleFormEventPrefix.epic}${this.list.id}`);
cancel() {
eventHub.$emit(this.formEvent);
},
},
};
</script>
<template>
<board-new-item
:list="list"
:form-event-prefix="formEventPrefix"
:submit-button-title="__('Create epic')"
@form-submit="submit"
@form-cancel="cancel"
/>
</template>
ee/spec/features/boards/new_issue_spec.rb
View file @ 7e3d5d0b
......@@ -26,7 +26,8 @@ RSpec.describe 'Issue Boards new issue', :js do
end
page.within(first('.board-new-issue-form')) do
find('.form-control').set('new issue')
fill_in 'issue_title', with: 'new issue'
click_button 'Create issue'
end
......
ee/spec/frontend/boards/components/board_list_spec.js
View file @ 7e3d5d0b
......@@ -4,8 +4,6 @@ import createComponent from 'jest/boards/board_list_helper';
import BoardCard from '~/boards/components/board_card.vue';
import BoardCardInner from '~/boards/components/board_card_inner.vue';
import { issuableTypes } from '~/boards/constants';
import eventHub from '~/boards/eventhub';
import createFlash from '~/flash';
jest.mock('~/flash');
......@@ -63,64 +61,4 @@ describe('BoardList Component', () => {
':project_path',
);
});
describe('board-new-epic component', () => {
const submitForm = async (w) => {
const newEpicForm = w.findComponent(BoardNewEpic);
newEpicForm.find('input').setValue('Foo');
newEpicForm.find('form').trigger('submit');
await wrapper.vm.$nextTick();
};
beforeEach(async () => {
eventHub.$emit(`toggle-epic-form-${wrapper.vm.list.id}`);
await wrapper.vm.$nextTick();
});
it('renders component', () => {
expect(wrapper.findComponent(BoardNewEpic).exists()).toBe(true);
});
it('calls action `addListNewEpic` when "Create epic" button is clicked', async () => {
await submitForm(wrapper);
expect(actions.addListNewEpic).toHaveBeenCalledWith(
expect.any(Object),
expect.objectContaining({
epicInput: {
title: 'Foo',
boardId: 'gid://gitlab/Boards::EpicBoard/',
listId: 'gid://gitlab/List/1',
},
}),
);
});
it('calls `createFlash` when form submission fails', async () => {
const mockActions = {
addListNewEpic: jest.fn().mockRejectedValue(),
};
wrapper = createComponent({
...componentConfig,
actions: mockActions,
});
eventHub.$emit(`toggle-epic-form-${wrapper.vm.list.id}`);
await wrapper.vm.$nextTick();
await submitForm(wrapper);
return mockActions.addListNewEpic().catch((error) => {
expect(createFlash).toHaveBeenCalledWith({
message: 'Failed to create epic. Please try again.',
captureError: true,
error,
});
});
});
});
});
ee/spec/frontend/boards/components/board_new_epic_spec.js 0 → 100644
View file @ 7e3d5d0b
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import BoardNewEpic from 'ee/boards/components/board_new_epic.vue';
import { mockList } from 'jest/boards/mock_data';
import BoardNewItem from '~/boards/components/board_new_item.vue';
import eventHub from '~/boards/eventhub';
const localVue = createLocalVue();
localVue.use(Vuex);
const addListNewEpicSpy = jest.fn().mockResolvedValue();
const mockActions = { addListNewEpic: addListNewEpicSpy };
const createComponent = ({ actions = mockActions, getters = { isGroupBoard: () => true } } = {}) =>
shallowMount(BoardNewEpic, {
localVue,
store: new Vuex.Store({
actions,
getters,
}),
propsData: {
list: mockList,
},
provide: {
boardId: 1,
},
stubs: {
BoardNewItem,
},
});
describe('Epic boards new epic form', () => {
let wrapper;
const findBoardNewItem = () => wrapper.findComponent(BoardNewItem);
const submitForm = async (w) => {
const boardNewItem = w.findComponent(BoardNewItem);
boardNewItem.vm.$emit('form-submit', { title: 'Foo' });
await wrapper.vm.$nextTick();
};
beforeEach(async () => {
wrapper = createComponent();
await wrapper.vm.$nextTick();
});
afterEach(() => {
wrapper.destroy();
});
it('renders board-new-item component', () => {
const boardNewItem = findBoardNewItem();
expect(boardNewItem.exists()).toBe(true);
expect(boardNewItem.props()).toEqual({
list: mockList,
formEventPrefix: 'toggle-epic-form-',
submitButtonTitle: 'Create epic',
disableSubmit: false,
});
});
it('calls action `addListNewEpic` when "Create epic" button is clicked', async () => {
await submitForm(wrapper);
expect(addListNewEpicSpy).toHaveBeenCalledWith(expect.any(Object), {
list: expect.any(Object),
epicInput: {
title: 'Foo',
boardId: 'gid://gitlab/Boards::EpicBoard/1',
listId: 'gid://gitlab/List/1',
},
});
});
it('emits event `toggle-epic-form` with current list Id suffix on eventHub when `board-new-item` emits form-cancel event', async () => {
jest.spyOn(eventHub, '$emit').mockImplementation();
findBoardNewItem().vm.$emit('form-cancel');
await wrapper.vm.$nextTick();
expect(eventHub.$emit).toHaveBeenCalledWith(`toggle-epic-form-${mockList.id}`);
});
});
locale/gitlab.pot
View file @ 7e3d5d0b
......@@ -5387,9 +5387,6 @@ msgstr ""
msgid "Board|Enter board name"
msgstr ""
msgid "Board|Failed to create epic. Please try again."
msgstr ""
msgid "Board|Failed to delete board. Please try again."
msgstr ""
......
spec/frontend/boards/board_list_helper.js
View file @ 7e3d5d0b
......@@ -4,8 +4,9 @@ import Vuex from 'vuex';
import BoardCard from '~/boards/components/board_card.vue';
import BoardList from '~/boards/components/board_list.vue';
import BoardNewIssue from '~/boards/components/board_new_issue.vue';
import BoardNewItem from '~/boards/components/board_new_item.vue';
import defaultState from '~/boards/stores/state';
import { mockList, mockIssuesByListId, issues } from './mock_data';
import { mockList, mockIssuesByListId, issues, mockGroupProjects } from './mock_data';
export default function createComponent({
listIssueProps = {},
......@@ -17,6 +18,7 @@ export default function createComponent({
state = defaultState,
stubs = {
BoardNewIssue,
BoardNewItem,
BoardCard,
},
} = {}) {
......@@ -25,6 +27,7 @@ export default function createComponent({
const store = new Vuex.Store({
state: {
selectedProject: mockGroupProjects[0],
boardItemsByListId: mockIssuesByListId,
boardItems: issues,
pageInfoByListId: {
......@@ -77,6 +80,7 @@ export default function createComponent({
provide: {
groupId: null,
rootPath: '/',
boardId: '1',
weightFeatureAvailable: false,
boardWeight: null,
canAdminList: true,
......
spec/frontend/boards/components/board_new_issue_spec.js
View file @ 7e3d5d0b
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import BoardNewIssue from '~/boards/components/board_new_issue.vue';
import BoardNewItem from '~/boards/components/board_new_item.vue';
import ProjectSelect from '~/boards/components/project_select.vue';
import eventHub from '~/boards/eventhub';
import { mockList, mockGroupProjects } from '../mock_data';
......@@ -8,107 +11,104 @@ const localVue = createLocalVue();
localVue.use(Vuex);
const addListNewIssuesSpy = jest.fn().mockResolvedValue();
const mockActions = { addListNewIssue: addListNewIssuesSpy };
const createComponent = ({
state = { selectedProject: mockGroupProjects[0], fullPath: mockGroupProjects[0].fullPath },
actions = mockActions,
getters = { isGroupBoard: () => true, isProjectBoard: () => false },
} = {}) =>
shallowMount(BoardNewIssue, {
localVue,
store: new Vuex.Store({
state,
actions,
getters,
}),
propsData: {
list: mockList,
},
provide: {
groupId: 1,
weightFeatureAvailable: false,
boardWeight: null,
},
stubs: {
BoardNewItem,
},
});
describe('Issue boards new issue form', () => {
let wrapper;
let vm;
const addListNewIssuesSpy = jest.fn();
const findSubmitButton = () => wrapper.find({ ref: 'submitButton' });
const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
const findSubmitForm = () => wrapper.find({ ref: 'submitForm' });
const submitIssue = () => {
const dummySubmitEvent = {
preventDefault() {},
};
return findSubmitForm().trigger('submit', dummySubmitEvent);
};
beforeEach(() => {
const store = new Vuex.Store({
state: { selectedProject: mockGroupProjects[0] },
actions: { addListNewIssue: addListNewIssuesSpy },
getters: { isGroupBoard: () => false, isProjectBoard: () => true },
});
wrapper = shallowMount(BoardNewIssue, {
propsData: {
disabled: false,
list: mockList,
},
store,
localVue,
provide: {
groupId: null,
weightFeatureAvailable: false,
boardWeight: null,
},
});
const findBoardNewItem = () => wrapper.findComponent(BoardNewItem);
vm = wrapper.vm;
beforeEach(async () => {
wrapper = createComponent();
return vm.$nextTick();
await wrapper.vm.$nextTick();
});
afterEach(() => {
wrapper.destroy();
});
it('calls submit if submit button is clicked', async () => {
jest.spyOn(wrapper.vm, 'submit').mockImplementation();
wrapper.setData({ title: 'Testing Title' });
await vm.$nextTick();
await submitIssue();
expect(wrapper.vm.submit).toHaveBeenCalled();
});
it('disables submit button if title is empty', () => {
expect(findSubmitButton().props().disabled).toBe(true);
it('renders board-new-item component', () => {
const boardNewItem = findBoardNewItem();
expect(boardNewItem.exists()).toBe(true);
expect(boardNewItem.props()).toEqual({
list: mockList,
formEventPrefix: 'toggle-issue-form-',
submitButtonTitle: 'Create issue',
disableSubmit: false,
});
});
it('enables submit button if title is not empty', async () => {
wrapper.setData({ title: 'Testing Title' });
await vm.$nextTick();
expect(wrapper.find({ ref: 'input' }).element.value).toBe('Testing Title');
expect(findSubmitButton().props().disabled).toBe(false);
it('calls addListNewIssue action when `board-new-item` emits form-submit event', async () => {
findBoardNewItem().vm.$emit('form-submit', { title: 'Foo' });
await wrapper.vm.$nextTick();
expect(addListNewIssuesSpy).toHaveBeenCalledWith(expect.any(Object), {
list: mockList,
issueInput: {
title: 'Foo',
labelIds: [],
assigneeIds: [],
milestoneId: undefined,
projectPath: mockGroupProjects[0].fullPath,
},
});
});
it('clears title after clicking cancel', async () => {
findCancelButton().trigger('click');
it('emits event `toggle-issue-form` with current list Id suffix on eventHub when `board-new-item` emits form-cancel event', async () => {
jest.spyOn(eventHub, '$emit').mockImplementation();
findBoardNewItem().vm.$emit('form-cancel');
await vm.$nextTick();
expect(vm.title).toBe('');
await wrapper.vm.$nextTick();
expect(eventHub.$emit).toHaveBeenCalledWith(`toggle-issue-form-${mockList.id}`);
});
describe('submit success', () => {
it('creates new issue', async () => {
wrapper.setData({ title: 'create issue' });
describe('when in group issue board', () => {
it('renders project-select component within board-new-item component', () => {
const projectSelect = findBoardNewItem().findComponent(ProjectSelect);
await vm.$nextTick();
await submitIssue();
expect(addListNewIssuesSpy).toHaveBeenCalled();
expect(projectSelect.exists()).toBe(true);
expect(projectSelect.props('list')).toEqual(mockList);
});
});
it('enables button after submit', async () => {
jest.spyOn(wrapper.vm, 'submit').mockImplementation();
wrapper.setData({ title: 'create issue' });
await vm.$nextTick();
await submitIssue();
expect(findSubmitButton().props().disabled).toBe(false);
describe('when in project issue board', () => {
beforeEach(() => {
wrapper = createComponent({
getters: { isGroupBoard: () => false, isProjectBoard: () => true },
});
});
it('clears title after submit', async () => {
wrapper.setData({ title: 'create issue' });
it('does not render project-select component within board-new-item component', () => {
const projectSelect = findBoardNewItem().findComponent(ProjectSelect);
await vm.$nextTick();
await submitIssue();
await vm.$nextTick();
expect(vm.title).toBe('');
expect(projectSelect.exists()).toBe(false);
});
});
});
spec/frontend/boards/components/board_new_item_spec.js 0 → 100644
View file @ 7e3d5d0b
import { GlForm, GlFormInput, GlButton } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import BoardNewItem from '~/boards/components/board_new_item.vue';
import eventHub from '~/boards/eventhub';
import { mockList } from '../mock_data';
const createComponent = ({
list = mockList,
formEventPrefix = 'toggle-issue-form-',
disabledSubmit = false,
submitButtonTitle = 'Create item',
} = {}) =>
mountExtended(BoardNewItem, {
propsData: {
list,
formEventPrefix,
disabledSubmit,
submitButtonTitle,
},
slots: {
default: '<div id="default-slot"></div>',
},
stubs: {
GlForm,
},
});
describe('BoardNewItem', () => {
let wrapper;
beforeEach(() => {
wrapper = createComponent();
});
afterEach(() => {
wrapper.destroy();
});
describe('template', () => {
it('renders gl-form component', () => {
expect(wrapper.findComponent(GlForm).exists()).toBe(true);
});
it('renders field label', () => {
expect(wrapper.find('label').exists()).toBe(true);
expect(wrapper.find('label').text()).toBe('Title');
});
it('renders gl-form-input field', () => {
expect(wrapper.findComponent(GlFormInput).exists()).toBe(true);
});
it('renders default slot contents', () => {
expect(wrapper.find('#default-slot').exists()).toBe(true);
});
it('renders submit and cancel buttons', () => {
const buttons = wrapper.findAllComponents(GlButton);
expect(buttons).toHaveLength(2);
expect(buttons.at(0).text()).toBe('Create item');
expect(buttons.at(1).text()).toBe('Cancel');
});
describe('events', () => {
const glForm = () => wrapper.findComponent(GlForm);
const titleInput = () => wrapper.find('input[name="issue_title"]');
it('emits `form-submit` event with title value when `submit` is triggered on gl-form', async () => {
titleInput().setValue('Foo');
await glForm().trigger('submit');
expect(wrapper.emitted('form-submit')).toBeTruthy();
expect(wrapper.emitted('form-submit')[0]).toEqual([
{
title: 'Foo',
list: mockList,
},
]);
});
it('emits `scroll-board-list-` event with list.id on eventHub when `submit` is triggered on gl-form', async () => {
jest.spyOn(eventHub, '$emit').mockImplementation();
await glForm().trigger('submit');
expect(eventHub.$emit).toHaveBeenCalledWith(`scroll-board-list-${mockList.id}`);
});
it('emits `form-cancel` event and clears title value when `reset` is triggered on gl-form', async () => {
titleInput().setValue('Foo');
await wrapper.vm.$nextTick();
expect(titleInput().element.value).toBe('Foo');
await glForm().trigger('reset');
expect(titleInput().element.value).toBe('');
expect(wrapper.emitted('form-cancel')).toBeTruthy();
});
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7