Add latest changes from gitlab-org/gitlab@master

9 files changed, 211 insertions, 106 deletions

diff --git a/spec/frontend/alerts_settings/__snapshots__/alerts_settings_form_spec.js.snap b/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap
index ef68a6a2c32..ef68a6a2c32 100644
--- a/spec/frontend/alerts_settings/__snapshots__/alerts_settings_form_spec.js.snap
+++ b/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap
diff --git a/spec/frontend/alerts_settings/alert_mapping_builder_spec.js b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
index 5d48ff02e35..92ea8b2f33c 100644
--- a/spec/frontend/alerts_settings/alert_mapping_builder_spec.js
+++ b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
@@ -3,6 +3,8 @@ 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';
 
 describe('AlertMappingBuilder', () => {
   let wrapper;
@@ -10,8 +12,8 @@ describe('AlertMappingBuilder', () => {
   function mountComponent() {
     wrapper = shallowMount(AlertMappingBuilder, {
       propsData: {
-        payloadFields: parsedMapping.samplePayload.payloadAlerFields.nodes,
-        mapping: parsedMapping.storedMapping.nodes,
+        parsedPayload: parsedMapping.samplePayload.payloadAlerFields.nodes,
+        savedMapping: parsedMapping.storedMapping.nodes,
       },
     });
   }
@@ -44,7 +46,8 @@ describe('AlertMappingBuilder', () => {
   it('renders disabled form input for each mapped field', () => {
     gitlabFields.forEach((field, index) => {
       const input = findColumnInRow(index + 1, 0).find(GlFormInput);
-      expect(input.attributes('value')).toBe(`${field.label} (${field.type.join(' or ')})`);
+      const types = field.type.map((t) => capitalizeFirstCharacter(t.toLowerCase())).join(' or ');
+      expect(input.attributes('value')).toBe(`${field.label} (${types})`);
       expect(input.attributes('disabled')).toBe('');
     });
   });
@@ -59,16 +62,14 @@ describe('AlertMappingBuilder', () => {
   it('renders mapping dropdown for each field', () => {
     gitlabFields.forEach(({ compatibleTypes }, index) => {
       const dropdown = findColumnInRow(index + 1, 2).find(GlDropdown);
-      const searchBox = dropdown.find(GlSearchBoxByType);
-      const dropdownItems = dropdown.findAll(GlDropdownItem);
+      const searchBox = dropdown.findComponent(GlSearchBoxByType);
+      const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
       const { nodes } = parsedMapping.samplePayload.payloadAlerFields;
-      const numberOfMappingOptions = nodes.filter(({ type }) =>
-        type.some((t) => compatibleTypes.includes(t)),
-      );
+      const mappingOptions = nodes.filter(({ type }) => compatibleTypes.includes(type));
 
       expect(dropdown.exists()).toBe(true);
       expect(searchBox.exists()).toBe(true);
-      expect(dropdownItems).toHaveLength(numberOfMappingOptions.length);
+      expect(dropdownItems).toHaveLength(mappingOptions.length);
     });
   });
 
@@ -78,16 +79,23 @@ describe('AlertMappingBuilder', () => {
       expect(dropdown.exists()).toBe(Boolean(numberOfFallbacks));
 
       if (numberOfFallbacks) {
-        const searchBox = dropdown.find(GlSearchBoxByType);
-        const dropdownItems = dropdown.findAll(GlDropdownItem);
+        const searchBox = dropdown.findComponent(GlSearchBoxByType);
+        const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
         const { nodes } = parsedMapping.samplePayload.payloadAlerFields;
-        const numberOfMappingOptions = nodes.filter(({ type }) =>
-          type.some((t) => compatibleTypes.includes(t)),
-        );
+        const mappingOptions = nodes.filter(({ type }) => compatibleTypes.includes(type));
 
         expect(searchBox.exists()).toBe(Boolean(numberOfFallbacks));
-        expect(dropdownItems).toHaveLength(numberOfMappingOptions.length);
+        expect(dropdownItems).toHaveLength(mappingOptions.length);
       }
     });
   });
+
+  it('emits event with selected mapping', () => {
+    const mappingToSave = { fieldName: 'TITLE', mapping: 'PARSED_TITLE' };
+    jest.spyOn(transformationUtils, 'transformForSave').mockReturnValue(mappingToSave);
+    const dropdown = findColumnInRow(1, 2).find(GlDropdown);
+    const option = dropdown.find(GlDropdownItem);
+    option.vm.$emit('click');
+    expect(wrapper.emitted('onMappingUpdate')[0]).toEqual([mappingToSave]);
+  });
 });
diff --git a/spec/frontend/alerts_settings/alerts_integrations_list_spec.js b/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
index 5a3874d055b..5a3874d055b 100644
--- a/spec/frontend/alerts_settings/alerts_integrations_list_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
diff --git a/spec/frontend/alerts_settings/alerts_settings_form_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
index 21cdec6f94c..4f8983b1aca 100644
--- a/spec/frontend/alerts_settings/alerts_settings_form_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
@@ -9,6 +9,7 @@ import {
 } from '@gitlab/ui';
 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 { defaultAlertSettingsConfig } from './util';
 import { typeSet } from '~/alerts_settings/constants';
 
@@ -49,6 +50,7 @@ describe('AlertsSettingsFormNew', () => {
   const findFormToggle = () => wrapper.find(GlToggle);
   const findTestPayloadSection = () => wrapper.find(`[id = "test-integration"]`);
   const findMappingBuilderSection = () => wrapper.find(`[id = "mapping-builder"]`);
+  const findMappingBuilder = () => wrapper.findComponent(MappingBuilder);
   const findSubmitButton = () => wrapper.find(`[type = "submit"]`);
   const findMultiSupportText = () =>
     wrapper.find(`[data-testid="multi-integrations-not-supported"]`);
@@ -63,6 +65,16 @@ describe('AlertsSettingsFormNew', () => {
     }
   });
 
+  const selectOptionAtIndex = async (index) => {
+    const options = findSelect().findAll('option');
+    await options.at(index).setSelected();
+  };
+
+  const enableIntegration = (index, value) => {
+    findFormFields().at(index).setValue(value);
+    findFormToggle().trigger('click');
+  };
+
   describe('with default values', () => {
     beforeEach(() => {
       createComponent();
@@ -80,10 +92,7 @@ describe('AlertsSettingsFormNew', () => {
     });
 
     it('shows the rest of the form when the dropdown is used', async () => {
-      const options = findSelect().findAll('option');
-      await options.at(1).setSelected();
-
-      await wrapper.vm.$nextTick();
+      await selectOptionAtIndex(1);
 
       expect(findFormFields().at(0).isVisible()).toBe(true);
     });
@@ -96,120 +105,128 @@ describe('AlertsSettingsFormNew', () => {
 
     it('disabled the name input when the selected value is prometheus', async () => {
       createComponent();
-      const options = findSelect().findAll('option');
-      await options.at(2).setSelected();
+      await selectOptionAtIndex(2);
 
       expect(findFormFields().at(0).attributes('disabled')).toBe('disabled');
     });
   });
 
   describe('submitting integration form', () => {
-    it('allows for create-new-integration with the correct form values for HTTP', async () => {
-      createComponent();
+    describe('HTTP', () => {
+      it('create', async () => {
+        createComponent();
 
-      const options = findSelect().findAll('option');
-      await options.at(1).setSelected();
+        const integrationName = 'Test integration';
+        await selectOptionAtIndex(1);
+        enableIntegration(0, integrationName);
 
-      await findFormFields().at(0).setValue('Test integration');
-      await findFormToggle().trigger('click');
+        const submitBtn = findSubmitButton();
+        expect(submitBtn.exists()).toBe(true);
+        expect(submitBtn.text()).toBe('Save integration');
 
-      await wrapper.vm.$nextTick();
-
-      expect(findSubmitButton().exists()).toBe(true);
-      expect(findSubmitButton().text()).toBe('Save integration');
-
-      findForm().trigger('submit');
+        findForm().trigger('submit');
 
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted('create-new-integration')).toBeTruthy();
-      expect(wrapper.emitted('create-new-integration')[0]).toEqual([
-        { type: typeSet.http, variables: { name: 'Test integration', active: true } },
-      ]);
-    });
+        expect(wrapper.emitted('create-new-integration')[0]).toEqual([
+          { type: typeSet.http, variables: { name: integrationName, active: true } },
+        ]);
+      });
 
-    it('allows for create-new-integration with the correct form values for PROMETHEUS', async () => {
-      createComponent();
+      it('create with custom mapping', async () => {
+        createComponent({ multipleHttpIntegrationsCustomMapping: true });
 
-      const options = findSelect().findAll('option');
-      await options.at(2).setSelected();
+        const integrationName = 'Test integration';
+        await selectOptionAtIndex(1);
 
-      await findFormFields().at(0).setValue('Test integration');
-      await findFormFields().at(1).setValue('https://test.com');
-      await findFormToggle().trigger('click');
+        enableIntegration(0, integrationName);
 
-      await wrapper.vm.$nextTick();
+        const sampleMapping = { field: 'test' };
+        findMappingBuilder().vm.$emit('onMappingUpdate', sampleMapping);
+        findForm().trigger('submit');
 
-      expect(findSubmitButton().exists()).toBe(true);
-      expect(findSubmitButton().text()).toBe('Save integration');
+        expect(wrapper.emitted('create-new-integration')[0]).toEqual([
+          {
+            type: typeSet.http,
+            variables: {
+              name: integrationName,
+              active: true,
+              payloadAttributeMappings: sampleMapping,
+              payloadExample: null,
+            },
+          },
+        ]);
+      });
 
-      findForm().trigger('submit');
+      it('update', () => {
+        createComponent({
+          data: {
+            selectedIntegration: typeSet.http,
+            currentIntegration: { id: '1', name: 'Test integration pre' },
+          },
+          props: {
+            loading: false,
+          },
+        });
+        const updatedIntegrationName = 'Test integration post';
+        enableIntegration(0, updatedIntegrationName);
 
-      await wrapper.vm.$nextTick();
+        const submitBtn = findSubmitButton();
+        expect(submitBtn.exists()).toBe(true);
+        expect(submitBtn.text()).toBe('Save integration');
 
-      expect(wrapper.emitted('create-new-integration')).toBeTruthy();
-      expect(wrapper.emitted('create-new-integration')[0]).toEqual([
-        { type: typeSet.prometheus, variables: { apiUrl: 'https://test.com', active: true } },
-      ]);
-    });
+        findForm().trigger('submit');
 
-    it('allows for update-integration with the correct form values for HTTP', async () => {
-      createComponent({
-        data: {
-          selectedIntegration: typeSet.http,
-          currentIntegration: { id: '1', name: 'Test integration pre' },
-        },
-        props: {
-          loading: false,
-        },
+        expect(wrapper.emitted('update-integration')[0]).toEqual([
+          { type: typeSet.http, variables: { name: updatedIntegrationName, active: true } },
+        ]);
       });
+    });
 
-      await findFormFields().at(0).setValue('Test integration post');
-      await findFormToggle().trigger('click');
+    describe('PROMETHEUS', () => {
+      it('create', async () => {
+        createComponent();
 
-      await wrapper.vm.$nextTick();
+        await selectOptionAtIndex(2);
 
-      expect(findSubmitButton().exists()).toBe(true);
-      expect(findSubmitButton().text()).toBe('Save integration');
+        const apiUrl = 'https://test.com';
+        enableIntegration(1, apiUrl);
 
-      findForm().trigger('submit');
+        findFormToggle().trigger('click');
 
-      await wrapper.vm.$nextTick();
+        const submitBtn = findSubmitButton();
+        expect(submitBtn.exists()).toBe(true);
+        expect(submitBtn.text()).toBe('Save integration');
 
-      expect(wrapper.emitted('update-integration')).toBeTruthy();
-      expect(wrapper.emitted('update-integration')[0]).toEqual([
-        { type: typeSet.http, variables: { name: 'Test integration post', active: true } },
-      ]);
-    });
+        findForm().trigger('submit');
 
-    it('allows for update-integration with the correct form values for PROMETHEUS', async () => {
-      createComponent({
-        data: {
-          selectedIntegration: typeSet.prometheus,
-          currentIntegration: { id: '1', apiUrl: 'https://test-pre.com' },
-        },
-        props: {
-          loading: false,
-        },
+        expect(wrapper.emitted('create-new-integration')[0]).toEqual([
+          { type: typeSet.prometheus, variables: { apiUrl, active: true } },
+        ]);
       });
 
-      await findFormFields().at(0).setValue('Test integration');
-      await findFormFields().at(1).setValue('https://test-post.com');
-      await findFormToggle().trigger('click');
-
-      await wrapper.vm.$nextTick();
+      it('update', () => {
+        createComponent({
+          data: {
+            selectedIntegration: typeSet.prometheus,
+            currentIntegration: { id: '1', apiUrl: 'https://test-pre.com' },
+          },
+          props: {
+            loading: false,
+          },
+        });
 
-      expect(findSubmitButton().exists()).toBe(true);
-      expect(findSubmitButton().text()).toBe('Save integration');
+        const apiUrl = 'https://test-post.com';
+        enableIntegration(1, apiUrl);
 
-      findForm().trigger('submit');
+        const submitBtn = findSubmitButton();
+        expect(submitBtn.exists()).toBe(true);
+        expect(submitBtn.text()).toBe('Save integration');
 
-      await wrapper.vm.$nextTick();
+        findForm().trigger('submit');
 
-      expect(wrapper.emitted('update-integration')).toBeTruthy();
-      expect(wrapper.emitted('update-integration')[0]).toEqual([
-        { type: typeSet.prometheus, variables: { apiUrl: 'https://test-post.com', active: true } },
-      ]);
+        expect(wrapper.emitted('update-integration')[0]).toEqual([
+          { type: typeSet.prometheus, variables: { apiUrl, active: true } },
+        ]);
+      });
     });
   });
 
@@ -234,9 +251,10 @@ describe('AlertsSettingsFormNew', () => {
       jest.runAllTimers();
       await wrapper.vm.$nextTick();
 
-      expect(findJsonTestSubmit().exists()).toBe(true);
-      expect(findJsonTestSubmit().text()).toBe('Save and test payload');
-      expect(findJsonTestSubmit().props('disabled')).toBe(true);
+      const jsonTestSubmit = findJsonTestSubmit();
+      expect(jsonTestSubmit.exists()).toBe(true);
+      expect(jsonTestSubmit.text()).toBe('Save and test payload');
+      expect(jsonTestSubmit.props('disabled')).toBe(true);
     });
 
     it('should allow for the form to be automatically saved if the test payload is successfully submitted', async () => {
@@ -341,9 +359,8 @@ describe('AlertsSettingsFormNew', () => {
 
       it(`${visibleMsg} when multipleHttpIntegrationsCustomMapping feature flag ${featureFlagMsg} and integration type is ${integrationType}`, async () => {
         createComponent({ multipleHttpIntegrationsCustomMapping: featureFlag });
-        const options = findSelect().findAll('option');
-        options.at(integrationOption).setSelected();
-        await wrapper.vm.$nextTick();
+        await selectOptionAtIndex(integrationOption);
+
         expect(findMappingBuilderSection().exists()).toBe(visible);
       });
     });
diff --git a/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
index 4d0732ca76c..4d0732ca76c 100644
--- a/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
diff --git a/spec/frontend/alerts_settings/mocks/apollo_mock.js b/spec/frontend/alerts_settings/components/mocks/apollo_mock.js
index e0eba1e8421..e0eba1e8421 100644
--- a/spec/frontend/alerts_settings/mocks/apollo_mock.js
+++ b/spec/frontend/alerts_settings/components/mocks/apollo_mock.js
diff --git a/spec/frontend/alerts_settings/mocks/integrations.json b/spec/frontend/alerts_settings/components/mocks/integrations.json
index b1284fc55a2..b1284fc55a2 100644
--- a/spec/frontend/alerts_settings/mocks/integrations.json
+++ b/spec/frontend/alerts_settings/components/mocks/integrations.json
diff --git a/spec/frontend/alerts_settings/util.js b/spec/frontend/alerts_settings/components/util.js
index 5c07f22f1c9..5c07f22f1c9 100644
--- a/spec/frontend/alerts_settings/util.js
+++ b/spec/frontend/alerts_settings/components/util.js
diff --git a/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js b/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js
new file mode 100644
index 00000000000..f725712fdd2
--- /dev/null
+++ b/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js
@@ -0,0 +1,80 @@
+import {
+  getMappingData,
+  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';
+
+describe('Mapping Transformation Utilities', () => {
+  const nameField = {
+    label: 'Name',
+    path: ['alert', 'name'],
+    type: 'STRING',
+  };
+  const dashboardField = {
+    label: 'Dashboard Id',
+    path: ['alert', 'dashboardId'],
+    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)),
+        parsedMapping.storedMapping.nodes.slice(0, 3),
+      );
+
+      result.forEach((data, index) => {
+        expect(data).toEqual(
+          expect.objectContaining({
+            ...alertFields[index],
+            searchTerm: '',
+            fallbackSearchTerm: '',
+          }),
+        );
+      });
+    });
+  });
+
+  describe('transformForSave', () => {
+    it('should transform mapped data for save', () => {
+      const fieldName = 'title';
+      const mockMappingData = [
+        {
+          name: fieldName,
+          mapping: 'alert_name',
+          mappingFields: getPayloadFields([dashboardField, nameField]),
+        },
+      ];
+      const result = transformForSave(mockMappingData);
+      const { path, type, label } = nameField;
+      expect(result).toEqual([{ fieldName, path, type, label }]);
+    });
+
+    it('should return empty array if no mapping provided', () => {
+      const fieldName = 'title';
+      const mockMappingData = [
+        {
+          name: fieldName,
+          mapping: null,
+          mappingFields: getPayloadFields([nameField, dashboardField]),
+        },
+      ];
+      const result = transformForSave(mockMappingData);
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('getPayloadFields', () => {
+    it('should add name field to each payload field', () => {
+      const result = getPayloadFields([nameField, dashboardField]);
+      expect(result).toEqual([
+        { ...nameField, name: 'alert_name' },
+        { ...dashboardField, name: 'alert_dashboardId' },
+      ]);
+    });
+  });
+});