Merge branch 'use-pikaday-date-parser-for-iteration-dates' into 'master'

Fix iteration dates adding timezone offset

See merge request gitlab-org/gitlab!84432

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

 <script>
 import { GlAlert, GlButton, GlDatepicker, GlForm, GlFormGroup, GlFormInput } from '@gitlab/ui';
 import createFlash from '~/flash';
-import { dayAfter, formatDate } from '~/lib/utils/datetime_utility';
+import { dayAfter, formatDate, parsePikadayDate } from '~/lib/utils/datetime_utility';
 import { TYPE_ITERATION, TYPE_ITERATIONS_CADENCE } from '~/graphql_shared/constants';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
@@ -65,8 +65,8 @@ export default {
 
         this.title = iteration.title;
         this.description = iteration.description;
-        this.startDate = new Date(iteration.startDate);
-        this.dueDate = new Date(iteration.dueDate);
+        this.startDate = parsePikadayDate(iteration.startDate);
+        this.dueDate = parsePikadayDate(iteration.dueDate);
         this.automatic = iteration.iterationCadence.automatic;
 
         return iteration;

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

@@ -4,7 +4,7 @@ import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-import { formatDate } from '~/lib/utils/datetime_utility';
+import { formatDate, parsePikadayDate } from '~/lib/utils/datetime_utility';
 import createIteration from '../queries/create_iteration.mutation.graphql';
 import updateIteration from '../queries/update_iteration.mutation.graphql';
 
@@ -49,8 +49,8 @@ export default {
       loading: false,
       title: this.iteration.title,
       description: this.iteration.description ?? '',
-      startDate: this.iteration.startDate ? new Date(this.iteration.startDate) : null,
-      dueDate: this.iteration.dueDate ? new Date(this.iteration.dueDate) : null,
+      startDate: this.iteration.startDate ? parsePikadayDate(this.iteration.startDate) : null,
+      dueDate: this.iteration.dueDate ? parsePikadayDate(this.iteration.dueDate) : null,
       showValidation: false,
     };
   },

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

@@ -235,6 +235,15 @@ describe('Iteration Form', () => {
       expect(findPageTitle().text()).toBe('Edit iteration');
     });
 
+    it('parses dates without adding timezone offsets', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findStartDate().props('value').getTimezoneOffset()).toBe(0);
+      expect(findDueDate().props('value').getTimezoneOffset()).toBe(0);
+    });
+
     it('prefills form fields', async () => {
       createComponent();
 

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

@@ -8,6 +8,7 @@ import updateIteration from 'ee/iterations/queries/update_iteration.mutation.gra
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import { visitUrl } from '~/lib/utils/url_utility';
+import { formatDate } from '~/lib/utils/datetime_utility';
 
 jest.mock('~/lib/utils/url_utility');
 
@@ -19,8 +20,8 @@ describe('Iteration Form', () => {
     id: `gid://gitlab/Iteration/${id}`,
     title: 'An iteration',
     description: 'The words',
-    startDate: new Date('2020-06-28'),
-    dueDate: new Date('2020-07-05'),
+    startDate: '2020-06-28',
+    dueDate: '2020-07-05',
   };
 
   const title = 'Updated title';
@@ -68,6 +69,8 @@ describe('Iteration Form', () => {
   const clickSave = () => findSaveButton().vm.$emit('click');
   const clickCancel = () => findCancelButton().vm.$emit('click');
 
+  const toDateString = (date) => formatDate(date, 'yyyy-mm-dd');
+
   const inputFormData = () => {
     findTitle().vm.$emit('input', title);
     findDescription().setValue(description);
@@ -164,6 +167,15 @@ describe('Iteration Form', () => {
       expect(findPageTitle().text()).toBe('Edit iteration');
     });
 
+    it('parses dates without adding timezone offsets', () => {
+      createComponent({
+        props: propsWithIteration,
+      });
+
+      expect(findStartDate().props('value').getTimezoneOffset()).toBe(0);
+      expect(findDueDate().props('value').getTimezoneOffset()).toBe(0);
+    });
+
     it('prefills form fields', () => {
       createComponent({
         props: propsWithIteration,
@@ -172,8 +184,8 @@ describe('Iteration Form', () => {
       expect(findTitle().attributes('value')).toBe(iteration.title);
       expect(findDescription().element.value).toBe(iteration.description);
 
-      expect(new Date(findStartDate().attributes('value'))).toEqual(iteration.startDate);
-      expect(new Date(findDueDate().attributes('value'))).toEqual(iteration.dueDate);
+      expect(toDateString(findStartDate().attributes('value'))).toEqual(iteration.startDate);
+      expect(toDateString(findDueDate().attributes('value'))).toEqual(iteration.dueDate);
     });
 
     it('shows update text on submit button', () => {