Change MR draft status notification from flash to tast

Use toast UI element to notify user about the changed draft status.

Changelog: changed

app/assets/javascripts/merge_request.js

@@ -2,6 +2,7 @@
 
 import $ from 'jquery';
 import createFlash from '~/flash';
+import toast from '~/vue_shared/plugins/global_toast';
 import { __ } from '~/locale';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import axios from './lib/utils/axios_utils';
@@ -136,10 +137,9 @@ MergeRequest.hideCloseButton = function () {
 
 MergeRequest.toggleDraftStatus = function (title, isReady) {
   if (isReady) {
-    createFlash({
-      message: __('Marked as ready. Merging is now allowed.'),
-      type: 'notice',
-    });
+    toast(__('Marked as ready. Merging is now allowed.'));
+  } else {
+    toast(__('Marked as draft. Can only be merged when marked as ready.'));
   }
   const titleEl = document.querySelector('.merge-request .detail-page-description .title');
 

app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue

@@ -3,6 +3,7 @@ import { GlButton } from '@gitlab/ui';
 import { produce } from 'immer';
 import $ from 'jquery';
 import createFlash from '~/flash';
+import toast from '~/vue_shared/plugins/global_toast';
 import { __ } from '~/locale';
 import MergeRequest from '~/merge_request';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -123,10 +124,7 @@ export default {
               },
             },
           }) => {
-            createFlash({
-              message: __('Marked as ready. Merging is now allowed.'),
-              type: 'notice',
-            });
+            toast(__('Marked as ready. Merging is now allowed.'));
             $('.merge-request .detail-page-description .title').text(title);
           },
         )

locale/gitlab.pot

@@ -20804,6 +20804,9 @@ msgstr ""
 msgid "Marked For Deletion At - %{deletion_time}"
 msgstr ""
 
+msgid "Marked as draft. Can only be merged when marked as ready."
+msgstr ""
+
 msgid "Marked as ready. Merging is now allowed."
 msgstr ""
 

spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js

 import Vue from 'vue';
-import createFlash from '~/flash';
 import WorkInProgress from '~/vue_merge_request_widget/components/states/work_in_progress.vue';
+import toast from '~/vue_shared/plugins/global_toast';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 
-jest.mock('~/flash');
+jest.mock('~/vue_shared/plugins/global_toast');
 
 const createComponent = () => {
   const Component = Vue.extend(WorkInProgress);
@@ -63,10 +63,7 @@ describe('Wip', () => {
         setImmediate(() => {
           expect(vm.isMakingRequest).toBeTruthy();
           expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj);
-          expect(createFlash).toHaveBeenCalledWith({
-            message: 'Marked as ready. Merging is now allowed.',
-            type: 'notice',
-          });
+          expect(toast).toHaveBeenCalledWith('Marked as ready. Merging is now allowed.');
           done();
         });
       });