Use error messages provided from backend

Use error messages provided by backend to show on UI
when any error occurs during Epic add action.

app/assets/javascripts/lib/utils/http_status.js

@@ -19,6 +19,7 @@ const httpStatusCodes = {
   UNAUTHORIZED: 401,
   FORBIDDEN: 403,
   NOT_FOUND: 404,
+  CONFLICT: 409,
   GONE: 410,
   UNPROCESSABLE_ENTITY: 422,
   SERVICE_UNAVAILABLE: 503,

ee/app/assets/javascripts/related_issues/components/add_issuable_form.vue

@@ -59,6 +59,11 @@ export default {
       required: false,
       default: itemAddFailureTypesMap.NOT_FOUND,
     },
+    itemAddFailureMessage: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -86,7 +91,9 @@ export default {
       );
     },
     addRelatedErrorMessage() {
-      if (this.itemAddFailureType === itemAddFailureTypesMap.NOT_FOUND) {
+      if (this.itemAddFailureMessage) {
+        return this.itemAddFailureMessage;
+      } else if (this.itemAddFailureType === itemAddFailureTypesMap.NOT_FOUND) {
         return addRelatedIssueErrorMap[this.issuableType];
       }
       // Only other failure is MAX_NUMBER_OF_CHILD_EPICS at the moment

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue

@@ -50,6 +50,7 @@ export default {
       'itemAddInProgress',
       'itemAddFailure',
       'itemAddFailureType',
+      'itemAddFailureMessage',
       'itemCreateInProgress',
       'showAddItemForm',
       'showCreateEpicForm',
@@ -194,6 +195,7 @@ export default {
           :path-id-separator="itemPathIdSeparator"
           :has-error="itemAddFailure"
           :item-add-failure-type="itemAddFailureType"
+          :item-add-failure-message="itemAddFailureMessage"
           @pendingIssuableRemoveRequest="handlePendingItemRemove"
           @addIssuableFormInput="handleAddItemFormInput"
           @addIssuableFormBlur="handleAddItemFormBlur"

ee/app/assets/javascripts/related_items_tree/store/actions.js

@@ -307,8 +307,11 @@ export const receiveAddItemSuccess = ({ dispatch, commit, getters }, { rawItems
   dispatch('setItemInputValue', '');
   dispatch('toggleAddItemForm', { toggleState: false });
 };
-export const receiveAddItemFailure = ({ commit }, { itemAddFailureType } = {}) => {
-  commit(types.RECEIVE_ADD_ITEM_FAILURE, { itemAddFailureType });
+export const receiveAddItemFailure = (
+  { commit },
+  { itemAddFailureType, itemAddFailureMessage = '' } = {},
+) => {
+  commit(types.RECEIVE_ADD_ITEM_FAILURE, { itemAddFailureType, itemAddFailureMessage });
 };
 export const addItem = ({ state, dispatch, getters }) => {
   dispatch('requestAddItem');
@@ -325,20 +328,22 @@ export const addItem = ({ state, dispatch, getters }) => {
     })
     .catch(data => {
       const { response } = data;
-      if (response.status === 404) {
+      if (response.status === httpStatusCodes.NOT_FOUND) {
         dispatch('receiveAddItemFailure', { itemAddFailureType: itemAddFailureTypesMap.NOT_FOUND });
       }
       // Ignore 409 conflict when the issue or epic is already attached to epic
       /* eslint-disable @gitlab/i18n/no-non-i18n-strings */
       else if (
-        response.status === 409 &&
+        response.status === httpStatusCodes.CONFLICT &&
         response.data.message === 'Epic hierarchy level too deep'
       ) {
         dispatch('receiveAddItemFailure', {
           itemAddFailureType: itemAddFailureTypesMap.MAX_NUMBER_OF_CHILD_EPICS,
         });
       } else {
-        dispatch('receiveAddItemFailure');
+        dispatch('receiveAddItemFailure', {
+          itemAddFailureMessage: response.data.message,
+        });
       }
     });
 };

ee/app/assets/javascripts/related_items_tree/store/mutations.js

@@ -172,9 +172,10 @@ export default {
     state.itemAddInProgress = false;
     state.itemsFetchResultEmpty = false;
   },
-  [types.RECEIVE_ADD_ITEM_FAILURE](state, { itemAddFailureType }) {
+  [types.RECEIVE_ADD_ITEM_FAILURE](state, { itemAddFailureType, itemAddFailureMessage }) {
     state.itemAddInProgress = false;
     state.itemAddFailure = true;
+    state.itemAddFailureMessage = itemAddFailureMessage;
     if (itemAddFailureType) {
       state.itemAddFailureType = itemAddFailureType;
     }

ee/app/assets/javascripts/related_items_tree/store/state.js

@@ -23,6 +23,7 @@ export default () => ({
   pendingReferences: [],
   itemAutoCompleteSources: {},
   itemAddFailureType: null,
+  itemAddFailureMessage: '',
 
   // UI Flags
   itemsFetchInProgress: false,

ee/spec/features/epics/epic_issues_spec.rb

@@ -199,7 +199,7 @@ describe 'Epic Issues', :js do
         add_epics(references)
 
         expect(page).to have_selector('.gl-field-error')
-        expect(find('.gl-field-error')).to have_text("This epic already has the maximum number of child epics.")
+        expect(find('.gl-field-error')).to have_text("This epic can't be added because the parent is already at the maximum depth from its most distance ancestor")
       end
     end
 

ee/spec/frontend/related_items_tree/store/mutations_spec.js

@@ -479,10 +479,14 @@ describe('RelatedItemsTree', () => {
 
       describe(types.RECEIVE_ADD_ITEM_FAILURE, () => {
         it('should set `itemAddInProgress` to false, `itemAddFailure` to true and `itemAddFailureType` value within state', () => {
-          mutations[types.RECEIVE_ADD_ITEM_FAILURE](state, { itemAddFailureType: 'bar' });
+          mutations[types.RECEIVE_ADD_ITEM_FAILURE](state, {
+            itemAddFailureMessage: 'foo',
+            itemAddFailureType: 'bar',
+          });
 
           expect(state.itemAddInProgress).toBe(false);
           expect(state.itemAddFailure).toBe(true);
+          expect(state.itemAddFailureMessage).toEqual('foo');
           expect(state.itemAddFailureType).toEqual('bar');
         });
       });

ee/spec/javascripts/issuable/related_issues/components/add_issuable_form_spec.js

@@ -209,6 +209,20 @@ describe('AddIssuableForm', () => {
           done();
         });
       });
+
+      it('shows error message when error is present', done => {
+        const itemAddFailureMessage = 'Something went wrong while submitting.';
+        wrapper.setProps({
+          hasError: true,
+          itemAddFailureMessage,
+        });
+
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.find('.gl-field-error').exists()).toBe(true);
+          expect(wrapper.find('.gl-field-error').text()).toContain(itemAddFailureMessage);
+          done();
+        });
+      });
     });
   });
 });

ee/spec/javascripts/related_items_tree/store/actions_spec.js

@@ -919,12 +919,18 @@ describe('RelatedItemTree', () => {
         it('should set `state.itemAddInProgress` to false', done => {
           testAction(
             actions.receiveAddItemFailure,
-            { itemAddFailureType: itemAddFailureTypesMap.NOT_FOUND },
+            {
+              itemAddFailureType: itemAddFailureTypesMap.NOT_FOUND,
+              itemAddFailureMessage: 'Foobar',
+            },
             {},
             [
               {
                 type: types.RECEIVE_ADD_ITEM_FAILURE,
-                payload: { itemAddFailureType: itemAddFailureTypesMap.NOT_FOUND },
+                payload: {
+                  itemAddFailureType: itemAddFailureTypesMap.NOT_FOUND,
+                  itemAddFailureMessage: 'Foobar',
+                },
               },
             ],
             [],
@@ -940,7 +946,7 @@ describe('RelatedItemTree', () => {
             [
               {
                 type: types.RECEIVE_ADD_ITEM_FAILURE,
-                payload: { itemAddFailureType: undefined },
+                payload: { itemAddFailureType: undefined, itemAddFailureMessage: '' },
               },
             ],
             [],
@@ -1004,7 +1010,9 @@ describe('RelatedItemTree', () => {
               },
               {
                 type: 'receiveAddItemFailure',
-                payload: { itemAddFailureType: itemAddFailureTypesMap.NOT_FOUND },
+                payload: {
+                  itemAddFailureType: itemAddFailureTypesMap.NOT_FOUND,
+                },
               },
             ],
             done,