Merge branch '227286-wrong-dates-when-saving-an-iteration' into 'master'

Always show UTC dates for iteration start/due dates

Closes #227286

See merge request gitlab-org/gitlab!36518

app/assets/javascripts/lib/utils/datetime_utility.js

@@ -89,13 +89,15 @@ export const getDayName = date =>
  * @example
  * dateFormat('2017-12-05','mmm d, yyyy h:MMtt Z' ) -> "Dec 5, 2017 12:00am GMT+0000"
  * @param {date} datetime
+ * @param {String} format
+ * @param {Boolean} UTC convert local time to UTC
  * @returns {String}
  */
-export const formatDate = (datetime, format = 'mmm d, yyyy h:MMtt Z') => {
+export const formatDate = (datetime, format = 'mmm d, yyyy h:MMtt Z', utc = false) => {
   if (isString(datetime) && datetime.match(/\d+-\d+\d+ /)) {
     throw new Error(__('Invalid date'));
   }
-  return dateFormat(datetime, format);
+  return dateFormat(datetime, format, utc);
 };
 
 /**

ee/app/assets/javascripts/iterations/components/iteration_report.vue

@@ -100,7 +100,7 @@ export default {
   },
   methods: {
     formatDate(date) {
-      return formatDate(date, 'mmm d, yyyy');
+      return formatDate(date, 'mmm d, yyyy', true);
     },
   },
 };

ee/app/assets/javascripts/iterations/components/iterations_list.vue

@@ -15,7 +15,7 @@ export default {
   },
   methods: {
     formatDate(date) {
-      return formatDate(date, 'mmm d, yyyy');
+      return formatDate(date, 'mmm d, yyyy', true);
     },
   },
 };

ee/spec/frontend/iterations/components/iterations_list_spec.js

 import IterationsList from 'ee/iterations/components/iterations_list.vue';
 import { shallowMount } from '@vue/test-utils';
+import timezoneMock from 'timezone-mock';
 
 describe('Iterations list', () => {
   let wrapper;
@@ -13,6 +14,7 @@ describe('Iterations list', () => {
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
+    timezoneMock.unregister();
   });
 
   it('shows empty state', () => {
@@ -21,19 +23,32 @@ describe('Iterations list', () => {
     expect(wrapper.html()).toHaveText('No iterations to show');
   });
 
-  it('shows iteration', () => {
+  describe('with iterations', () => {
     const iteration = {
       id: '123',
       title: 'Iteration #1',
       startDate: '2020-05-27',
-      dueDate: '2020-05-28',
+      dueDate: '2020-06-04',
     };
 
-    mountComponent({
-      iterations: [iteration],
+    it('shows iteration', () => {
+      mountComponent({
+        iterations: [iteration],
+      });
+
+      expect(wrapper.html()).not.toHaveText('No iterations to show');
+      expect(wrapper.html()).toHaveText(iteration.title);
     });
 
-    expect(wrapper.html()).not.toHaveText('No iterations to show');
-    expect(wrapper.html()).toHaveText(iteration.title);
+    it('displays dates in UTC time, regardless of user timezone', () => {
+      timezoneMock.register('US/Pacific');
+
+      mountComponent({
+        iterations: [iteration],
+      });
+
+      expect(wrapper.html()).toHaveText('May 27, 2020');
+      expect(wrapper.html()).toHaveText('Jun 4, 2020');
+    });
   });
 });

spec/frontend/lib/utils/datetime_utility_spec.js

 import { __, s__ } from '~/locale';
 import $ from 'jquery';
+import timezoneMock from 'timezone-mock';
 import '~/commons/bootstrap';
 import * as datetimeUtility from '~/lib/utils/datetime_utility';
 
@@ -86,6 +87,31 @@ describe('Date time utils', () => {
         datetimeUtility.formatDate('2016-07-23 00:00:00 UTC');
       }).toThrow(new Error('Invalid date'));
     });
+
+    describe('convert local timezone to UTC with utc parameter', () => {
+      const midnightUTC = '2020-07-09';
+      const format = 'mmm d, yyyy';
+
+      beforeEach(() => {
+        timezoneMock.register('US/Pacific');
+      });
+
+      afterEach(() => {
+        timezoneMock.unregister();
+      });
+
+      it('defaults to false', () => {
+        const formattedDate = datetimeUtility.formatDate(midnightUTC, format);
+
+        expect(formattedDate).toBe('Jul 8, 2020');
+      });
+
+      it('converts local time to UTC if utc flag is true', () => {
+        const formattedDate = datetimeUtility.formatDate(midnightUTC, format, true);
+
+        expect(formattedDate).toBe('Jul 9, 2020');
+      });
+    });
   });
 
   describe('get day difference', () => {