Escalation rule improvements

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

@@ -79,7 +79,6 @@ export default {
   methods: {
     addRule() {
       this.rules.push({ ...cloneDeep(defaultEscalationRule), key: this.getUid() });
-      this.emitUpdate();
     },
     updateEscalationRules(index, rule) {
       this.rules[index] = rule;

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

@@ -38,7 +38,7 @@ export default {
         rules: [],
       },
       validationState: {
-        name: true,
+        name: null,
         rules: [],
       },
       error: null,
@@ -103,7 +103,7 @@ export default {
             }
             this.$refs.addUpdateEscalationPolicyModal.hide();
             this.$emit('policyCreated');
-            this.clearForm();
+            this.resetForm();
           },
         )
         .catch((error) => {
@@ -124,12 +124,17 @@ export default {
     hideErrorAlert() {
       this.error = null;
     },
-    clearForm() {
+    resetForm() {
       this.form = {
         name: '',
         description: '',
         rules: [],
       };
+      this.validationState = {
+        name: null,
+        rules: [],
+      };
+      this.hideErrorAlert();
     },
   },
 };
@@ -144,7 +149,8 @@ export default {
     :action-primary="actionsProps.primary"
     :action-cancel="actionsProps.cancel"
     @primary.prevent="createEscalationPolicy"
-    @cancel="clearForm"
+    @canceled="resetForm"
+    @close="resetForm"
   >
     <gl-alert v-if="error" variant="danger" class="gl-mt-n3 gl-mb-3" @dismiss="hideErrorAlert">
       {{ error }}

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

@@ -5,6 +5,7 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlCard,
+  GlButton,
   GlIcon,
   GlSprintf,
   GlTooltipDirective as GlTooltip,
@@ -24,6 +25,7 @@ export const i18n = {
       noSchedules: s__(
         'EscalationPolicies|A schedule is required for adding an escalation policy. Please create an on-call schedule first.',
       ),
+      removeRuleLabel: s__('EscalationPolicies|Remove escalation rule'),
     },
   },
 };
@@ -38,6 +40,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlCard,
+    GlButton,
     GlIcon,
     GlSprintf,
   },
@@ -111,9 +114,12 @@ export default {
 
 <template>
   <gl-card class="gl-border-gray-400 gl-bg-gray-10 gl-mb-3 gl-relative">
-    <gl-icon
+    <gl-button
       v-if="index !== 0"
-      name="close"
+      category="tertiary"
+      size="small"
+      icon="close"
+      :aria-label="$options.i18n.fields.rules.removeRuleLabel"
       class="gl-absolute rule-close-icon"
       @click="$emit('remove-escalation-rule', index)"
     />

ee/spec/frontend/escalation_policies/add_edit_escalation_policy_form_spec.js

@@ -82,18 +82,10 @@ describe('AddEscalationPolicyForm', () => {
       expect(rules.at(1).props('rule')).toMatchObject(defaultEscalationRule);
     });
 
-    it('should emit updates when rule is added', async () => {
+    it('should NOT emit updates when rule is added', async () => {
       findAddRuleLink().vm.$emit('click');
       await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('update-escalation-policy-form')[0]).toMatchObject([
-        {
-          field: 'rules',
-          value: [
-            expect.objectContaining(defaultEscalationRule),
-            expect.objectContaining(defaultEscalationRule),
-          ],
-        },
-      ]);
+      expect(wrapper.emitted('update-escalation-policy-form')).toBeUndefined();
     });
 
     it('on rule update emitted should update rules array and emit updates up', () => {

ee/spec/frontend/escalation_policies/add_edit_escalation_policy_modal_spec.js

@@ -90,14 +90,30 @@ describe('AddEscalationPolicyModal', () => {
       expect(alert.text()).toContain(error);
     });
 
-    it('clears the form on modal close', () => {
+    it('clears the form on modal cancel', () => {
       expect(wrapper.vm.form).toEqual(mockPolicy);
-      findModal().vm.$emit('cancel', { preventDefault: jest.fn() });
+      findModal().vm.$emit('canceled', { preventDefault: jest.fn() });
       expect(wrapper.vm.form).toEqual({
         name: '',
         description: '',
         rules: [],
       });
+
+      expect(wrapper.vm.validationState).toEqual({
+        name: null,
+        rules: [],
+      });
+    });
+
+    it('clears the validation state on modal cancel', () => {
+      expect(wrapper.vm.validationState.name).toBe(null);
+      findEscalationPolicyForm().vm.$emit('update-escalation-policy-form', {
+        field: 'name',
+        value: '',
+      });
+      expect(wrapper.vm.validationState.name).toBe(false);
+      findModal().vm.$emit('canceled', { preventDefault: jest.fn() });
+      expect(wrapper.vm.validationState.name).toBe(null);
     });
   });
 

locale/gitlab.pot

@@ -13108,6 +13108,9 @@ msgstr ""
 msgid "EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} minutes"
 msgstr ""
 
+msgid "EscalationPolicies|Remove escalation rule"
+msgstr ""
+
 msgid "EscalationPolicies|Select schedule"
 msgstr ""