Improve run pipeline ux

Show toast message after run
pipeline button on mr has been
clicked.

Changelog: changed

app/assets/javascripts/pipelines/constants.js

@@ -49,3 +49,5 @@ export const PipelineKeyOptions = [
     key: 'iid',
   },
 ];
+
+export const TOAST_MESSAGE = s__('Pipeline|Creating pipeline.');

app/assets/javascripts/pipelines/mixins/pipelines_mixin.js

@@ -4,7 +4,7 @@ import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/commo
 import Poll from '~/lib/utils/poll';
 import { __ } from '~/locale';
 import { validateParams } from '~/pipelines/utils';
-import { CANCEL_REQUEST } from '../constants';
+import { CANCEL_REQUEST, TOAST_MESSAGE } from '../constants';
 import eventHub from '../event_hub';
 
 export default {
@@ -191,7 +191,10 @@ export default {
 
       this.service
         .runMRPipeline(options)
-        .then(() => this.updateTable())
+        .then(() => {
+          this.$toast.show(TOAST_MESSAGE);
+          this.updateTable();
+        })
         .catch(() => {
           createFlash({
             message: __(

locale/gitlab.pot

@@ -25486,6 +25486,9 @@ msgstr ""
 msgid "Pipeline|Created"
 msgstr ""
 
+msgid "Pipeline|Creating pipeline."
+msgstr ""
+
 msgid "Pipeline|Date"
 msgstr ""
 

spec/frontend/commit/pipelines/pipelines_table_spec.js

@@ -6,8 +6,13 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
 import PipelinesTable from '~/commit/pipelines/pipelines_table.vue';
+import { TOAST_MESSAGE } from '~/pipelines/constants';
 import axios from '~/lib/utils/axios_utils';
 
+const $toast = {
+  show: jest.fn(),
+};
+
 describe('Pipelines table in Commits and Merge requests', () => {
   let wrapper;
   let pipeline;
@@ -30,6 +35,9 @@ describe('Pipelines table in Commits and Merge requests', () => {
           errorStateSvgPath: 'foo',
           ...props,
         },
+        mocks: {
+          $toast,
+        },
       }),
     );
   };
@@ -178,6 +186,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
         await waitForPromises();
       });
 
+      it('displays a toast message during pipeline creation', async () => {
+        await findRunPipelineBtn().trigger('click');
+
+        expect($toast.show).toHaveBeenCalledWith(TOAST_MESSAGE);
+      });
+
       it('on desktop, shows a loading button', async () => {
         await findRunPipelineBtn().trigger('click');