Add better error messages

Allow for more granular
error messages for alert
settings.

Add better error messages

Allow for more granular error messages
by providing the server error
response to the UI.

app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue

@@ -91,6 +91,7 @@ export default {
         feedbackMessage: null,
         isFeedbackDismissed: false,
       },
+      serverError: null,
       testAlert: {
         json: null,
         error: null,
@@ -196,6 +197,10 @@ export default {
     }
   },
   methods: {
+    createUserErrorMessage(errors) {
+      // eslint-disable-next-line prefer-destructuring
+      this.serverError = Object.values(errors)[0][0];
+    },
     setOpsgenieAsDefault() {
       this.options = this.options.map(el => {
         if (el.value !== 'opsgenie') {
@@ -221,6 +226,7 @@ export default {
       this.targetUrl = this.selectedService.targetUrl;
     },
     dismissFeedback() {
+      this.serverError = null;
       this.feedback = { ...this.feedback, feedbackMessage: null };
       this.isFeedbackDismissed = false;
     },
@@ -285,9 +291,10 @@ export default {
           // eslint-disable-next-line no-return-assign
           return (this.options = serviceOptions);
         })
-        .catch(() => {
+        .catch(({ response: { data: { errors } = {} } = {} }) => {
+          this.createUserErrorMessage(errors);
           this.setFeedback({
-            feedbackMessage: this.$options.i18n.errorMsg,
+            feedbackMessage: `${this.$options.i18n.errorMsg}.`,
             variant: 'danger',
           });
         })
@@ -313,9 +320,10 @@ export default {
           this.toggleSuccess(value);
           this.removeOpsGenieOption();
         })
-        .catch(() => {
+        .catch(({ response: { data: { errors } = {} } = {} }) => {
+          this.createUserErrorMessage(errors);
           this.setFeedback({
-            feedbackMessage: this.$options.i18n.errorApiUrlMsg,
+            feedbackMessage: `${this.$options.i18n.errorMsg}.`,
             variant: 'danger',
           });
         })
@@ -394,6 +402,8 @@ export default {
   <div>
     <gl-alert v-if="showFeedbackMsg" :variant="feedback.variant" @dismiss="dismissFeedback">
       {{ feedback.feedbackMessage }}
+      <br />
+      <i v-if="serverError">{{ __('Error message:') }} {{ serverError }}</i>
       <gl-button
         v-if="showAlertSave"
         variant="danger"

app/assets/javascripts/alerts_settings/constants.js

@@ -7,15 +7,10 @@ export const i18n = {
   setupSection: s__(
     "AlertSettings|Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.",
   ),
-  errorMsg: s__(
-    'AlertSettings|There was an error updating the the alert settings. Please refresh the page to try again.',
-  ),
+  errorMsg: s__('AlertSettings|There was an error updating the alert settings'),
   errorKeyMsg: s__(
     'AlertSettings|There was an error while trying to reset the key. Please refresh the page to try again.',
   ),
-  errorApiUrlMsg: s__(
-    'AlertSettings|There was an error while trying to enable the alert settings. Please ensure you are using a valid URL.',
-  ),
   restKeyInfo: s__(
     'AlertSettings|Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.',
   ),

ee/changelogs/unreleased/alert-opsgenie-intergration-error.yml

+---
+title: Alert Opsgenie integration errors
+merge_request: 36648
+author:
+type: other

locale/gitlab.pot

@@ -2205,10 +2205,7 @@ msgstr ""
 msgid "AlertSettings|Test failed. Do you still want to save your changes anyway?"
 msgstr ""
 
-msgid "AlertSettings|There was an error updating the the alert settings. Please refresh the page to try again."
-msgstr ""
-
-msgid "AlertSettings|There was an error while trying to enable the alert settings. Please ensure you are using a valid URL."
+msgid "AlertSettings|There was an error updating the alert settings"
 msgstr ""
 
 msgid "AlertSettings|There was an error while trying to reset the key. Please refresh the page to try again."
@@ -9412,6 +9409,9 @@ msgstr ""
 msgid "Error loading viewer"
 msgstr ""
 
+msgid "Error message:"
+msgstr ""
+
 msgid "Error occurred when fetching sidebar data"
 msgstr ""
 

spec/frontend/alert_settings/alert_settings_form_spec.js

@@ -218,7 +218,9 @@ describe('AlertsSettingsForm', () => {
       it('should show a error alert if failed', () => {
         const formPath = 'some/path';
         const toggleService = true;
-        mockAxios.onPut(formPath).replyOnce(404);
+        mockAxios.onPut(formPath).replyOnce(422, {
+          errors: 'Error message to display',
+        });
 
         createComponent({ generic: { ...defaultProps.generic, formPath } });