Commit d596d4e7 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'Introduce_alert_mapping_builder_feature_flag' into 'master'

Introduce alert mapping builder feature flag

See merge request gitlab-org/gitlab!46437
parents f65cd503 5146f98f
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
GlLink, GlLink,
GlSprintf, GlSprintf,
} from '@gitlab/ui'; } from '@gitlab/ui';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { integrationTypes } from '../constants'; import { integrationTypes } from '../constants';
...@@ -18,8 +19,14 @@ export default { ...@@ -18,8 +19,14 @@ export default {
'AlertSettings|Learn more about our upcoming %{linkStart}integrations%{linkEnd}', 'AlertSettings|Learn more about our upcoming %{linkStart}integrations%{linkEnd}',
), ),
integrationFormSteps: { integrationFormSteps: {
step1: s__('AlertSettings|1. Select integration type'), step1: { title: s__('AlertSettings|1. Select integration type') },
step2: s__('AlertSettings|2. Name integration'), 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: { components: {
...@@ -32,6 +39,7 @@ export default { ...@@ -32,6 +39,7 @@ export default {
GlLink, GlLink,
GlSprintf, GlSprintf,
}, },
mixins: [glFeatureFlagsMixin()],
data() { data() {
return { return {
selectedIntegration: integrationTypes[0].value, selectedIntegration: integrationTypes[0].value,
...@@ -66,11 +74,10 @@ export default { ...@@ -66,11 +74,10 @@ export default {
<gl-form-group <gl-form-group
id="integration-type" id="integration-type"
:label="$options.i18n.integrationFormSteps.step1" :label="$options.i18n.integrationFormSteps.step1.title"
label-for="integration-type" label-for="integration-type"
> >
<gl-form-select <gl-form-select
id="integration-type"
v-model="selectedIntegration" v-model="selectedIntegration"
:options="options" :options="options"
@change="onIntegrationTypeSelect" @change="onIntegrationTypeSelect"
...@@ -91,16 +98,26 @@ export default { ...@@ -91,16 +98,26 @@ export default {
<gl-collapse v-model="formVisible" class="gl-mt-3"> <gl-collapse v-model="formVisible" class="gl-mt-3">
<gl-form-group <gl-form-group
id="name-integration" id="name-integration"
:label="$options.i18n.integrationFormSteps.step2" :label="$options.i18n.integrationFormSteps.step2.title"
label-for="name-integration" label-for="name-integration"
> >
<gl-form-input <gl-form-input
id="name-integration"
v-model="form.name" v-model="form.name"
type="text" type="text"
:placeholder="s__('AlertSettings|Enter integration name')" :placeholder="s__('AlertSettings|Enter integration name')"
/> />
</gl-form-group> </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"> <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 type="reset" class="gl-mr-3 js-no-auto-disable">{{ __('Cancel') }}</gl-button>
<gl-button <gl-button
......
...@@ -8,6 +8,7 @@ module Projects ...@@ -8,6 +8,7 @@ module Projects
before_action do before_action do
push_frontend_feature_flag(:http_integrations_list, @project) push_frontend_feature_flag(:http_integrations_list, @project)
push_frontend_feature_flag(:multiple_http_integrations_custom_mapping, @project)
end end
respond_to :json, only: [:reset_alerting_token, :reset_pagerduty_token] 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
...@@ -2498,6 +2498,9 @@ msgstr "" ...@@ -2498,6 +2498,9 @@ msgstr ""
msgid "AlertSettings|2. Name integration" msgid "AlertSettings|2. Name integration"
msgstr "" msgstr ""
msgid "AlertSettings|5. Map fields (optional)"
msgstr ""
msgid "AlertSettings|API URL" msgid "AlertSettings|API URL"
msgstr "" msgstr ""
...@@ -2573,6 +2576,9 @@ msgstr "" ...@@ -2573,6 +2576,9 @@ msgstr ""
msgid "AlertSettings|Test failed. Do you still want to save your changes anyway?" msgid "AlertSettings|Test failed. Do you still want to save your changes anyway?"
msgstr "" 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." msgid "AlertSettings|There was an error updating the alert settings."
msgstr "" msgstr ""
......
...@@ -4,12 +4,13 @@ exports[`AlertsSettingsFormNew with default values renders the initial template ...@@ -4,12 +4,13 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
"<gl-form-stub class=\\"gl-mt-6\\"> "<gl-form-stub class=\\"gl-mt-6\\">
<h5 class=\\"gl-font-lg gl-my-5\\">Add new integrations</h5> <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-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> </gl-form-group-stub>
<b-collapse-stub tag=\\"div\\" class=\\"gl-mt-3\\"> <b-collapse-stub tag=\\"div\\" class=\\"gl-mt-3\\">
<gl-form-group-stub id=\\"name-integration\\" label=\\"2. Name integration\\" label-for=\\"name-integration\\"> <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> </gl-form-group-stub>
<!---->
<div class=\\"gl-display-flex gl-justify-content-end\\"> <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=\\"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> <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>
......
...@@ -6,12 +6,17 @@ import { defaultAlertSettingsConfig } from './util'; ...@@ -6,12 +6,17 @@ import { defaultAlertSettingsConfig } from './util';
describe('AlertsSettingsFormNew', () => { describe('AlertsSettingsFormNew', () => {
let wrapper; let wrapper;
const createComponent = ({ methods } = {}, data) => { const createComponent = (
{ methods } = {},
data,
multipleHttpIntegrationsCustomMapping = false,
) => {
wrapper = shallowMount(AlertsSettingsForm, { wrapper = shallowMount(AlertsSettingsForm, {
data() { data() {
return { ...data }; return { ...data };
}, },
provide: { provide: {
glFeatures: { multipleHttpIntegrationsCustomMapping },
...defaultAlertSettingsConfig, ...defaultAlertSettingsConfig,
}, },
methods, methods,
...@@ -23,6 +28,7 @@ describe('AlertsSettingsFormNew', () => { ...@@ -23,6 +28,7 @@ describe('AlertsSettingsFormNew', () => {
const findSelect = () => wrapper.find(GlFormSelect); const findSelect = () => wrapper.find(GlFormSelect);
const findFormSteps = () => wrapper.find(GlCollapse); const findFormSteps = () => wrapper.find(GlCollapse);
const findFormName = () => wrapper.find(GlFormInput); const findFormName = () => wrapper.find(GlFormInput);
const findMappingBuilderSection = () => wrapper.find(`[id = "mapping-builder"]`);
afterEach(() => { afterEach(() => {
if (wrapper) { if (wrapper) {
...@@ -54,4 +60,19 @@ describe('AlertsSettingsFormNew', () => { ...@@ -54,4 +60,19 @@ describe('AlertsSettingsFormNew', () => {
expect(findFormName().isVisible()).toBe(true); 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