Merge branch '27616-fix-contributions-graph-utc-offset-mysql' into 'master'

Fix Timezone Inconsistencies in User Contribution Calendar

Closes #27616 and #1943

See merge request !13208

5 files changed, 22 insertions, 7 deletions

diff --git a/app/assets/javascripts/users/activity_calendar.js b/app/assets/javascripts/users/activity_calendar.js
index 3dac31c2121..5e947769f8a 100644
--- a/app/assets/javascripts/users/activity_calendar.js
+++ b/app/assets/javascripts/users/activity_calendar.js
@@ -7,6 +7,14 @@ const LOADING_HTML = `
   </div>
 `;
 
+function getSystemDate(systemUtcOffsetSeconds) {
+  const date = new Date();
+  const localUtcOffsetMinutes = 0 - date.getTimezoneOffset();
+  const systemUtcOffsetMinutes = systemUtcOffsetSeconds / 60;
+  date.setMinutes((date.getMinutes() - localUtcOffsetMinutes) + systemUtcOffsetMinutes);
+  return date;
+}
+
 function formatTooltipText({ date, count }) {
   const dateObject = new Date(date);
   const dateDayName = gl.utils.getDayName(dateObject);
@@ -22,7 +30,7 @@ function formatTooltipText({ date, count }) {
 const initColorKey = () => d3.scale.linear().range(['#acd5f2', '#254e77']).domain([0, 3]);
 
 export default class ActivityCalendar {
-  constructor(container, timestamps, calendarActivitiesPath) {
+  constructor(container, timestamps, calendarActivitiesPath, utcOffset = 0) {
     this.calendarActivitiesPath = calendarActivitiesPath;
     this.clickDay = this.clickDay.bind(this);
     this.currentSelectedDate = '';
@@ -37,7 +45,7 @@ export default class ActivityCalendar {
     this.timestampsTmp = [];
     let group = 0;
 
-    const today = new Date();
+    const today = getSystemDate(utcOffset);
     today.setHours(0, 0, 0, 0, 0);
 
     const oneYearAgo = new Date(today);
diff --git a/app/assets/javascripts/users/user_tabs.js b/app/assets/javascripts/users/user_tabs.js
index 5fe6603ce7b..1215b265e28 100644
--- a/app/assets/javascripts/users/user_tabs.js
+++ b/app/assets/javascripts/users/user_tabs.js
@@ -150,15 +150,21 @@ export default class UserTabs {
     const $calendarWrap = this.$parentEl.find('.user-calendar');
     const calendarPath = $calendarWrap.data('calendarPath');
     const calendarActivitiesPath = $calendarWrap.data('calendarActivitiesPath');
+    const utcOffset = $calendarWrap.data('utcOffset');
+    let utcFormatted = 'UTC';
+    if (utcOffset !== 0) {
+      utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${(utcOffset / 3600)}`;
+    }
 
     $.ajax({
       dataType: 'json',
       url: calendarPath,
       success: (activityData) => {
         $calendarWrap.html(CALENDAR_TEMPLATE);
+        $calendarWrap.find('.calendar-hint').append(`(Timezone: ${utcFormatted})`);
 
         // eslint-disable-next-line no-new
-        new ActivityCalendar('.js-contrib-calendar', activityData, calendarActivitiesPath);
+        new ActivityCalendar('.js-contrib-calendar', activityData, calendarActivitiesPath, utcOffset);
       },
     });
 
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 0ac095f7d8f..0ded4a3b423 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -45,6 +45,7 @@
   margin-top: -23px;
   float: right;
   font-size: 12px;
+  direction: ltr;
 }
 
 .pika-single.gitlab-theme {
diff --git a/app/views/users/calendar_activities.html.haml b/app/views/users/calendar_activities.html.haml
index 805a346a85e..6b1d75c6e72 100644
--- a/app/views/users/calendar_activities.html.haml
+++ b/app/views/users/calendar_activities.html.haml
@@ -1,6 +1,6 @@
 %h4.prepend-top-20
   Contributions for
-  %strong= @calendar_date.to_s(:short)
+  %strong= @calendar_date.to_s(:medium)
 
 - if @events.any?
   %ul.bordered-list
@@ -8,7 +8,7 @@
       %li
         %span.light
           %i.fa.fa-clock-o
-          = event.created_at.to_s(:time)
+          = event.created_at.strftime('%-I:%M%P')
         - if event.push?
           #{event.action_name} #{event.ref_type}
           %strong
@@ -30,4 +30,4 @@
             = event.project_name
 - else
   %p
-    No contributions found for #{@calendar_date.to_s(:short)}
+    No contributions found for #{@calendar_date.to_s(:medium)}
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index a449706c567..879e0f99b14 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -104,7 +104,7 @@
     .tab-content
       #activity.tab-pane
         .row-content-block.calender-block.white.second-block.hidden-xs
-          .user-calendar{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path } }
+          .user-calendar{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
             %h4.center.light
               %i.fa.fa-spinner.fa-spin
           .user-calendar-activities