Merge branch '7104-show-timeframe-dates-in-epics-list' into 'master'

Show timeframe dates for an epic in Epics list page

See merge request gitlab-org/gitlab!19006

changelogs/unreleased/7104-show-timeframe-dates-in-epics-list.yml

+---
+title: Show start and end dates in Epics list page
+merge_request: 19006
+author:
+type: added

doc/user/group/epics/index.md

@@ -10,7 +10,7 @@ Epics let you manage your portfolio of projects more efficiently and with less
 effort by tracking groups of issues that share a theme, across projects and
 milestones.
 
-![epics list view](img/epics_list_view_v12.3.png)
+![epics list view](img/epics_list_view_v12.5.png)
 
 ## Use cases
 

ee/app/helpers/epics_helper.rb

@@ -27,4 +27,19 @@ module EpicsHelper
 
     _("%{state} epics") % { state: (titles[state.to_s] || state.to_s.humanize) }
   end
+
+  def epic_timeframe(epic)
+    short_format = '%b %d'
+    long_format = '%b %d, %Y'
+
+    if epic.start_date.present? && epic.end_date.present?
+      start_date_format = epic.start_date.year == epic.end_date.year ? short_format : long_format
+
+      "#{epic.start_date.strftime(start_date_format)} – #{epic.end_date.strftime(long_format)}"
+    elsif epic.start_date.present?
+      s_('GroupRoadmap|From %{dateWord}') % { dateWord: epic.start_date.strftime(long_format) }
+    elsif epic.end_date.present?
+      s_("GroupRoadmap|Until %{dateWord}") % { dateWord: epic.end_date.strftime(long_format) }
+    end
+  end
 end

ee/app/views/groups/epics/_epic.html.haml

@@ -15,6 +15,11 @@
             ·
             opened #{time_ago_with_tooltip(epic.created_at, placement: 'bottom')}
             by #{link_to_member(@group, epic.author, avatar: false)}
+          - if epic.start_date? || epic.end_date?
+             
+            %span.issuable-dates.d-inline-flex.align-items-center.align-top
+              = sprite_icon('calendar', size: 14, css_class: 'mr-1')
+              %span= epic_timeframe(epic)
           - if epic.labels.any?
              
             - epic.labels.each do |label|

ee/spec/features/epics/epics_list_spec.rb

@@ -48,6 +48,13 @@ describe 'epics list', :js do
       end
     end
 
+    it 'shows epic start and/or end dates when present' do
+      page.within('.issuable-list') do
+        expect(find("li[data-id='#{epic1.id}'] .issuable-info .issuable-dates")).to have_content("Until #{epic1.end_date.strftime('%b %d, %Y')}")
+        expect(find("li[data-id='#{epic2.id}'] .issuable-info .issuable-dates")).to have_content("From #{epic2.start_date.strftime('%b %d, %Y')}")
+      end
+    end
+
     it 'renders the filtered search bar correctly' do
       page.within('.content-wrapper .content') do
         expect(page).to have_css('.epics-filters')

ee/spec/helpers/epics_helper_spec.rb

@@ -48,4 +48,46 @@ describe EpicsHelper, type: :helper do
       expect(epic_state_title(:some_other_state)).to eq('Some other state epics')
     end
   end
+
+  describe '#epic_timeframe' do
+    let(:epic) { build(:epic, start_date: start_date, end_date: end_date) }
+
+    subject { epic_timeframe(epic) }
+
+    context 'when both dates are from the same year' do
+      let(:start_date) { Date.new(2018, 7, 22) }
+      let(:end_date) { Date.new(2018, 8, 15) }
+
+      it 'returns start date with year omitted and end date with year' do
+        is_expected.to eq('Jul 22 – Aug 15, 2018')
+      end
+    end
+
+    context 'when both dates are from different years' do
+      let(:start_date) { Date.new(2018, 7, 22) }
+      let(:end_date) { Date.new(2019, 7, 22) }
+
+      it 'returns start date with year omitted and end date with year' do
+        is_expected.to eq('Jul 22, 2018 – Jul 22, 2019')
+      end
+    end
+
+    context 'when only start date is present' do
+      let(:start_date) { Date.new(2018, 7, 22) }
+      let(:end_date) { nil }
+
+      it 'returns start date with year' do
+        is_expected.to eq('From Jul 22, 2018')
+      end
+    end
+
+    context 'when only end date is present' do
+      let(:start_date) { nil }
+      let(:end_date) { Date.new(2018, 7, 22) }
+
+      it 'returns end date with year' do
+        is_expected.to eq('Until Jul 22, 2018')
+      end
+    end
+  end
 end