Merge branch 'cngo-localize-dates' into 'master'

Localize dates in epics and roadmaps UI

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/169161



Merged-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Approved-by: Nick Leonard <nleonard@gitlab.com>
Approved-by: Sharmad Nachnolkar <snachnolkar@gitlab.com>
Approved-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Reviewed-by: Nick Leonard <nleonard@gitlab.com>
Co-authored-by: Coung Ngo <cngo@gitlab.com>

app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue

 <script>
 import { GlFormRadio } from '@gitlab/ui';
-import { dateInWords, newDate } from '~/lib/utils/datetime_utility';
+import { localeDateFormat, newDate } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
 import { dateFields } from '../../constants';
 import SidebarFormattedDate from './sidebar_formatted_date.vue';
@@ -45,7 +45,7 @@ export default {
         return this.$options.i18n.noDate;
       }
-      return dateInWords(newDate(dateFixed), true);
+      return localeDateFormat.asDate.format(newDate(dateFixed));
     },
     formattedInheritedDate() {
       const dateFromMilestones = this.issuable[dateFields[this.dateType].dateFromMilestones];
@@ -53,7 +53,7 @@ export default {
         return this.$options.i18n.noDate;
       }
-      return dateInWords(newDate(dateFromMilestones), true);
+      return localeDateFormat.asDate.format(newDate(dateFromMilestones));
     },
   },
   i18n: {

ee/app/assets/javascripts/roadmap/components/epics_list_empty.vue

 <script>
 import { GlEmptyState } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { dateInWords } from '~/lib/utils/datetime_utility';
+import { localeDateFormat, nDaysAfter } from '~/lib/utils/datetime_utility';
 import { s__, sprintf } from '~/locale';
 import {
@@ -56,37 +56,17 @@ export default {
       let endDate;
       if (this.presetTypeQuarters) {
-        const quarterStart = this.timeframeStart.range[0];
-        const quarterEnd = this.timeframeEnd.range[2];
-        startDate = dateInWords(
-          quarterStart,
-          true,
-          quarterStart.getFullYear() === quarterEnd.getFullYear(),
-        );
-        endDate = dateInWords(quarterEnd, true);
+        startDate = this.timeframeStart.range.at(0);
+        endDate = this.timeframeEnd.range.at(2);
       } else if (this.presetTypeMonths) {
-        startDate = dateInWords(
-          this.timeframeStart,
-          true,
-          this.timeframeStart.getFullYear() === this.timeframeEnd.getFullYear(),
-        );
-        endDate = dateInWords(this.timeframeEnd, true);
+        startDate = this.timeframeStart;
+        endDate = this.timeframeEnd;
       } else if (this.presetTypeWeeks) {
-        const end = new Date(this.timeframeEnd.getTime());
-        end.setDate(end.getDate() + 6);
-
-        startDate = dateInWords(
-          this.timeframeStart,
-          true,
-          this.timeframeStart.getFullYear() === end.getFullYear(),
-        );
-        endDate = dateInWords(end, true);
+        startDate = this.timeframeStart;
+        endDate = nDaysAfter(this.timeframeEnd, 6);
       }
-      return {
-        startDate,
-        endDate,
-      };
+      return localeDateFormat.asDate.formatRange(startDate, endDate);
     },
     message() {
       if (this.hasFiltersApplied) {
@@ -113,15 +93,10 @@ export default {
       }
       if (this.hasFiltersApplied) {
-        return sprintf(emptyStateWithFilters, {
-          startDate: this.timeframeRange.startDate,
-          endDate: this.timeframeRange.endDate,
-        });
+        return sprintf(emptyStateWithFilters, { dateRange: this.timeframeRange });
       }
-      return sprintf(emptyStateDefault, {
-        startDate: this.timeframeRange.startDate,
-        endDate: this.timeframeRange.endDate,
-      });
+
+      return sprintf(emptyStateDefault, { dateRange: this.timeframeRange });
     },
     extraProps() {
       const props = {};

ee/app/assets/javascripts/roadmap/constants.js

@@ -36,11 +36,11 @@ export const PRESET_TYPES = {
 };
 export const emptyStateDefault = s__(
-  'GroupRoadmap|To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from %{startDate} to %{endDate}.',
+  'GroupRoadmap|To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from %{dateRange}.',
 );
 export const emptyStateWithFilters = s__(
-  'GroupRoadmap|To widen your search, change or remove filters; from %{startDate} to %{endDate}.',
+  'GroupRoadmap|To widen your search, change or remove filters; from %{dateRange}.',
 );
 export const emptyStateWithEpicIidFiltered = s__(

ee/app/assets/javascripts/roadmap/mixins/common_mixin.js

 import {
-  dateInWords,
-  totalDaysInMonth,
   dayInQuarter,
+  localeDateFormat,
+  totalDaysInMonth,
   totalDaysInQuarter,
 } from '~/lib/utils/datetime_utility';
 import { s__, sprintf } from '~/locale';
@@ -137,28 +137,15 @@ export default {
       }
       if (roadmapItem.startDateUndefined) {
         return sprintf(s__('GroupRoadmap|No start date – %{dateWord}'), {
-          dateWord: dateInWords(this.endDate, true),
+          dateWord: localeDateFormat.asDate.format(this.endDate),
         });
       }
       if (roadmapItem.endDateUndefined) {
         return sprintf(s__('GroupRoadmap|%{dateWord} – No end date'), {
-          dateWord: dateInWords(this.startDate, true),
+          dateWord: localeDateFormat.asDate.format(this.startDate),
         });
       }
-
-      // In case both start and end date fall in same year
-      // We should hide year from start date
-      const startDateInWords = dateInWords(
-        this.startDate,
-        true,
-        this.startDate.getFullYear() === this.endDate.getFullYear(),
-      );
-
-      const endDateInWords = dateInWords(this.endDate, true);
-      return sprintf(s__('GroupRoadmap|%{startDateInWords} – %{endDateInWords}'), {
-        startDateInWords,
-        endDateInWords,
-      });
+      return localeDateFormat.asDate.formatRange(this.startDate, this.endDate);
     },
     timelineBarStyles(roadmapItem) {
       let barStyles = {};

ee/spec/frontend/roadmap/components/epic_item_spec.js

@@ -108,7 +108,7 @@ describe('EpicItemComponent', () => {
     it('returns timeframe string correctly when both start and end dates are defined', () => {
       createComponent();
-      expect(findEpicItemDetails().props('timeframeString')).toBe('Nov 10, 2017 – Jun 2, 2018');
+      expect(findEpicItemDetails().props('timeframeString')).toBe('Nov 10, 2017 – Jun 2, 2018');
     });
     it('returns timeframe string correctly when no dates are defined', () => {
@@ -140,7 +140,7 @@ describe('EpicItemComponent', () => {
       };
       createComponent({ epic });
-      expect(findEpicItemDetails().props('timeframeString')).toBe('Jan 1 – Apr 1, 2018');
+      expect(findEpicItemDetails().props('timeframeString')).toBe('Jan 1 – Apr 1, 2018');
     });
   });

ee/spec/frontend/roadmap/components/epic_item_timeline_spec.js

@@ -108,7 +108,7 @@ describe('EpicItemTimelineComponent', () => {
     it('shows the start and end dates', () => {
       wrapper = createComponent();
-      expect(wrapper.findComponent(GlPopover).text()).toContain('Jun 26, 2017 – Mar 10, 2018');
+      expect(wrapper.findComponent(GlPopover).text()).toContain('Jun 26, 2017 – Mar 10, 2018');
     });
     it.each`

ee/spec/frontend/roadmap/components/epics_list_empty_spec.js

@@ -82,7 +82,7 @@ describe('EpicsListEmpty', () => {
       });
       expect(findSubTitle().text()).toBe(
-        'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jul 1, 2016 to Sep 30, 2019.',
+        'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jul 1, 2016 – Sep 30, 2019.',
       );
     });
@@ -95,7 +95,7 @@ describe('EpicsListEmpty', () => {
       });
       expect(findSubTitle().text()).toBe(
-        'To widen your search, change or remove filters; from Jul 1, 2016 to Sep 30, 2019.',
+        'To widen your search, change or remove filters; from Jul 1, 2016 – Sep 30, 2019.',
       );
     });
   });
@@ -107,7 +107,7 @@ describe('EpicsListEmpty', () => {
       });
       expect(findSubTitle().text()).toBe(
-        'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jan 1 to Dec 31, 2018.',
+        'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jan 1 – Dec 31, 2018.',
       );
     });
@@ -118,7 +118,7 @@ describe('EpicsListEmpty', () => {
       });
       expect(findSubTitle().text()).toBe(
-        'To widen your search, change or remove filters; from Jan 1 to Dec 31, 2018.',
+        'To widen your search, change or remove filters; from Jan 1 – Dec 31, 2018.',
       );
     });
   });
@@ -139,7 +139,7 @@ describe('EpicsListEmpty', () => {
       });
       expect(findSubTitle().text()).toBe(
-        'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Dec 31, 2017 to Apr 6, 2018.',
+        'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Dec 31, 2017 – Apr 6, 2018.',
       );
     });
@@ -152,7 +152,7 @@ describe('EpicsListEmpty', () => {
       });
       expect(findSubTitle().text()).toBe(
-        'To widen your search, change or remove filters; from Dec 31, 2017 to Apr 12, 2018.',
+        'To widen your search, change or remove filters; from Dec 31, 2017 – Apr 12, 2018.',
       );
     });
   });

locale/gitlab.pot

@@ -26313,9 +26313,6 @@ msgstr ""
 msgid "GroupRoadmap|%{dateWord} – No end date"
 msgstr ""
-msgid "GroupRoadmap|%{startDateInWords} – %{endDateInWords}"
-msgstr ""
-
 msgid "GroupRoadmap|Loading epics"
 msgstr ""
@@ -26352,10 +26349,10 @@ msgstr ""
 msgid "GroupRoadmap|To view the roadmap, add a start or due date to one of the %{linkStart}child epics%{linkEnd}."
 msgstr ""
-msgid "GroupRoadmap|To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from %{startDate} to %{endDate}."
+msgid "GroupRoadmap|To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from %{dateRange}."
 msgstr ""
-msgid "GroupRoadmap|To widen your search, change or remove filters; from %{startDate} to %{endDate}."
+msgid "GroupRoadmap|To widen your search, change or remove filters; from %{dateRange}."
 msgstr ""
 msgid "GroupRoadmap|View epics list"