Commit 8bf5e479 authored by Fatih Acet's avatar Fatih Acet Committed by Brett Walker

Add fast tasklist support to MR tasklist

Also adds specs and fixes existing specs
parent 79bd1b87
<script> <script>
import $ from 'jquery'; import $ from 'jquery';
import { __ } from '~/locale'; import { s__, sprintf } from '~/locale';
import createFlash from '~/flash';
import animateMixin from '../mixins/animate'; import animateMixin from '../mixins/animate';
import TaskList from '../../task_list'; import TaskList from '../../task_list';
import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor'; import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
...@@ -91,9 +92,14 @@ export default { ...@@ -91,9 +92,14 @@ export default {
}, },
taskListUpdateError() { taskListUpdateError() {
window.Flash( createFlash(
__( sprintf(
'Someone edited this issue at the same time you did. The description has been updated and you will need to make your changes again.', s__(
'Someone edited this %{issueType} at the same time you did. The description has been updated and you will need to make your changes again.',
),
{
issueType: this.issuableType,
},
), ),
); );
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import $ from 'jquery'; import $ from 'jquery';
import { __ } from '~/locale'; import { __ } from '~/locale';
import createFlash from '~/flash';
import TaskList from './task_list'; import TaskList from './task_list';
import MergeRequestTabs from './merge_request_tabs'; import MergeRequestTabs from './merge_request_tabs';
import IssuablesHelper from './helpers/issuables_helper'; import IssuablesHelper from './helpers/issuables_helper';
...@@ -40,6 +41,13 @@ function MergeRequest(opts) { ...@@ -40,6 +41,13 @@ function MergeRequest(opts) {
document.querySelector('#task_status').innerText = result.task_status; document.querySelector('#task_status').innerText = result.task_status;
document.querySelector('#task_status_short').innerText = result.task_status_short; document.querySelector('#task_status_short').innerText = result.task_status_short;
}, },
onError: () => {
createFlash(
__(
'Someone edited this merge request at the same time you did. Please refresh the page to see changes.',
),
);
},
}); });
} }
} }
......
...@@ -6605,7 +6605,10 @@ msgstr "" ...@@ -6605,7 +6605,10 @@ msgstr ""
msgid "Snippets" msgid "Snippets"
msgstr "" msgstr ""
msgid "Someone edited this issue at the same time you did. The description has been updated and you will need to make your changes again." msgid "Someone edited this %{issueType} at the same time you did. The description has been updated and you will need to make your changes again."
msgstr ""
msgid "Someone edited this merge request at the same time you did. Please refresh the page to see changes."
msgstr "" msgstr ""
msgid "Something went wrong on our end" msgid "Something went wrong on our end"
......
...@@ -21,7 +21,8 @@ describe('Description component', () => { ...@@ -21,7 +21,8 @@ describe('Description component', () => {
if (!document.querySelector('.issuable-meta')) { if (!document.querySelector('.issuable-meta')) {
const metaData = document.createElement('div'); const metaData = document.createElement('div');
metaData.classList.add('issuable-meta'); metaData.classList.add('issuable-meta');
metaData.innerHTML = '<span id="task_status"></span><span id="task_status_short"></span>'; metaData.innerHTML =
'<div class="flash-container"></div><span id="task_status"></span><span id="task_status_short"></span>';
document.body.appendChild(metaData); document.body.appendChild(metaData);
} }
...@@ -33,6 +34,10 @@ describe('Description component', () => { ...@@ -33,6 +34,10 @@ describe('Description component', () => {
vm.$destroy(); vm.$destroy();
}); });
afterAll(() => {
$('.issuable-meta .flash-container').remove();
});
it('animates description changes', done => { it('animates description changes', done => {
vm.descriptionHtml = 'changed'; vm.descriptionHtml = 'changed';
...@@ -192,12 +197,11 @@ describe('Description component', () => { ...@@ -192,12 +197,11 @@ describe('Description component', () => {
it('should create flash notification and emit an event to parent', () => { it('should create flash notification and emit an event to parent', () => {
const msg = 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.'; 'Someone edited this issue at the same time you did. The description has been updated and you will need to make your changes again.';
spyOn(window, 'Flash');
spyOn(vm, '$emit'); spyOn(vm, '$emit');
vm.taskListUpdateError(); vm.taskListUpdateError();
expect(window.Flash).toHaveBeenCalledWith(msg); expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(msg);
expect(vm.$emit).toHaveBeenCalledWith('taskListUpdateFailed'); expect(vm.$emit).toHaveBeenCalledWith('taskListUpdateFailed');
}); });
}); });
......
...@@ -40,12 +40,13 @@ describe('MergeRequest', function() { ...@@ -40,12 +40,13 @@ describe('MergeRequest', function() {
expect($('.js-task-list-field').val()).toBe('- [x] Task List Item'); expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
}); });
it('submits an ajax request on tasklist:changed', done => { describe('tasklist', () => {
const lineNumber = 8; const lineNumber = 8;
const lineSource = '- [ ] item 8'; const lineSource = '- [ ] item 8';
const index = 3; const index = 3;
const checked = true; const checked = true;
it('submits an ajax request on tasklist:changed', done => {
$('.js-task-list-field').trigger({ $('.js-task-list-field').trigger({
type: 'tasklist:changed', type: 'tasklist:changed',
detail: { lineNumber, lineSource, index, checked }, detail: { lineNumber, lineSource, index, checked },
...@@ -66,6 +67,26 @@ describe('MergeRequest', function() { ...@@ -66,6 +67,26 @@ describe('MergeRequest', function() {
done(); done();
}); });
}); });
it('shows an error notification when tasklist update failed', done => {
mock
.onPatch(`${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`)
.reply(409, {});
$('.js-task-list-field').trigger({
type: 'tasklist:changed',
detail: { lineNumber, lineSource, index, checked },
});
setTimeout(() => {
expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
'Someone edited this merge request at the same time you did. Please refresh the page to see changes.',
);
done();
});
});
});
}); });
describe('class constructor', () => { describe('class constructor', () => {
......
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