1 files changed, 25 insertions, 14 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