Handle null start or due dates for sourcing milestone

ee/app/assets/javascripts/epics/sidebar/components/sidebar_app.vue

@@ -260,14 +260,26 @@ export default {
           : this.dueDateSourcingMilestoneDates;
 
       if (startDateTimeFromMilestones && dueDateTimeFromMilestones) {
-        const startDate = parsePikadayDate(sourcingMilestoneDates.startDate);
-        const dueDate = parsePikadayDate(sourcingMilestoneDates.dueDate);
+        const { startDate, dueDate } = sourcingMilestoneDates;
+        let startDateInWords = __('No start date');
+        let dueDateInWords = __('No due date');
 
-        return `${dateSourcingMilestoneTitle}<br/><span class="text-tertiary">${dateInWords(
-          startDate,
-          true,
-          startDate.getFullYear() === dueDate.getFullYear(),
-        )} – ${dateInWords(dueDate, true)}</span>`;
+        if (startDate && dueDate) {
+          const startDateObj = parsePikadayDate(startDate);
+          const dueDateObj = parsePikadayDate(dueDate);
+          startDateInWords = dateInWords(
+            startDateObj,
+            true,
+            startDateObj.getFullYear() === dueDateObj.getFullYear(),
+          );
+          dueDateInWords = dateInWords(dueDateObj, true);
+        } else if (startDate && !dueDate) {
+          startDateInWords = dateInWords(parsePikadayDate(startDate), true);
+        } else {
+          dueDateInWords = dateInWords(parsePikadayDate(dueDate), true);
+        }
+
+        return `${dateSourcingMilestoneTitle}<br/><span class="text-tertiary">${startDateInWords} – ${dueDateInWords}</span>`;
       }
 
       return sprintf(
@@ -449,7 +461,7 @@ export default {
   >
     <div class="issuable-sidebar js-issuable-update">
       <div class="block issuable-sidebar-header">
-        <span class="issuable-header-text hide-collapsed float-left"> {{ __('Todo') }} </span>
+        <span class="issuable-header-text hide-collapsed float-left">{{ __('Todo') }}</span>
         <toggle-sidebar :collapsed="collapsed" css-classes="float-right" @toggle="toggleSidebar" />
         <sidebar-todo
           v-if="!collapsed"
@@ -535,9 +547,8 @@ export default {
         @onLabelClick="handleLabelClick"
         @onDropdownClose="handleDropdownClose"
         @toggleCollapse="toggleSidebarRevealLabelsDropdown"
+        >{{ __('None') }}</sidebar-labels-select
       >
-        {{ __('None') }}
-      </sidebar-labels-select>
       <sidebar-participants :participants="initialParticipants" @toggleCollapse="toggleSidebar" />
       <sidebar-subscriptions
         :loading="savingSubscription"

ee/spec/javascripts/epics/sidebar/components/sidebar_app_spec.js

@@ -240,6 +240,58 @@ describe('epicSidebar', () => {
 
       vmDatesFromMilestones.$destroy();
     });
+
+    it('returns tooltip string containing `No due date` when dueDate from dates sourcing milestone is missing', () => {
+      const startDate = '2018-01-01';
+      const dueDate = '2018-03-31';
+      const vmMissingDueDate = mountComponent(
+        EpicSidebar,
+        Object.assign({}, defaultPropsData, {
+          startDateSourcingMilestoneDates: {
+            startDate,
+            dueDate: null,
+          },
+          dueDateSourcingMilestoneDates: {
+            startDate,
+            dueDate,
+          },
+          startDateFromMilestones: startDate,
+          dueDateFromMilestones: dueDate,
+        }),
+      );
+
+      expect(vmMissingDueDate.getDateFromMilestonesTooltip('start')).toBe(
+        'Milestone for Start Date<br/><span class="text-tertiary">Jan 1, 2018 – No due date</span>',
+      );
+
+      vmMissingDueDate.$destroy();
+    });
+
+    it('returns tooltip string containing `No start date` when startDate from dates sourcing milestone is missing', () => {
+      const startDate = '2018-01-01';
+      const dueDate = '2018-03-31';
+      const vmMissingStartDate = mountComponent(
+        EpicSidebar,
+        Object.assign({}, defaultPropsData, {
+          startDateSourcingMilestoneDates: {
+            startDate: null,
+            dueDate,
+          },
+          dueDateSourcingMilestoneDates: {
+            startDate,
+            dueDate,
+          },
+          startDateFromMilestones: startDate,
+          dueDateFromMilestones: dueDate,
+        }),
+      );
+
+      expect(vmMissingStartDate.getDateFromMilestonesTooltip('start')).toBe(
+        'Milestone for Start Date<br/><span class="text-tertiary">No start date – Mar 31, 2018</span>',
+      );
+
+      vmMissingStartDate.$destroy();
+    });
   });
 
   describe('toggleSidebar', () => {

locale/gitlab.pot

@@ -5732,6 +5732,9 @@ msgstr ""
 msgid "No schedules"
 msgstr ""
 
+msgid "No start date"
+msgstr ""
+
 msgid "No, directly import the existing email addresses and usernames."
 msgstr ""