diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-27 00:10:25 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-27 00:10:25 +0300 |
commit | 70cfa5e3e7e6765590a664165eac0ef00c3d05dc (patch) | |
tree | 52216b5c0b72688f14dc5b481bc86a7eb9d0acb4 /app/assets/javascripts/alerts_settings | |
parent | e7e40d45b066139707b3b851c6004e075da5226b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/alerts_settings')
-rw-r--r-- | app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue | 25 | ||||
-rw-r--r-- | app/assets/javascripts/alerts_settings/utils/mapping_transformations.js | 22 |
2 files changed, 41 insertions, 6 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 5171588eb64..2733a59f62d 100644 --- a/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue +++ b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue @@ -12,7 +12,11 @@ import Vue from 'vue'; import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; import { s__, __ } from '~/locale'; import { mappingFields } from '../constants'; -import { getMappingData, transformForSave } from '../utils/mapping_transformations'; +import { + getMappingData, + transformForSave, + setFieldsLabels, +} from '../utils/mapping_transformations'; export const i18n = { columns: { @@ -72,11 +76,14 @@ export default { }, computed: { mappingData() { - return getMappingData(this.gitlabFields, this.parsedPayload, this.savedMapping); + return getMappingData(this.gitlabFields, this.formattedParsedPayload, this.savedMapping); }, hasFallbackColumn() { return this.gitlabFields.some(({ numberOfFallbacks }) => Boolean(numberOfFallbacks)); }, + formattedParsedPayload() { + return setFieldsLabels(this.parsedPayload); + }, }, methods: { setMapping(gitlabKey, mappingKey, valueKey = mappingFields.mapping) { @@ -92,14 +99,16 @@ export default { }, filterFields(searchTerm = '', fields) { const search = searchTerm.toLowerCase(); - return fields.filter((field) => field.label.toLowerCase().includes(search)); + return fields.filter((field) => + field.displayLabel.replace('...', '').toLowerCase().includes(search), + ); }, isSelected(fieldValue, mapping) { return isEqual(fieldValue, mapping); }, selectedValue(mapping) { return ( - this.parsedPayload.find((item) => isEqual(item.path, mapping))?.label || + this.formattedParsedPayload.find((item) => isEqual(item.path, mapping))?.displayLabel || this.$options.i18n.makeSelection ); }, @@ -167,11 +176,13 @@ export default { <gl-dropdown-item v-for="mappingField in filterFields(gitlabField.searchTerm, gitlabField.mappingFields)" :key="`${mappingField.path}__mapping`" + v-gl-tooltip :is-checked="isSelected(gitlabField.mapping, mappingField.path)" is-check-item + :title="mappingField.tooltip" @click="setMapping(gitlabField.name, mappingField.path)" > - {{ mappingField.label }} + {{ mappingField.displayLabel }} </gl-dropdown-item> <gl-dropdown-item v-if="noResults(gitlabField.searchTerm, gitlabField.mappingFields)"> {{ $options.i18n.noResults }} @@ -197,13 +208,15 @@ export default { gitlabField.mappingFields, )" :key="`${mappingField.path}__fallback`" + v-gl-tooltip :is-checked="isSelected(gitlabField.fallback, mappingField.path)" is-check-item + :title="mappingField.tooltip" @click=" setMapping(gitlabField.name, mappingField.path, $options.mappingFields.fallback) " > - {{ mappingField.label }} + {{ mappingField.displayLabel }} </gl-dropdown-item> <gl-dropdown-item v-if="noResults(gitlabField.fallbackSearchTerm, gitlabField.mappingFields)" diff --git a/app/assets/javascripts/alerts_settings/utils/mapping_transformations.js b/app/assets/javascripts/alerts_settings/utils/mapping_transformations.js index 5c4b9bcd505..ed126dfafd6 100644 --- a/app/assets/javascripts/alerts_settings/utils/mapping_transformations.js +++ b/app/assets/javascripts/alerts_settings/utils/mapping_transformations.js @@ -1,4 +1,6 @@ import { isEqual } from 'lodash'; +import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; + /** * Given data for GitLab alert fields, parsed payload fields data and previously stored mapping (if any) * creates an object in a form convenient to build UI && interact with it @@ -32,6 +34,26 @@ export const getMappingData = (gitlabFields, payloadFields, savedMapping) => { }); }; +export const setFieldsLabels = (fields) => { + return fields.map((field) => { + const { label } = field; + let displayLabel; + let tooltip; + const labels = label.split('/'); + if (labels.length > 1) { + tooltip = labels.join('.'); + displayLabel = `...${capitalizeFirstCharacter(labels.pop())}`; + } else { + displayLabel = capitalizeFirstCharacter(label); + } + + return { + ...field, + displayLabel, + tooltip, + }; + }); +}; /** * Based on mapping data configured by the user creates an object in a format suitable for save on BE * @param {Object} mappingData - structure describing mapping between GitLab fields and parsed payload fields |