Add latest changes from gitlab-org/gitlab@master

3 files changed, 72 insertions, 16 deletions

diff --git a/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue b/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue
index 131e93e7d58..13b6a8e6653 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue
@@ -1,7 +1,27 @@
 <script>
 import { GlEmptyState, GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 export default {
+  i18n: {
+    emptyState: {
+      opsgenie: {
+        title: s__('AlertManagement|Opsgenie is enabled'),
+        info: s__(
+          'AlertManagement|You have enabled the Opsgenie integration. Your alerts will be visible directly in Opsgenie.',
+        ),
+        buttonText: s__('AlertManagement|View alerts in Opsgenie'),
+      },
+      gitlab: {
+        title: s__('AlertManagement|Surface alerts in GitLab'),
+        info: s__(
+          'AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents.',
+        ),
+        buttonText: s__('AlertManagement|Authorize external service'),
+      },
+    },
+    moreInformation: s__('AlertManagement|More information'),
+  },
   components: {
     GlEmptyState,
     GlButton,
@@ -19,29 +39,49 @@ export default {
       type: String,
       required: true,
     },
+    opsgenieMvcEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    opsgenieMvcTargetUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    emptyState() {
+      return {
+        ...(this.opsgenieMvcEnabled
+          ? this.$options.i18n.emptyState.opsgenie
+          : this.$options.i18n.emptyState.gitlab),
+        link: this.opsgenieMvcEnabled ? this.opsgenieMvcTargetUrl : this.enableAlertManagementPath,
+      };
+    },
+    alertsCanBeEnabled() {
+      return this.userCanEnableAlertManagement || this.opsgenieMvcEnabled;
+    },
   },
 };
 </script>
 <template>
   <div>
-    <gl-empty-state
-      :title="s__('AlertManagement|Surface alerts in GitLab')"
-      :svg-path="emptyAlertSvgPath"
-    >
+    <gl-empty-state :title="emptyState.title" :svg-path="emptyAlertSvgPath">
       <template #description>
-        <div class="d-block">
-          <span>{{
-            s__(
-              'AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents.',
-            )
-          }}</span>
-          <a href="/help/user/project/operations/alert_management.html" target="_blank">
-            {{ s__('AlertManagement|More information') }}
+        <div class="gl-display-block">
+          <span>{{ emptyState.info }}</span>
+          <a
+            v-if="!opsgenieMvcEnabled"
+            href="/help/user/project/operations/alert_management.html"
+            target="_blank"
+          >
+            {{ $options.i18n.moreInformation }}
           </a>
         </div>
-        <div v-if="userCanEnableAlertManagement" class="d-block center pt-4">
-          <gl-button category="primary" variant="success" :href="enableAlertManagementPath">
-            {{ s__('AlertManagement|Authorize external service') }}
+        <div v-if="alertsCanBeEnabled" class="gl-display-block center gl-pt-4">
+          <gl-button category="primary" variant="success" :href="emptyState.link">
+            {{ emptyState.buttonText }}
           </gl-button>
         </div>
       </template>
diff --git a/app/assets/javascripts/alert_management/components/alert_management_list_wrapper.vue b/app/assets/javascripts/alert_management/components/alert_management_list_wrapper.vue
index dd4fe9274f4..094f33fed3b 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list_wrapper.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list_wrapper.vue
@@ -34,6 +34,16 @@ export default {
       type: String,
       required: true,
     },
+    opsgenieMvcEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    opsgenieMvcTargetUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   mounted() {
     this.trackPageViews();
@@ -58,6 +68,8 @@ export default {
       :empty-alert-svg-path="emptyAlertSvgPath"
       :enable-alert-management-path="enableAlertManagementPath"
       :user-can-enable-alert-management="userCanEnableAlertManagement"
+      :opsgenie-mvc-enabled="opsgenieMvcEnabled"
+      :opsgenie-mvc-target-url="opsgenieMvcTargetUrl"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/alert_management/list.js b/app/assets/javascripts/alert_management/list.js
index 105b714fbce..3f78ca66a59 100644
--- a/app/assets/javascripts/alert_management/list.js
+++ b/app/assets/javascripts/alert_management/list.js
@@ -16,11 +16,13 @@ export default () => {
     enableAlertManagementPath,
     emptyAlertSvgPath,
     populatingAlertsHelpUrl,
+    opsgenieMvcTargetUrl,
   } = domEl.dataset;
-  let { alertManagementEnabled, userCanEnableAlertManagement } = domEl.dataset;
+  let { alertManagementEnabled, userCanEnableAlertManagement, opsgenieMvcEnabled } = domEl.dataset;
 
   alertManagementEnabled = parseBoolean(alertManagementEnabled);
   userCanEnableAlertManagement = parseBoolean(userCanEnableAlertManagement);
+  opsgenieMvcEnabled = parseBoolean(opsgenieMvcEnabled);
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(
@@ -54,6 +56,8 @@ export default () => {
           emptyAlertSvgPath,
           alertManagementEnabled,
           userCanEnableAlertManagement,
+          opsgenieMvcTargetUrl,
+          opsgenieMvcEnabled,
         },
       });
     },