Add latest changes from gitlab-org/gitlab@master

5 files changed, 287 insertions, 1 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
new file mode 100644
index 00000000000..fd65d29a0f5
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue
@@ -0,0 +1,188 @@
+<script>
+import Vue from 'vue';
+import {
+  GlIcon,
+  GlFormInput,
+  GlDropdown,
+  GlDropdownItem,
+  GlSearchBoxByType,
+  GlTooltipDirective as GlTooltip,
+} from '@gitlab/ui';
+import { s__, __ } from '~/locale';
+// Mocks will be removed when integrating with BE is ready
+// data format most likely will differ but UI will not
+// feature rollout plan - https://gitlab.com/gitlab-org/gitlab/-/issues/262707#note_442529171
+import gitlabFields from './mocks/gitlabFields.json';
+import parsedMapping from './mocks/parsedMapping.json';
+
+export const i18n = {
+  columns: {
+    gitlabKeyTitle: s__('AlertMappingBuilder|GitLab alert key'),
+    payloadKeyTitle: s__('AlertMappingBuilder|Payload alert key'),
+    fallbackKeyTitle: s__('AlertMappingBuilder|Define fallback'),
+  },
+  selectMappingKey: s__('AlertMappingBuilder|Select key'),
+  makeSelection: s__('AlertMappingBuilder|Make selection'),
+  fallbackTooltip: s__(
+    'AlertMappingBuilder|Title is a required field for alerts in GitLab. Should the payload field you specified not be available, specifiy which field we should use instead. ',
+  ),
+  noResults: __('No matching results'),
+};
+
+export default {
+  i18n,
+  components: {
+    GlIcon,
+    GlFormInput,
+    GlDropdown,
+    GlDropdownItem,
+    GlSearchBoxByType,
+  },
+  directives: {
+    GlTooltip,
+  },
+  data() {
+    return {
+      gitlabFields,
+    };
+  },
+  computed: {
+    mappingData() {
+      return this.gitlabFields.map(gitlabField => {
+        const mappingFields = parsedMapping.filter(field => field.type === gitlabField.type);
+
+        return {
+          mapping: null,
+          fallback: null,
+          searchTerm: '',
+          fallbackSearchTerm: '',
+          mappingFields,
+          ...gitlabField,
+        };
+      });
+    },
+  },
+  methods: {
+    setMapping(gitlabKey, mappingKey, valueKey) {
+      const fieldIndex = this.gitlabFields.findIndex(field => field.key === gitlabKey);
+      const updatedField = { ...this.gitlabFields[fieldIndex], ...{ [valueKey]: mappingKey } };
+      Vue.set(this.gitlabFields, fieldIndex, updatedField);
+    },
+    setSearchTerm(search = '', searchFieldKey, gitlabKey) {
+      const fieldIndex = this.gitlabFields.findIndex(field => field.key === gitlabKey);
+      const updatedField = { ...this.gitlabFields[fieldIndex], ...{ [searchFieldKey]: search } };
+      Vue.set(this.gitlabFields, fieldIndex, updatedField);
+    },
+    filterFields(searchTerm = '', fields) {
+      const search = searchTerm.toLowerCase();
+
+      return fields.filter(field => field.label.toLowerCase().includes(search));
+    },
+    isSelected(fieldValue, mapping) {
+      return fieldValue === mapping;
+    },
+    selectedValue(key) {
+      return (
+        parsedMapping.find(item => item.key === key)?.label || this.$options.i18n.makeSelection
+      );
+    },
+    getFieldValue({ label, type }) {
+      return `${label} (${type})`;
+    },
+    noResults(searchTerm, fields) {
+      return !this.filterFields(searchTerm, fields).length;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-table gl-w-full gl-mt-5">
+    <div class="gl-display-table-row">
+      <h5 class="gl-display-table-cell gl-py-3 gl-pr-3">
+        {{ $options.i18n.columns.gitlabKeyTitle }}
+      </h5>
+      <h5 class="gl-display-table-cell gl-py-3 gl-pr-3">&nbsp;</h5>
+      <h5 class="gl-display-table-cell gl-py-3 gl-pr-3">
+        {{ $options.i18n.columns.payloadKeyTitle }}
+      </h5>
+      <h5 class="gl-display-table-cell gl-py-3 gl-pr-3">
+        {{ $options.i18n.columns.fallbackKeyTitle }}
+        <gl-icon
+          v-gl-tooltip
+          name="question"
+          class="gl-text-gray-500"
+          :title="$options.i18n.fallbackTooltip"
+        />
+      </h5>
+    </div>
+    <div v-for="gitlabField in mappingData" :key="gitlabField.key" class="gl-display-table-row">
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p">
+        <gl-form-input
+          disabled
+          :value="getFieldValue(gitlabField)"
+          class="gl-bg-transparent! gl-text-gray-900!"
+        />
+      </div>
+
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3">
+        <div class="right-arrow">
+          <i class="right-arrow-head"></i>
+        </div>
+      </div>
+
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p">
+        <gl-dropdown
+          :text="selectedValue(gitlabField.mapping)"
+          class="gl-w-full"
+          :header-text="$options.i18n.selectMappingKey"
+        >
+          <gl-search-box-by-type @input="setSearchTerm($event, 'searchTerm', gitlabField.key)" />
+          <gl-dropdown-item
+            v-for="mappingField in filterFields(gitlabField.searchTerm, gitlabField.mappingFields)"
+            :key="`${mappingField.key}__mapping`"
+            :is-checked="isSelected(gitlabField.mapping, mappingField.key)"
+            is-check-item
+            @click="setMapping(gitlabField.key, mappingField.key, 'mapping')"
+          >
+            {{ mappingField.label }}
+          </gl-dropdown-item>
+          <gl-dropdown-item v-if="noResults(gitlabField.searchTerm, gitlabField.mappingFields)">
+            >
+            {{ $options.i18n.noResults }}
+          </gl-dropdown-item>
+        </gl-dropdown>
+      </div>
+
+      <div class="gl-display-table-cell gl-py-3 w-30p">
+        <gl-dropdown
+          v-if="gitlabField.hasFallback"
+          :text="selectedValue(gitlabField.fallback)"
+          class="gl-w-full"
+          :header-text="$options.i18n.selectMappingKey"
+        >
+          <gl-search-box-by-type
+            @input="setSearchTerm($event, 'fallbackSearchTerm', gitlabField.key)"
+          />
+          <gl-dropdown-item
+            v-for="mappingField in filterFields(
+              gitlabField.fallbackSearchTerm,
+              gitlabField.mappingFields,
+            )"
+            :key="`${mappingField.key}__fallback`"
+            :is-checked="isSelected(gitlabField.fallback, mappingField.key)"
+            is-check-item
+            @click="setMapping(gitlabField.key, mappingField.key, 'fallback')"
+          >
+            {{ mappingField.label }}
+          </gl-dropdown-item>
+          <gl-dropdown-item
+            v-if="noResults(gitlabField.fallbackSearchTerm, gitlabField.mappingFields)"
+          >
+            {{ $options.i18n.noResults }}
+          </gl-dropdown-item>
+        </gl-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
index c5322c9865e..059623ba11c 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
@@ -12,6 +12,7 @@ import {
   GlModalDirective,
   GlToggle,
 } from '@gitlab/ui';
+import MappingBuilder from './alert_mapping_builder.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -84,6 +85,7 @@ export default {
     GlModal,
     GlToggle,
     AlertSettingsFormHelpBlock,
+    MappingBuilder,
   },
   directives: {
     'gl-modal': GlModalDirective,
@@ -344,7 +346,7 @@ export default {
         label-for="mapping-builder"
       >
         <span class="gl-text-gray-500">{{ $options.i18n.integrationFormSteps.step5.intro }}</span>
-        <!--mapping builder will be added here-->
+        <mapping-builder />
       </gl-form-group>
       <div class="gl-display-flex gl-justify-content-end">
         <gl-button type="reset" class="gl-mr-3 js-no-auto-disable">{{ __('Cancel') }}</gl-button>
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue
index e4ba87c4e14..0246315bdc5 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue
@@ -477,6 +477,7 @@ export default {
           max-rows="10"
         />
       </gl-form-group>
+
       <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{
         $options.i18n.testAlertInfo
       }}</gl-button>
diff --git a/app/assets/javascripts/alerts_settings/components/mocks/gitlabFields.json b/app/assets/javascripts/alerts_settings/components/mocks/gitlabFields.json
new file mode 100644
index 00000000000..42810b101be
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/components/mocks/gitlabFields.json
@@ -0,0 +1,48 @@
+[
+  {
+    "key":"title",
+    "label":"Title",
+    "type":"String",
+    "hasFallback": true
+  },
+  {
+    "key":"description",
+    "label":"Description",
+    "type":"String"
+  },
+  {
+    "key":"startTime",
+    "label":"Start time",
+    "type":"DateTime"
+  },
+  {
+    "key":"service",
+    "label":"Service",
+    "type":"String"
+  },
+  {
+    "key":"monitoringTool",
+    "label":"Monitoring tool",
+    "type":"String"
+  },
+  {
+    "key":"hosts",
+    "label":"Hosts",
+    "type":"String or Array"
+  },
+  {
+    "key":"severity",
+    "label":"Severity",
+    "type":"String"
+  },
+  {
+    "key":"fingerprint",
+    "label":"Fingerprint",
+    "type":"String"
+  },
+  {
+    "key":"environment",
+    "label":"Environment",
+    "type":"String"
+  }
+]
diff --git a/app/assets/javascripts/alerts_settings/components/mocks/parsedMapping.json b/app/assets/javascripts/alerts_settings/components/mocks/parsedMapping.json
new file mode 100644
index 00000000000..3041e7d64cf
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/components/mocks/parsedMapping.json
@@ -0,0 +1,47 @@
+[
+  {
+    "key":"title",
+    "label":"Title",
+    "type":"String"
+  },
+  {
+    "key":"description",
+    "label":"Description",
+    "type":"String"
+  },
+  {
+    "key":"startTime",
+    "label":"Start time",
+    "type":"DateTime"
+  },
+  {
+    "key":"service",
+    "label":"Service",
+    "type":"String"
+  },
+  {
+    "key":"monitoringTool",
+    "label":"Monitoring tool",
+    "type":"String"
+  },
+  {
+    "key":"hosts",
+    "label":"Hosts",
+    "type":"String or Array"
+  },
+  {
+    "key":"severity",
+    "label":"Severity",
+    "type":"String"
+  },
+  {
+    "key":"fingerprint",
+    "label":"Fingerprint",
+    "type":"String"
+  },
+  {
+    "key":"environment",
+    "label":"Environment",
+    "type":"String"
+  }
+]