Commit 0e185a22 authored by Vitaly Slobodin's avatar Vitaly Slobodin

Merge branch 'tr-escalation-policy-limit' into 'master'

Remove the add escalation rule link when at limit

See merge request gitlab-org/gitlab!65429
parents 6dcfb73a 025c62cb
......@@ -3,7 +3,7 @@ import { GlLink, GlForm, GlFormGroup, GlFormInput } from '@gitlab/ui';
import { cloneDeep, uniqueId } from 'lodash';
import createFlash from '~/flash';
import { s__, __ } from '~/locale';
import { DEFAULT_ACTION, DEFAULT_ESCALATION_RULE } from '../constants';
import { DEFAULT_ACTION, DEFAULT_ESCALATION_RULE, MAX_RULES_LENGTH } from '../constants';
import getOncallSchedulesQuery from '../graphql/queries/get_oncall_schedules.query.graphql';
import EscalationRule from './escalation_rule.vue';
......@@ -21,6 +21,7 @@ export const i18n = {
},
},
addRule: s__('EscalationPolicies|+ Add an additional rule'),
maxRules: s__('EscalationPolicies|Maximum of 10 rules has been reached.'),
failedLoadingSchedules: s__('EscalationPolicies|Failed to load oncall-schedules'),
};
......@@ -71,6 +72,9 @@ export default {
schedulesLoading() {
return this.$apollo.queries.schedules.loading;
},
hasMaxRules() {
return this.rules?.length === MAX_RULES_LENGTH;
},
},
mounted() {
this.rules = this.form.rules.map((rule) => {
......@@ -164,8 +168,11 @@ export default {
@remove-escalation-rule="removeEscalationRule"
/>
</gl-form-group>
<gl-link @click="addRule">
<gl-link v-if="!hasMaxRules" @click="addRule">
<span>{{ $options.i18n.addRule }}</span>
</gl-link>
<span v-else data-testid="max-rules-text" class="gl-text-gray-500">
{{ $options.i18n.maxRules }}
</span>
</gl-form>
</template>
......@@ -242,6 +242,7 @@ export default {
:title="title"
:action-primary="actionsProps.primary"
:action-cancel="actionsProps.cancel"
scrollable
@primary.prevent="isEditMode ? updateEscalationPolicy() : createEscalationPolicy()"
@canceled="resetForm"
@close="resetForm"
......
......@@ -21,3 +21,5 @@ export const DEFAULT_ESCALATION_RULE = {
export const addEscalationPolicyModalId = 'addEscalationPolicyModal';
export const editEscalationPolicyModalId = 'editEscalationPolicyModal';
export const deleteEscalationPolicyModalId = 'deleteEscalationPolicyModal';
export const MAX_RULES_LENGTH = 10;
import { GlLink } from '@gitlab/ui';
import { nextTick } from 'vue';
import AddEscalationPolicyForm, {
i18n,
} from 'ee/escalation_policies/components/add_edit_escalation_policy_form.vue';
import EscalationRule from 'ee/escalation_policies/components/escalation_rule.vue';
import { DEFAULT_ESCALATION_RULE } from 'ee/escalation_policies/constants';
import { DEFAULT_ESCALATION_RULE, MAX_RULES_LENGTH } from 'ee/escalation_policies/constants';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import mockPolicies from './mocks/mockPolicies.json';
......@@ -47,6 +48,7 @@ describe('AddEscalationPolicyForm', () => {
const findRules = () => wrapper.findAllComponents(EscalationRule);
const findAddRuleLink = () => wrapper.findComponent(GlLink);
const findMaxRulesText = () => wrapper.findByTestId('max-rules-text');
describe('Escalation rules', () => {
it('should render one default rule when rules were not provided', () => {
......@@ -55,7 +57,7 @@ describe('AddEscalationPolicyForm', () => {
it('should render all the rules if they were provided', async () => {
createComponent({ props: { form: { rules: mockPolicies[1].rules } } });
await wrapper.vm.$nextTick();
await nextTick();
expect(findRules()).toHaveLength(mockPolicies[1].rules.length);
});
......@@ -65,9 +67,24 @@ describe('AddEscalationPolicyForm', () => {
expect(link.text()).toMatchInterpolatedText(i18n.addRule);
});
it('should show max rules message when at max rules capacity', async () => {
// Create 10 rules
const rules = Array(MAX_RULES_LENGTH).fill(mockPolicies[1].rules[0]);
createComponent({ props: { form: { rules } } });
await nextTick();
const link = findAddRuleLink();
expect(findRules()).toHaveLength(MAX_RULES_LENGTH);
expect(link.exists()).toBe(false);
const maxRules = findMaxRulesText();
expect(maxRules.exists()).toBe(true);
expect(maxRules.text()).toMatchInterpolatedText(i18n.maxRules);
});
it('should add an empty rule to the rules list on click', async () => {
findAddRuleLink().vm.$emit('click');
await wrapper.vm.$nextTick();
await nextTick();
const rules = findRules();
expect(rules.length).toBe(2);
expect(rules.at(1).props('rule')).toMatchObject(DEFAULT_ESCALATION_RULE);
......@@ -75,7 +92,7 @@ describe('AddEscalationPolicyForm', () => {
it('should NOT emit updates when rule is added', async () => {
findAddRuleLink().vm.$emit('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('update-escalation-policy-form')).toBeUndefined();
});
......
......@@ -13087,6 +13087,9 @@ msgstr ""
msgid "EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} minutes"
msgstr ""
msgid "EscalationPolicies|Maximum of 10 rules has been reached."
msgstr ""
msgid "EscalationPolicies|Minutes must be between 0 and 1440."
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