Merge branch '5658-fix-epic-timeline-misalignment' into 'master'

Fix Epic timeline bar misalignment when start date is in last timeframe month and end date is out of range

Closes #5658

See merge request gitlab-org/gitlab-ee!5360

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

@@ -104,9 +104,18 @@
           // Set offset to 0.
           offset = 'left: 0;';
         } else {
-          // Calculate proportional offset based on startDate and total days in
-          // current month.
-          offset = `left: ${Math.floor((startDate / daysInMonth) * 100)}%;`;
+          // If Epic end date is out of range
+          const lastTimeframeItem = this.timeframe[this.timeframe.length - 1];
+          // Check if Epic start date falls within last month of the timeframe
+          if (this.epic.startDate.getMonth() === lastTimeframeItem.getMonth() &&
+              this.epic.startDate.getFullYear() === lastTimeframeItem.getFullYear()) {
+            // Compensate for triangle size
+            offset = `right: ${TIMELINE_END_OFFSET_HALF}px;`;
+          } else {
+            // Calculate proportional offset based on startDate and total days in
+            // current month.
+            offset = `left: ${(startDate / daysInMonth) * 100}%;`;
+          }
         }
 
         return offset;

ee/app/assets/javascripts/roadmap/constants.js

@@ -10,6 +10,6 @@ export const SHELL_MIN_WIDTH = 1620;
 
 export const SCROLL_BAR_SIZE = 15;
 
-export const TIMELINE_END_OFFSET_HALF = 6;
+export const TIMELINE_END_OFFSET_HALF = 8;
 
 export const TIMELINE_END_OFFSET_FULL = 16;

ee/changelogs/unreleased/5658-fix-epic-timeline-misalignment.yml

+---
+title: Fix Epic timeline bar misalignment when start date is in last timeframe month
+  and end date is out of range
+merge_request: 5360
+author:
+type: fixed

spec/javascripts/roadmap/components/epic_item_timeline_spec.js

@@ -108,6 +108,16 @@ describe('EpicItemTimelineComponent', () => {
         expect(vm.getTimelineBarStartOffset()).toBe('left: 0;');
       });
 
+      it('returns `right: 8px;` when Epic startDate is in last timeframe month and endDate is out of range', () => {
+        vm = createComponent({
+          epic: Object.assign({}, mockEpic, {
+            startDate: mockTimeframe[mockTimeframe.length - 1],
+            endDateOutOfRange: true,
+          }),
+        });
+        expect(vm.getTimelineBarStartOffset()).toBe('right: 8px;');
+      });
+
       it('returns proportional `left` value based on Epic startDate and days in the month', () => {
         vm = createComponent({
           epic: Object.assign({}, mockEpic, {