Commit 9c21f78e authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Add create issue btn on alert details page

parent 56f2d758
<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"
......
......@@ -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,
},
});
},
......
......@@ -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
......
......@@ -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
- 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) }
......@@ -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 ""
......
......@@ -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);
});
});
});
});
});
......@@ -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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment