Add create issue btn on alert details page

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

 <script>
-import { GlNewDropdown, GlNewDropdownItem, GlTabs, GlTab } from '@gitlab/ui';
+import { GlNewDropdown, GlNewDropdownItem, GlTabs, GlTab, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import query from '../graphql/queries/details.query.graphql';
 import { fetchPolicies } from '~/lib/graphql';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   statuses: {
@@ -19,7 +20,9 @@ export default {
     GlNewDropdownItem,
     GlTab,
     GlTabs,
+    GlButton,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     alertId: {
       type: String,
@@ -29,6 +32,10 @@ export default {
       type: String,
       required: true,
     },
+    newIssuePath: {
+      type: String,
+      required: true,
+    },
   },
   apollo: {
     alert: {
@@ -52,9 +59,22 @@ export default {
 </script>
 <template>
   <div>
-    <div v-if="alert" class="d-flex justify-content-between border-bottom pb-2 pt-1">
-      <div></div>
-      <gl-new-dropdown class="align-self-center" right>
+    <div
+      v-if="alert"
+      class="gl-display-flex justify-content-end gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid gl-p-4"
+    >
+      <gl-button
+        v-if="glFeatures.createIssueFromAlertEnabled"
+        data-testid="createIssueBtn"
+        :href="newIssuePath"
+        category="primary"
+        variant="success"
+      >
+        {{ s__('AlertManagement|Create issue') }}
+      </gl-button>
+    </div>
+    <div class="gl-display-flex justify-content-end">
+      <gl-new-dropdown right>
         <gl-new-dropdown-item
           v-for="(label, field) in $options.statuses"
           :key="field"

app/assets/javascripts/alert_management/details.js

@@ -7,7 +7,7 @@ Vue.use(VueApollo);
 
 export default selector => {
   const domEl = document.querySelector(selector);
-  const { alertId, projectPath } = domEl.dataset;
+  const { alertId, projectPath, newIssuePath } = domEl.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
@@ -25,6 +25,7 @@ export default selector => {
         props: {
           alertId,
           projectPath,
+          newIssuePath,
         },
       });
     },

app/controllers/projects/alert_management_controller.rb

@@ -6,6 +6,7 @@ class Projects::AlertManagementController < Projects::ApplicationController
   before_action :authorize_read_alert_management_alert!
   before_action do
     push_frontend_feature_flag(:alert_list_status_filtering_enabled)
+    push_frontend_feature_flag(:create_issue_from_alert_enabled)
   end
 
   def index

app/helpers/projects/alert_management_helper.rb

@@ -11,10 +11,11 @@ module Projects::AlertManagementHelper
     }
   end
 
-  def alert_management_detail_data(project_path, alert_id)
+  def alert_management_detail_data(project, alert_id)
     {
       'alert-id' => alert_id,
-      'project-path' => project_path
+      'project-path' => project.full_path,
+      'new-issue-path' => new_project_issue_path(project)
     }
   end
 end

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

 - add_to_breadcrumbs s_('AlertManagement|Alerts'), project_alert_management_index_path(@project)
 - page_title s_('AlertManagement|Alert detail')
 
-#js-alert_details{ data: alert_management_detail_data(@project.full_path, @alert_id) }
+#js-alert_details{ data: alert_management_detail_data(@project, @alert_id) }

locale/gitlab.pot

@@ -1724,6 +1724,9 @@ msgstr ""
 msgid "AlertManagement|Authorize external service"
 msgstr ""
 
+msgid "AlertManagement|Create issue"
+msgstr ""
+
 msgid "AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents."
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_detail_spec.js

@@ -3,16 +3,21 @@ import AlertDetails from '~/alert_management/components/alert_details.vue';
 
 describe('AlertDetails', () => {
   let wrapper;
+  const newIssuePath = 'root/alerts/-/issues/new';
 
-  function mountComponent(alert = {}) {
+  function mountComponent(alert = {}, createIssueFromAlertEnabled = false) {
     wrapper = shallowMount(AlertDetails, {
       propsData: {
         alertId: 'alertId',
         projectPath: 'projectPath',
+        newIssuePath,
       },
       data() {
         return { alert };
       },
+      provide: {
+        glFeatures: { createIssueFromAlertEnabled },
+      },
     });
   }
 
@@ -22,6 +27,8 @@ describe('AlertDetails', () => {
     }
   });
 
+  const findCreatedIssueBtn = () => wrapper.find('[data-testid="createIssueBtn"]');
+
   describe('Alert details', () => {
     describe('when alert is null', () => {
       beforeEach(() => {
@@ -60,5 +67,22 @@ describe('AlertDetails', () => {
     it('renders a status dropdown containing three items', () => {
       expect(wrapper.findAll('[data-testid="statusDropdownItem"]').length).toBe(3);
     });
+
+    describe('Create issue from alert', () => {
+      describe('createIssueFromAlertEnabled feature flag enabled', () => {
+        it('should display a button that links to new issue page', () => {
+          mountComponent({}, true);
+          expect(findCreatedIssueBtn().exists()).toBe(true);
+          expect(findCreatedIssueBtn().attributes('href')).toBe(newIssuePath);
+        });
+      });
+
+      describe('createIssueFromAlertEnabled feature flag disabled', () => {
+        it('should display a button that links to a new issue page', () => {
+          mountComponent({}, false);
+          expect(findCreatedIssueBtn().exists()).toBe(false);
+        });
+      });
+    });
   });
 });

spec/helpers/projects/alert_management_helper_spec.rb

@@ -69,11 +69,13 @@ describe Projects::AlertManagementHelper do
 
   describe '#alert_management_detail_data' do
     let(:alert_id) { 1 }
+    let(:new_issue_path) { new_project_issue_path(project) }
 
     it 'returns detail page configuration' do
-      expect(helper.alert_management_detail_data(project_path, alert_id)).to eq(
+      expect(helper.alert_management_detail_data(project, alert_id)).to eq(
         'alert-id' => alert_id,
-        'project-path' => project_path
+        'project-path' => project_path,
+        'new-issue-path' => new_issue_path
       )
     end
   end