Resolve "Migrate Opsgenie integration to new Integrations UI"

app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue

@@ -11,6 +11,7 @@ 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, integrationToDeleteDefault } from '../constants';
 import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
@@ -48,6 +49,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     GlModal: GlModalDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     integrations: {
       type: Array,
@@ -96,7 +98,7 @@ export default {
     tbodyTrClass(item) {
       return {
         [bodyTrClass]: this.integrations.length,
-        'gl-bg-blue-50': item?.id === this.currentIntegration?.id,
+        'gl-bg-blue-50': (item !== null && item.id) === this.currentIntegration?.id,
       };
     },
     trackPageViews() {
@@ -150,7 +152,7 @@ export default {
       </template>
 
       <template #cell(actions)="{ item }">
-        <gl-button-group>
+        <gl-button-group v-if="glFeatures.httpIntegrationsList">
           <gl-button icon="pencil" @click="$emit('edit-integration', { id: item.id })" />
           <gl-button
             v-gl-modal.deleteIntegration

app/assets/javascripts/alerts_settings/components/alerts_settings_form_new.vue

@@ -23,7 +23,9 @@ import {
   integrationTypesNew,
   JSON_VALIDATE_DELAY,
   targetPrometheusUrlPlaceholder,
+  targetOpsgenieUrlPlaceholder,
   typeSet,
+  sectionHash,
 } from '../constants';
 // Mocks will be removed when integrating with BE is ready
 // data format is defined and will be the same as mocked (maybe with some minor changes)
@@ -31,7 +33,10 @@ import {
 import mockedCustomMapping from './mocks/parsedMapping.json';
 
 export default {
-  targetPrometheusUrlPlaceholder,
+  placeholders: {
+    prometheus: targetPrometheusUrlPlaceholder,
+    opsgenie: targetOpsgenieUrlPlaceholder,
+  },
   JSON_VALIDATE_DELAY,
   typeSet,
   i18n: {
@@ -84,6 +89,13 @@ export default {
           '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 exisiting Opsgenie instance. By selecting this option, you cannot recieve alerts from any other source in GitLab; it will effectivley be turing Alerts within GitLab off as a feature.',
+        ),
+      },
     },
   },
   components: {
@@ -111,6 +123,10 @@ export default {
     prometheus: {
       default: {},
     },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    opsgenie: {
+      default: {},
+    },
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -131,7 +147,6 @@ export default {
   data() {
     return {
       selectedIntegration: integrationTypesNew[0].value,
-      options: integrationTypesNew,
       active: false,
       formVisible: false,
       integrationTestPayload: {
@@ -142,18 +157,33 @@ export default {
       customMapping: null,
       parsingPayload: false,
       currentIntegration: null,
+      // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+      isManagingOpsgenie: false,
     };
   },
   computed: {
     jsonIsValid() {
       return this.integrationTestPayload.error === null;
     },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    disabledIntegrations() {
+      return this.opsgenie.active ? [typeSet.http, typeSet.prometheus] : [typeSet.opsgenie];
+    },
+    options() {
+      return integrationTypesNew.map(el => ({
+        ...el,
+        disabled: this.disabledIntegrations.includes(el.value),
+      }));
+    },
     selectedIntegrationType() {
       switch (this.selectedIntegration) {
-        case this.$options.typeSet.http:
+        case typeSet.http:
           return this.generic;
-        case this.$options.typeSet.prometheus:
+        case typeSet.prometheus:
           return this.prometheus;
+        // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+        case typeSet.opsgenie:
+          return this.opsgenie;
         default:
           return {};
       }
@@ -214,6 +244,30 @@ export default {
       } else {
         this.formVisible = true;
       }
+
+      // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+      if (this.opsgenie.active && this.selectedIntegration === typeSet.opsgenie) {
+        this.isManagingOpsgenie = true;
+        this.active = this.opsgenie.active;
+        this.integrationForm.apiUrl = this.opsgenie.opsgenieMvcTargetUrl;
+      }
+    },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    submitWithOpsgenie() {
+      return service
+        .updateGenericActive({
+          endpoint: this.opsgenie.formPath,
+          params: {
+            service: {
+              opsgenie_mvc_target_url: this.integrationForm.apiUrl,
+              opsgenie_mvc_enabled: this.active,
+            },
+          },
+        })
+        .then(() => {
+          window.location.hash = sectionHash;
+          window.location.reload();
+        });
     },
     submitWithTestPayload() {
       return service
@@ -226,9 +280,14 @@ export default {
         });
     },
     submit() {
+      // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+      if (this.isManagingOpsgenie) {
+        return this.submitWithOpsgenie();
+      }
+
       const { name, apiUrl } = this.integrationForm;
       const variables =
-        this.selectedIntegration === this.$options.typeSet.http
+        this.selectedIntegration === typeSet.http
           ? { name, active: this.active }
           : { apiUrl, active: this.active };
       const integrationPayload = { type: this.selectedIntegration, variables };
@@ -312,7 +371,6 @@ export default {
 <template>
   <gl-form class="gl-mt-6" @submit.prevent="submit" @reset.prevent="reset">
     <h5 class="gl-font-lg gl-my-5">{{ s__('AlertSettings|Add new integrations') }}</h5>
-
     <gl-form-group
       id="integration-type"
       :label="$options.i18n.integrationFormSteps.step1.label"
@@ -340,6 +398,37 @@ export default {
       </div>
     </gl-form-group>
     <gl-collapse v-model="formVisible" class="gl-mt-3">
+      <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
+      <div v-if="isManagingOpsgenie">
+        <gl-form-group
+          id="integration-webhook"
+          :label="$options.i18n.integrationFormSteps.opsgenie.label"
+          label-for="integration-webhook"
+        >
+          <span class="gl-my-4">
+            {{ $options.i18n.integrationFormSteps.opsgenie.info }}
+          </span>
+
+          <gl-toggle
+            v-model="active"
+            :is-loading="loading"
+            :label="__('Active')"
+            class="gl-my-4 gl-font-weight-normal"
+          />
+
+          <gl-form-input
+            id="opsgenie-opsgenieMvcTargetUrl"
+            v-model="integrationForm.apiUrl"
+            type="text"
+            :placeholder="$options.placeholders.opsgenie"
+          />
+
+          <span class="gl-text-gray-400 gl-my-1">
+            {{ $options.i18n.integrationFormSteps.prometheusFormUrl.help }}
+          </span>
+        </gl-form-group>
+      </div>
+      <div v-else>
         <gl-form-group
           id="name-integration"
           :label="$options.i18n.integrationFormSteps.step2.label"
@@ -497,13 +586,18 @@ export default {
           label-for="mapping-builder"
         >
           <span class="gl-text-gray-500">{{ $options.i18n.integrationFormSteps.step5.intro }}</span>
-        <mapping-builder :payload-fields="mappingBuilderFields" :mapping="mappingBuilderMapping" />
+          <mapping-builder
+            :payload-fields="mappingBuilderFields"
+            :mapping="mappingBuilderMapping"
+          />
         </gl-form-group>
+      </div>
       <div class="gl-display-flex gl-justify-content-end">
         <gl-button type="reset" class="gl-mr-3 js-no-auto-disable">{{ __('Cancel') }}</gl-button>
+        <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
         <gl-button
           data-testid="integration-test-and-submit"
-          :disabled="Boolean(integrationTestPayload.error)"
+          :disabled="Boolean(integrationTestPayload.error) || isManagingOpsgenie"
           category="secondary"
           variant="success"
           class="gl-mr-1 js-no-auto-disable"

app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue

 <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';
@@ -38,6 +39,10 @@ export default {
     integrationRemoved: s__('AlertsIntegrations|The integration has been successfully removed.'),
   },
   components: {
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    GlAlert,
+    GlLink,
+    GlSprintf,
     IntegrationsList,
     SettingsFormOld,
     SettingsFormNew,
@@ -50,6 +55,10 @@ export default {
     prometheus: {
       default: {},
     },
+    // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+    opsgenie: {
+      default: {},
+    },
     projectPath: {
       default: '',
     },
@@ -274,7 +283,27 @@ export default {
 
 <template>
   <div>
+    <!-- TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657 -->
+    <gl-alert v-if="opsgenie.active" :dismissible="false" variant="tip">
+      <gl-sprintf
+        :message="
+          s__(
+            'AlertSettings|We will soon be introducing the ability to create multiple unique HTTP endpoints. When this functionality is live,  you will be able to configure an integration with Opsgenie to surface Opsgenie alerts in GitLab. This will replace the current Opsgenie integration which will be deprecated. %{linkStart}More Information%{linkEnd}',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link
+            class="gl-display-inline-block"
+            href="https://gitlab.com/gitlab-org/gitlab/-/issues/273657"
+            target="_blank"
+            >{{ content }}</gl-link
+          >
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <integrations-list
+      v-else
       :integrations="glFeatures.httpIntegrationsList ? integrations.list : integrationsOptionsOld"
       :loading="loading"
       @edit-integration="editIntegration"

app/assets/javascripts/alerts_settings/constants.js

@@ -55,6 +55,7 @@ export const integrationTypesNew = [
 export const typeSet = {
   http: 'HTTP',
   prometheus: 'PROMETHEUS',
+  opsgenie: 'OPSGENIE',
 };
 
 export const integrationToDeleteDefault = { id: null, name: '' };

locale/gitlab.pot

@@ -2508,6 +2508,9 @@ msgstr ""
 msgid "AlertSettings|1. Select integration type"
 msgstr ""
 
+msgid "AlertSettings|2. Add link to your Opsgenie alert list"
+msgstr ""
+
 msgid "AlertSettings|2. Name integration"
 msgstr ""
 
@@ -2643,6 +2646,12 @@ msgstr ""
 msgid "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send Alerts to GitLab. Review your chosen services documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint."
 msgstr ""
 
+msgid "AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your exisiting Opsgenie instance. By selecting this option, you cannot recieve alerts from any other source in GitLab; it will effectivley be turing Alerts within GitLab off as a feature."
+msgstr ""
+
+msgid "AlertSettings|We will soon be introducing the ability to create multiple unique HTTP endpoints. When this functionality is live,  you will be able to configure an integration with Opsgenie to surface Opsgenie alerts in GitLab. This will replace the current Opsgenie integration which will be deprecated. %{linkStart}More Information%{linkEnd}"
+msgstr ""
+
 msgid "AlertSettings|Webhook URL"
 msgstr ""
 

spec/frontend/alerts_settings/__snapshots__/alerts_settings_form_new_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlertsSettingsFormNew with default values renders the initial template 1`] = `
-"<form class=\\"gl-mt-6\\">
+"<form class=\\"gl-mt-6\\" canmanageopsgenie=\\"true\\">
   <h5 class=\\"gl-font-lg gl-my-5\\">Add new integrations</h5>
   <div id=\\"integration-type\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"integration-type__BV_label_\\" for=\\"integration-type\\" class=\\"d-block col-form-label\\">1. Select integration type</label>
     <div class=\\"bv-no-focus-ring\\"><select class=\\"gl-form-select custom-select\\" id=\\"__BVID__8\\">
         <option value=\\"\\">Select integration type</option>
         <option value=\\"HTTP\\">HTTP Endpoint</option>
         <option value=\\"PROMETHEUS\\">External Prometheus</option>
-        <option value=\\"OPSGENIE\\">Opsgenie</option>
+        <option disabled=\\"disabled\\" value=\\"OPSGENIE\\">Opsgenie</option>
       </select>
       <div class=\\"gl-my-4\\"><span class=\\"gl-text-gray-500\\">Learn more about our upcoming <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"https://gitlab.com/groups/gitlab-org/-/epics/4390\\" class=\\"gl-link gl-display-inline-block\\">integrations</a></span></div>
       <!---->
@@ -18,6 +18,7 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
     </div>
   </div>
   <div class=\\"gl-mt-3 collapse\\" style=\\"display: none;\\" id=\\"__BVID__13\\">
+    <div>
       <div id=\\"name-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"name-integration__BV_label_\\" for=\\"name-integration\\" class=\\"d-block col-form-label\\">2. Name integration</label>
         <div class=\\"bv-no-focus-ring\\"><input type=\\"text\\" placeholder=\\"Enter integration name\\" class=\\"gl-form-input form-control\\" id=\\"__BVID__18\\">
           <!---->
@@ -83,6 +84,7 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
         </div>
       </div>
       <!---->
+    </div>
     <div class=\\"gl-display-flex gl-justify-content-end\\"><button type=\\"reset\\" class=\\"btn gl-mr-3 js-no-auto-disable btn-default btn-md gl-button\\">
         <!---->
         <!----> <span class=\\"gl-button-text\\">Cancel</span></button> <button data-testid=\\"integration-test-and-submit\\" type=\\"button\\" class=\\"btn gl-mr-1 js-no-auto-disable btn-success btn-md gl-button btn-success-secondary\\">

spec/frontend/alerts_settings/alerts_integrations_list_spec.js

@@ -33,6 +33,9 @@ describe('AlertIntegrationsList', () => {
         integrations: mockIntegrations,
         ...props,
       },
+      provide: {
+        glFeatures: { httpIntegrationsList: true },
+      },
       stubs: {
         GlIcon: true,
         GlButton: true,

spec/frontend/alerts_settings/alerts_settings_form_new_spec.js

@@ -27,6 +27,7 @@ describe('AlertsSettingsFormNew', () => {
       propsData: {
         loading: false,
         canAddIntegration: true,
+        canManageOpsgenie: true,
         ...props,
       },
       provide: {

spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js

@@ -2,7 +2,7 @@ import VueApollo from 'vue-apollo';
 import { mount, createLocalVue } from '@vue/test-utils';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import AlertsSettingsWrapper from '~/alerts_settings/components/alerts_settings_wrapper.vue';
 import AlertsSettingsFormOld from '~/alerts_settings/components/alerts_settings_form_old.vue';
 import AlertsSettingsFormNew from '~/alerts_settings/components/alerts_settings_form_new.vue';
@@ -21,6 +21,7 @@ import {
   RESET_INTEGRATION_TOKEN_ERROR,
   UPDATE_INTEGRATION_ERROR,
   INTEGRATION_PAYLOAD_TEST_ERROR,
+  DELETE_INTEGRATION_ERROR,
 } from '~/alerts_settings/utils/error_messages';
 import createFlash from '~/flash';
 import { defaultAlertSettingsConfig } from './util';
@@ -59,6 +60,12 @@ describe('AlertsSettingsWrapper', () => {
       .vm.$emit('delete-integration', { id: integrationToDestroy.id });
   }
 
+  async function awaitApolloDomMock() {
+    await wrapper.vm.$nextTick(); // kick off the DOM update
+    await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
+    await wrapper.vm.$nextTick(); // kick off the DOM update for flash
+  }
+
   const createComponent = ({ data = {}, provide = {}, loading = false } = {}) => {
     wrapper = mount(AlertsSettingsWrapper, {
       data() {
@@ -372,12 +379,35 @@ describe('AlertsSettingsWrapper', () => {
       });
 
       await destroyHttpIntegration(wrapper);
-
-      await wrapper.vm.$nextTick(); // kick off the DOM update
-      await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
-      await wrapper.vm.$nextTick(); // kick off the DOM update for flash
+      await awaitApolloDomMock();
 
       expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
+
+    it('displays flash if mutation had a non-recoverable error', async () => {
+      createComponentWithApollo({
+        destroyHandler: jest.fn().mockRejectedValue('Error'),
+      });
+
+      await destroyHttpIntegration(wrapper);
+      await awaitApolloDomMock();
+
+      expect(createFlash).toHaveBeenCalledWith({
+        message: DELETE_INTEGRATION_ERROR,
+      });
+    });
+  });
+
+  // TODO: Will be removed in 13.7 as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/273657
+  describe('Opsgenie integration', () => {
+    it.each([true, false])('it shows/hides the alert when opsgenie is %s', active => {
+      createComponent({
+        data: { integrations: { list: mockIntegrations }, currentIntegration: mockIntegrations[0] },
+        provide: { glFeatures: { httpIntegrationsList: true }, opsgenie: { active } },
+        loading: false,
+      });
+
+      expect(wrapper.find(GlAlert).exists()).toBe(active);
+    });
   });
 });