Fix: Update day grid to handle DLS

Update the day grid to handle the
gap created by DLS through using the
timezone offset

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

@@ -54,11 +54,6 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   inject: ['projectPath', 'timezones'],
-  provide() {
-    return {
-      selectedTimezone: this.selectedTimezone,
-    };
-  },
   props: {
     schedule: {
       type: Object,

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue

@@ -4,7 +4,6 @@ import { uniqueId } from 'lodash';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { truncate } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
-import { selectedTimezoneFormattedOffset } from '../../schedule/utils';
 
 export const SHIFT_WIDTHS = {
   md: 100,
@@ -13,7 +12,7 @@ export const SHIFT_WIDTHS = {
 };
 
 const ROTATION_CENTER_CLASS = 'gl-display-flex gl-justify-content-center gl-align-items-center';
-export const TIME_DATE_FORMAT = 'mmmm d, yyyy, HH:MM';
+export const TIME_DATE_FORMAT = 'mmmm d, yyyy, HH:MM ("UTC:" o)';
 
 export default {
   ROTATION_CENTER_CLASS,
@@ -21,7 +20,6 @@ export default {
     GlAvatar,
     GlPopover,
   },
-  inject: ['selectedTimezone'],
   props: {
     assignee: {
       type: Object,
@@ -57,9 +55,7 @@ export default {
     },
     endsAt() {
       return sprintf(__('Ends: %{endsAt}'), {
-        endsAt: `${formatDate(this.rotationAssigneeEndsAt, TIME_DATE_FORMAT)} ${
-          this.timezoneOffset
-        }`,
+        endsAt: `${formatDate(this.rotationAssigneeEndsAt, TIME_DATE_FORMAT)}`,
       });
     },
     rotationAssigneeUniqueID() {
@@ -73,14 +69,9 @@ export default {
     },
     startsAt() {
       return sprintf(__('Starts: %{startsAt}'), {
-        startsAt: `${formatDate(this.rotationAssigneeStartsAt, TIME_DATE_FORMAT)} ${
-          this.timezoneOffset
-        }`,
+        startsAt: `${formatDate(this.rotationAssigneeStartsAt, TIME_DATE_FORMAT)}`,
       });
     },
-    timezoneOffset() {
-      return selectedTimezoneFormattedOffset(this.selectedTimezone.formatted_offset);
-    },
   },
 };
 </script>

ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/days_schedule_shift.vue

@@ -78,9 +78,12 @@ export default {
       const baseWidth =
         this.shiftEndsAt.getTime() >= this.currentTimeframeEndsAt.getTime()
           ? HOURS_IN_DAY
-          : this.shiftRangeOverlap.hoursOverlap;
+          : this.shiftRangeOverlap.hoursOverlap + this.shiftOffset;
       return this.shiftTimeUnitWidth * baseWidth - ASSIGNEE_SPACER;
     },
+    shiftOffset() {
+      return (this.shiftStartsAt.getTimezoneOffset() - this.shiftEndsAt.getTimezoneOffset()) / 60;
+    },
   },
 };
 </script>

ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js

@@ -4,12 +4,10 @@ import RotationAssignee, {
   SHIFT_WIDTHS,
   TIME_DATE_FORMAT,
 } from 'ee/oncall_schedules/components/rotations/components/rotation_assignee.vue';
-import { selectedTimezoneFormattedOffset } from 'ee/oncall_schedules/components/schedule/utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { truncate } from '~/lib/utils/text_utility';
 import mockRotations from '../../mocks/mock_rotation.json';
-import mockTimezones from '../../mocks/mock_timezones.json';
 
 jest.mock('lodash/uniqueId', () => (prefix) => `${prefix}fakeUniqueId`);
 
@@ -29,14 +27,9 @@ describe('RotationAssignee', () => {
     return formatDate(date, TIME_DATE_FORMAT);
   };
 
-  const selectedTimezone = mockTimezones[0];
-
   function createComponent({ props = {} } = {}) {
     wrapper = extendedWrapper(
       shallowMount(RotationAssignee, {
-        provide: {
-          selectedTimezone,
-        },
         propsData: {
           assignee: { ...assignee.participant },
           rotationAssigneeStartsAt: assignee.startsAt,
@@ -87,10 +80,9 @@ describe('RotationAssignee', () => {
     });
 
     it('should render an assignee schedule and rotation information in a popover', () => {
-      const timezone = selectedTimezoneFormattedOffset(selectedTimezone.formatted_offset);
       expect(findPopOver().attributes('target')).toBe('rotation-assignee-fakeUniqueId');
-      expect(findStartsAt().text()).toContain(`${formattedDate(assignee.startsAt)} ${timezone}`);
-      expect(findEndsAt().text()).toContain(`${formattedDate(assignee.endsAt)} ${timezone}`);
+      expect(findStartsAt().text()).toContain(formattedDate(assignee.startsAt));
+      expect(findEndsAt().text()).toContain(formattedDate(assignee.endsAt));
     });
   });
 });

ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap

@@ -102,7 +102,7 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
                 data-testid="rotation-assignee-starts-at"
               >
                 
-      Starts: January 12, 2021, 10:04 (UTC -12:00)
+      Starts: January 12, 2021, 10:04 (UTC: +0000)
     
               </p>
                
@@ -111,7 +111,7 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
                 data-testid="rotation-assignee-ends-at"
               >
                 
-      Ends: January 15, 2021, 10:04 (UTC -12:00)
+      Ends: January 15, 2021, 10:04 (UTC: +0000)
     
               </p>
             </div>
@@ -142,7 +142,7 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
                 data-testid="rotation-assignee-starts-at"
               >
                 
-      Starts: January 16, 2021, 10:04 (UTC -12:00)
+      Starts: January 16, 2021, 10:04 (UTC: +0000)
     
               </p>
                
@@ -151,7 +151,7 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
                 data-testid="rotation-assignee-ends-at"
               >
                 
-      Ends: January 18, 2021, 10:04 (UTC -12:00)
+      Ends: January 18, 2021, 10:04 (UTC: +0000)
     
               </p>
             </div>

ee/spec/frontend/oncall_schedule/schedule/components/rotations_list_section_spec.js

@@ -8,7 +8,6 @@ import { PRESET_TYPES } from 'ee/oncall_schedules/constants';
 import { useFakeDate } from 'helpers/fake_date';
 import { scheduleIid } from '../../mocks/apollo_mock';
 import mockRotations from '../../mocks/mock_rotation.json';
-import mockTimezones from '../../mocks/mock_timezones.json';
 
 describe('RotationsListSectionComponent', () => {
   let wrapper;
@@ -29,7 +28,6 @@ describe('RotationsListSectionComponent', () => {
       },
       provide: {
         projectPath,
-        selectedTimezone: mockTimezones[0],
       },
       stubs: {
         GlCard,

ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/days_schedule_shift_spec.js

@@ -65,8 +65,8 @@ describe('ee/oncall_schedules/components/schedule/components/shifts/components/d
 
     it('calculates the correct rotation assignee styles when the shift does not start at the beginning of the time-frame cell', () => {
       /**
-       * Where left should be 500px i.e. ((HOURS_IN_DAY - (HOURS_IN_DAY - overlapStartTime)) * CELL_WIDTH)(((24 - (24 - 10)) * 50))
-       * and width should be overlapping hours * CELL_WIDTH(12 * 50 - 2)
+       * Where left should be 500px i.e. ((HOURS_IN_DAY - (HOURS_IN_DAY - overlapStartTime)) * CELL_WIDTH) (((24 - (24 - 10)) * 50))
+       * and width should be overlapping hours * CELL_WIDTH (12 * 50 - 2)
        */
       createComponent({
         props: {
@@ -83,5 +83,30 @@ describe('ee/oncall_schedules/components/schedule/components/shifts/components/d
         width: '598px',
       });
     });
+
+    it('handles the offset for timezone changes', () => {
+      const DLSTimeframeItem = new Date(2021, 2, 14);
+      const DSLTimeframe = [timeframeItem, nDaysAfter(timeframeItem, DAYS_IN_WEEK)];
+      /**
+       * Where left should be: ((HOURS_IN_DAY - (HOURS_IN_DAY - overlapStartTime)) * CELL_WIDTH)
+       * and width should be: (overlappingHours + timezoneOffset) * CELL_WIDTH
+       */
+      createComponent({
+        props: {
+          shift: {
+            ...shift,
+            startsAt: '2021-03-14T05:00:00Z',
+            endsAt: '2021-03-14T07:00:00Z',
+          },
+          timeframeItem: DLSTimeframeItem,
+          timeframe: DSLTimeframe,
+        },
+        data: { shiftTimeUnitWidth: CELL_WIDTH },
+      });
+      expect(findRotationAssignee().props('rotationAssigneeStyle')).toEqual({
+        left: '250px',
+        width: '98px',
+      });
+    });
   });
 });