Fix: Add description to oncall schedules view

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

@@ -93,15 +93,12 @@ export default {
     };
   },
   computed: {
-    selectedTimezone() {
-      return this.timezones.find((tz) => tz.identifier === this.schedule.timezone);
+    loading() {
+      return this.$apollo.queries.rotations.loading;
     },
     offset() {
       return selectedTimezoneFormattedOffset(this.selectedTimezone.formatted_offset);
     },
-    timeframe() {
-      return getTimeframeForWeeksView(this.timeframeStartDate);
-    },
     scheduleRange() {
       switch (this.presetType) {
         case PRESET_TYPES.DAYS:
@@ -120,8 +117,17 @@ export default {
           return '';
       }
     },
-    loading() {
-      return this.$apollo.queries.rotations.loading;
+    scheduleInfo() {
+      if (this.schedule.description) {
+        return `${this.schedule.description} | ${this.offset} ${this.schedule.timezone}`;
+      }
+      return `${this.schedule.timezone} | ${this.offset}`;
+    },
+    selectedTimezone() {
+      return this.timezones.find((tz) => tz.identifier === this.schedule.timezone);
+    },
+    timeframe() {
+      return getTimeframeForWeeksView(this.timeframeStartDate);
     },
   },
   methods: {
@@ -194,7 +200,7 @@ export default {
         </div>
       </template>
       <p class="gl-text-gray-500 gl-mb-5" data-testid="scheduleBody">
-        {{ schedule.timezone }} | {{ offset }}
+        {{ scheduleInfo }}
       </p>
       <div class="gl-display-flex gl-justify-content-space-between gl-mb-3">
         <div class="gl-display-flex gl-align-items-center">

ee/changelogs/unreleased/324713-description.yml

+---
+title: Allow oncall schedule to display description
+merge_request: 56796
+author:
+type: fixed

ee/spec/frontend/oncall_schedule/oncall_schedule_spec.js

@@ -70,12 +70,12 @@ describe('On-call schedule', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   const findScheduleHeader = () => wrapper.findByTestId('scheduleHeader');
   const findRotationsHeader = () => wrapper.findByTestId('rotationsHeader');
   const findSchedule = () => wrapper.findByTestId('scheduleBody');
+  const findScheduleDescription = () => findSchedule().text();
   const findRotations = () => wrapper.findByTestId('rotationsBody');
   const findRotationsShiftPreset = () => wrapper.findByTestId('shift-preset-change');
   const findAddRotationsBtn = () => findRotationsHeader().find(GlButton);
@@ -88,12 +88,23 @@ describe('On-call schedule', () => {
     expect(findScheduleHeader().text()).toBe(mockSchedule.name);
   });
 
-  it('shows timezone info', () => {
+  describe('Timeframe schedule card header information', () => {
     const timezone = lastTz.identifier;
     const offset = `(UTC ${lastTz.formatted_offset})`;
-    const description = findSchedule().text();
-    expect(description).toContain(timezone);
-    expect(description).toContain(offset);
+
+    it('shows timezone info', () => {
+      expect(findScheduleDescription()).toContain(timezone);
+      expect(findScheduleDescription()).toContain(offset);
+    });
+
+    it('shows schedule description if present', () => {
+      expect(findScheduleDescription()).toContain(mockSchedule.description);
+    });
+
+    it('does not show schedule description if none present', () => {
+      createComponent({ schedule: { ...mockSchedule, description: null }, loading: false });
+      expect(findScheduleDescription()).not.toContain(mockSchedule.description);
+    });
   });
 
   it('renders rotations header', () => {