Commit 5146f98f authored by Olena Horal-Koretska's avatar Olena Horal-Koretska Committed by Kushal Pandya

Introduce alert mapping builder feature flag

parent 0177b2c0
......@@ -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
......
......@@ -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]
......
---
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
......@@ -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 ""
......
......@@ -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>
......
......@@ -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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment