Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

7 files changed, 82 insertions, 91 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/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
index ef29fc5e8b4..d9e5878b9e3 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -116,7 +116,7 @@ export default {
   methods: {
     tbodyTrClass(item) {
       return {
-        [bodyTrClass]: this.integrations.length,
+        [bodyTrClass]: this.integrations?.length,
         'gl-bg-blue-50': (item !== null && item.id) === this.currentIntegration?.id,
       };
     },
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
index f51c8d7e9f7..3917e4c5fdd 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -14,13 +14,12 @@ import updateCurrentHttpIntegrationMutation from '../graphql/mutations/update_cu
 import updateCurrentPrometheusIntegrationMutation from '../graphql/mutations/update_current_prometheus_integration.mutation.graphql';
 import updatePrometheusIntegrationMutation from '../graphql/mutations/update_prometheus_integration.mutation.graphql';
 import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
-import getHttpIntegrationsQuery from '../graphql/queries/get_http_integrations.query.graphql';
+import getHttpIntegrationQuery from '../graphql/queries/get_http_integration.query.graphql';
 import getIntegrationsQuery from '../graphql/queries/get_integrations.query.graphql';
 import service from '../services';
 import {
   updateStoreAfterIntegrationDelete,
   updateStoreAfterIntegrationAdd,
-  updateStoreAfterHttpIntegrationAdd,
 } from '../utils/cache_updates';
 import {
   DELETE_INTEGRATION_ERROR,
@@ -68,33 +67,8 @@ export default {
         };
       },
       update(data) {
-        const { alertManagementIntegrations: { nodes: list = [] } = {} } = data.project || {};
-
-        return {
-          list,
-        };
-      },
-      error(err) {
-        createFlash({ message: err });
-      },
-    },
-    // TODO: we'll need to update the logic to request specific http integration by its id on edit
-    // when BE adds support for it https://gitlab.com/gitlab-org/gitlab/-/issues/321674
-    // currently the request for ALL http integrations is made and on specific integration edit we search it in the list
-    httpIntegrations: {
-      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
-      query: getHttpIntegrationsQuery,
-      variables() {
-        return {
-          projectPath: this.projectPath,
-        };
-      },
-      update(data) {
-        const { alertManagementHttpIntegrations: { nodes: list = [] } = {} } = data.project || {};
-
-        return {
-          list,
-        };
+        const { alertManagementIntegrations: { nodes = [] } = {} } = data.project || {};
+        return nodes;
       },
       error(err) {
         createFlash({ message: err });
@@ -107,9 +81,9 @@ export default {
   data() {
     return {
       isUpdating: false,
-      integrations: {},
-      httpIntegrations: {},
+      integrations: [],
       currentIntegration: null,
+      currentHttpIntegration: null,
       newIntegration: null,
       formVisible: false,
       showSuccessfulCreateAlert: false,
@@ -121,7 +95,7 @@ export default {
       return this.$apollo.queries.integrations.loading;
     },
     canAddIntegration() {
-      return this.multiIntegrations || this.integrations?.list?.length < 2;
+      return this.multiIntegrations || this.integrations.length < 2;
     },
   },
   methods: {
@@ -142,11 +116,6 @@ export default {
           },
           update(store, { data }) {
             updateStoreAfterIntegrationAdd(store, getIntegrationsQuery, data, { projectPath });
-            if (isHttp) {
-              updateStoreAfterHttpIntegrationAdd(store, getHttpIntegrationsQuery, data, {
-                projectPath,
-              });
-            }
           },
         })
         .then(({ data: { httpIntegrationCreate, prometheusIntegrationCreate } = {} } = {}) => {
@@ -253,15 +222,38 @@ export default {
         });
     },
     editIntegration({ id, type }) {
-      let currentIntegration = this.integrations.list.find((integration) => integration.id === id);
-      if (this.isHttp(type)) {
-        const httpIntegrationMappingData = this.httpIntegrations.list.find(
-          (integration) => integration.id === id,
-        );
-        currentIntegration = { ...currentIntegration, ...httpIntegrationMappingData };
-      }
+      const currentIntegration = this.integrations.find((integration) => integration.id === id);
 
-      this.viewIntegration(currentIntegration, tabIndices.viewCredentials);
+      if (this.multiIntegrations && this.isHttp(type)) {
+        this.$apollo.addSmartQuery('currentHttpIntegration', {
+          query: getHttpIntegrationQuery,
+          variables() {
+            return {
+              projectPath: this.projectPath,
+              id,
+            };
+          },
+          update(data) {
+            const {
+              project: {
+                alertManagementHttpIntegrations: { nodes = [{}] },
+              },
+            } = data;
+            return nodes[0];
+          },
+          result() {
+            this.viewIntegration(
+              { ...currentIntegration, ...this.currentHttpIntegration },
+              tabIndices.viewCredentials,
+            );
+          },
+          error() {
+            createFlash({ message: DEFAULT_ERROR });
+          },
+        });
+      } else {
+        this.viewIntegration(currentIntegration, tabIndices.viewCredentials);
+      }
     },
     viewIntegration(integration, tabIndex) {
       this.$apollo
@@ -368,7 +360,7 @@ export default {
     </gl-alert>
 
     <integrations-list
-      :integrations="integrations.list"
+      :integrations="integrations"
       :loading="loading"
       @edit-integration="editIntegration"
       @delete-integration="deleteIntegration"
diff --git a/app/assets/javascripts/alerts_settings/graphql/mutations/update_current_prometheus_integration.mutation.graphql b/app/assets/javascripts/alerts_settings/graphql/mutations/update_current_prometheus_integration.mutation.graphql
index 5bd63820629..e9230812db2 100644
--- a/app/assets/javascripts/alerts_settings/graphql/mutations/update_current_prometheus_integration.mutation.graphql
+++ b/app/assets/javascripts/alerts_settings/graphql/mutations/update_current_prometheus_integration.mutation.graphql
@@ -6,7 +6,6 @@ mutation updateCurrentPrometheusIntegration(
   $type: String
   $url: String
   $apiUrl: String
-  $samplePayload: String
 ) {
   updateCurrentIntegration(
     id: $id
@@ -16,6 +15,5 @@ mutation updateCurrentPrometheusIntegration(
     type: $type
     url: $url
     apiUrl: $apiUrl
-    samplePayload: $samplePayload
   ) @client
 }
diff --git a/app/assets/javascripts/alerts_settings/graphql/queries/get_http_integrations.query.graphql b/app/assets/javascripts/alerts_settings/graphql/queries/get_http_integration.query.graphql
index 833a2d6c12f..d20a8b8334b 100644
--- a/app/assets/javascripts/alerts_settings/graphql/queries/get_http_integrations.query.graphql
+++ b/app/assets/javascripts/alerts_settings/graphql/queries/get_http_integration.query.graphql
@@ -1,9 +1,8 @@
 #import "ee_else_ce/alerts_settings/graphql/fragments/http_integration_payload_data.fragment.graphql"
 
-# TODO: this query need to accept http integration id to request a sepcific integration
-query getHttpIntegrations($projectPath: ID!) {
+query getHttpIntegration($projectPath: ID!, $id: ID) {
   project(fullPath: $projectPath) {
-    alertManagementHttpIntegrations {
+    alertManagementHttpIntegrations(id: $id) {
       nodes {
         ...HttpIntegrationPayloadData
       }
diff --git a/app/assets/javascripts/alerts_settings/utils/cache_updates.js b/app/assets/javascripts/alerts_settings/utils/cache_updates.js
index 716c709a931..a50b6515afa 100644
--- a/app/assets/javascripts/alerts_settings/utils/cache_updates.js
+++ b/app/assets/javascripts/alerts_settings/utils/cache_updates.js
@@ -58,31 +58,6 @@ const addIntegrationToStore = (
   });
 };
 
-const addHttpIntegrationToStore = (store, query, { httpIntegrationCreate }, variables) => {
-  const integration = httpIntegrationCreate?.integration;
-  if (!integration) {
-    return;
-  }
-
-  const sourceData = store.readQuery({
-    query,
-    variables,
-  });
-
-  const data = produce(sourceData, (draftData) => {
-    draftData.project.alertManagementHttpIntegrations.nodes = [
-      integration,
-      ...draftData.project.alertManagementHttpIntegrations.nodes,
-    ];
-  });
-
-  store.writeQuery({
-    query,
-    variables,
-    data,
-  });
-};
-
 const onError = (data, message) => {
   createFlash({ message });
   throw new Error(data.errors);
@@ -105,11 +80,3 @@ export const updateStoreAfterIntegrationAdd = (store, query, data, variables) =>
     addIntegrationToStore(store, query, data, variables);
   }
 };
-
-export const updateStoreAfterHttpIntegrationAdd = (store, query, data, variables) => {
-  if (hasErrors(data)) {
-    onError(data, ADD_INTEGRATION_ERROR);
-  } else {
-    addHttpIntegrationToStore(store, query, data, variables);
-  }
-};
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