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_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/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);
+    });
   });
 });