Handle schedule removal - simple case

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

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

ee/app/assets/javascripts/oncall_schedules/components/delete_schedule_modal.vue

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

ee/spec/frontend/escalation_policies/__snapshots__/escalation_policy_spec.js.snap

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

ee/spec/frontend/escalation_policies/escalation_policy_spec.js

-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', () => {

ee/spec/frontend/oncall_schedule/__snapshots__/delete_schedule_modal_spec.js.snap

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

locale/gitlab.pot

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