1 files changed, 20 insertions, 23 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 1135562834a..07b2e59671e 100644
--- a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
+++ b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
@@ -7,15 +7,12 @@ import {
   GlSearchBoxByType,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import Vue from 'vue';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { s__, __ } from '~/locale';
-import {
-  getMappingData,
-  getPayloadFields,
-  transformForSave,
-} from '../utils/mapping_transformations';
+import { mappingFields } from '../constants';
+import { getMappingData, transformForSave } from '../utils/mapping_transformations';
 
 export const i18n = {
   columns: {
@@ -33,6 +30,7 @@ export const i18n = {
 
 export default {
   i18n,
+  mappingFields,
   components: {
     GlIcon,
     GlFormInput,
@@ -73,18 +71,15 @@ export default {
     };
   },
   computed: {
-    payloadFields() {
-      return getPayloadFields(this.parsedPayload);
-    },
     mappingData() {
-      return getMappingData(this.gitlabFields, this.payloadFields, this.savedMapping);
+      return getMappingData(this.gitlabFields, this.parsedPayload, this.savedMapping);
     },
     hasFallbackColumn() {
       return this.gitlabFields.some(({ numberOfFallbacks }) => Boolean(numberOfFallbacks));
     },
   },
   methods: {
-    setMapping(gitlabKey, mappingKey, valueKey) {
+    setMapping(gitlabKey, mappingKey, valueKey = mappingFields.mapping) {
       const fieldIndex = this.gitlabFields.findIndex((field) => field.name === gitlabKey);
       const updatedField = { ...this.gitlabFields[fieldIndex], ...{ [valueKey]: mappingKey } };
       Vue.set(this.gitlabFields, fieldIndex, updatedField);
@@ -100,11 +95,11 @@ export default {
       return fields.filter((field) => field.label.toLowerCase().includes(search));
     },
     isSelected(fieldValue, mapping) {
-      return fieldValue === mapping;
+      return isEqual(fieldValue, mapping);
     },
-    selectedValue(name) {
+    selectedValue(mapping) {
       return (
-        this.payloadFields.find((item) => item.name === name)?.label ||
+        this.parsedPayload.find((item) => isEqual(item.path, mapping))?.label ||
         this.$options.i18n.makeSelection
       );
     },
@@ -150,7 +145,7 @@ export default {
       :key="gitlabField.name"
       class="gl-display-table-row"
     >
-      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p gl-vertical-align-middle">
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3 gl-w-30p gl-vertical-align-middle">
         <gl-form-input
           aria-labelledby="gitlabFieldsHeader"
           disabled
@@ -164,7 +159,7 @@ export default {
         </div>
       </div>
 
-      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p gl-vertical-align-middle">
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3 gl-w-30p gl-vertical-align-middle">
         <gl-dropdown
           :disabled="!gitlabField.mappingFields.length"
           aria-labelledby="parsedFieldsHeader"
@@ -175,10 +170,10 @@ export default {
           <gl-search-box-by-type @input="setSearchTerm($event, 'searchTerm', gitlabField.name)" />
           <gl-dropdown-item
             v-for="mappingField in filterFields(gitlabField.searchTerm, gitlabField.mappingFields)"
-            :key="`${mappingField.name}__mapping`"
-            :is-checked="isSelected(gitlabField.mapping, mappingField.name)"
+            :key="`${mappingField.path}__mapping`"
+            :is-checked="isSelected(gitlabField.mapping, mappingField.path)"
             is-check-item
-            @click="setMapping(gitlabField.name, mappingField.name, 'mapping')"
+            @click="setMapping(gitlabField.name, mappingField.path)"
           >
             {{ mappingField.label }}
           </gl-dropdown-item>
@@ -188,7 +183,7 @@ export default {
         </gl-dropdown>
       </div>
 
-      <div class="gl-display-table-cell gl-py-3 w-30p">
+      <div class="gl-display-table-cell gl-py-3 gl-w-30p">
         <gl-dropdown
           v-if="Boolean(gitlabField.numberOfFallbacks)"
           :disabled="!gitlabField.mappingFields.length"
@@ -205,10 +200,12 @@ export default {
               gitlabField.fallbackSearchTerm,
               gitlabField.mappingFields,
             )"
-            :key="`${mappingField.name}__fallback`"
-            :is-checked="isSelected(gitlabField.fallback, mappingField.name)"
+            :key="`${mappingField.path}__fallback`"
+            :is-checked="isSelected(gitlabField.fallback, mappingField.path)"
             is-check-item
-            @click="setMapping(gitlabField.name, mappingField.name, 'fallback')"
+            @click="
+              setMapping(gitlabField.name, mappingField.path, $options.mappingFields.fallback)
+            "
           >
             {{ mappingField.label }}
           </gl-dropdown-item>