From a274f3fc0c7e0e86b226739b8562606567ed72aa Mon Sep 17 00:00:00 2001 From: David O'Regan Date: Wed, 24 Feb 2021 08:39:53 -0500 Subject: [PATCH 1/5] Fix(oncallschedules): update grid starttime and midnight edge case Update the grid start time and allow for midnight shift edge case in weekly grid draw for shifts less than 24 hours --- .../components/oncall_schedule.vue | 2 +- .../components/rotation_assignee.vue | 28 +++++++++---------- .../shifts/components/shift_utils.js | 8 +++--- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue index 437f319b944de6..d7d03b95cff1be 100644 --- a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue +++ b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue @@ -73,7 +73,7 @@ export default { rotations: { query: getShiftsForRotations, variables() { - this.timeframeStartDate.setHours(0, 0, 0, 0); + this.timeframeStartDate.setHours(1, 0, 0, 0); const startsAt = this.timeframeStartDate; const endsAt = nWeeksAfter(startsAt, 2); diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue index 563d1f7eb536f6..d51ff3a4fb8508 100644 --- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue +++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue @@ -39,32 +39,32 @@ export default { }, }, computed: { + assigneeName() { + if (this.shiftWidth <= SHIFT_WIDTHS.sm) { + return truncate(this.assignee.user.username, 3); + } + + return this.assignee.user.username; + }, chevronClass() { return `gl-bg-data-viz-${this.assignee.colorPalette}-${this.assignee.colorWeight}`; }, - startsAt() { - return sprintf(__('Starts: %{startsAt}'), { - startsAt: formatDate(this.rotationAssigneeStartsAt, 'mmmm d, yyyy, h:MMtt Z'), + endsAt() { + return sprintf(__('Ends: %{endsAt}'), { + endsAt: formatDate(this.rotationAssigneeEndsAt, 'mmmm d, yyyy, h:MMtt Z'), }); }, rotationAssigneeUniqueID() { const { _uid } = this; return `${this.assignee.user.id}-${_uid}`; }, - endsAt() { - return sprintf(__('Ends: %{endsAt}'), { - endsAt: formatDate(this.rotationAssigneeEndsAt, 'mmmm d, yyyy, h:MMtt Z'), - }); - }, rotationMobileView() { return this.shiftWidth <= SHIFT_WIDTHS.xs; }, - assigneeName() { - if (this.shiftWidth <= SHIFT_WIDTHS.sm) { - return truncate(this.assignee.user.username, 3); - } - - return this.assignee.user.username; + startsAt() { + return sprintf(__('Starts: %{startsAt}'), { + startsAt: formatDate(this.rotationAssigneeStartsAt, 'mmmm d, yyyy, h:MMtt Z'), + }); }, }, }; diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js index 381d9e2eabc26b..bb2186e92eb118 100644 --- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js +++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js @@ -50,8 +50,8 @@ export const currentTimeframeEndsAt = (timeframeStart, presetType) => { * => true * */ -export const shiftShouldRender = (shiftRangeOverlap = {}) => { - return Boolean(shiftRangeOverlap?.hoursOverlap); +export const shiftShouldRender = (shiftRangeOverlap) => { + return Boolean(shiftRangeOverlap.hoursOverlap); }; /** @@ -242,7 +242,7 @@ export const weekDisplayShiftWidth = ( ); } - const widthOffset = shiftStartDateOutOfRange ? 1 : 0; - + const shiftEndsAtMidnight = new Date(shiftRangeOverlap.overlapEndDate).getHours() === 0; + const widthOffset = shiftStartDateOutOfRange && !shiftEndsAtMidnight ? 1 : 0; return shiftTimeUnitWidth * (shiftRangeOverlap.daysOverlap - widthOffset) - ASSIGNEE_SPACER; }; -- GitLab From 654f8e81dc676eb64221d6f9379099b85fb8579f Mon Sep 17 00:00:00 2001 From: David O'Regan Date: Wed, 24 Feb 2021 13:38:09 -0500 Subject: [PATCH 2/5] chore(specs): update specs and comment --- .../shifts/components/shift_utils.js | 2 +- .../shifts/components/shift_utils_spec.js | 45 ++++++++++++++----- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js index bb2186e92eb118..4ae4f87bda3940 100644 --- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js +++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/shift_utils.js @@ -225,7 +225,7 @@ export const weekDisplayShiftLeft = ( * @returns {Number} * * @example - * weekDisplayShiftWidth(false, { daysOverlap: 3 }, false , 50) + * weekDisplayShiftWidth(false, { daysOverlap: 3, hoursOverlap: 72, overlapEndDate: 1610496000000 }, false , 50) * => 148 * */ diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js b/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js index 54b987e4567e96..5598b7d312f0ab 100644 --- a/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js +++ b/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js @@ -209,24 +209,34 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/ describe('weekDisplayShiftWidth', () => { const shiftTimeUnitWidth = 50; + const mockTimeframeInitialDate = new Date(2018, 0, 1, 0, 0, 0, 0); it.each` - shiftUnitIsHour | shiftRangeOverlap | shiftStartDateOutOfRange | value - ${true} | ${{ daysOverlap: 1, hoursOverlap: 4 }} | ${false} | ${6} - ${true} | ${{ daysOverlap: 1, hoursOverlap: 8 }} | ${false} | ${14} - ${true} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false} | ${48} - ${true} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${true} | ${48} - ${false} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false} | ${48} - ${false} | ${{ daysOverlap: 2, hoursOverlap: 48 }} | ${false} | ${98} - ${false} | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${false} | ${148} - ${false} | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${true} | ${98} + shiftUnitIsHour | shiftRangeOverlapObject | shiftStartDateOutOfRange | value + ${true} | ${{ daysOverlap: 1, hoursOverlap: 4 }} | ${false} | ${6} + ${true} | ${{ daysOverlap: 1, hoursOverlap: 8 }} | ${false} | ${14} + ${true} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false} | ${48} + ${true} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${true} | ${48} + ${false} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false} | ${48} + ${false} | ${{ daysOverlap: 2, hoursOverlap: 48 }} | ${false} | ${98} + ${false} | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${false} | ${148} + ${false} | ${{ daysOverlap: 5, hoursOverlap: 120 }} | ${true} | ${248} `( `returns $value px as the rotation width when shiftUnitIsHour is $shiftUnitIsHour, shiftStartDateOutOfRange is $shiftStartDateOutOfRange and shiftTimeUnitWidth is ${shiftTimeUnitWidth}`, - ({ shiftUnitIsHour, shiftRangeOverlap, shiftStartDateOutOfRange, value }) => { + ({ + shiftUnitIsHour, + shiftRangeOverlapObject: { daysOverlap, hoursOverlap }, + shiftStartDateOutOfRange, + value, + }) => { expect( weekDisplayShiftWidth( shiftUnitIsHour, - shiftRangeOverlap, + { + overlapEndDate: mockTimeStamp(mockTimeframeInitialDate, daysOverlap), + daysOverlap, + hoursOverlap, + }, shiftStartDateOutOfRange, shiftTimeUnitWidth, ), @@ -234,4 +244,17 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/ }, ); }); + + it('returns with an offset of 1 day width less only when the shift start date is before the timeframe start and the shift does not end at midnight', () => { + const mockOverlapEndDateNotAtMidnight = new Date(2018, 0, 31, 3, 4, 2, 1); + + expect( + weekDisplayShiftWidth( + false, + { overlapEndDate: mockOverlapEndDateNotAtMidnight, daysOverlap: 3, hoursOverlap: 72 }, + true, + 50, + ), + ).toBe(98); + }); }); -- GitLab From 09256260ebe21867bafe1aaf192661a79e5bc2ad Mon Sep 17 00:00:00 2001 From: David O'Regan Date: Thu, 25 Feb 2021 17:00:00 -0500 Subject: [PATCH 3/5] chore(feedback): apply merge feedback --- .../shifts/components/shift_utils_spec.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js b/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js index 5598b7d312f0ab..7eee7e885070ae 100644 --- a/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js +++ b/ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_utils_spec.js @@ -209,18 +209,18 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/ describe('weekDisplayShiftWidth', () => { const shiftTimeUnitWidth = 50; - const mockTimeframeInitialDate = new Date(2018, 0, 1, 0, 0, 0, 0); + const mockTimeframeInitialDate = new Date('2018-01-01T00:00:00'); it.each` - shiftUnitIsHour | shiftRangeOverlapObject | shiftStartDateOutOfRange | value - ${true} | ${{ daysOverlap: 1, hoursOverlap: 4 }} | ${false} | ${6} - ${true} | ${{ daysOverlap: 1, hoursOverlap: 8 }} | ${false} | ${14} - ${true} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false} | ${48} - ${true} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${true} | ${48} - ${false} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false} | ${48} - ${false} | ${{ daysOverlap: 2, hoursOverlap: 48 }} | ${false} | ${98} - ${false} | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${false} | ${148} - ${false} | ${{ daysOverlap: 5, hoursOverlap: 120 }} | ${true} | ${248} + shiftUnitIsHour | shiftRangeOverlapObject | shiftStartDateOutOfRange | value + ${true} | ${{ daysOverlap: 1, hoursOverlap: 4 }} | ${false} | ${6} + ${true} | ${{ daysOverlap: 1, hoursOverlap: 8 }} | ${false} | ${14} + ${true} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false} | ${48} + ${true} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${true} | ${48} + ${false} | ${{ daysOverlap: 1, hoursOverlap: 24 }} | ${false} | ${48} + ${false} | ${{ daysOverlap: 2, hoursOverlap: 48 }} | ${false} | ${98} + ${false} | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${false} | ${148} + ${false} | ${{ daysOverlap: 3, hoursOverlap: 72 }} | ${true} | ${148} `( `returns $value px as the rotation width when shiftUnitIsHour is $shiftUnitIsHour, shiftStartDateOutOfRange is $shiftStartDateOutOfRange and shiftTimeUnitWidth is ${shiftTimeUnitWidth}`, ({ @@ -246,7 +246,7 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/ }); it('returns with an offset of 1 day width less only when the shift start date is before the timeframe start and the shift does not end at midnight', () => { - const mockOverlapEndDateNotAtMidnight = new Date(2018, 0, 31, 3, 4, 2, 1); + const mockOverlapEndDateNotAtMidnight = new Date('2018-01-01T03:02:01'); expect( weekDisplayShiftWidth( -- GitLab From f1ee3ed3b08b09ab03bcbec52e0c813bfa7b922e Mon Sep 17 00:00:00 2001 From: David O'Regan Date: Fri, 26 Feb 2021 09:19:34 -0500 Subject: [PATCH 4/5] Fix(oncallschedules): replace GlToken with plain div --- .../rotations/components/rotation_assignee.vue | 18 ++++++++++-------- .../components/rotation_assignee_spec.js | 4 ++-- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue index d51ff3a4fb8508..dbf086cbf65223 100644 --- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue +++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue @@ -1,5 +1,5 @@