Add latest changes from gitlab-org/gitlab@master

4 files changed, 31 insertions, 6 deletions

diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
index a08100f3938..81ee86fe797 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
@@ -17,6 +17,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import AlertSettingsFormHelpBlock from './alert_settings_form_help_block.vue';
+import service from '../services';
 import {
   integrationTypesNew,
   JSON_VALIDATE_DELAY,
@@ -89,7 +90,7 @@ export default {
     MappingBuilder,
   },
   directives: {
-    'gl-modal': GlModalDirective,
+    GlModal: GlModalDirective,
   },
   inject: {
     generic: {
@@ -150,6 +151,13 @@ export default {
         apiUrl: this.currentIntegration?.apiUrl || '',
       };
     },
+    testAlertPayload() {
+      return {
+        data: this.integrationTestPayload.json,
+        endpoint: this.integrationForm.url,
+        token: this.integrationForm.token,
+      };
+    },
   },
   watch: {
     currentIntegration(val) {
@@ -170,8 +178,14 @@ export default {
       }
     },
     submitWithTestPayload() {
-      // TODO: Test payload before saving via GraphQL
-      this.submit();
+      return service
+        .updateTestAlert(this.testAlertPayload)
+        .then(() => {
+          this.submit();
+        })
+        .catch(() => {
+          this.$emit('test-payload-failure');
+        });
     },
     submit() {
       const { name, apiUrl } = this.integrationForm;
@@ -359,7 +373,6 @@ export default {
         </div>
       </gl-form-group>
       <gl-form-group
-        id="test-integration"
         :label="$options.i18n.integrationFormSteps.step4.label"
         label-for="test-integration"
         :invalid-feedback="integrationTestPayload.error"
@@ -395,6 +408,8 @@ export default {
       <div class="gl-display-flex gl-justify-content-end">
         <gl-button type="reset" class="gl-mr-3 js-no-auto-disable">{{ __('Cancel') }}</gl-button>
         <gl-button
+          data-testid="integration-test-and-submit"
+          :disabled="Boolean(integrationTestPayload.error)"
           category="secondary"
           variant="success"
           class="gl-mr-1 js-no-auto-disable"
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
index 57fc1984990..3904a5b0fe2 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -24,6 +24,7 @@ import {
   ADD_INTEGRATION_ERROR,
   RESET_INTEGRATION_TOKEN_ERROR,
   UPDATE_INTEGRATION_ERROR,
+  INTEGRATION_PAYLOAD_TEST_ERROR,
 } from '../utils/error_messages';
 
 export default {
@@ -244,6 +245,9 @@ export default {
     clearCurrentIntegration() {
       this.currentIntegration = null;
     },
+    testPayloadFailure() {
+      createFlash({ message: INTEGRATION_PAYLOAD_TEST_ERROR });
+    },
   },
 };
 </script>
@@ -266,6 +270,7 @@ export default {
       @update-integration="updateIntegration"
       @reset-token="resetToken"
       @clear-current-integration="clearCurrentIntegration"
+      @test-payload-failure="testPayloadFailure"
     />
     <settings-form-old v-else />
   </div>
diff --git a/app/assets/javascripts/alerts_settings/services/index.js b/app/assets/javascripts/alerts_settings/services/index.js
index c49992d4f57..1835d6b46aa 100644
--- a/app/assets/javascripts/alerts_settings/services/index.js
+++ b/app/assets/javascripts/alerts_settings/services/index.js
@@ -2,6 +2,7 @@
 import axios from '~/lib/utils/axios_utils';
 
 export default {
+  // TODO: All this code save updateTestAlert will be deleted as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/255501
   updateGenericKey({ endpoint, params }) {
     return axios.put(endpoint, params);
   },
@@ -25,11 +26,11 @@ export default {
       },
     });
   },
-  updateTestAlert({ endpoint, data, authKey }) {
+  updateTestAlert({ endpoint, data, token }) {
     return axios.post(endpoint, data, {
       headers: {
         'Content-Type': 'application/json',
-        Authorization: `Bearer ${authKey}`,
+        Authorization: `Bearer ${token}`,
       },
     });
   },
diff --git a/app/assets/javascripts/alerts_settings/utils/error_messages.js b/app/assets/javascripts/alerts_settings/utils/error_messages.js
index 7df5d444a53..979d1ca3ccc 100644
--- a/app/assets/javascripts/alerts_settings/utils/error_messages.js
+++ b/app/assets/javascripts/alerts_settings/utils/error_messages.js
@@ -15,3 +15,7 @@ export const UPDATE_INTEGRATION_ERROR = s__(
 export const RESET_INTEGRATION_TOKEN_ERROR = s__(
   'AlertsIntegrations|The integration token could not be reset. Please try again.',
 );
+
+export const INTEGRATION_PAYLOAD_TEST_ERROR = s__(
+  'AlertsIntegrations|Integration payload is invalid. You can still save your changes.',
+);