Skip to content

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

Merge branch '334812-create-a-new-task-w-title' into 'master' 

Resolve "Create a new Task w/ Title"

See merge request gitlab-org/gitlab!77358
parents a9671246 c651140a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 91 deletions
app/assets/javascripts/issues/show/components/description.vue
View file @ 46099516
<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 @ 46099516
......@@ -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 @ 46099516
......@@ -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 @ 46099516
......@@ -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 @ 46099516
......@@ -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 @ 46099516
......@@ -35044,6 +35044,9 @@ msgstr ""
msgid "Target-Branch"
msgstr ""
msgid "Task"
msgstr ""
msgid "Task ID: %{elastic_task}"
msgstr ""
......@@ -40606,6 +40609,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/mock_data/mock_data.js
View file @ 46099516
......@@ -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 @ 46099516
......@@ -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