Merge branch '322137-grid-start-and-end-time' into 'master'

Fix(oncallschedules): update grid start and midnight edge case

See merge request gitlab-org/gitlab!55081

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);
 

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'),
+      });
     },
   },
 };

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);
 };
 
 /**
@@ -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
  *
  */
@@ -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;
 };

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

@@ -209,9 +209,10 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/
 
   describe('weekDisplayShiftWidth', () => {
     const shiftTimeUnitWidth = 50;
+    const mockTimeframeInitialDate = new Date('2018-01-01T00:00:00');
 
     it.each`
-      shiftUnitIsHour | shiftRangeOverlap                       | shiftStartDateOutOfRange | value
+      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}
@@ -219,14 +220,23 @@ describe('~ee/oncall_schedules/components/schedule/components/shifts/components/
       ${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}
+      ${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}`,
-      ({ 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-01-01T03:02:01');
+
+    expect(
+      weekDisplayShiftWidth(
+        false,
+        { overlapEndDate: mockOverlapEndDateNotAtMidnight, daysOverlap: 3, hoursOverlap: 72 },
+        true,
+        50,
+      ),
+    ).toBe(98);
+  });
 });