Skip to content

G
gitlab-ce
Commit c651140a authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Added Create Task functionality 

CreateWorkItem component is modified to work with both standalone route and a modal
parent d627ce1d
Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 91 deletions
app/assets/javascripts/issues/show/components/description.vue
View file @ c651140a
<script>
import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import {
GlSafeHtmlDirective as SafeHtml,
GlModal,
GlModalDirective,
GlPopover,
GlButton,
} from '@gitlab/ui';
import $ from 'jquery';
import createFlash from '~/flash';
import { __, sprintf } from '~/locale';
import TaskList from '~/task_list';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
import animateMixin from '../mixins/animate';
export default {
directives: {
SafeHtml,
GlModal: GlModalDirective,
},
mixins: [animateMixin],
components: {
GlModal,
GlPopover,
CreateWorkItem,
GlButton,
},
mixins: [animateMixin, glFeatureFlagMixin()],
props: {
canUpdate: {
type: Boolean,
......@@ -53,8 +66,15 @@ export default {
preAnimation: false,
pulseAnimation: false,
initialUpdate: true,
taskButtons: [],
activeTask: {},
};
},
computed: {
workItemsEnabled() {
return this.glFeatures.workItems;
},
},
watch: {
descriptionHtml(newDescription, oldDescription) {
if (!this.initialUpdate && newDescription !== oldDescription) {
......@@ -74,6 +94,10 @@ export default {
mounted() {
this.renderGFM();
this.updateTaskStatusText();
if (this.workItemsEnabled) {
this.renderTaskActions();
}
},
methods: {
renderGFM() {
......@@ -132,6 +156,55 @@ export default {
$tasksShort.text('');
}
},
renderTaskActions() {
const taskListFields = this.$el.querySelectorAll('.task-list-item');
taskListFields.forEach((item, index) => {
const button = document.createElement('button');
button.classList.add(
'btn',
'btn-default',
'btn-md',
'gl-button',
'btn-default-tertiary',
'gl-left-0',
'gl-p-0!',
'gl-top-2',
'gl-absolute',
'js-add-task',
);
button.id = `js-task-button-${index}`;
this.taskButtons.push(button.id);
button.innerHTML =
'<svg data-testid="ellipsis_v-icon" role="img" aria-hidden="true" class="dropdown-icon gl-icon s14"><use href="/assets/icons-7f1680a3670112fe4c8ef57b9dfb93f0f61b43a2a479d7abd6c83bcb724b9201.svg#ellipsis_v"></use></svg>';
item.prepend(button);
});
},
openCreateTaskModal(id) {
this.activeTask = { id, title: this.$el.querySelector(`#${id}`).parentElement.innerText };
this.$refs.modal.show();
},
closeCreateTaskModal() {
this.$refs.modal.hide();
},
handleCreateTask(title) {
const listItem = this.$el.querySelector(`#${this.activeTask.id}`).parentElement;
const taskBadge = document.createElement('span');
taskBadge.innerHTML = `
<svg data-testid="issue-open-m-icon" role="img" aria-hidden="true" class="gl-icon gl-fill-green-500 s12">
<use href="/assets/icons-7f1680a3670112fe4c8ef57b9dfb93f0f61b43a2a479d7abd6c83bcb724b9201.svg#issue-open-m"></use>
</svg>
<span class="badge badge-info badge-pill gl-badge sm gl-mr-1">
${__('Task')}
</span>
<a href="#">${title}</a>
`;
listItem.insertBefore(taskBadge, listItem.lastChild);
listItem.removeChild(listItem.lastChild);
this.closeCreateTaskModal();
},
focusButton() {
this.$refs.convertButton[0].$el.focus();
},
},
safeHtmlConfig: { ADD_TAGS: ['gl-emoji', 'copy-code'] },
};
......@@ -142,12 +215,14 @@ export default {
v-if="descriptionHtml"
:class="{
'js-task-list-container': canUpdate,
'work-items-enabled': workItemsEnabled,
}"
class="description"
>
<div
ref="gfm-content"
v-safe-html:[$options.safeHtmlConfig]="descriptionHtml"
data-testid="gfm-content"
:class="{
'issue-realtime-pre-pulse': preAnimation,
'issue-realtime-trigger-pulse': pulseAnimation,
......@@ -157,13 +232,46 @@ export default {
<!-- eslint-disable vue/no-mutating-props -->
<textarea
v-if="descriptionText"
ref="textarea"
v-model="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"
:title="s__('WorkItem|New Task')"
hide-footer
body-class="gl-py-0!"
>
<create-work-item
:is-modal="true"
:initial-title="activeTask.title"
@closeModal="closeCreateTaskModal"
@onCreate="handleCreateTask"
/>
</gl-modal>
<template v-if="workItemsEnabled">
<gl-popover
v-for="item in taskButtons"
:key="item"
:target="item"
placement="top"
triggers="focus"
@shown="focusButton"
>
<gl-button
ref="convertButton"
variant="link"
data-testid="convert-to-task"
class="gl-text-gray-900! gl-text-decoration-none! gl-outline-0!"
@click="openCreateTaskModal(item)"
>{{ s__('WorkItem|Convert to work item') }}</gl-button
>
</gl-popover>
</template>
</div>
</template>
app/assets/javascripts/sidebar/graphql.js
View file @ c651140a
......@@ -2,6 +2,7 @@ import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import produce from 'immer';
import VueApollo from 'vue-apollo';
import getIssueStateQuery from '~/issues/show/queries/get_issue_state.query.graphql';
import { resolvers as workItemResolvers } from '~/work_items/graphql/resolvers';
import createDefaultClient from '~/lib/graphql';
import introspectionQueryResultData from './fragmentTypes.json';
......@@ -10,6 +11,7 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
});
const resolvers = {
...workItemResolvers,
Mutation: {
updateIssueState: (_, { issueType = undefined, isDirty = false }, { cache }) => {
const sourceData = cache.readQuery({ query: getIssueStateQuery });
......@@ -18,6 +20,7 @@ const resolvers = {
});
cache.writeQuery({ query: getIssueStateQuery, data });
},
...workItemResolvers.Mutation,
},
};
......
app/assets/javascripts/work_items/pages/create_work_item.vue
View file @ c651140a
......@@ -10,9 +10,21 @@ export default {
GlAlert,
ItemTitle,
},
props: {
isModal: {
type: Boolean,
required: false,
default: false,
},
initialTitle: {
type: String,
required: false,
default: '',
},
},
data() {
return {
title: '',
title: this.initialTitle,
error: false,
};
},
......@@ -35,7 +47,11 @@ export default {
},
},
} = response;
this.$router.push({ name: 'workItem', params: { id } });
if (!this.isModal) {
this.$router.push({ name: 'workItem', params: { id } });
} else {
this.$emit('onCreate', this.title);
}
} catch {
this.error = true;
}
......@@ -43,6 +59,13 @@ export default {
handleTitleInput(title) {
this.title = title;
},
handleCancelClick() {
if (!this.isModal) {
this.$router.go(-1);
return;
}
this.$emit('closeModal');
},
},
};
</script>
......@@ -52,18 +75,27 @@ export default {
<gl-alert v-if="error" variant="danger" @dismiss="error = false">{{
__('Something went wrong when creating a work item. Please try again')
}}</gl-alert>
<item-title data-testid="title-input" @title-input="handleTitleInput" />
<div class="gl-bg-gray-10 gl-py-5 gl-px-6">
<item-title :initial-title="title" data-testid="title-input" @title-input="handleTitleInput" />
<div
class="gl-bg-gray-10 gl-py-5 gl-px-6"
:class="{ 'gl-display-flex gl-justify-content-end': isModal }"
>
<gl-button
variant="confirm"
:disabled="title.length === 0"
class="gl-mr-3"
:class="{ 'gl-mr-3': !isModal }"
data-testid="create-button"
type="submit"
>
{{ __('Create') }}
{{ s__('WorkItem|Create work item') }}
</gl-button>
<gl-button type="button" data-testid="cancel-button" @click="$router.go(-1)">
<gl-button
type="button"
data-testid="cancel-button"
class="gl-order-n1"
:class="{ 'gl-mr-3': isModal }"
@click="handleCancelClick"
>
{{ __('Cancel') }}
</gl-button>
</div>
......
app/assets/stylesheets/pages/issues.scss
View file @ c651140a
......@@ -305,3 +305,32 @@ ul.related-merge-requests > li gl-emoji {
.issuable-header-slide-leave-to {
transform: translateY(-100%);
}
.description.work-items-enabled {
ul.task-list {
> li.task-list-item {
padding-inline-start: 2.25rem;
.js-add-task {
svg {
visibility: hidden;
}
&:focus svg {
visibility: visible;
}
}
> input.task-list-item-checkbox {
left: 0.875rem;
}
&:hover,
&:focus-within {
.js-add-task svg {
visibility: visible;
}
}
}
}
}
app/controllers/projects/issues_controller.rb
View file @ c651140a
......@@ -54,6 +54,7 @@ class Projects::IssuesController < Projects::ApplicationController
push_frontend_feature_flag(:issue_assignees_widget, @project, default_enabled: :yaml)
push_frontend_feature_flag(:paginated_issue_discussions, @project, default_enabled: :yaml)
push_frontend_feature_flag(:fix_comment_scroll, @project, default_enabled: :yaml)
push_frontend_feature_flag(:work_items, project, default_enabled: :yaml)
end
around_action :allow_gitaly_ref_name_caching, only: [:discussions]
......
locale/gitlab.pot
View file @ c651140a
......@@ -35044,6 +35044,9 @@ msgstr ""
msgid "Target-Branch"
msgstr ""
msgid "Task"
msgstr ""
msgid "Task ID: %{elastic_task}"
msgstr ""
......@@ -40600,6 +40603,15 @@ msgstr ""
msgid "Work in progress Limit"
msgstr ""
msgid "WorkItem|Convert to work item"
msgstr ""
msgid "WorkItem|Create work item"
msgstr ""
msgid "WorkItem|New Task"
msgstr ""
msgid "WorkItem|Work Items"
msgstr ""
......
spec/frontend/issues/show/components/description_spec.js
View file @ c651140a
import $ from 'jquery';
import Vue, { nextTick } from 'vue';
import { nextTick } from 'vue';
import '~/behaviors/markdown/render_gfm';
import { GlPopover, GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { stubComponent } from 'helpers/stub_component';
import { TEST_HOST } from 'helpers/test_constants';
import mountComponent from 'helpers/vue_mount_component_helper';
import Description from '~/issues/show/components/description.vue';
import TaskList from '~/task_list';
import { descriptionProps as props } from '../mock_data/mock_data';
import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
import {
descriptionProps as initialProps,
descriptionHtmlWithCheckboxes,
} from '../mock_data/mock_data';
jest.mock('~/task_list');
const showModal = jest.fn();
const hideModal = jest.fn();
describe('Description component', () => {
let vm;
let DescriptionComponent;
let wrapper;
const findGfmContent = () => wrapper.find('[data-testid="gfm-content"]');
const findTextarea = () => wrapper.find('[data-testid="textarea"]');
const findTaskActionButtons = () => wrapper.findAll('.js-add-task');
const findConvertToTaskButton = () => wrapper.find('[data-testid="convert-to-task"]');
const findTaskSvg = () => wrapper.find('[data-testid="issue-open-m-icon"]');
const findPopovers = () => wrapper.findAllComponents(GlPopover);
const findModal = () => wrapper.findComponent(GlModal);
const findCreateWorkItem = () => wrapper.findComponent(CreateWorkItem);
function createComponent({ props = {}, provide = {} } = {}) {
wrapper = shallowMount(Description, {
propsData: {
...initialProps,
...props,
},
provide,
stubs: {
GlModal: stubComponent(GlModal, {
methods: {
show: showModal,
hide: hideModal,
},
}),
GlPopover,
},
});
}
beforeEach(() => {
DescriptionComponent = Vue.extend(Description);
if (!document.querySelector('.issuable-meta')) {
const metaData = document.createElement('div');
metaData.classList.add('issuable-meta');
......@@ -24,12 +59,10 @@ describe('Description component', () => {
document.body.appendChild(metaData);
}
vm = mountComponent(DescriptionComponent, props);
});
afterEach(() => {
vm.$destroy();
wrapper.destroy();
});
afterAll(() => {
......@@ -37,64 +70,91 @@ describe('Description component', () => {
});
it('doesnt animate first description changes', async () => {
vm.descriptionHtml = 'changed';
createComponent();
await wrapper.setProps({
descriptionHtml: 'changed',
});
await nextTick();
expect(vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse')).toBeFalsy();
jest.runAllTimers();
expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
});
it('animates description changes on live update', async () => {
vm.descriptionHtml = 'changed';
await nextTick();
vm.descriptionHtml = 'changed second time';
await nextTick();
expect(vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse')).toBeTruthy();
jest.runAllTimers();
await nextTick();
expect(
vm.$el.querySelector('.md').classList.contains('issue-realtime-trigger-pulse'),
).toBeTruthy();
createComponent();
await wrapper.setProps({
descriptionHtml: 'changed',
});
expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
await wrapper.setProps({
descriptionHtml: 'changed second time',
});
expect(findGfmContent().classes()).toContain('issue-realtime-pre-pulse');
await jest.runOnlyPendingTimers();
expect(findGfmContent().classes()).toContain('issue-realtime-trigger-pulse');
});
it('applies syntax highlighting and math when description changed', async () => {
const vmSpy = jest.spyOn(vm, 'renderGFM');
const prototypeSpy = jest.spyOn($.prototype, 'renderGFM');
vm.descriptionHtml = 'changed';
createComponent();
await nextTick();
expect(vm.$refs['gfm-content']).toBeDefined();
expect(vmSpy).toHaveBeenCalled();
await wrapper.setProps({
descriptionHtml: 'changed',
});
expect(findGfmContent().exists()).toBe(true);
expect(prototypeSpy).toHaveBeenCalled();
expect($.prototype.renderGFM).toHaveBeenCalled();
});
it('sets data-update-url', () => {
expect(vm.$el.querySelector('textarea').dataset.updateUrl).toEqual(TEST_HOST);
createComponent();
expect(findTextarea().attributes('data-update-url')).toBe(TEST_HOST);
});
describe('TaskList', () => {
beforeEach(() => {
vm.$destroy();
TaskList.mockClear();
vm = mountComponent(DescriptionComponent, { ...props, issuableType: 'issuableType' });
});
it('re-inits the TaskList when description changed', () => {
vm.descriptionHtml = 'changed';
createComponent({
props: {
issuableType: 'issuableType',
},
});
wrapper.setProps({
descriptionHtml: 'changed',
});
expect(TaskList).toHaveBeenCalled();
});
it('does not re-init the TaskList when canUpdate is false', () => {
vm.canUpdate = false;
vm.descriptionHtml = 'changed';
it('does not re-init the TaskList when canUpdate is false', async () => {
createComponent({
props: {
issuableType: 'issuableType',
canUpdate: false,
},
});
wrapper.setProps({
descriptionHtml: 'changed',
});
expect(TaskList).toHaveBeenCalledTimes(1);
expect(TaskList).not.toHaveBeenCalled();
});
it('calls with issuableType dataType', () => {
vm.descriptionHtml = 'changed';
createComponent({
props: {
issuableType: 'issuableType',
},
});
wrapper.setProps({
descriptionHtml: 'changed',
});
expect(TaskList).toHaveBeenCalledWith({
dataType: 'issuableType',
......@@ -110,61 +170,96 @@ describe('Description component', () => {
describe('taskStatus', () => {
it('adds full taskStatus', async () => {
vm.taskStatus = '1 of 1';
createComponent({
props: {
taskStatus: '1 of 1',
},
});
await nextTick();
expect(document.querySelector('.issuable-meta #task_status').textContent.trim()).toBe(
'1 of 1',
);
});
it('adds short taskStatus', async () => {
vm.taskStatus = '1 of 1';
createComponent({
props: {
taskStatus: '1 of 1',
},
});
await nextTick();
expect(document.querySelector('.issuable-meta #task_status_short').textContent.trim()).toBe(
'1/1 task',
);
});
it('clears task status text when no tasks are present', async () => {
vm.taskStatus = '0 of 0';
createComponent({
props: {
taskStatus: '0 of 0',
},
});
await nextTick();
expect(document.querySelector('.issuable-meta #task_status').textContent.trim()).toBe('');
});
});
describe('taskListUpdateStarted', () => {
it('emits event to parent', () => {
const spy = jest.spyOn(vm, '$emit');
vm.taskListUpdateStarted();
describe('with work items feature flag is enabled', () => {
beforeEach(async () => {
createComponent({
props: {
descriptionHtml: descriptionHtmlWithCheckboxes,
},
provide: {
glFeatures: {
workItems: true,
},
},
});
await nextTick();
});
expect(spy).toHaveBeenCalledWith('taskListUpdateStarted');
it('renders a list of hidden buttons corresponding to checkboxes in description HTML', () => {
expect(findTaskActionButtons()).toHaveLength(3);
});
});
describe('taskListUpdateSuccess', () => {
it('emits event to parent', () => {
const spy = jest.spyOn(vm, '$emit');
it('renders a list of popovers corresponding to checkboxes in description HTML', () => {
expect(findPopovers()).toHaveLength(3);
expect(findPopovers().at(0).props('target')).toBe(
findTaskActionButtons().at(0).attributes('id'),
);
});
vm.taskListUpdateSuccess();
it('does not show a modal by default', () => {
expect(findModal().props('visible')).toBe(false);
});
expect(spy).toHaveBeenCalledWith('taskListUpdateSucceeded');
it('opens a modal when a button on popover is clicked and displays correct title', async () => {
findConvertToTaskButton().vm.$emit('click');
expect(showModal).toHaveBeenCalled();
await nextTick();
expect(findCreateWorkItem().props('initialTitle').trim()).toBe('todo 1');
});
});
describe('taskListUpdateError', () => {
it('should create flash notification and emit an event to parent', () => {
const msg =
'Someone edited this issue at the same time you did. The description has been updated and you will need to make your changes again.';
const spy = jest.spyOn(vm, '$emit');
it('closes the modal on `closeCreateTaskModal` event', () => {
findConvertToTaskButton().vm.$emit('click');
findCreateWorkItem().vm.$emit('closeModal');
expect(hideModal).toHaveBeenCalled();
});
vm.taskListUpdateError();
it('updates description HTML on `onCreate` event', async () => {
const newTitle = 'New title';
findConvertToTaskButton().vm.$emit('click');
findCreateWorkItem().vm.$emit('onCreate', newTitle);
expect(hideModal).toHaveBeenCalled();
await nextTick();
expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(msg);
expect(spy).toHaveBeenCalledWith('taskListUpdateFailed');
expect(findTaskSvg().exists()).toBe(true);
expect(wrapper.text()).toContain(newTitle);
});
});
});
spec/frontend/issues/show/mock_data/mock_data.js
View file @ c651140a
......@@ -58,3 +58,17 @@ export const appProps = {
zoomMeetingUrl,
publishedIncidentUrl,
};
export const descriptionHtmlWithCheckboxes = `
<ul dir="auto" class="task-list" data-sourcepos"3:1-5:12">
<li class="task-list-item" data-sourcepos="3:1-3:11">
<input class="task-list-item-checkbox" type="checkbox"> todo 1
</li>
<li class="task-list-item" data-sourcepos="4:1-4:12">
<input class="task-list-item-checkbox" type="checkbox"> todo 2
</li>
<li class="task-list-item" data-sourcepos="5:1-5:12">
<input class="task-list-item-checkbox" type="checkbox"> todo 3
</li>
</ul>
`;
spec/frontend/work_items/pages/create_work_item_spec.js
View file @ c651140a
......@@ -19,7 +19,7 @@ describe('Create work item component', () => {
const findCreateButton = () => wrapper.find('[data-testid="create-button"]');
const findCancelButton = () => wrapper.find('[data-testid="cancel-button"]');
const createComponent = ({ data = {} } = {}) => {
const createComponent = ({ data = {}, props = {} } = {}) => {
fakeApollo = createMockApollo([], resolvers);
wrapper = shallowMount(CreateWorkItem, {
apolloProvider: fakeApollo,
......@@ -28,6 +28,9 @@ describe('Create work item component', () => {
...data,
};
},
propsData: {
...props,
},
mocks: {
$router: {
go: jest.fn(),
......@@ -54,40 +57,99 @@ describe('Create work item component', () => {
expect(findCreateButton().props('disabled')).toBe(true);
});
it('redirects to the previous page on Cancel button click', () => {
createComponent();
findCancelButton().vm.$emit('click');
describe('when displayed on a separate route', () => {
beforeEach(() => {
createComponent();
});
it('redirects to the previous page on Cancel button click', () => {
findCancelButton().vm.$emit('click');
expect(wrapper.vm.$router.go).toHaveBeenCalledWith(-1);
});
it('redirects to the work item page on successful mutation', async () => {
findTitleInput().vm.$emit('title-input', 'Test title');
wrapper.find('form').trigger('submit');
await waitForPromises();
expect(wrapper.vm.$router.push).toHaveBeenCalled();
});
it('adds right margin for create button', () => {
expect(findCreateButton().classes()).toContain('gl-mr-3');
});
it('does not add right margin for cancel button', () => {
expect(findCancelButton().classes()).not.toContain('gl-mr-3');
});
});
describe('when displayed in a modal', () => {
beforeEach(() => {
createComponent({
props: {
isModal: true,
},
});
});
it('emits `closeModal` event on Cancel button click', () => {
findCancelButton().vm.$emit('click');
expect(wrapper.vm.$router.go).toHaveBeenCalledWith(-1);
expect(wrapper.emitted('closeModal')).toEqual([[]]);
});
it('emits `onCreate` on successful mutation', async () => {
const mockTitle = 'Test title';
findTitleInput().vm.$emit('title-input', 'Test title');
wrapper.find('form').trigger('submit');
await waitForPromises();
expect(wrapper.emitted('onCreate')).toEqual([[mockTitle]]);
});
it('does not right margin for create button', () => {
expect(findCreateButton().classes()).not.toContain('gl-mr-3');
});
it('adds right margin for cancel button', () => {
expect(findCancelButton().classes()).toContain('gl-mr-3');
});
});
it('hides the alert on dismissing the error', async () => {
createComponent({ data: { error: true } });
expect(findAlert().exists()).toBe(true);
findAlert().vm.$emit('dismiss');
await nextTick();
expect(findAlert().exists()).toBe(false);
});
it('displays an initial title if passed', () => {
const initialTitle = 'Initial Title';
createComponent({
props: { initialTitle },
});
expect(findTitleInput().props('initialTitle')).toBe(initialTitle);
});
describe('when title input field has a text', () => {
beforeEach(async () => {
beforeEach(() => {
const mockTitle = 'Test title';
createComponent();
await findTitleInput().vm.$emit('title-input', mockTitle);
findTitleInput().vm.$emit('title-input', mockTitle);
});
it('renders a non-disabled Create button', () => {
expect(findCreateButton().props('disabled')).toBe(false);
});
it('redirects to the work item page on successful mutation', async () => {
wrapper.find('form').trigger('submit');
await waitForPromises();
expect(wrapper.vm.$router.push).toHaveBeenCalled();
});
// TODO: write a proper test here when we have a backend implementation
it.todo('shows an alert on mutation error');
});
......
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