Merge branch '348110-update-error-message' into 'master'

Show error message for permissions failure on MR pipeline

See merge request gitlab-org/gitlab!79242

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

 import Visibility from 'visibilityjs';
 import createFlash from '~/flash';
 import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
+import httpStatusCodes from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 import { __ } from '~/locale';
 import { validateParams } from '~/pipelines/utils';
@@ -195,11 +196,20 @@ export default {
           this.$toast.show(TOAST_MESSAGE);
           this.updateTable();
         })
-        .catch(() => {
+        .catch((e) => {
+          const unauthorized = e.response.status === httpStatusCodes.UNAUTHORIZED;
+          const badRequest = e.response.status === httpStatusCodes.BAD_REQUEST;
+
+          let errorMessage = __(
+            'An error occurred while trying to run a new pipeline for this merge request.',
+          );
+
+          if (unauthorized || badRequest) {
+            errorMessage = __('You do not have permission to run a pipeline on this branch.');
+          }
+
           createFlash({
-            message: __(
-              'An error occurred while trying to run a new pipeline for this merge request.',
-            ),
+            message: errorMessage,
           });
         })
         .finally(() => this.store.toggleIsRunningPipeline(false));

locale/gitlab.pot

@@ -41062,6 +41062,9 @@ msgstr ""
 msgid "You do not have permission to leave this %{namespaceType}."
 msgstr ""
 
+msgid "You do not have permission to run a pipeline on this branch."
+msgstr ""
+
 msgid "You do not have permission to run the Web Terminal. Please contact a project administrator."
 msgstr ""
 

spec/frontend/commit/pipelines/pipelines_table_spec.js

@@ -7,6 +7,8 @@ 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 httpStatusCodes from '~/lib/utils/http_status';
+import createFlash from '~/flash';
 import { TOAST_MESSAGE } from '~/pipelines/constants';
 import axios from '~/lib/utils/axios_utils';
 
@@ -14,6 +16,8 @@ const $toast = {
   show: jest.fn(),
 };
 
+jest.mock('~/flash');
+
 describe('Pipelines table in Commits and Merge requests', () => {
   let wrapper;
   let pipeline;
@@ -184,36 +188,61 @@ describe('Pipelines table in Commits and Merge requests', () => {
           mergeRequestId: 3,
         });
 
-        jest.spyOn(Api, 'postMergeRequestPipeline').mockReturnValue(Promise.resolve());
-
         await waitForPromises();
       });
+      describe('success', () => {
+        beforeEach(() => {
+          jest.spyOn(Api, 'postMergeRequestPipeline').mockReturnValue(Promise.resolve());
+        });
+        it('displays a toast message during pipeline creation', async () => {
+          await findRunPipelineBtn().trigger('click');
 
-      it('displays a toast message during pipeline creation', async () => {
-        await findRunPipelineBtn().trigger('click');
+          expect($toast.show).toHaveBeenCalledWith(TOAST_MESSAGE);
+        });
 
-        expect($toast.show).toHaveBeenCalledWith(TOAST_MESSAGE);
-      });
+        it('on desktop, shows a loading button', async () => {
+          await findRunPipelineBtn().trigger('click');
 
-      it('on desktop, shows a loading button', async () => {
-        await findRunPipelineBtn().trigger('click');
+          expect(findRunPipelineBtn().props('loading')).toBe(true);
 
-        expect(findRunPipelineBtn().props('loading')).toBe(true);
+          await waitForPromises();
 
-        await waitForPromises();
+          expect(findRunPipelineBtn().props('loading')).toBe(false);
+        });
 
-        expect(findRunPipelineBtn().props('loading')).toBe(false);
+        it('on mobile, shows a loading button', async () => {
+          await findRunPipelineBtnMobile().trigger('click');
+
+          expect(findRunPipelineBtn().props('loading')).toBe(true);
+
+          await waitForPromises();
+
+          expect(findRunPipelineBtn().props('disabled')).toBe(false);
+          expect(findRunPipelineBtn().props('loading')).toBe(false);
+        });
       });
 
-      it('on mobile, shows a loading button', async () => {
-        await findRunPipelineBtnMobile().trigger('click');
+      describe('failure', () => {
+        const permissionsMsg = 'You do not have permission to run a pipeline on this branch.';
 
-        expect(findRunPipelineBtn().props('loading')).toBe(true);
+        it.each`
+          status                                   | message
+          ${httpStatusCodes.BAD_REQUEST}           | ${permissionsMsg}
+          ${httpStatusCodes.UNAUTHORIZED}          | ${permissionsMsg}
+          ${httpStatusCodes.INTERNAL_SERVER_ERROR} | ${'An error occurred while trying to run a new pipeline for this merge request.'}
+        `('displays permissions error message', async ({ status, message }) => {
+          const response = { response: { status } };
 
-        await waitForPromises();
+          jest
+            .spyOn(Api, 'postMergeRequestPipeline')
+            .mockImplementation(() => Promise.reject(response));
+
+          await findRunPipelineBtn().trigger('click');
 
-        expect(findRunPipelineBtn().props('disabled')).toBe(false);
-        expect(findRunPipelineBtn().props('loading')).toBe(false);
+          await waitForPromises();
+
+          expect(createFlash).toHaveBeenCalledWith({ message });
+        });
       });
     });