Update frontend to support displaying backend error messages

Display error message from the backend if it exists

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

@@ -11,7 +11,7 @@ export const updateMemberRole = async ({ state, commit }, { memberId, accessLeve
 
     commit(types.RECEIVE_MEMBER_ROLE_SUCCESS, { memberId, accessLevel });
   } catch (error) {
-    commit(types.RECEIVE_MEMBER_ROLE_ERROR);
+    commit(types.RECEIVE_MEMBER_ROLE_ERROR, { error });
 
     throw error;
   }
@@ -37,7 +37,7 @@ export const updateMemberExpiration = async ({ state, commit }, { memberId, expi
       expiresAt: expiresAt ? formatDate(expiresAt, 'isoUtcDateTime') : null,
     });
   } catch (error) {
-    commit(types.RECEIVE_MEMBER_EXPIRATION_ERROR);
+    commit(types.RECEIVE_MEMBER_EXPIRATION_ERROR, { error });
 
     throw error;
   }

app/assets/javascripts/members/store/mutations.js

@@ -13,10 +13,17 @@ export default {
 
     Vue.set(member, 'accessLevel', accessLevel);
   },
-  [types.RECEIVE_MEMBER_ROLE_ERROR](state) {
-    state.errorMessage = s__(
-      "Members|An error occurred while updating the member's role, please try again.",
-    );
+  [types.RECEIVE_MEMBER_ROLE_ERROR](state, { error }) {
+    const message = error.response?.data?.message;
+
+    if (message) {
+      state.errorMessage = message;
+    } else {
+      state.errorMessage = s__(
+        "Members|An error occurred while updating the member's role, please try again.",
+      );
+    }
+
     state.showError = true;
   },
   [types.RECEIVE_MEMBER_EXPIRATION_SUCCESS](state, { memberId, expiresAt }) {
@@ -28,10 +35,17 @@ export default {
 
     Vue.set(member, 'expiresAt', expiresAt);
   },
-  [types.RECEIVE_MEMBER_EXPIRATION_ERROR](state) {
-    state.errorMessage = s__(
-      "Members|An error occurred while updating the member's expiration date, please try again.",
-    );
+  [types.RECEIVE_MEMBER_EXPIRATION_ERROR](state, { error }) {
+    const message = error.response?.data?.message;
+
+    if (message) {
+      state.errorMessage = message;
+    } else {
+      state.errorMessage = s__(
+        "Members|An error occurred while updating the member's expiration date, please try again.",
+      );
+    }
+
     state.showError = true;
   },
   [types.HIDE_ERROR](state) {

changelogs/unreleased/217155-role-can-t-be-changed-for-users-not-meeting-domain-restriction.yml

+---
+title: Display error message if group member can not be updated because their email
+  does not match the list of allowed domains
+merge_request: 52014
+author:
+type: fixed

spec/frontend/members/store/actions_spec.js

@@ -57,15 +57,17 @@ describe('Vuex members actions', () => {
 
       describe('unsuccessful request', () => {
         it(`commits ${types.RECEIVE_MEMBER_ROLE_ERROR} mutation and throws error`, async () => {
-          mock.onPut().networkError();
+          const error = new Error('Network Error');
+          mock.onPut().reply(() => Promise.reject(error));
 
           await expect(
             testAction(updateMemberRole, payload, state, [
               {
                 type: types.RECEIVE_MEMBER_ROLE_ERROR,
+                payload: { error },
               },
             ]),
-          ).rejects.toThrowError(new Error('Network Error'));
+          ).rejects.toThrowError(error);
         });
       });
     });
@@ -108,15 +110,17 @@ describe('Vuex members actions', () => {
 
       describe('unsuccessful request', () => {
         it(`commits ${types.RECEIVE_MEMBER_EXPIRATION_ERROR} mutation and throws error`, async () => {
-          mock.onPut().networkError();
+          const error = new Error('Network Error');
+          mock.onPut().reply(() => Promise.reject(error));
 
           await expect(
             testAction(updateMemberExpiration, { memberId, expiresAt }, state, [
               {
                 type: types.RECEIVE_MEMBER_EXPIRATION_ERROR,
+                payload: { error },
               },
             ]),
-          ).rejects.toThrowError(new Error('Network Error'));
+          ).rejects.toThrowError(error);
         });
       });
     });

spec/frontend/members/store/mutations_spec.js

@@ -28,13 +28,35 @@ describe('Vuex members mutations', () => {
     });
 
     describe(types.RECEIVE_MEMBER_ROLE_ERROR, () => {
-      it('shows error message', () => {
-        mutations[types.RECEIVE_MEMBER_ROLE_ERROR](state);
+      describe('when error does not have a message', () => {
+        it('shows default error message', () => {
+          mutations[types.RECEIVE_MEMBER_ROLE_ERROR](state, {
+            error: new Error('Network Error'),
+          });
+
+          expect(state.showError).toBe(true);
+          expect(state.errorMessage).toBe(
+            "An error occurred while updating the member's role, please try again.",
+          );
+        });
+      });
 
-        expect(state.showError).toBe(true);
-        expect(state.errorMessage).toBe(
-          "An error occurred while updating the member's role, please try again.",
-        );
+      describe('when error has a message', () => {
+        it('shows error message', () => {
+          const error = new Error('Request failed with status code 422');
+          error.response = {
+            data: {
+              message:
+                'User email "john.smith@gmail.com" does not match the allowed domain of example.com',
+            },
+          };
+          mutations[types.RECEIVE_MEMBER_ROLE_ERROR](state, { error });
+
+          expect(state.showError).toBe(true);
+          expect(state.errorMessage).toBe(
+            'User email "john.smith@gmail.com" does not match the allowed domain of example.com',
+          );
+        });
       });
     });
 
@@ -52,13 +74,35 @@ describe('Vuex members mutations', () => {
     });
 
     describe(types.RECEIVE_MEMBER_EXPIRATION_ERROR, () => {
-      it('shows error message', () => {
-        mutations[types.RECEIVE_MEMBER_EXPIRATION_ERROR](state);
+      describe('when error does not have a message', () => {
+        it('shows default error message', () => {
+          mutations[types.RECEIVE_MEMBER_EXPIRATION_ERROR](state, {
+            error: new Error('Network Error'),
+          });
+
+          expect(state.showError).toBe(true);
+          expect(state.errorMessage).toBe(
+            "An error occurred while updating the member's expiration date, please try again.",
+          );
+        });
+      });
 
-        expect(state.showError).toBe(true);
-        expect(state.errorMessage).toBe(
-          "An error occurred while updating the member's expiration date, please try again.",
-        );
+      describe('when error has a message', () => {
+        it('shows error message', () => {
+          const error = new Error('Request failed with status code 422');
+          error.response = {
+            data: {
+              message:
+                'User email "john.smith@gmail.com" does not match the allowed domain of example.com',
+            },
+          };
+          mutations[types.RECEIVE_MEMBER_EXPIRATION_ERROR](state, { error });
+
+          expect(state.showError).toBe(true);
+          expect(state.errorMessage).toBe(
+            'User email "john.smith@gmail.com" does not match the allowed domain of example.com',
+          );
+        });
       });
     });
   });