Fix dates being incorrectly set on epic creation

Date pickers emit Javascript Date instances and
these get converted to datetime strings with timezone info.

Ex. a user in UTC+9 timezone picks some date (say July 1).
The underlying Date object gets converted to a string
that uses UTC+0 as the default timezone and the date may
change becuase of this conversion:

'2021-07-01 UTC+9 Korean Standard Time'
=> '2021-06-30T??:??:??Z'

Changelog: fixed
EE: true

ee/app/assets/javascripts/epic/components/epic_form.vue

@@ -8,6 +8,7 @@ import {
   GlFormInput,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
+import { formatDate } from '~/lib/utils/datetime_utility';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -70,9 +71,11 @@ export default {
               title: this.title,
               description: this.description,
               confidential: this.confidential,
-              startDateFixed: this.startDateFixed,
+              startDateFixed: this.startDateFixed
+                ? formatDate(this.startDateFixed, 'yyyy-mm-dd')
+                : null,
               startDateIsFixed: Boolean(this.startDateFixed),
-              dueDateFixed: this.dueDateFixed,
+              dueDateFixed: this.dueDateFixed ? formatDate(this.dueDateFixed, 'yyyy-mm-dd') : null,
               dueDateIsFixed: Boolean(this.dueDateFixed),
             },
           },

ee/spec/frontend/epic/components/epic_form_spec.js

@@ -92,48 +92,56 @@ describe('ee/epic/components/epic_form.vue', () => {
   });
 
   describe('save', () => {
-    it('submits successfully if form data is provided', async () => {
-      createWrapper();
+    const addLabelIds = [1];
+    const title = 'Status page MVP';
+    const description = '### Goal\n\n- [ ] Item';
+    const confidential = true;
 
-      const addLabelIds = [1];
-      const title = 'Status page MVP';
-      const description = '### Goal\n\n- [ ] Item';
-      const confidential = true;
-      const startDateFixed = new Date();
-      const startDateIsFixed = true;
-      const dueDateFixed = null;
-      const dueDateIsFixed = false;
-
-      findTitle().vm.$emit('input', title);
-      findDescription().setValue(description);
-      findConfidentialityCheck().vm.$emit('input', confidential);
-      findLabels().vm.$emit('updateSelectedLabels', [{ id: 1, set: 1 }]);
-      findStartDate().vm.$emit('input', startDateFixed);
-      findDueDate().vm.$emit('input', dueDateFixed);
-
-      findForm().vm.$emit('submit', { preventDefault: () => {} });
-
-      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-        mutation: createEpic,
-        variables: {
-          input: {
-            groupPath: TEST_GROUP_PATH,
-            addLabelIds,
-            title,
-            description,
-            confidential,
-            startDateFixed,
-            startDateIsFixed,
-            dueDateFixed,
-            dueDateIsFixed,
+    it.each`
+      startDateFixed  | dueDateFixed    | startDateIsFixed | dueDateIsFixed
+      ${null}         | ${null}         | ${false}         | ${false}
+      ${'2021-07-01'} | ${null}         | ${true}          | ${false}
+      ${null}         | ${'2021-07-02'} | ${false}         | ${true}
+      ${'2021-07-01'} | ${'2021-07-02'} | ${true}          | ${true}
+    `(
+      'requests mutation with correct data with all start and due date configurations',
+      async ({ startDateFixed, dueDateFixed, startDateIsFixed, dueDateIsFixed }) => {
+        createWrapper();
+
+        findTitle().vm.$emit('input', title);
+        findDescription().setValue(description);
+        findConfidentialityCheck().vm.$emit('input', confidential);
+        findLabels().vm.$emit('updateSelectedLabels', [{ id: 1, set: 1 }]);
+
+        // Make sure the submitted values for start and due dates are date strings without timezone info.
+        // (Datepicker emits a Date object but the submitted value must be a date string).
+        findStartDate().vm.$emit('input', startDateFixed ? new Date(startDateFixed) : null);
+        findDueDate().vm.$emit('input', dueDateFixed ? new Date(dueDateFixed) : null);
+
+        findForm().vm.$emit('submit', { preventDefault: () => {} });
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+          mutation: createEpic,
+          variables: {
+            input: {
+              groupPath: TEST_GROUP_PATH,
+              addLabelIds,
+              title,
+              description,
+              confidential,
+              startDateFixed,
+              startDateIsFixed,
+              dueDateFixed,
+              dueDateIsFixed,
+            },
           },
-        },
-      });
+        });
 
-      await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
 
-      expect(visitUrl).toHaveBeenCalled();
-    });
+        expect(visitUrl).toHaveBeenCalled();
+      },
+    );
 
     it.each`
       status        | result           | loading