Remove the add escalation rule link when at limit

ee/app/assets/javascripts/escalation_policies/components/add_edit_escalation_policy_form.vue

@@ -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>

ee/app/assets/javascripts/escalation_policies/components/add_edit_escalation_policy_modal.vue

@@ -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"

ee/app/assets/javascripts/escalation_policies/constants.js

@@ -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;

ee/spec/frontend/escalation_policies/add_edit_escalation_policy_form_spec.js

 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();
     });
 

locale/gitlab.pot

@@ -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 ""