Add latest changes from gitlab-org/gitlab@master

1 files changed, 23 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 3fd158e1d8e..1490723ff76 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
@@ -9,6 +9,7 @@ import {
   GlLink,
   GlSprintf,
 } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__ } from '~/locale';
 import { integrationTypes } from '../constants';
 
@@ -18,8 +19,14 @@ export default {
       'AlertSettings|Learn more about our upcoming %{linkStart}integrations%{linkEnd}',
     ),
     integrationFormSteps: {
-      step1: s__('AlertSettings|1. Select integration type'),
-      step2: s__('AlertSettings|2. Name integration'),
+      step1: { title: s__('AlertSettings|1. Select integration type') },
+      step2: { title: s__('AlertSettings|2. Name integration') },
+      step5: {
+        title: s__('AlertSettings|5. Map fields (optional)'),
+        intro: s__(
+          'AlertSettings|The default GitLab alert keys are listed below. In the event an exact match could be found in the sample payload provided, that key will be mapped automatically. In all other cases, please define which payload key should map to the specified GitLab key. Any payload keys not shown in this list will not display in the alert list, but will display on the alert details page.',
+        ),
+      },
     },
   },
   components: {
@@ -32,6 +39,7 @@ export default {
     GlLink,
     GlSprintf,
   },
+  mixins: [glFeatureFlagsMixin()],
   data() {
     return {
       selectedIntegration: integrationTypes[0].value,
@@ -66,11 +74,10 @@ export default {
 
     <gl-form-group
       id="integration-type"
-      :label="$options.i18n.integrationFormSteps.step1"
+      :label="$options.i18n.integrationFormSteps.step1.title"
       label-for="integration-type"
     >
       <gl-form-select
-        id="integration-type"
         v-model="selectedIntegration"
         :options="options"
         @change="onIntegrationTypeSelect"
@@ -91,16 +98,26 @@ export default {
     <gl-collapse v-model="formVisible" class="gl-mt-3">
       <gl-form-group
         id="name-integration"
-        :label="$options.i18n.integrationFormSteps.step2"
+        :label="$options.i18n.integrationFormSteps.step2.title"
         label-for="name-integration"
       >
         <gl-form-input
-          id="name-integration"
           v-model="form.name"
           type="text"
           :placeholder="s__('AlertSettings|Enter integration name')"
         />
       </gl-form-group>
+
+      <gl-form-group
+        v-if="glFeatures.multipleHttpIntegrationsCustomMapping"
+        id="mapping-builder"
+        :label="$options.i18n.integrationFormSteps.step5.title"
+        label-for="mapping-builder"
+      >
+        <span class="gl-text-gray-500">{{ $options.i18n.integrationFormSteps.step5.intro }}</span>
+        <!--mapping builder will be added here-->
+      </gl-form-group>
+
       <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