User can enable alert management

app/assets/javascripts/alert_management/components/alert_management_list.vue

 <script>
-import { GlEmptyState, GlButton, GlLoadingIcon, GlTable, GlAlert } from '@gitlab/ui';
+import { GlEmptyState, GlDeprecatedButton, GlLoadingIcon, GlTable, GlAlert } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import getAlerts from '../graphql/queries/getAlerts.query.graphql';
 
@@ -49,26 +49,28 @@ export default {
   ],
   components: {
     GlEmptyState,
-    GlButton,
     GlLoadingIcon,
     GlTable,
     GlAlert,
+    GlDeprecatedButton,
   },
   props: {
     indexPath: {
       type: String,
       required: true,
     },
-    // TODO: Handle alertManagementEnabled depending on resolution - https://gitlab.com/gitlab-org/gitlab/-/merge_requests/30024.
     alertManagementEnabled: {
       type: Boolean,
-      required: false,
-      default: true,
+      required: true,
     },
     enableAlertManagementPath: {
       type: String,
       required: true,
     },
+    userCanEnableAlertManagement: {
+      type: Boolean,
+      required: true,
+    },
     emptyAlertSvgPath: {
       type: String,
       required: true,
@@ -137,11 +139,7 @@ export default {
         </template>
       </gl-table>
     </div>
-    <template v-else>
-      <gl-empty-state
-        :title="s__('AlertManagement|Surface alerts in GitLab')"
-        :svg-path="emptyAlertSvgPath"
-      >
+    <gl-empty-state v-else :title="__('Surface alerts in GitLab')" :svg-path="emptyAlertSvgPath">
       <template #description>
         <div class="d-block">
           <span>{{
@@ -149,17 +147,20 @@ export default {
               '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">
+          <a href="/help/user/project/operations/alert_management.html" target="_blank">
             {{ s__('AlertManagement|More information') }}
           </a>
         </div>
-          <div class="d-block center pt-4">
-            <gl-button category="primary" variant="success" :href="enableAlertManagementPath">
+        <div v-if="userCanEnableAlertManagement" class="d-block center pt-4">
+          <gl-deprecated-button
+            category="primary"
+            variant="success"
+            :href="enableAlertManagementPath"
+          >
             {{ s__('AlertManagement|Authorize external service') }}
-            </gl-button>
+          </gl-deprecated-button>
         </div>
       </template>
     </gl-empty-state>
-    </template>
   </div>
 </template>

app/assets/javascripts/alert_management/list.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import AlertManagementList from './components/alert_management_list.vue';
 
 Vue.use(VueApollo);
@@ -10,6 +11,10 @@ export default () => {
 
   const domEl = document.querySelector(selector);
   const { indexPath, enableAlertManagementPath, emptyAlertSvgPath } = domEl.dataset;
+  let { alertManagementEnabled, userCanEnableAlertManagement } = domEl.dataset;
+
+  alertManagementEnabled = parseBoolean(alertManagementEnabled);
+  userCanEnableAlertManagement = parseBoolean(userCanEnableAlertManagement);
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
@@ -27,6 +32,8 @@ export default () => {
           indexPath,
           enableAlertManagementPath,
           emptyAlertSvgPath,
+          alertManagementEnabled,
+          userCanEnableAlertManagement,
         },
       });
     },

app/helpers/projects/alert_management_helper.rb

 # frozen_string_literal: true
 
 module Projects::AlertManagementHelper
-  def alert_management_data(project)
+  def alert_management_data(current_user, project)
     {
       'index-path' => project_alert_management_index_path(project,
                                                         format: :json),
       'enable-alert-management-path' => project_settings_operations_path(project),
-      'empty-alert-svg-path' => image_path('illustrations/alert-management-empty-state.svg')
+      'empty-alert-svg-path' => image_path('illustrations/alert-management-empty-state.svg'),
+      'user-can-enable-alert-management' => 'false',
+      'alert-management-enabled' => Feature.enabled?(:alert_management_minimal, project).to_s
     }
   end
 end

app/views/projects/alert_management/index.html.haml

 - page_title _('Alerts')
 
-#js-alert_management{ data: alert_management_data(@project) }
+#js-alert_management{ data: alert_management_data(@current_user, @project) }

changelogs/unreleased/user-can-enable-alert-management.yml

+---
+title: Alert management can user enable
+merge_request: 30024
+author:
+type: changed

locale/gitlab.pot

@@ -1716,9 +1716,6 @@ msgstr ""
 msgid "AlertManagement|Status"
 msgstr ""
 
-msgid "AlertManagement|Surface alerts in GitLab"
-msgstr ""
-
 msgid "AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear."
 msgstr ""
 
@@ -20123,6 +20120,9 @@ msgstr ""
 msgid "Support page URL"
 msgstr ""
 
+msgid "Surface alerts in GitLab"
+msgstr ""
+
 msgid "Switch branch/tag"
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -12,7 +12,10 @@ describe('AlertManagementList', () => {
 
   function mountComponent({
     stubs = {},
-    props = { alertManagementEnabled: false },
+    props = {
+      alertManagementEnabled: false,
+      userCanEnableAlertManagement: false,
+    },
     data = {},
     loading = false,
   } = {}) {
@@ -62,7 +65,7 @@ describe('AlertManagementList', () => {
     it('loading state', () => {
       mountComponent({
         stubs: { GlTable },
-        props: { alertManagementEnabled: true },
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
         data: { alerts: null },
         loading: true,
       });
@@ -73,7 +76,7 @@ describe('AlertManagementList', () => {
     it('error state', () => {
       mountComponent({
         stubs: { GlTable },
-        props: { alertManagementEnabled: true },
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
         data: { alerts: null, errored: true },
         loading: false,
       });
@@ -86,7 +89,7 @@ describe('AlertManagementList', () => {
     it('empty state', () => {
       mountComponent({
         stubs: { GlTable },
-        props: { alertManagementEnabled: true },
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
         data: { alerts: [], errored: false },
         loading: false,
       });

spec/helpers/projects/alert_management_helper_spec.rb

@@ -5,21 +5,32 @@ require 'spec_helper'
 describe Projects::AlertManagementHelper do
   include Gitlab::Routing.url_helpers
 
-  let(:project) { create(:project) }
+  let_it_be(:project, reload: true) { create(:project) }
+  let_it_be(:current_user) { create(:user) }
 
   describe '#alert_management_data' do
+    let(:user_can_enable_alert_management) { false }
     let(:setting_path) { project_settings_operations_path(project) }
 
     let(:index_path) do
       project_alert_management_index_path(project, format: :json)
     end
 
+    before do
+      allow(helper)
+        .to receive(:can?)
+        .with(current_user, :admin_operations, project)
+        .and_return(user_can_enable_alert_management)
+    end
+
     context 'without alert_managements_setting' do
       it 'returns frontend configuration' do
-        expect(alert_management_data(project)).to eq(
+        expect(alert_management_data(current_user, project)).to eq(
           'index-path' => index_path,
           'enable-alert-management-path' => setting_path,
-          "empty-alert-svg-path" => "/images/illustrations/alert-management-empty-state.svg"
+          "empty-alert-svg-path" => "/images/illustrations/alert-management-empty-state.svg",
+          'user-can-enable-alert-management' => 'false',
+          'alert-management-enabled' => 'true'
         )
       end
     end