Merge branch '324047-custom-mapping-label' into 'master'

Add display label and tooltip for nested fields in mapping builder

See merge request gitlab-org/gitlab!59793

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)"

app/assets/javascripts/alerts_settings/utils/mapping_transformations.js

 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

ee/changelogs/unreleased/324047-custom-mapping-label.yml

+---
+title: Add display label and tooltip for nested fields in mapping builder
+merge_request: 59793
+author:
+type: changed

spec/frontend/alerts_settings/utils/mapping_transformations_spec.js

-import { getMappingData, transformForSave } from '~/alerts_settings/utils/mapping_transformations';
+import {
+  getMappingData,
+  setFieldsLabels,
+  transformForSave,
+} from '~/alerts_settings/utils/mapping_transformations';
 import alertFields from '../mocks/alert_fields.json';
 import parsedMapping from '../mocks/parsed_mapping.json';
 
@@ -64,4 +68,33 @@ describe('Mapping Transformation Utilities', () => {
       expect(result).toEqual([]);
     });
   });
+
+  describe('setFieldsLabels', () => {
+    const nonNestedFields = [{ label: 'title' }];
+    const nonNestedFieldsResult = { displayLabel: 'Title', tooltip: undefined };
+
+    const nestedFields = [
+      {
+        label: 'field/subfield',
+      },
+    ];
+    const nestedFieldsResult = { displayLabel: '...Subfield', tooltip: 'field.subfield' };
+
+    const nestedArrayFields = [
+      {
+        label: 'fields[1]/subfield',
+      },
+    ];
+
+    const nestedArrayFieldsResult = { displayLabel: '...Subfield', tooltip: 'fields[1].subfield' };
+
+    it.each`
+      type                     | fields               | result
+      ${'not nested field'}    | ${nonNestedFields}   | ${nonNestedFieldsResult}
+      ${'nested field'}        | ${nestedFields}      | ${nestedFieldsResult}
+      ${'nested inside array'} | ${nestedArrayFields} | ${nestedArrayFieldsResult}
+    `('adds correct displayLabel and tooltip for $type', ({ fields, result }) => {
+      expect(setFieldsLabels(fields)[0]).toMatchObject(result);
+    });
+  });
 });