Show server-generated errors for importers when applicable

Makes reasoning about failed import easier for end user

app/assets/javascripts/import_projects/store/actions.js

@@ -70,8 +70,19 @@ export const fetchImport = ({ state, commit }, { newName, targetNamespace, repo
         repoId: repo.id,
       }),
     )
-    .catch(() => {
-      createFlash(s__('ImportProjects|Importing the project failed'));
+    .catch(e => {
+      const serverErrorMessage = e?.response?.data?.errors;
+      const flashMessage = serverErrorMessage
+        ? sprintf(
+            s__('ImportProjects|Importing the project failed: %{reason}'),
+            {
+              reason: serverErrorMessage,
+            },
+            false,
+          )
+        : s__('ImportProjects|Importing the project failed');
+
+      createFlash(flashMessage);
 
       commit(types.RECEIVE_IMPORT_ERROR, repo.id);
     });

changelogs/unreleased/xanf-expose-bitbucket-error.yml

+---
+title: Fix displaying import errors from server
+merge_request: 37073
+author:
+type: fixed

locale/gitlab.pot

@@ -12521,6 +12521,9 @@ msgstr ""
 msgid "ImportProjects|Importing the project failed"
 msgstr ""
 
+msgid "ImportProjects|Importing the project failed: %{reason}"
+msgstr ""
+
 msgid "ImportProjects|Requesting your %{provider} repositories failed"
 msgstr ""
 

spec/frontend/import_projects/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
+import createFlash from '~/flash';
 import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import axios from '~/lib/utils/axios_utils';
@@ -22,6 +23,8 @@ import {
 } from '~/import_projects/store/actions';
 import state from '~/import_projects/store/state';
 
+jest.mock('~/flash');
+
 describe('import_projects store actions', () => {
   let localState;
   const repos = [{ id: 1 }, { id: 2 }];
@@ -130,10 +133,28 @@ describe('import_projects store actions', () => {
       );
     });
 
-    it('commits REQUEST_IMPORT and RECEIVE_IMPORT_ERROR  on an unsuccessful request', () => {
+    it('commits REQUEST_IMPORT and RECEIVE_IMPORT_ERROR and shows generic error message on an unsuccessful request', async () => {
       mock.onPost(`${TEST_HOST}/endpoint.json`).reply(500);
 
-      return testAction(
+      await testAction(
+        fetchImport,
+        importPayload,
+        localState,
+        [
+          { type: REQUEST_IMPORT, payload: importPayload.repo.id },
+          { type: RECEIVE_IMPORT_ERROR, payload: importPayload.repo.id },
+        ],
+        [],
+      );
+
+      expect(createFlash).toHaveBeenCalledWith('Importing the project failed');
+    });
+
+    it('commits REQUEST_IMPORT and RECEIVE_IMPORT_ERROR and shows detailed error message on an unsuccessful request with errors fields in response', async () => {
+      const ERROR_MESSAGE = 'dummy';
+      mock.onPost(`${TEST_HOST}/endpoint.json`).reply(500, { errors: ERROR_MESSAGE });
+
+      await testAction(
         fetchImport,
         importPayload,
         localState,
@@ -143,6 +164,8 @@ describe('import_projects store actions', () => {
         ],
         [],
       );
+
+      expect(createFlash).toHaveBeenCalledWith(`Importing the project failed: ${ERROR_MESSAGE}`);
     });
   });