Add latest changes from gitlab-org/gitlab@master

7 files changed, 70 insertions, 157 deletions

diff --git a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
index 02b1d08f9c3..66d6af6f0a4 100644
--- a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
+++ b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
@@ -8,17 +8,14 @@ import {
   GlSearchBoxByType,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
+import { cloneDeep } from 'lodash';
 import { s__, __ } from '~/locale';
-// Mocks will be removed when integrating with BE is ready
-// data format is defined and will be the same as mocked (maybe with some minor changes)
-// feature rollout plan - https://gitlab.com/gitlab-org/gitlab/-/issues/262707#note_442529171
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import {
   getMappingData,
   getPayloadFields,
   transformForSave,
 } from '../utils/mapping_transformations';
-import gitlabFieldsMock from './mocks/gitlabFields.json';
 
 export const i18n = {
   columns: {
@@ -46,12 +43,19 @@ export default {
   directives: {
     GlTooltip,
   },
-  inject: {
-    gitlabAlertFields: {
-      default: gitlabFieldsMock,
-    },
-  },
   props: {
+    alertFields: {
+      type: Array,
+      required: true,
+      validator: (fields) => {
+        return (
+          fields.length &&
+          fields.every(({ name, types, label }) => {
+            return typeof name === 'string' && Array.isArray(types) && typeof label === 'string';
+          })
+        );
+      },
+    },
     parsedPayload: {
       type: Array,
       required: false,
@@ -65,7 +69,7 @@ export default {
   },
   data() {
     return {
-      gitlabFields: this.gitlabAlertFields,
+      gitlabFields: cloneDeep(this.alertFields),
     };
   },
   computed: {
@@ -75,6 +79,9 @@ export default {
     mappingData() {
       return getMappingData(this.gitlabFields, this.payloadFields, this.savedMapping);
     },
+    hasFallbackColumn() {
+      return this.gitlabFields.some(({ numberOfFallbacks }) => Boolean(numberOfFallbacks));
+    },
   },
   methods: {
     setMapping(gitlabKey, mappingKey, valueKey) {
@@ -101,10 +108,10 @@ export default {
         this.$options.i18n.makeSelection
       );
     },
-    getFieldValue({ label, type }) {
-      const types = type.map((t) => capitalizeFirstCharacter(t.toLowerCase())).join(__(' or '));
+    getFieldValue({ label, types }) {
+      const type = types.map((t) => capitalizeFirstCharacter(t.toLowerCase())).join(__(' or '));
 
-      return `${label} (${types})`;
+      return `${label} (${type})`;
     },
     noResults(searchTerm, fields) {
       return !this.filterFields(searchTerm, fields).length;
@@ -123,7 +130,11 @@ export default {
       <h5 id="parsedFieldsHeader" class="gl-display-table-cell gl-py-3 gl-pr-3">
         {{ $options.i18n.columns.payloadKeyTitle }}
       </h5>
-      <h5 id="fallbackFieldsHeader" class="gl-display-table-cell gl-py-3 gl-pr-3">
+      <h5
+        v-if="hasFallbackColumn"
+        id="fallbackFieldsHeader"
+        class="gl-display-table-cell gl-py-3 gl-pr-3"
+      >
         {{ $options.i18n.columns.fallbackKeyTitle }}
         <gl-icon
           v-gl-tooltip
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
index df6d38efee7..cef20321ce2 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
@@ -125,6 +125,9 @@ export default {
     prometheus: {
       default: {},
     },
+    multiIntegrations: {
+      default: false,
+    },
   },
   props: {
     loading: {
@@ -135,6 +138,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    alertFields: {
+      type: Array,
+      required: false,
+      default: null,
+    },
   },
   apollo: {
     currentIntegration: {
@@ -196,8 +204,10 @@ export default {
     },
     showMappingBuilder() {
       return (
+        this.multiIntegrations &&
         this.glFeatures.multipleHttpIntegrationsCustomMapping &&
-        this.selectedIntegration === typeSet.http
+        this.selectedIntegration === typeSet.http &&
+        this.alertFields?.length
       );
     },
     parsedSamplePayload() {
@@ -558,6 +568,7 @@ export default {
           <mapping-builder
             :parsed-payload="parsedSamplePayload"
             :saved-mapping="savedMapping"
+            :alert-fields="alertFields"
             @onMappingUpdate="updateMapping"
           />
         </gl-form-group>
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
index def84f3ed94..71d094dbe6e 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -57,6 +57,13 @@ export default {
       default: false,
     },
   },
+  props: {
+    alertFields: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+  },
   apollo: {
     integrations: {
       fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
@@ -312,6 +319,7 @@ export default {
     <alert-settings-form
       :loading="isUpdating"
       :can-add-integration="canAddIntegration"
+      :alert-fields="alertFields"
       @create-new-integration="createNewIntegration"
       @update-integration="updateIntegration"
       @reset-token="resetToken"
diff --git a/app/assets/javascripts/alerts_settings/components/mocks/gitlabFields.json b/app/assets/javascripts/alerts_settings/components/mocks/gitlabFields.json
deleted file mode 100644
index e4d0e92a6f8..00000000000
--- a/app/assets/javascripts/alerts_settings/components/mocks/gitlabFields.json
+++ /dev/null
@@ -1,123 +0,0 @@
-[
-  {
-    "name": "TITLE",
-    "label": "Title",
-    "type": [
-      "STRING"
-    ],
-    "compatibleTypes": [
-      "STRING",
-      "NUMBER",
-      "DATETIME"
-    ],
-    "numberOfFallbacks": 1
-  },
-  {
-    "name": "DESCRIPTION",
-    "label": "Description",
-    "type": [
-      "STRING"
-    ],
-    "compatibleTypes": [
-      "STRING",
-      "NUMBER",
-      "DATETIME"
-    ]
-  },
-  {
-    "name": "START_TIME",
-    "label": "Start time",
-    "type": [
-      "DATETIME"
-    ],
-    "compatibleTypes": [
-      "NUMBER",
-      "DATETIME"
-    ]
-  },
-  {
-    "name": "END_TIME",
-    "label": "End time",
-    "type": [
-      "DATETIME"
-    ],
-    "compatibleTypes": [
-      "NUMBER",
-      "DATETIME"
-    ]
-  },
-  {
-    "name": "SERVICE",
-    "label": "Service",
-    "type": [
-      "STRING"
-    ],
-    "compatibleTypes": [
-      "STRING",
-      "NUMBER",
-      "DATETIME"
-    ]
-  },
-  {
-    "name": "MONITORING_TOOL",
-    "label": "Monitoring tool",
-    "type": [
-      "STRING"
-    ],
-    "compatibleTypes": [
-      "STRING",
-      "NUMBER",
-      "DATETIME"
-    ]
-  },
-  {
-    "name": "HOSTS",
-    "label": "Hosts",
-    "type": [
-      "STRING",
-      "ARRAY"
-    ],
-    "compatibleTypes": [
-      "STRING",
-      "ARRAY",
-      "NUMBER",
-      "DATETIME"
-    ]
-  },
-  {
-    "name": "SEVERITY",
-    "label": "Severity",
-    "type": [
-      "STRING"
-    ],
-    "compatibleTypes": [
-      "STRING",
-      "NUMBER",
-      "DATETIME"
-    ]
-  },
-  {
-    "name": "FINGERPRINT",
-    "label": "Fingerprint",
-    "type": [
-      "STRING"
-    ],
-    "compatibleTypes": [
-      "STRING",
-      "NUMBER",
-      "DATETIME"
-    ]
-  },
-  {
-    "name": "GITLAB_ENVIRONMENT_NAME",
-    "label": "Environment",
-    "type": [
-      "STRING"
-    ],
-    "compatibleTypes": [
-      "STRING",
-      "NUMBER",
-      "DATETIME"
-    ]
-  }
-]
diff --git a/app/assets/javascripts/alerts_settings/components/mocks/parsedMapping.json b/app/assets/javascripts/alerts_settings/components/mocks/parsedMapping.json
index c1de0d6f0e0..80fbebf2a60 100644
--- a/app/assets/javascripts/alerts_settings/components/mocks/parsedMapping.json
+++ b/app/assets/javascripts/alerts_settings/components/mocks/parsedMapping.json
@@ -6,67 +6,67 @@
         {
           "path": ["dashboardId"],
           "label": "Dashboard Id",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["evalMatches"],
           "label": "Eval Matches",
-          "type": "ARRAY"
+          "type": "array"
         },
         {
           "path": ["createdAt"],
           "label": "Created At",
-          "type": "DATETIME"
+          "type": "datetime"
         },
         {
           "path": ["imageUrl"],
           "label": "Image Url",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["message"],
           "label": "Message",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["orgId"],
           "label": "Org Id",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["panelId"],
           "label": "Panel Id",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["ruleId"],
           "label": "Rule Id",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["ruleName"],
           "label": "Rule Name",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["ruleUrl"],
           "label": "Rule Url",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["state"],
           "label": "State",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["title"],
           "label": "Title",
-          "type": "STRING"
+          "type": "string"
         },
         {
           "path": ["tags", "tag"],
           "label": "Tags",
-          "type": "STRING"
+          "type": "string"
         }
       ]
     }
diff --git a/app/assets/javascripts/alerts_settings/index.js b/app/assets/javascripts/alerts_settings/index.js
index 85858956987..973f5d4ec54 100644
--- a/app/assets/javascripts/alerts_settings/index.js
+++ b/app/assets/javascripts/alerts_settings/index.js
@@ -31,6 +31,7 @@ export default (el) => {
     url,
     projectPath,
     multiIntegrations,
+    alertFields,
   } = el.dataset;
 
   return new Vue({
@@ -60,7 +61,14 @@ export default (el) => {
     },
     apolloProvider,
     render(createElement) {
-      return createElement('alert-settings-wrapper');
+      return createElement('alert-settings-wrapper', {
+        props: {
+          alertFields:
+            gon.features?.multipleHttpIntegrationsCustomMapping && parseBoolean(multiIntegrations)
+              ? JSON.parse(alertFields)
+              : null,
+        },
+      });
     },
   });
 };
diff --git a/app/assets/javascripts/alerts_settings/utils/mapping_transformations.js b/app/assets/javascripts/alerts_settings/utils/mapping_transformations.js
index a7e43c93fbf..a86103540c0 100644
--- a/app/assets/javascripts/alerts_settings/utils/mapping_transformations.js
+++ b/app/assets/javascripts/alerts_settings/utils/mapping_transformations.js
@@ -10,9 +10,7 @@
 export const getMappingData = (gitlabFields, payloadFields, savedMapping) => {
   return gitlabFields.map((gitlabField) => {
     // find fields from payload that match gitlab alert field by type
-    const mappingFields = payloadFields.filter(({ type }) =>
-      gitlabField.compatibleTypes.includes(type),
-    );
+    const mappingFields = payloadFields.filter(({ type }) => gitlabField.types.includes(type));
 
     // find the mapping that was previously stored
     const foundMapping = savedMapping.find(({ fieldName }) => fieldName === gitlabField.name);
@@ -42,9 +40,9 @@ export const transformForSave = (mappingData) => {
     if (mapped) {
       const { path, type, label } = mapped;
       acc.push({
-        fieldName: field.name,
+        fieldName: field.name.toUpperCase(),
         path,
-        type,
+        type: type.toUpperCase(),
         label,
       });
     }