Fix wrong due dates on group/project issues list refactor

Some due dates were converted to JS Date objects from a
string like `new Date('2022-02-28')`. However, if the OS has
a time zone such as Pacific Standard Time, then the Date
object has a value of 'Sun Feb 27 2022 16:00:00 GMT-0800.
The day 27 is then shown on the UI instead of the correct
day 28.

Behind feature flag `vue_issues_list` defaulted to off.

app/assets/javascripts/issues/list/components/issue_card_time_info.vue

@@ -6,6 +6,7 @@ import {
   isInFuture,
   isInPast,
   isToday,
+  newDateAsLocaleTime,
 } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
 
@@ -27,7 +28,7 @@ export default {
     milestoneDate() {
       if (this.issue.milestone?.dueDate) {
         const { dueDate, startDate } = this.issue.milestone;
-        const date = dateInWords(new Date(dueDate), true);
+        const date = dateInWords(newDateAsLocaleTime(dueDate), true);
         const remainingTime = this.milestoneRemainingTime(dueDate, startDate);
         return `${date} (${remainingTime})`;
       }
@@ -37,10 +38,10 @@ export default {
       return this.issue.milestone.webPath || this.issue.milestone.webUrl;
     },
     dueDate() {
-      return this.issue.dueDate && dateInWords(new Date(this.issue.dueDate), true);
+      return this.issue.dueDate && dateInWords(newDateAsLocaleTime(this.issue.dueDate), true);
     },
     showDueDateInRed() {
-      return isInPast(new Date(this.issue.dueDate)) && !this.issue.closedAt;
+      return isInPast(newDateAsLocaleTime(this.issue.dueDate)) && !this.issue.closedAt;
     },
     timeEstimate() {
       return this.issue.humanTimeEstimate || this.issue.timeStats?.humanTimeEstimate;
@@ -48,8 +49,8 @@ export default {
   },
   methods: {
     milestoneRemainingTime(dueDate, startDate) {
-      const due = new Date(dueDate);
-      const start = new Date(startDate);
+      const due = newDateAsLocaleTime(dueDate);
+      const start = newDateAsLocaleTime(startDate);
 
       if (dueDate && isInPast(due)) {
         return __('Past due');

app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js

@@ -189,13 +189,21 @@ export const getDateInFuture = (date, daysInFuture) =>
  */
 export const isValidDate = (date) => date instanceof Date && !Number.isNaN(date.getTime());
 
-/*
+/**
  * Appending T00:00:00 makes JS assume local time and prevents it from shifting the date
  * to match the user's time zone. We want to display the date in server time for now, to
  * be consistent with the "edit issue -> due date" UI.
+ *
+ * @param {String} date Date without time, e.g. `2022-03-22`
+ * @return {Date} new Date object
  */
-
 export const newDateAsLocaleTime = (date) => {
+  if (!date || typeof date !== 'string') {
+    return null;
+  }
+  if (date.includes('T')) {
+    return new Date(date);
+  }
   const suffix = 'T00:00:00';
   return new Date(`${date}${suffix}`);
 };

spec/frontend/issues/list/components/issue_card_time_info_spec.js

@@ -4,7 +4,7 @@ import { useFakeDate } from 'helpers/fake_date';
 import IssueCardTimeInfo from '~/issues/list/components/issue_card_time_info.vue';
 
 describe('CE IssueCardTimeInfo component', () => {
-  useFakeDate(2020, 11, 11);
+  useFakeDate(2020, 11, 11); // 2020 Dec 11
 
   let wrapper;
 
@@ -91,7 +91,7 @@ describe('CE IssueCardTimeInfo component', () => {
     describe('when in the past', () => {
       describe('when issue is open', () => {
         it('renders in red', () => {
-          wrapper = mountComponent({ dueDate: new Date('2020-10-10') });
+          wrapper = mountComponent({ dueDate: '2020-10-10' });
 
           expect(findDueDate().classes()).toContain('gl-text-red-500');
         });
@@ -100,7 +100,7 @@ describe('CE IssueCardTimeInfo component', () => {
       describe('when issue is closed', () => {
         it('does not render in red', () => {
           wrapper = mountComponent({
-            dueDate: new Date('2020-10-10'),
+            dueDate: '2020-10-10',
             closedAt: '2020-09-05T13:06:25Z',
           });
 

spec/frontend/lib/utils/datetime/date_calculation_utility_spec.js

+import { newDateAsLocaleTime } from '~/lib/utils/datetime/date_calculation_utility';
+
+describe('newDateAsLocaleTime', () => {
+  it.each`
+    string                        | expected
+    ${'2022-03-22'}               | ${new Date('2022-03-22T00:00:00.000Z')}
+    ${'2022-03-22T00:00:00.000Z'} | ${new Date('2022-03-22T00:00:00.000Z')}
+    ${2022}                       | ${null}
+    ${[]}                         | ${null}
+    ${{}}                         | ${null}
+    ${true}                       | ${null}
+    ${null}                       | ${null}
+    ${undefined}                  | ${null}
+  `('returns $expected given $string', ({ string, expected }) => {
+    expect(newDateAsLocaleTime(string)).toEqual(expected);
+  });
+});