Add latest changes from gitlab-org/gitlab@master

5 files changed, 167 insertions, 25 deletions

diff --git a/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap b/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap
index 66e3f180d92..eb2b82a0211 100644
--- a/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap
+++ b/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AlertsSettingsFormNew with default values renders the initial template 1`] = `
+exports[`AlertsSettingsForm with default values renders the initial template 1`] = `
 <form
   class="gl-mt-6"
 >
diff --git a/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
index 92ea8b2f33c..1ec7b5c18f6 100644
--- a/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
+++ b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
@@ -1,10 +1,10 @@
 import { GlIcon, GlFormInput, GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AlertMappingBuilder, { i18n } from '~/alerts_settings/components/alert_mapping_builder.vue';
-import gitlabFields from '~/alerts_settings/components/mocks/gitlabFields.json';
 import parsedMapping from '~/alerts_settings/components/mocks/parsedMapping.json';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import * as transformationUtils from '~/alerts_settings/utils/mapping_transformations';
+import alertFields from '../mocks/alertFields.json';
 
 describe('AlertMappingBuilder', () => {
   let wrapper;
@@ -14,6 +14,7 @@ describe('AlertMappingBuilder', () => {
       propsData: {
         parsedPayload: parsedMapping.samplePayload.payloadAlerFields.nodes,
         savedMapping: parsedMapping.storedMapping.nodes,
+        alertFields,
       },
     });
   }
@@ -44,28 +45,28 @@ describe('AlertMappingBuilder', () => {
   });
 
   it('renders disabled form input for each mapped field', () => {
-    gitlabFields.forEach((field, index) => {
+    alertFields.forEach((field, index) => {
       const input = findColumnInRow(index + 1, 0).find(GlFormInput);
-      const types = field.type.map((t) => capitalizeFirstCharacter(t.toLowerCase())).join(' or ');
+      const types = field.types.map((t) => capitalizeFirstCharacter(t.toLowerCase())).join(' or ');
       expect(input.attributes('value')).toBe(`${field.label} (${types})`);
       expect(input.attributes('disabled')).toBe('');
     });
   });
 
   it('renders right arrow next to each input', () => {
-    gitlabFields.forEach((field, index) => {
+    alertFields.forEach((field, index) => {
       const arrow = findColumnInRow(index + 1, 1).find('.right-arrow');
       expect(arrow.exists()).toBe(true);
     });
   });
 
   it('renders mapping dropdown for each field', () => {
-    gitlabFields.forEach(({ compatibleTypes }, index) => {
+    alertFields.forEach(({ types }, index) => {
       const dropdown = findColumnInRow(index + 1, 2).find(GlDropdown);
       const searchBox = dropdown.findComponent(GlSearchBoxByType);
       const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
       const { nodes } = parsedMapping.samplePayload.payloadAlerFields;
-      const mappingOptions = nodes.filter(({ type }) => compatibleTypes.includes(type));
+      const mappingOptions = nodes.filter(({ type }) => types.includes(type));
 
       expect(dropdown.exists()).toBe(true);
       expect(searchBox.exists()).toBe(true);
@@ -74,7 +75,7 @@ describe('AlertMappingBuilder', () => {
   });
 
   it('renders fallback dropdown only for the fields that have fallback', () => {
-    gitlabFields.forEach(({ compatibleTypes, numberOfFallbacks }, index) => {
+    alertFields.forEach(({ types, numberOfFallbacks }, index) => {
       const dropdown = findColumnInRow(index + 1, 3).find(GlDropdown);
       expect(dropdown.exists()).toBe(Boolean(numberOfFallbacks));
 
@@ -82,7 +83,7 @@ describe('AlertMappingBuilder', () => {
         const searchBox = dropdown.findComponent(GlSearchBoxByType);
         const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
         const { nodes } = parsedMapping.samplePayload.payloadAlerFields;
-        const mappingOptions = nodes.filter(({ type }) => compatibleTypes.includes(type));
+        const mappingOptions = nodes.filter(({ type }) => types.includes(type));
 
         expect(searchBox.exists()).toBe(Boolean(numberOfFallbacks));
         expect(dropdownItems).toHaveLength(mappingOptions.length);
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
index 2afa714fcf8..b43c1318a86 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
@@ -11,9 +11,10 @@ import waitForPromises from 'helpers/wait_for_promises';
 import AlertsSettingsForm from '~/alerts_settings/components/alerts_settings_form.vue';
 import MappingBuilder from '~/alerts_settings/components/alert_mapping_builder.vue';
 import { typeSet } from '~/alerts_settings/constants';
+import alertFields from '../mocks/alertFields.json';
 import { defaultAlertSettingsConfig } from './util';
 
-describe('AlertsSettingsFormNew', () => {
+describe('AlertsSettingsForm', () => {
   let wrapper;
   const mockToastShow = jest.fn();
 
@@ -21,6 +22,7 @@ describe('AlertsSettingsFormNew', () => {
     data = {},
     props = {},
     multipleHttpIntegrationsCustomMapping = false,
+    multiIntegrations = true,
   } = {}) => {
     wrapper = mount(AlertsSettingsForm, {
       data() {
@@ -32,8 +34,9 @@ describe('AlertsSettingsFormNew', () => {
         ...props,
       },
       provide: {
-        glFeatures: { multipleHttpIntegrationsCustomMapping },
         ...defaultAlertSettingsConfig,
+        glFeatures: { multipleHttpIntegrationsCustomMapping },
+        multiIntegrations,
       },
       mocks: {
         $toast: {
@@ -132,7 +135,11 @@ describe('AlertsSettingsFormNew', () => {
       });
 
       it('create with custom mapping', async () => {
-        createComponent({ multipleHttpIntegrationsCustomMapping: true });
+        createComponent({
+          multipleHttpIntegrationsCustomMapping: true,
+          multiIntegrations: true,
+          props: { alertFields },
+        });
 
         const integrationName = 'Test integration';
         await selectOptionAtIndex(1);
@@ -275,6 +282,7 @@ describe('AlertsSettingsFormNew', () => {
           currentIntegration: {
             type: typeSet.http,
           },
+          alertFields,
         },
       });
     });
@@ -347,18 +355,27 @@ describe('AlertsSettingsFormNew', () => {
 
   describe('Mapping builder section', () => {
     describe.each`
-      featureFlag | integrationOption | visible
-      ${true}     | ${1}              | ${true}
-      ${true}     | ${2}              | ${false}
-      ${false}    | ${1}              | ${false}
-      ${false}    | ${2}              | ${false}
-    `('', ({ featureFlag, integrationOption, visible }) => {
+      alertFieldsProvided | multiIntegrations | featureFlag | integrationOption | visible
+      ${true}             | ${true}           | ${true}     | ${1}              | ${true}
+      ${true}             | ${true}           | ${true}     | ${2}              | ${false}
+      ${true}             | ${true}           | ${false}    | ${1}              | ${false}
+      ${true}             | ${true}           | ${false}    | ${2}              | ${false}
+      ${true}             | ${false}          | ${true}     | ${1}              | ${false}
+      ${false}            | ${true}           | ${true}     | ${1}              | ${false}
+    `('', ({ alertFieldsProvided, multiIntegrations, featureFlag, integrationOption, visible }) => {
       const visibleMsg = visible ? 'is rendered' : 'is not rendered';
       const featureFlagMsg = featureFlag ? 'is enabled' : 'is disabled';
+      const alertFieldsMsg = alertFieldsProvided ? 'are provided' : 'are not provided';
       const integrationType = integrationOption === 1 ? typeSet.http : typeSet.prometheus;
 
-      it(`${visibleMsg} when multipleHttpIntegrationsCustomMapping feature flag ${featureFlagMsg} and integration type is ${integrationType}`, async () => {
-        createComponent({ multipleHttpIntegrationsCustomMapping: featureFlag });
+      it(`${visibleMsg} when multipleHttpIntegrationsCustomMapping feature flag ${featureFlagMsg} and integration type is ${integrationType} and alert fields ${alertFieldsMsg}`, async () => {
+        createComponent({
+          multipleHttpIntegrationsCustomMapping: featureFlag,
+          multiIntegrations,
+          props: {
+            alertFields: alertFieldsProvided ? alertFields : [],
+          },
+        });
         await selectOptionAtIndex(integrationOption);
 
         expect(findMappingBuilderSection().exists()).toBe(visible);
diff --git a/spec/frontend/alerts_settings/mocks/alertFields.json b/spec/frontend/alerts_settings/mocks/alertFields.json
new file mode 100644
index 00000000000..ffe59dd0c05
--- /dev/null
+++ b/spec/frontend/alerts_settings/mocks/alertFields.json
@@ -0,0 +1,123 @@
+[
+  {
+    "name": "title",
+    "label": "Title",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ],
+    "numberOfFallbacks": 1
+  },
+  {
+    "name": "description",
+    "label": "Description",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "start_time",
+    "label": "Start time",
+    "type": [
+      "datetime"
+    ],
+    "types": [
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "end_time",
+    "label": "End time",
+    "type": [
+      "datetime"
+    ],
+    "types": [
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "service",
+    "label": "Service",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "monitoring_tool",
+    "label": "Monitoring tool",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "hosts",
+    "label": "Hosts",
+    "type": [
+      "string",
+      "ARRAY"
+    ],
+    "types": [
+      "string",
+      "ARRAY",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "severity",
+    "label": "Severity",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "fingerprint",
+    "label": "Fingerprint",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "gitlab_environment_name",
+    "label": "Environment",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  }
+]
diff --git a/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js b/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js
index f725712fdd2..f8d2a7aa23b 100644
--- a/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js
+++ b/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js
@@ -3,24 +3,23 @@ import {
   getPayloadFields,
   transformForSave,
 } from '~/alerts_settings/utils/mapping_transformations';
-import gitlabFieldsMock from '~/alerts_settings/components/mocks/gitlabFields.json';
 import parsedMapping from '~/alerts_settings/components/mocks/parsedMapping.json';
+import alertFields from '../mocks/alertFields.json';
 
 describe('Mapping Transformation Utilities', () => {
   const nameField = {
     label: 'Name',
     path: ['alert', 'name'],
-    type: 'STRING',
+    type: 'string',
   };
   const dashboardField = {
     label: 'Dashboard Id',
     path: ['alert', 'dashboardId'],
-    type: 'STRING',
+    type: 'string',
   };
 
   describe('getMappingData', () => {
     it('should return mapping data', () => {
-      const alertFields = gitlabFieldsMock.slice(0, 3);
       const result = getMappingData(
         alertFields,
         getPayloadFields(parsedMapping.samplePayload.payloadAlerFields.nodes.slice(0, 3)),
@@ -51,7 +50,9 @@ describe('Mapping Transformation Utilities', () => {
       ];
       const result = transformForSave(mockMappingData);
       const { path, type, label } = nameField;
-      expect(result).toEqual([{ fieldName, path, type, label }]);
+      expect(result).toEqual([
+        { fieldName: fieldName.toUpperCase(), path, type: type.toUpperCase(), label },
+      ]);
     });
 
     it('should return empty array if no mapping provided', () => {