Introduce alert mapping builder feature flag

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

app/controllers/projects/settings/operations_controller.rb

@@ -8,6 +8,7 @@ module Projects
 
       before_action do
         push_frontend_feature_flag(:http_integrations_list, @project)
+        push_frontend_feature_flag(:multiple_http_integrations_custom_mapping, @project)
       end
 
       respond_to :json, only: [:reset_alerting_token, :reset_pagerduty_token]

config/feature_flags/development/multiple_http_integrations_custom_mapping.yml

+---
+name: multiple_http_integrations_custom_mapping
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/46437
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/273573
+type: development
+group: group::health
+default_enabled: false

locale/gitlab.pot

@@ -2492,6 +2492,9 @@ msgstr ""
 msgid "AlertSettings|2. Name integration"
 msgstr ""
 
+msgid "AlertSettings|5. Map fields (optional)"
+msgstr ""
+
 msgid "AlertSettings|API URL"
 msgstr ""
 
@@ -2567,6 +2570,9 @@ msgstr ""
 msgid "AlertSettings|Test failed. Do you still want to save your changes anyway?"
 msgstr ""
 
+msgid "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."
+msgstr ""
+
 msgid "AlertSettings|There was an error updating the alert settings."
 msgstr ""
 

spec/frontend/alerts_settings/__snapshots__/alerts_settings_form_new_spec.js.snap

@@ -4,12 +4,13 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
 "<gl-form-stub class=\\"gl-mt-6\\">
   <h5 class=\\"gl-font-lg gl-my-5\\">Add new integrations</h5>
   <gl-form-group-stub id=\\"integration-type\\" label=\\"1. Select integration type\\" label-for=\\"integration-type\\">
-    <gl-form-select-stub id=\\"integration-type\\" options=\\"[object Object],[object Object],[object Object],[object Object]\\" value=\\"\\"></gl-form-select-stub> <span class=\\"gl-text-gray-500\\"><gl-sprintf-stub message=\\"Learn more about our upcoming %{linkStart}integrations%{linkEnd}\\"></gl-sprintf-stub></span>
+    <gl-form-select-stub options=\\"[object Object],[object Object],[object Object],[object Object]\\" value=\\"\\"></gl-form-select-stub> <span class=\\"gl-text-gray-500\\"><gl-sprintf-stub message=\\"Learn more about our upcoming %{linkStart}integrations%{linkEnd}\\"></gl-sprintf-stub></span>
   </gl-form-group-stub>
   <b-collapse-stub tag=\\"div\\" class=\\"gl-mt-3\\">
     <gl-form-group-stub id=\\"name-integration\\" label=\\"2. Name integration\\" label-for=\\"name-integration\\">
-      <b-form-input-stub id=\\"name-integration\\" value=\\"\\" placeholder=\\"Enter integration name\\" debounce=\\"0\\" type=\\"text\\" class=\\"gl-form-input\\"></b-form-input-stub>
+      <b-form-input-stub value=\\"\\" placeholder=\\"Enter integration name\\" debounce=\\"0\\" type=\\"text\\" class=\\"gl-form-input\\"></b-form-input-stub>
     </gl-form-group-stub>
+    <!---->
     <div class=\\"gl-display-flex gl-justify-content-end\\">
       <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" type=\\"reset\\" class=\\"gl-mr-3 js-no-auto-disable\\">Cancel</gl-button-stub>
       <gl-button-stub category=\\"secondary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" type=\\"submit\\" class=\\"gl-mr-1 js-no-auto-disable\\">Save and test payload</gl-button-stub>

spec/frontend/alerts_settings/alerts_settings_form_new_spec.js

@@ -8,12 +8,17 @@ jest.mock('~/alerts_settings/services');
 describe('AlertsSettingsFormNew', () => {
   let wrapper;
 
-  const createComponent = ({ methods } = {}, data) => {
+  const createComponent = (
+    { methods } = {},
+    data,
+    multipleHttpIntegrationsCustomMapping = false,
+  ) => {
     wrapper = shallowMount(AlertsSettingsForm, {
       data() {
         return { ...data };
       },
       provide: {
+        glFeatures: { multipleHttpIntegrationsCustomMapping },
         ...defaultAlertSettingsConfig,
       },
       methods,
@@ -25,6 +30,7 @@ describe('AlertsSettingsFormNew', () => {
   const findSelect = () => wrapper.find(GlFormSelect);
   const findFormSteps = () => wrapper.find(GlCollapse);
   const findFormName = () => wrapper.find(GlFormInput);
+  const findMappingBuilderSection = () => wrapper.find(`[id = "mapping-builder"]`);
 
   afterEach(() => {
     if (wrapper) {
@@ -56,4 +62,19 @@ describe('AlertsSettingsFormNew', () => {
       expect(findFormName().isVisible()).toBe(true);
     });
   });
+
+  describe('Mapping builder section', () => {
+    beforeEach(() => {
+      createComponent({}, {});
+    });
+
+    it('should NOT render when feature flag disabled', () => {
+      expect(findMappingBuilderSection().exists()).toBe(false);
+    });
+
+    it('should render when feature flag is enabled', () => {
+      createComponent({}, {}, true);
+      expect(findMappingBuilderSection().exists()).toBe(true);
+    });
+  });
 });