Add latest changes from gitlab-org/gitlab@master

6 files changed, 70 insertions, 40 deletions

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 f24c52f61da..9420480e35a 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -58,6 +58,11 @@ export default {
       required: false,
       default: false,
     },
+    currentIntegration: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   fields: [
     {
@@ -82,17 +87,16 @@ export default {
       integrationToDelete: integrationToDeleteDefault,
     };
   },
-  computed: {
-    tbodyTrClass() {
-      return {
-        [bodyTrClass]: this.integrations.length,
-      };
-    },
-  },
   mounted() {
     this.trackPageViews();
   },
   methods: {
+    tbodyTrClass(item) {
+      return {
+        [bodyTrClass]: this.integrations.length,
+        'gl-bg-blue-50': item?.id === this.currentIntegration?.id,
+      };
+    },
     trackPageViews() {
       const { category, action } = trackAlertIntegrationsViewsOptions;
       Tracking.event(category, action);
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 946da8ef34c..a08100f3938 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
@@ -33,6 +33,9 @@ export default {
       step1: {
         label: s__('AlertSettings|1. Select integration type'),
         help: s__('AlertSettings|Learn more about our upcoming %{linkStart}integrations%{linkEnd}'),
+        enterprise: s__(
+          'AlertSettings|In free versions of GitLab, only one integration for each type can be added. %{linkStart}Upgrade your subscription%{linkEnd} to add additional integrations.',
+        ),
       },
       step2: {
         label: s__('AlertSettings|2. Name integration'),
@@ -107,6 +110,10 @@ export default {
       required: false,
       default: null,
     },
+    canAddIntegration: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -236,15 +243,24 @@ export default {
     >
       <gl-form-select
         v-model="selectedIntegration"
-        :disabled="currentIntegration !== null"
+        :disabled="currentIntegration !== null || !canAddIntegration"
         :options="options"
         @change="integrationTypeSelect"
       />
 
-      <alert-settings-form-help-block
-        :message="$options.i18n.integrationFormSteps.step1.help"
-        link="https://gitlab.com/groups/gitlab-org/-/epics/4390"
-      />
+      <div class="gl-my-4">
+        <alert-settings-form-help-block
+          :message="$options.i18n.integrationFormSteps.step1.help"
+          link="https://gitlab.com/groups/gitlab-org/-/epics/4390"
+        />
+      </div>
+
+      <div v-if="!canAddIntegration" class="gl-my-4" data-testid="multi-integrations-not-supported">
+        <alert-settings-form-help-block
+          :message="$options.i18n.integrationFormSteps.step1.enterprise"
+          link="https://about.gitlab.com/pricing"
+        />
+      </div>
     </gl-form-group>
     <gl-collapse v-model="formVisible" class="gl-mt-3">
       <gl-form-group
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 e9e7b1407bc..57fc1984990 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -19,6 +19,12 @@ import {
   updateStoreAfterIntegrationDelete,
   updateStoreAfterIntegrationAdd,
 } from '../utils/cache_updates';
+import {
+  DELETE_INTEGRATION_ERROR,
+  ADD_INTEGRATION_ERROR,
+  RESET_INTEGRATION_TOKEN_ERROR,
+  UPDATE_INTEGRATION_ERROR,
+} from '../utils/error_messages';
 
 export default {
   typeSet,
@@ -44,6 +50,9 @@ export default {
     projectPath: {
       default: '',
     },
+    multiIntegrations: {
+      default: false,
+    },
   },
   apollo: {
     integrations: {
@@ -91,6 +100,9 @@ export default {
         },
       ];
     },
+    canAddIntegration() {
+      return this.multiIntegrations || this.integrations?.list?.length < 2;
+    },
   },
   methods: {
     createNewIntegration({ type, variables }) {
@@ -121,8 +133,8 @@ export default {
             type: FLASH_TYPES.SUCCESS,
           });
         })
-        .catch(err => {
-          createFlash({ message: err });
+        .catch(() => {
+          createFlash({ message: ADD_INTEGRATION_ERROR });
         })
         .finally(() => {
           this.isUpdating = false;
@@ -151,8 +163,8 @@ export default {
             type: FLASH_TYPES.SUCCESS,
           });
         })
-        .catch(err => {
-          createFlash({ message: err });
+        .catch(() => {
+          createFlash({ message: UPDATE_INTEGRATION_ERROR });
         })
         .finally(() => {
           this.isUpdating = false;
@@ -187,8 +199,8 @@ export default {
             });
           },
         )
-        .catch(err => {
-          createFlash({ message: err });
+        .catch(() => {
+          createFlash({ message: RESET_INTEGRATION_TOKEN_ERROR });
         })
         .finally(() => {
           this.isUpdating = false;
@@ -222,9 +234,8 @@ export default {
             type: FLASH_TYPES.SUCCESS,
           });
         })
-        .catch(err => {
-          this.errored = true;
-          createFlash({ message: err });
+        .catch(() => {
+          createFlash({ message: DELETE_INTEGRATION_ERROR });
         })
         .finally(() => {
           this.isUpdating = false;
@@ -242,6 +253,7 @@ export default {
     <integrations-list
       :integrations="glFeatures.httpIntegrationsList ? integrations.list : intergrationsOptionsOld"
       :loading="loading"
+      :current-integration="currentIntegration"
       @edit-integration="editIntegration"
       @delete-integration="deleteIntegration"
     />
@@ -249,6 +261,7 @@ export default {
       v-if="glFeatures.httpIntegrationsList"
       :loading="isUpdating"
       :current-integration="currentIntegration"
+      :can-add-integration="canAddIntegration"
       @create-new-integration="createNewIntegration"
       @update-integration="updateIntegration"
       @reset-token="resetToken"
diff --git a/app/assets/javascripts/alerts_settings/constants.js b/app/assets/javascripts/alerts_settings/constants.js
index 9cf2f356e0a..19eaccf05fc 100644
--- a/app/assets/javascripts/alerts_settings/constants.js
+++ b/app/assets/javascripts/alerts_settings/constants.js
@@ -57,15 +57,6 @@ export const typeSet = {
   prometheus: 'PROMETHEUS',
 };
 
-export const defaultFormState = {
-  name: '',
-  active: false,
-  token: '',
-  url: '',
-  apiUrl: '',
-  integrationTestPayload: { json: null, error: null },
-};
-
 export const integrationToDeleteDefault = { id: null, name: '' };
 
 export const JSON_VALIDATE_DELAY = 250;
diff --git a/app/assets/javascripts/alerts_settings/index.js b/app/assets/javascripts/alerts_settings/index.js
index 2ae0dd447a1..a9d109b3f3e 100644
--- a/app/assets/javascripts/alerts_settings/index.js
+++ b/app/assets/javascripts/alerts_settings/index.js
@@ -29,19 +29,16 @@ export default el => {
     opsgenieMvcEnabled,
     opsgenieMvcTargetUrl,
     projectPath,
+    multiIntegrations,
   } = el.dataset;
 
-  const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(
-      {},
-      {
-        cacheConfig: {},
-      },
-    ),
-  });
+  const resolvers = {};
 
-  apolloProvider.clients.defaultClient.cache.writeData({
-    data: {},
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(resolvers, {
+      cacheConfig: {},
+      assumeImmutableResults: true,
+    }),
   });
 
   return new Vue({
@@ -70,6 +67,7 @@ export default el => {
         opsgenieMvcIsAvailable: parseBoolean(opsgenieMvcAvailable),
       },
       projectPath,
+      multiIntegrations: parseBoolean(multiIntegrations),
     },
     apolloProvider,
     components: {
diff --git a/app/assets/javascripts/alerts_settings/utils/error_messages.js b/app/assets/javascripts/alerts_settings/utils/error_messages.js
index 2e6058fc81a..7df5d444a53 100644
--- a/app/assets/javascripts/alerts_settings/utils/error_messages.js
+++ b/app/assets/javascripts/alerts_settings/utils/error_messages.js
@@ -7,3 +7,11 @@ export const DELETE_INTEGRATION_ERROR = s__(
 export const ADD_INTEGRATION_ERROR = s__(
   'AlertsIntegrations|The integration could not be added. Please try again.',
 );
+
+export const UPDATE_INTEGRATION_ERROR = s__(
+  'AlertsIntegrations|The current integration could not be updated. Please try again.',
+);
+
+export const RESET_INTEGRATION_TOKEN_ERROR = s__(
+  'AlertsIntegrations|The integration token could not be reset. Please try again.',
+);