Commit 183a78be authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Handle schedule removal - simple case

parent 4ee6db7d
......@@ -27,6 +27,7 @@ export const i18n = {
'EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} %{then} THEN %{doAction} %{schedule}',
),
minutes: s__('EscalationPolicies|mins'),
noRules: s__('EscalationPolicies|This policy has no escalation rules.'),
};
const isRuleValid = ({ status, elapsedTimeMinutes, oncallSchedule: { name } }) =>
......@@ -133,37 +134,42 @@ export default {
{{ policy.description }}
</p>
<div class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-5">
<div
v-for="(rule, ruleIndex) in policy.rules"
:key="rule.id"
:class="{ 'gl-mb-5': ruleIndex !== policy.rules.length - 1 }"
>
<gl-icon name="clock" class="gl-mr-3" />
<gl-sprintf :message="$options.i18n.escalationRule">
<template #alertStatus>
{{ $options.ALERT_STATUSES[rule.status].toLowerCase() }}
</template>
<template #minutes>
<span class="gl-font-weight-bold">
{{ rule.elapsedTimeMinutes }} {{ $options.i18n.minutes }}
</span>
</template>
<template #then>
<span class="right-arrow">
<i class="right-arrow-head"></i>
</span>
<gl-icon name="notifications" class="gl-mr-3" />
</template>
<template #doAction>
{{ $options.ACTIONS[$options.DEFAULT_ACTION].toLowerCase() }}
</template>
<template #schedule>
<span class="gl-font-weight-bold">
{{ rule.oncallSchedule.name }}
</span>
</template>
</gl-sprintf>
<div v-if="!policy.rules.length" class="gl-text-red-500">
<gl-icon name="status_warning" class="gl-mr-3" /> {{ $options.i18n.noRules }}
</div>
<template v-else>
<div
v-for="(rule, ruleIndex) in policy.rules"
:key="rule.id"
:class="{ 'gl-mb-5': ruleIndex !== policy.rules.length - 1 }"
>
<gl-icon name="clock" class="gl-mr-3" />
<gl-sprintf :message="$options.i18n.escalationRule">
<template #alertStatus>
{{ $options.ALERT_STATUSES[rule.status].toLowerCase() }}
</template>
<template #minutes>
<span class="gl-font-weight-bold">
{{ rule.elapsedTimeMinutes }} {{ $options.i18n.minutes }}
</span>
</template>
<template #then>
<span class="right-arrow">
<i class="right-arrow-head"></i>
</span>
<gl-icon name="notifications" class="gl-mr-3" />
</template>
<template #doAction>
{{ $options.ACTIONS[$options.DEFAULT_ACTION].toLowerCase() }}
</template>
<template #schedule>
<span class="gl-font-weight-bold">
{{ rule.oncallSchedule.name }}
</span>
</template>
</gl-sprintf>
</div>
</template>
</div>
</gl-collapse>
</gl-card>
......
......@@ -10,6 +10,9 @@ export const i18n = {
deleteScheduleMessage: s__(
'OnCallSchedules|Are you sure you want to delete the "%{deleteSchedule}" schedule? This action cannot be undone.',
),
escalationRulesWillBeDeletedMessage: s__(
'OnCallScheduless|Any escalation rules that are using this schedule will also be deleted.',
),
};
export default {
......@@ -106,5 +109,8 @@ export default {
<gl-sprintf :message="$options.i18n.deleteScheduleMessage">
<template #deleteSchedule>{{ schedule.name }}</template>
</gl-sprintf>
<div class="gl-mt-5">
{{ $options.i18n.escalationRulesWillBeDeletedMessage }}
</div>
</gl-modal>
</template>
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EscalationPolicy renders policy with rules 1`] = `
exports[`EscalationPolicy renders a policy with rules 1`] = `
<div>
<gl-card-stub
bodyclass="[object Object]"
......@@ -32,14 +32,14 @@ exports[`EscalationPolicy renders policy with rules 1`] = `
size="16"
/>
IF alert is not
acknowledged
in
acknowledged
in
<span
class="gl-font-weight-bold"
>
1 mins
1 mins
</span>
<span
......@@ -56,14 +56,14 @@ exports[`EscalationPolicy renders policy with rules 1`] = `
size="16"
/>
THEN
email on-call user in schedule
email on-call user in schedule
<span
class="gl-font-weight-bold"
>
Schedule to fill in
Schedule to fill in
</span>
</div>
<div
......@@ -75,14 +75,14 @@ exports[`EscalationPolicy renders policy with rules 1`] = `
size="16"
/>
IF alert is not
resolved
in
resolved
in
<span
class="gl-font-weight-bold"
>
2 mins
2 mins
</span>
<span
......@@ -99,14 +99,14 @@ exports[`EscalationPolicy renders policy with rules 1`] = `
size="16"
/>
THEN
email on-call user in schedule
email on-call user in schedule
<span
class="gl-font-weight-bold"
>
Monitor schedule
Monitor schedule
</span>
</div>
</div>
......
import { GlSprintf } from '@gitlab/ui';
import { GlSprintf, GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { cloneDeep } from 'lodash';
import EditEscalationPolicyModal from 'ee/escalation_policies/components/add_edit_escalation_policy_modal.vue';
import DeleteEscalationPolicyModal from 'ee/escalation_policies/components/delete_escalation_policy_modal.vue';
import EscalationPolicy from 'ee/escalation_policies/components/escalation_policy.vue';
import EscalationPolicy, { i18n } from 'ee/escalation_policies/components/escalation_policy.vue';
import {
deleteEscalationPolicyModalId,
......@@ -16,10 +16,10 @@ describe('EscalationPolicy', () => {
let wrapper;
const escalationPolicy = parsePolicy(cloneDeep(mockPolicies[0]));
const createComponent = () => {
const createComponent = (policy = escalationPolicy) => {
wrapper = shallowMount(EscalationPolicy, {
propsData: {
policy: escalationPolicy,
policy,
index: 0,
},
stubs: {
......@@ -38,11 +38,24 @@ describe('EscalationPolicy', () => {
const findDeleteModal = () => wrapper.findComponent(DeleteEscalationPolicyModal);
const findEditModal = () => wrapper.findComponent(EditEscalationPolicyModal);
const findWarningIcon = () => wrapper.findComponent(GlIcon);
it('renders policy with rules', () => {
it('renders a policy with rules', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('renders a policy without rules', () => {
const policyWithoutRules = {
id: mockPolicies[0].id,
name: mockPolicies[0].name,
description: mockPolicies[0].description,
rules: [],
};
createComponent(policyWithoutRules);
expect(findWarningIcon().exists()).toBe(true);
expect(wrapper.text()).toContain(i18n.noRules);
});
describe('Modals', () => {
describe('delete policy modal', () => {
it('should render a modal and provide it with correct id', () => {
......
......@@ -17,5 +17,13 @@ exports[`DeleteScheduleModal renders delete schedule modal layout 1`] = `
<gl-sprintf-stub
message="Are you sure you want to delete the \\"%{deleteSchedule}\\" schedule? This action cannot be undone."
/>
<div
class="gl-mt-5"
>
Any escalation rules that are using this schedule will also be deleted.
</div>
</gl-modal-stub>
`;
......@@ -13059,6 +13059,9 @@ msgstr ""
msgid "EscalationPolicies|The escalation policy could not be updated. Please try again"
msgstr ""
msgid "EscalationPolicies|This policy has no escalation rules."
msgstr ""
msgid "EscalationPolicies|mins"
msgstr ""
......@@ -22679,6 +22682,9 @@ msgstr ""
msgid "On-call schedules"
msgstr ""
msgid "OnCallScheduless|Any escalation rules that are using this schedule will also be deleted."
msgstr ""
msgid "OnCallSchedules|1 day"
msgstr ""
......
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