Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

5 files changed, 161 insertions, 629 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 12c0409629f..cf16750dbf8 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -11,7 +11,6 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Tracking from '~/tracking';
 import {
   trackAlertIntegrationsViewsOptions,
@@ -54,7 +53,6 @@ export default {
     GlTooltip: GlTooltipDirective,
     GlModal: GlModalDirective,
   },
-  mixins: [glFeatureFlagsMixin()],
   props: {
     integrations: {
       type: Array,
@@ -170,7 +168,7 @@ export default {
       </template>
 
       <template #cell(actions)="{ item }">
-        <gl-button-group v-if="glFeatures.httpIntegrationsList" class="gl-ml-3">
+        <gl-button-group class="gl-ml-3">
           <gl-button icon="pencil" @click="$emit('edit-integration', { id: item.id })" />
           <gl-button
             v-gl-modal.deleteIntegration
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
index 3656fc4d7ec..b2be563522a 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
@@ -32,6 +32,75 @@ import {
 // feature rollout plan - https://gitlab.com/gitlab-org/gitlab/-/issues/262707#note_442529171
 import mockedCustomMapping from './mocks/parsedMapping.json';
 
+export const i18n = {
+  integrationFormSteps: {
+    step1: {
+      label: s__('AlertSettings|1. Select integration type'),
+      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'),
+      placeholder: s__('AlertSettings|Enter integration name'),
+      prometheus: s__('AlertSettings|Prometheus'),
+    },
+    step3: {
+      label: s__('AlertSettings|3. Set up webhook'),
+      help: s__(
+        "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send alerts to GitLab. Review your external service's documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.",
+      ),
+      prometheusHelp: s__(
+        'AlertSettings|Utilize the URL and authorization key below to authorize Prometheus to send alerts to GitLab. Review the Prometheus documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.',
+      ),
+      info: s__('AlertSettings|Authorization key'),
+      reset: s__('AlertSettings|Reset Key'),
+    },
+    step4: {
+      label: s__('AlertSettings|4. Sample alert payload (optional)'),
+      help: s__(
+        'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to create a custom mapping (optional), or to test the integration (also optional).',
+      ),
+      prometheusHelp: s__(
+        'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to test the integration (optional).',
+      ),
+      placeholder: s__('AlertSettings|{ "events": [{ "application": "Name of application" }] }'),
+      resetHeader: s__('AlertSettings|Reset the mapping'),
+      resetBody: s__(
+        "AlertSettings|If you edit the payload, the stored mapping will be reset, and you'll need to re-map the fields.",
+      ),
+      resetOk: s__('AlertSettings|Proceed with editing'),
+      editPayload: s__('AlertSettings|Edit payload'),
+      submitPayload: s__('AlertSettings|Submit payload'),
+      payloadParsedSucessMsg: s__(
+        'AlertSettings|Sample payload has been parsed. You can now map the fields.',
+      ),
+    },
+    step5: {
+      label: s__('AlertSettings|5. Map fields (optional)'),
+      intro: s__(
+        "AlertSettings|If you've provided a sample alert payload, you can create a custom mapping for your endpoint. The default GitLab alert keys are listed below. Please define which payload key should map to the specified GitLab key.",
+      ),
+    },
+    prometheusFormUrl: {
+      label: s__('AlertSettings|Prometheus API base URL'),
+      help: s__('AlertSettings|URL cannot be blank and must start with http or https'),
+    },
+    restKeyInfo: {
+      label: s__(
+        'AlertSettings|Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.',
+      ),
+    },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    opsgenie: {
+      label: s__('AlertSettings|2. Add link to your Opsgenie alert list'),
+      info: s__(
+        'AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your existing Opsgenie instance. By selecting this option, you cannot receive alerts from any other source in GitLab; it will effectively be turning Alerts within GitLab off as a feature.',
+      ),
+    },
+  },
+};
+
 export default {
   placeholders: {
     prometheus: targetPrometheusUrlPlaceholder,
@@ -39,73 +108,7 @@ export default {
   },
   JSON_VALIDATE_DELAY,
   typeSet,
-  i18n: {
-    integrationFormSteps: {
-      step1: {
-        label: s__('AlertSettings|1. Select integration type'),
-        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'),
-        placeholder: s__('AlertSettings|Enter integration name'),
-      },
-      step3: {
-        label: s__('AlertSettings|3. Set up webhook'),
-        help: s__(
-          "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send alerts to GitLab. Review your external service's documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.",
-        ),
-        prometheusHelp: s__(
-          'AlertSettings|Utilize the URL and authorization key below to authorize Prometheus to send alerts to GitLab. Review the Prometheus documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.',
-        ),
-        info: s__('AlertSettings|Authorization key'),
-        reset: s__('AlertSettings|Reset Key'),
-      },
-      step4: {
-        label: s__('AlertSettings|4. Sample alert payload (optional)'),
-        help: s__(
-          'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to create a custom mapping (optional), or to test the integration (also optional).',
-        ),
-        prometheusHelp: s__(
-          'AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to test the integration (optional).',
-        ),
-        placeholder: s__('AlertSettings|{ "events": [{ "application": "Name of application" }] }'),
-        resetHeader: s__('AlertSettings|Reset the mapping'),
-        resetBody: s__(
-          "AlertSettings|If you edit the payload, the stored mapping will be reset, and you'll need to re-map the fields.",
-        ),
-        resetOk: s__('AlertSettings|Proceed with editing'),
-        editPayload: s__('AlertSettings|Edit payload'),
-        submitPayload: s__('AlertSettings|Submit payload'),
-        payloadParsedSucessMsg: s__(
-          'AlertSettings|Sample payload has been parsed. You can now map the fields.',
-        ),
-      },
-      step5: {
-        label: s__('AlertSettings|5. Map fields (optional)'),
-        intro: s__(
-          "AlertSettings|If you've provided a sample alert payload, you can create a custom mapping for your endpoint. The default GitLab alert keys are listed below. Please define which payload key should map to the specified GitLab key.",
-        ),
-      },
-      prometheusFormUrl: {
-        label: s__('AlertSettings|Prometheus API base URL'),
-        help: s__('AlertSettings|URL cannot be blank and must start with http or https'),
-      },
-      restKeyInfo: {
-        label: s__(
-          'AlertSettings|Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.',
-        ),
-      },
-      // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
-      opsgenie: {
-        label: s__('AlertSettings|2. Add link to your Opsgenie alert list'),
-        info: s__(
-          'AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your existing Opsgenie instance. By selecting this option, you cannot receive alerts from any other source in GitLab; it will effectively be turning Alerts within GitLab off as a feature.',
-        ),
-      },
-    },
-  },
+  i18n,
   components: {
     ClipboardButton,
     GlButton,
@@ -216,8 +219,12 @@ export default {
       return {
         name: this.currentIntegration?.name || '',
         active: this.currentIntegration?.active || false,
-        token: this.currentIntegration?.token || this.selectedIntegrationType.token,
-        url: this.currentIntegration?.url || this.selectedIntegrationType.url,
+        token:
+          this.currentIntegration?.token ||
+          (this.selectedIntegrationType !== this.generic ? this.selectedIntegrationType.token : ''),
+        url:
+          this.currentIntegration?.url ||
+          (this.selectedIntegrationType !== this.generic ? this.selectedIntegrationType.url : ''),
         apiUrl: this.currentIntegration?.apiUrl || '',
       };
     },
@@ -246,8 +253,23 @@ export default {
     canEditPayload() {
       return this.hasSamplePayload && !this.resetSamplePayloadConfirmed;
     },
+    isResetAuthKeyDisabled() {
+      return !this.active && !this.integrationForm.token !== '';
+    },
     isPayloadEditDisabled() {
-      return !this.active || this.canEditPayload;
+      return this.glFeatures.multipleHttpIntegrationsCustomMapping
+        ? !this.active || this.canEditPayload
+        : !this.active;
+    },
+    isSubmitTestPayloadDisabled() {
+      return (
+        !this.active ||
+        Boolean(this.integrationTestPayload.error) ||
+        this.integrationTestPayload.json === ''
+      );
+    },
+    isSelectDisabled() {
+      return this.currentIntegration !== null || !this.canAddIntegration;
     },
   },
   watch: {
@@ -257,7 +279,7 @@ export default {
       }
       this.selectedIntegration = val.type;
       this.active = val.active;
-      if (val.type === typeSet.http) this.getIntegrationMapping(val.id);
+      if (val.type === typeSet.http && this.showMappingBuilder) this.getIntegrationMapping(val.id);
       return this.integrationTypeSelect();
     },
   },
@@ -297,14 +319,8 @@ export default {
         });
     },
     submitWithTestPayload() {
-      return service
-        .updateTestAlert(this.testAlertPayload)
-        .then(() => {
-          this.submit();
-        })
-        .catch(() => {
-          this.$emit('test-payload-failure');
-        });
+      this.$emit('set-test-alert-payload', this.testAlertPayload);
+      this.submit();
     },
     submit() {
       // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
@@ -323,6 +339,7 @@ export default {
         return this.$emit('update-integration', integrationPayload);
       }
 
+      this.reset();
       return this.$emit('create-new-integration', integrationPayload);
     },
     reset() {
@@ -410,7 +427,8 @@ export default {
     >
       <gl-form-select
         v-model="selectedIntegration"
-        :disabled="currentIntegration !== null || !canAddIntegration"
+        :disabled="isSelectDisabled"
+        :class="{ 'gl-bg-gray-100!': isSelectDisabled }"
         :options="options"
         @change="integrationTypeSelect"
       />
@@ -461,8 +479,13 @@ export default {
         >
           <gl-form-input
             v-model="integrationForm.name"
+            :disabled="isPrometheus"
             type="text"
-            :placeholder="$options.i18n.integrationFormSteps.step2.placeholder"
+            :placeholder="
+              isPrometheus
+                ? $options.i18n.integrationFormSteps.step2.prometheus
+                : $options.i18n.integrationFormSteps.step2.placeholder
+            "
           />
         </gl-form-group>
         <gl-form-group
@@ -539,7 +562,7 @@ export default {
               </template>
             </gl-form-input-group>
 
-            <gl-button v-gl-modal.authKeyModal :disabled="!active">
+            <gl-button v-gl-modal.authKeyModal :disabled="isResetAuthKeyDisabled">
               {{ $options.i18n.integrationFormSteps.step3.reset }}
             </gl-button>
             <gl-modal
@@ -642,7 +665,7 @@ export default {
         <gl-button
           v-if="!isManagingOpsgenie"
           data-testid="integration-test-and-submit"
-          :disabled="Boolean(integrationTestPayload.error)"
+          :disabled="isSubmitTestPayloadDisabled"
           category="secondary"
           variant="success"
           class="gl-mx-3 js-no-auto-disable"
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
deleted file mode 100644
index 0246315bdc5..00000000000
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue
+++ /dev/null
@@ -1,494 +0,0 @@
-<script>
-import {
-  GlAlert,
-  GlButton,
-  GlForm,
-  GlFormGroup,
-  GlFormInput,
-  GlFormInputGroup,
-  GlFormTextarea,
-  GlLink,
-  GlModal,
-  GlModalDirective,
-  GlSprintf,
-  GlFormSelect,
-} from '@gitlab/ui';
-import { debounce } from 'lodash';
-import { doesHashExistInUrl } from '~/lib/utils/url_utility';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import ToggleButton from '~/vue_shared/components/toggle_button.vue';
-import csrf from '~/lib/utils/csrf';
-import service from '../services';
-import {
-  i18n,
-  integrationTypes,
-  JSON_VALIDATE_DELAY,
-  targetPrometheusUrlPlaceholder,
-  targetOpsgenieUrlPlaceholder,
-  sectionHash,
-} from '../constants';
-import createFlash, { FLASH_TYPES } from '~/flash';
-
-export default {
-  i18n,
-  csrf,
-  targetOpsgenieUrlPlaceholder,
-  targetPrometheusUrlPlaceholder,
-  components: {
-    GlAlert,
-    GlButton,
-    GlForm,
-    GlFormGroup,
-    GlFormInput,
-    GlFormInputGroup,
-    GlFormSelect,
-    GlFormTextarea,
-    GlLink,
-    GlModal,
-    GlSprintf,
-    ClipboardButton,
-    ToggleButton,
-  },
-  directives: {
-    'gl-modal': GlModalDirective,
-  },
-  inject: ['prometheus', 'generic', 'opsgenie'],
-  data() {
-    return {
-      loading: false,
-      selectedIntegration: integrationTypes[0].value,
-      options: integrationTypes,
-      active: false,
-      token: '',
-      targetUrl: '',
-      feedback: {
-        variant: 'danger',
-        feedbackMessage: '',
-        isFeedbackDismissed: false,
-      },
-      testAlert: {
-        json: null,
-        error: null,
-      },
-      canSaveForm: false,
-      serverError: null,
-    };
-  },
-  computed: {
-    sections() {
-      return [
-        {
-          text: this.$options.i18n.usageSection,
-          url: this.generic.alertsUsageUrl,
-        },
-        {
-          text: this.$options.i18n.setupSection,
-          url: this.generic.alertsSetupUrl,
-        },
-      ];
-    },
-    isPrometheus() {
-      return this.selectedIntegration === 'PROMETHEUS';
-    },
-    isOpsgenie() {
-      return this.selectedIntegration === 'OPSGENIE';
-    },
-    selectedIntegrationType() {
-      switch (this.selectedIntegration) {
-        case 'HTTP': {
-          return {
-            url: this.generic.url,
-            token: this.generic.token,
-            active: this.generic.active,
-            resetKey: this.resetKey.bind(this),
-          };
-        }
-        case 'PROMETHEUS': {
-          return {
-            url: this.prometheus.url,
-            token: this.prometheus.token,
-            active: this.prometheus.active,
-            resetKey: this.resetKey.bind(this, 'PROMETHEUS'),
-            targetUrl: this.prometheus.prometheusApiUrl,
-          };
-        }
-        case 'OPSGENIE': {
-          return {
-            targetUrl: this.opsgenie.opsgenieMvcTargetUrl,
-            active: this.opsgenie.active,
-          };
-        }
-        default: {
-          return {};
-        }
-      }
-    },
-    showFeedbackMsg() {
-      return this.feedback.feedbackMessage && !this.isFeedbackDismissed;
-    },
-    showAlertSave() {
-      return (
-        this.feedback.feedbackMessage === this.$options.i18n.testAlertFailed &&
-        !this.isFeedbackDismissed
-      );
-    },
-    prometheusInfo() {
-      return this.isPrometheus ? this.$options.i18n.prometheusInfo : '';
-    },
-    jsonIsValid() {
-      return this.testAlert.error === null;
-    },
-    canTestAlert() {
-      return this.active && this.testAlert.json !== null;
-    },
-    canSaveConfig() {
-      return !this.loading && this.canSaveForm;
-    },
-    baseUrlPlaceholder() {
-      return this.isOpsgenie
-        ? this.$options.targetOpsgenieUrlPlaceholder
-        : this.$options.targetPrometheusUrlPlaceholder;
-    },
-  },
-  watch: {
-    'testAlert.json': debounce(function debouncedJsonValidate() {
-      this.validateJson();
-    }, JSON_VALIDATE_DELAY),
-    targetUrl(oldVal, newVal) {
-      if (newVal && oldVal !== this.selectedIntegrationType.targetUrl) {
-        this.canSaveForm = true;
-      }
-    },
-  },
-  mounted() {
-    if (this.prometheus.active || this.generic.active || !this.opsgenie.opsgenieMvcIsAvailable) {
-      this.removeOpsGenieOption();
-    } else if (this.opsgenie.active) {
-      this.setOpsgenieAsDefault();
-    }
-    this.active = this.selectedIntegrationType.active;
-    this.token = this.selectedIntegrationType.token ?? '';
-  },
-  methods: {
-    createUserErrorMessage(errors = {}) {
-      const error = Object.entries(errors)?.[0];
-      if (error) {
-        const [field, [msg]] = error;
-        this.serverError = `${field} ${msg}`;
-      }
-    },
-    setOpsgenieAsDefault() {
-      this.options = this.options.map(el => {
-        if (el.value !== 'OPSGENIE') {
-          return { ...el, disabled: true };
-        }
-        return { ...el, disabled: false };
-      });
-      this.selectedIntegration = this.options.find(({ value }) => value === 'OPSGENIE').value;
-      if (this.targetUrl === null) {
-        this.targetUrl = this.selectedIntegrationType.targetUrl;
-      }
-    },
-    removeOpsGenieOption() {
-      this.options = this.options.map(el => {
-        if (el.value !== 'OPSGENIE') {
-          return { ...el, disabled: false };
-        }
-        return { ...el, disabled: true };
-      });
-    },
-    resetFormValues() {
-      this.testAlert.json = null;
-      this.targetUrl = this.selectedIntegrationType.targetUrl;
-      this.active = this.selectedIntegrationType.active;
-    },
-    dismissFeedback() {
-      this.serverError = null;
-      this.feedback = { ...this.feedback, feedbackMessage: null };
-      this.isFeedbackDismissed = false;
-    },
-    resetKey(key) {
-      const fn = key === 'PROMETHEUS' ? this.resetPrometheusKey() : this.resetGenericKey();
-
-      return fn
-        .then(({ data: { token } }) => {
-          this.token = token;
-          this.setFeedback({ feedbackMessage: this.$options.i18n.tokenRest, variant: 'success' });
-        })
-        .catch(() => {
-          this.setFeedback({ feedbackMessage: this.$options.i18n.errorKeyMsg, variant: 'danger' });
-        });
-    },
-    resetGenericKey() {
-      this.dismissFeedback();
-      return service.updateGenericKey({
-        endpoint: this.generic.formPath,
-        params: { service: { token: '' } },
-      });
-    },
-    resetPrometheusKey() {
-      return service.updatePrometheusKey({ endpoint: this.prometheus.prometheusResetKeyPath });
-    },
-    toggleService(value) {
-      this.canSaveForm = true;
-      this.active = value;
-    },
-    toggle(value) {
-      return this.isPrometheus ? this.togglePrometheusActive(value) : this.toggleActivated(value);
-    },
-    toggleActivated(value) {
-      this.loading = true;
-      const path = this.isOpsgenie ? this.opsgenie.formPath : this.generic.formPath;
-      return service
-        .updateGenericActive({
-          endpoint: path,
-          params: this.isOpsgenie
-            ? { service: { opsgenie_mvc_target_url: this.targetUrl, opsgenie_mvc_enabled: value } }
-            : { service: { active: value } },
-        })
-        .then(() => this.notifySuccessAndReload())
-        .catch(({ response: { data: { errors } = {} } = {} }) => {
-          this.createUserErrorMessage(errors);
-          this.setFeedback({
-            feedbackMessage: this.$options.i18n.errorMsg,
-            variant: 'danger',
-          });
-        })
-        .finally(() => {
-          this.loading = false;
-          this.canSaveForm = false;
-        });
-    },
-    reload() {
-      if (!doesHashExistInUrl(sectionHash)) {
-        window.location.hash = sectionHash;
-      }
-      window.location.reload();
-    },
-    togglePrometheusActive(value) {
-      this.loading = true;
-      return service
-        .updatePrometheusActive({
-          endpoint: this.prometheus.prometheusFormPath,
-          params: {
-            token: this.$options.csrf.token,
-            config: value,
-            url: this.targetUrl,
-            redirect: window.location,
-          },
-        })
-        .then(() => this.notifySuccessAndReload())
-        .catch(({ response: { data: { errors } = {} } = {} }) => {
-          this.createUserErrorMessage(errors);
-          this.setFeedback({
-            feedbackMessage: this.$options.i18n.errorMsg,
-            variant: 'danger',
-          });
-        })
-        .finally(() => {
-          this.loading = false;
-          this.canSaveForm = false;
-        });
-    },
-    notifySuccessAndReload() {
-      createFlash({ message: this.$options.i18n.changesSaved, type: FLASH_TYPES.NOTICE });
-      setTimeout(() => this.reload(), 1000);
-    },
-    setFeedback({ feedbackMessage, variant }) {
-      this.feedback = { feedbackMessage, variant };
-    },
-    validateJson() {
-      this.testAlert.error = null;
-      try {
-        JSON.parse(this.testAlert.json);
-      } catch (e) {
-        this.testAlert.error = JSON.stringify(e.message);
-      }
-    },
-    validateTestAlert() {
-      this.loading = true;
-      this.dismissFeedback();
-      this.validateJson();
-      return service
-        .updateTestAlert({
-          endpoint: this.selectedIntegrationType.url,
-          data: this.testAlert.json,
-          token: this.selectedIntegrationType.token,
-        })
-        .then(() => {
-          this.setFeedback({
-            feedbackMessage: this.$options.i18n.testAlertSuccess,
-            variant: 'success',
-          });
-        })
-        .catch(() => {
-          this.setFeedback({
-            feedbackMessage: this.$options.i18n.testAlertFailed,
-            variant: 'danger',
-          });
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    onSubmit() {
-      this.dismissFeedback();
-      this.toggle(this.active);
-    },
-    onReset() {
-      this.testAlert.json = null;
-      this.dismissFeedback();
-      this.targetUrl = this.selectedIntegrationType.targetUrl;
-
-      if (this.canSaveForm) {
-        this.canSaveForm = false;
-        this.active = this.selectedIntegrationType.active;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-form @submit.prevent="onSubmit" @reset.prevent="onReset">
-    <h5 class="gl-font-lg gl-my-5">{{ $options.i18n.integrationsLabel }}</h5>
-
-    <gl-alert v-if="showFeedbackMsg" :variant="feedback.variant" @dismiss="dismissFeedback">
-      {{ feedback.feedbackMessage }}
-      <br />
-      <i v-if="serverError">{{ __('Error message:') }} {{ serverError }}</i>
-      <gl-button
-        v-if="showAlertSave"
-        variant="danger"
-        category="primary"
-        class="gl-display-block gl-mt-3"
-        @click="toggle(active)"
-      >
-        {{ __('Save anyway') }}
-      </gl-button>
-    </gl-alert>
-
-    <div data-testid="alert-settings-description">
-      <p v-for="section in sections" :key="section.text">
-        <gl-sprintf :message="section.text">
-          <template #link="{ content }">
-            <gl-link :href="section.url" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </div>
-
-    <gl-form-group label-for="integration-type" :label="$options.i18n.integration">
-      <gl-form-select
-        id="integration-type"
-        v-model="selectedIntegration"
-        :options="options"
-        data-testid="alert-settings-select"
-        @change="resetFormValues"
-      />
-      <span class="gl-text-gray-500">
-        <gl-sprintf :message="$options.i18n.integrationsInfo">
-          <template #link="{ content }">
-            <gl-link
-              class="gl-display-inline-block"
-              href="https://gitlab.com/groups/gitlab-org/-/epics/4390"
-              target="_blank"
-              >{{ content }}</gl-link
-            >
-          </template>
-        </gl-sprintf>
-      </span>
-    </gl-form-group>
-    <gl-form-group :label="$options.i18n.activeLabel" label-for="active">
-      <toggle-button
-        id="active"
-        :disabled-input="loading"
-        :is-loading="loading"
-        :value="active"
-        @change="toggleService"
-      />
-    </gl-form-group>
-    <gl-form-group
-      v-if="isOpsgenie || isPrometheus"
-      :label="$options.i18n.apiBaseUrlLabel"
-      label-for="api-url"
-    >
-      <gl-form-input
-        id="api-url"
-        v-model="targetUrl"
-        type="url"
-        :placeholder="baseUrlPlaceholder"
-        :disabled="!active"
-      />
-      <span class="gl-text-gray-500">
-        {{ $options.i18n.apiBaseUrlHelpText }}
-      </span>
-    </gl-form-group>
-    <template v-if="!isOpsgenie">
-      <gl-form-group :label="$options.i18n.urlLabel" label-for="url">
-        <gl-form-input-group id="url" readonly :value="selectedIntegrationType.url">
-          <template #append>
-            <clipboard-button
-              :text="selectedIntegrationType.url"
-              :title="$options.i18n.copyToClipboard"
-              class="gl-m-0!"
-            />
-          </template>
-        </gl-form-input-group>
-        <span class="gl-text-gray-500">
-          {{ prometheusInfo }}
-        </span>
-      </gl-form-group>
-      <gl-form-group :label="$options.i18n.tokenLabel" label-for="authorization-key">
-        <gl-form-input-group id="authorization-key" class="gl-mb-2" readonly :value="token">
-          <template #append>
-            <clipboard-button
-              :text="token"
-              :title="$options.i18n.copyToClipboard"
-              class="gl-m-0!"
-            />
-          </template>
-        </gl-form-input-group>
-        <gl-button v-gl-modal.tokenModal :disabled="!active" class="gl-mt-3">{{
-          $options.i18n.resetKey
-        }}</gl-button>
-        <gl-modal
-          modal-id="tokenModal"
-          :title="$options.i18n.resetKey"
-          :ok-title="$options.i18n.resetKey"
-          ok-variant="danger"
-          @ok="selectedIntegrationType.resetKey"
-        >
-          {{ $options.i18n.restKeyInfo }}
-        </gl-modal>
-      </gl-form-group>
-      <gl-form-group
-        :label="$options.i18n.alertJson"
-        label-for="alert-json"
-        :invalid-feedback="testAlert.error"
-      >
-        <gl-form-textarea
-          id="alert-json"
-          v-model.trim="testAlert.json"
-          :disabled="!active"
-          :state="jsonIsValid"
-          :placeholder="$options.i18n.alertJsonPlaceholder"
-          rows="6"
-          max-rows="10"
-        />
-      </gl-form-group>
-
-      <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{
-        $options.i18n.testAlertInfo
-      }}</gl-button>
-    </template>
-    <div class="footer-block row-content-block gl-display-flex gl-justify-content-space-between">
-      <gl-button variant="success" category="primary" :disabled="!canSaveConfig" @click="onSubmit">
-        {{ __('Save changes') }}
-      </gl-button>
-      <gl-button category="primary" :disabled="!canSaveConfig" @click="onReset">
-        {{ __('Cancel') }}
-      </gl-button>
-    </div>
-  </gl-form>
-</template>
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 1ffc2f80148..a55e63c3bc0 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { fetchPolicies } from '~/lib/graphql';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import getIntegrationsQuery from '../graphql/queries/get_integrations.query.graphql';
@@ -15,8 +14,8 @@ import resetHttpTokenMutation from '../graphql/mutations/reset_http_token.mutati
 import resetPrometheusTokenMutation from '../graphql/mutations/reset_prometheus_token.mutation.graphql';
 import updateCurrentIntergrationMutation from '../graphql/mutations/update_current_intergration.mutation.graphql';
 import IntegrationsList from './alerts_integrations_list.vue';
-import SettingsFormOld from './alerts_settings_form_old.vue';
-import SettingsFormNew from './alerts_settings_form_new.vue';
+import AlertSettingsForm from './alerts_settings_form.vue';
+import service from '../services';
 import { typeSet } from '../constants';
 import {
   updateStoreAfterIntegrationDelete,
@@ -37,6 +36,9 @@ export default {
       'AlertsIntegrations|The integration has been successfully saved. Alerts from this new integration should now appear on your alerts list.',
     ),
     integrationRemoved: s__('AlertsIntegrations|The integration has been successfully removed.'),
+    alertSent: s__(
+      'AlertsIntegrations|The test alert has been successfully sent, and should now be visible on your alerts list.',
+    ),
   },
   components: {
     // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
@@ -44,10 +46,8 @@ export default {
     GlLink,
     GlSprintf,
     IntegrationsList,
-    SettingsFormOld,
-    SettingsFormNew,
+    AlertSettingsForm,
   },
-  mixins: [glFeatureFlagsMixin()],
   inject: {
     generic: {
       default: {},
@@ -93,6 +93,7 @@ export default {
   data() {
     return {
       isUpdating: false,
+      testAlertPayload: null,
       integrations: {},
       currentIntegration: null,
     };
@@ -101,25 +102,12 @@ export default {
     loading() {
       return this.$apollo.queries.integrations.loading;
     },
-    integrationsOptionsOld() {
-      return [
-        {
-          name: s__('AlertSettings|HTTP endpoint'),
-          type: s__('AlertsIntegrations|HTTP endpoint'),
-          active: this.generic.active,
-        },
-        {
-          name: s__('AlertSettings|External Prometheus'),
-          type: s__('AlertsIntegrations|Prometheus'),
-          active: this.prometheus.active,
-        },
-      ];
-    },
     canAddIntegration() {
       return this.multiIntegrations || this.integrations?.list?.length < 2;
     },
     canManageOpsgenie() {
       return (
+        this.opsgenie.active ||
         this.integrations?.list?.every(({ active }) => active === false) ||
         this.integrations?.list?.length === 0
       );
@@ -149,6 +137,19 @@ export default {
           if (error) {
             return createFlash({ message: error });
           }
+
+          if (this.testAlertPayload) {
+            const integration =
+              httpIntegrationCreate?.integration || prometheusIntegrationCreate?.integration;
+
+            const payload = {
+              ...this.testAlertPayload,
+              endpoint: integration.url,
+              token: integration.token,
+            };
+            return this.validateAlertPayload(payload);
+          }
+
           return createFlash({
             message: this.$options.i18n.changesSaved,
             type: FLASH_TYPES.SUCCESS,
@@ -179,6 +180,13 @@ export default {
           if (error) {
             return createFlash({ message: error });
           }
+
+          if (this.testAlertPayload) {
+            return this.validateAlertPayload();
+          }
+
+          this.clearCurrentIntegration();
+
           return createFlash({
             message: this.$options.i18n.changesSaved,
             type: FLASH_TYPES.SUCCESS,
@@ -189,6 +197,7 @@ export default {
         })
         .finally(() => {
           this.isUpdating = false;
+          this.testAlertPayload = null;
         });
     },
     resetToken({ type, variables }) {
@@ -212,7 +221,13 @@ export default {
             const integration =
               httpIntegrationResetToken?.integration ||
               prometheusIntegrationResetToken?.integration;
-            this.currentIntegration = integration;
+
+            this.$apollo.mutate({
+              mutation: updateCurrentIntergrationMutation,
+              variables: {
+                ...integration,
+              },
+            });
 
             return createFlash({
               message: this.$options.i18n.changesSaved,
@@ -280,8 +295,21 @@ export default {
         variables: {},
       });
     },
-    testPayloadFailure() {
-      createFlash({ message: INTEGRATION_PAYLOAD_TEST_ERROR });
+    setTestAlertPayload(payload) {
+      this.testAlertPayload = payload;
+    },
+    validateAlertPayload(payload) {
+      return service
+        .updateTestAlert(payload ?? this.testAlertPayload)
+        .then(() => {
+          return createFlash({
+            message: this.$options.i18n.alertSent,
+            type: FLASH_TYPES.SUCCESS,
+          });
+        })
+        .catch(() => {
+          createFlash({ message: INTEGRATION_PAYLOAD_TEST_ERROR });
+        });
     },
   },
 };
@@ -310,13 +338,12 @@ export default {
     </gl-alert>
     <integrations-list
       v-else
-      :integrations="glFeatures.httpIntegrationsList ? integrations.list : integrationsOptionsOld"
+      :integrations="integrations.list"
       :loading="loading"
       @edit-integration="editIntegration"
       @delete-integration="deleteIntegration"
     />
-    <settings-form-new
-      v-if="glFeatures.httpIntegrationsList"
+    <alert-settings-form
       :loading="isUpdating"
       :can-add-integration="canAddIntegration"
       :can-manage-opsgenie="canManageOpsgenie"
@@ -324,8 +351,7 @@ export default {
       @update-integration="updateIntegration"
       @reset-token="resetToken"
       @clear-current-integration="clearCurrentIntegration"
-      @test-payload-failure="testPayloadFailure"
+      @set-test-alert-payload="setTestAlertPayload"
     />
-    <settings-form-old v-else />
   </div>
 </template>
diff --git a/app/assets/javascripts/alerts_settings/services/index.js b/app/assets/javascripts/alerts_settings/services/index.js
index 1835d6b46aa..e45ea772ddd 100644
--- a/app/assets/javascripts/alerts_settings/services/index.js
+++ b/app/assets/javascripts/alerts_settings/services/index.js
@@ -2,30 +2,9 @@
 import axios from '~/lib/utils/axios_utils';
 
 export default {
-  // TODO: All this code save updateTestAlert will be deleted as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/255501
-  updateGenericKey({ endpoint, params }) {
-    return axios.put(endpoint, params);
-  },
-  updatePrometheusKey({ endpoint }) {
-    return axios.post(endpoint);
-  },
   updateGenericActive({ endpoint, params }) {
     return axios.put(endpoint, params);
   },
-  updatePrometheusActive({ endpoint, params: { token, config, url, redirect } }) {
-    const data = new FormData();
-    data.set('_method', 'put');
-    data.set('authenticity_token', token);
-    data.set('service[manual_configuration]', config);
-    data.set('service[api_url]', url);
-    data.set('redirect_to', redirect);
-
-    return axios.post(endpoint, data, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-    });
-  },
   updateTestAlert({ endpoint, data, token }) {
     return axios.post(endpoint, data, {
       headers: {