Add fast tasklist support to MR tasklist

Also adds specs and fixes existing specs

5 files changed, 66 insertions, 24 deletions

diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index e664269b199..58f14bac8c8 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -1,6 +1,7 @@
 <script>
 import $ from 'jquery';
-import { __ } from '~/locale';
+import { s__, sprintf } from '~/locale';
+import createFlash from '~/flash';
 import animateMixin from '../mixins/animate';
 import TaskList from '../../task_list';
 import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
@@ -91,9 +92,14 @@ export default {
     },
 
     taskListUpdateError() {
-      window.Flash(
-        __(
-          'Someone edited this issue at the same time you did. The description has been updated and you will need to make your changes again.',
+      createFlash(
+        sprintf(
+          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,
+          },
         ),
       );
 
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index ac3b47cd218..3b42a154af8 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -2,6 +2,7 @@
 
 import $ from 'jquery';
 import { __ } from '~/locale';
+import createFlash from '~/flash';
 import TaskList from './task_list';
 import MergeRequestTabs from './merge_request_tabs';
 import IssuablesHelper from './helpers/issuables_helper';
@@ -40,6 +41,13 @@ function MergeRequest(opts) {
         document.querySelector('#task_status').innerText = result.task_status;
         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.',
+          ),
+        );
+      },
     });
   }
 }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9ec590f90d8..69754f5eab8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -6605,7 +6605,10 @@ msgstr ""
 msgid "Snippets"
 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 ""
 
 msgid "Something went wrong on our end"
diff --git a/spec/javascripts/issue_show/components/description_spec.js b/spec/javascripts/issue_show/components/description_spec.js
index 72716b97f5f..2eeed6770be 100644
--- a/spec/javascripts/issue_show/components/description_spec.js
+++ b/spec/javascripts/issue_show/components/description_spec.js
@@ -21,7 +21,8 @@ describe('Description component', () => {
     if (!document.querySelector('.issuable-meta')) {
       const metaData = document.createElement('div');
       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);
     }
@@ -33,6 +34,10 @@ describe('Description component', () => {
     vm.$destroy();
   });
 
+  afterAll(() => {
+    $('.issuable-meta .flash-container').remove();
+  });
+
   it('animates description changes', done => {
     vm.descriptionHtml = 'changed';
 
@@ -192,12 +197,11 @@ describe('Description component', () => {
     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.';
-      spyOn(window, 'Flash');
       spyOn(vm, '$emit');
 
       vm.taskListUpdateError();
 
-      expect(window.Flash).toHaveBeenCalledWith(msg);
+      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(msg);
       expect(vm.$emit).toHaveBeenCalledWith('taskListUpdateFailed');
     });
   });
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index 32623d1781a..ab809930804 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -40,30 +40,51 @@ describe('MergeRequest', function() {
       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 lineSource = '- [ ] item 8';
       const index = 3;
       const checked = true;
 
-      $('.js-task-list-field').trigger({
-        type: 'tasklist:changed',
-        detail: { lineNumber, lineSource, index, checked },
+      it('submits an ajax request on tasklist:changed', done => {
+        $('.js-task-list-field').trigger({
+          type: 'tasklist:changed',
+          detail: { lineNumber, lineSource, index, checked },
+        });
+
+        setTimeout(() => {
+          expect(axios.patch).toHaveBeenCalledWith(
+            `${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`,
+            {
+              merge_request: {
+                description: '- [ ] Task List Item',
+                lock_version: undefined,
+                update_task: { line_number: lineNumber, line_source: lineSource, index, checked },
+              },
+            },
+          );
+
+          done();
+        });
       });
 
-      setTimeout(() => {
-        expect(axios.patch).toHaveBeenCalledWith(
-          `${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`,
-          {
-            merge_request: {
-              description: '- [ ] Task List Item',
-              lock_version: undefined,
-              update_task: { line_number: lineNumber, line_source: lineSource, index, checked },
-            },
-          },
-        );
+      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();
+          done();
+        });
       });
     });
   });