diff options
Diffstat (limited to 'app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue')
-rw-r--r-- | app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue | 43 |
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> |