Add fast tasklist support to MR tasklist

Also adds specs and fixes existing specs

app/assets/javascripts/issue_show/components/description.vue

 <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,
+          },
         ),
       );
 

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.',
+          ),
+        );
+      },
     });
   }
 }

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"

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');
     });
   });

spec/javascripts/merge_request_spec.js

@@ -40,12 +40,13 @@ 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;
 
+      it('submits an ajax request on tasklist:changed', done => {
         $('.js-task-list-field').trigger({
           type: 'tasklist:changed',
           detail: { lineNumber, lineSource, index, checked },
@@ -66,6 +67,26 @@ describe('MergeRequest', function() {
           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', () => {