Handle no schedules case for escalaltion rule

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

@@ -68,6 +68,11 @@ export default {
       },
     },
   },
+  computed: {
+    schedulesLoading() {
+      return this.$apollo.queries.schedules.loading;
+    },
+  },
   mounted() {
     this.rules.push({ ...cloneDeep(defaultEscalationRule), key: this.getUid() });
   },
@@ -141,6 +146,7 @@ export default {
         :rule="rule"
         :index="index"
         :schedules="schedules"
+        :schedules-loading="schedulesLoading"
         :is-valid="validationState.rules[index]"
         @update-escalation-rule="updateEscalationRules"
         @remove-escalation-rule="removeEscalationRule"

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

@@ -7,6 +7,7 @@ import {
   GlCard,
   GlIcon,
   GlSprintf,
+  GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { ACTIONS, ALERT_STATUSES } from '../constants';
@@ -20,6 +21,9 @@ export const i18n = {
       validationMsg: s__(
         'EscalationPolicies|A schedule is required for adding an escalation policy.',
       ),
+      noSchedules: s__(
+        'EscalationPolicies|A schedule is required for adding an escalation policy. Please create an on-call schedule first.',
+      ),
     },
   },
 };
@@ -37,6 +41,9 @@ export default {
     GlIcon,
     GlSprintf,
   },
+  directives: {
+    GlTooltip,
+  },
   props: {
     rule: {
       type: Object,
@@ -47,6 +54,11 @@ export default {
       required: false,
       default: () => [],
     },
+    schedulesLoading: {
+      type: Boolean,
+      required: true,
+      default: true,
+    },
     index: {
       type: Number,
       required: true,
@@ -72,6 +84,9 @@ export default {
         ? this.schedules.find(({ iid }) => iid === this.oncallScheduleIid)?.name
         : i18n.fields.rules.selectSchedule;
     },
+    noSchedules() {
+      return !this.schedulesLoading && !this.schedules.length;
+    },
   },
   methods: {
     setOncallSchedule({ iid }) {
@@ -157,6 +172,7 @@ export default {
           </template>
           <template #schedule>
             <gl-dropdown
+              :disabled="noSchedules"
               class="rule-control"
               :text="scheduleDropdownTitle"
               data-testid="schedules-dropdown"
@@ -176,6 +192,14 @@ export default {
                 {{ schedule.name }}
               </gl-dropdown-item>
             </gl-dropdown>
+            <gl-icon
+              v-if="noSchedules"
+              v-gl-tooltip
+              :title="$options.i18n.fields.rules.noSchedules"
+              name="information-o"
+              class="gl-text-gray-500 gl-ml-3"
+              data-testid="no-schedules-info-icon"
+            />
           </template>
         </gl-sprintf>
       </div>

ee/spec/frontend/escalation_policies/add_edit_escalation_policy_form_spec.js

@@ -29,6 +29,11 @@ describe('AddEscalationPolicyForm', () => {
         provide: {
           projectPath,
         },
+        mocks: {
+          $apollo: {
+            queries: { schedules: { loading: false } },
+          },
+        },
       }),
     );
   };

ee/spec/frontend/escalation_policies/escalation_rule_spec.js

@@ -19,6 +19,7 @@ describe('EscalationRule', () => {
         propsData: {
           rule: cloneDeep(defaultEscalationRule),
           schedules: mockSchedules,
+          schedulesLoading: false,
           index: 0,
           isValid: false,
           ...props,
@@ -49,6 +50,8 @@ describe('EscalationRule', () => {
 
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
 
+  const findNoSchedulesInfoIcon = () => wrapper.findByTestId('no-schedules-info-icon');
+
   describe('Status dropdown', () => {
     it('should have correct alert status options', () => {
       expect(findStatusDropdownOptions().wrappers.map((w) => w.text())).toStrictEqual(
@@ -79,6 +82,17 @@ describe('EscalationRule', () => {
         mockSchedules.map(({ name }) => name),
       );
     });
+
+    it('should NOT disable the dropdown OR show the info icon when schedules are loaded and provided', () => {
+      expect(findSchedulesDropdown().attributes('disabled')).toBeUndefined();
+      expect(findNoSchedulesInfoIcon().exists()).toBe(false);
+    });
+
+    it('should disable the dropdown and show the info icon when no schedules provided', () => {
+      createComponent({ props: { schedules: [], schedulesLoading: false } });
+      expect(findSchedulesDropdown().attributes('disabled')).toBe('true');
+      expect(findNoSchedulesInfoIcon().exists()).toBe(true);
+    });
   });
 
   describe('Validation', () => {

locale/gitlab.pot

@@ -13087,6 +13087,9 @@ msgstr ""
 msgid "EscalationPolicies|A schedule is required for adding an escalation policy."
 msgstr ""
 
+msgid "EscalationPolicies|A schedule is required for adding an escalation policy. Please create an on-call schedule first."
+msgstr ""
+
 msgid "EscalationPolicies|Add an escalation policy"
 msgstr ""