Allow sorting epics by created & updated dates

Adds `Created date` and `Updated date` sort
options.

Changelog: fixed
EE: true

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

-import { AvailableSortOptions } from '~/vue_shared/issuable/list/constants';
 import { __ } from '~/locale';
 
 export const EpicsSortOptions = [
   {
-    id: AvailableSortOptions.length + 10,
+    id: 1,
+    title: __('Created date'),
+    sortDirection: {
+      descending: 'CREATED_AT_DESC',
+      ascending: 'CREATED_AT_ASC',
+    },
+  },
+  {
+    id: 2,
+    title: __('Updated date'),
+    sortDirection: {
+      descending: 'UPDATED_AT_DESC',
+      ascending: 'UPDATED_AT_ASC',
+    },
+  },
+  {
+    id: 3,
     title: __('Start date'),
     sortDirection: {
       descending: 'start_date_desc',
@@ -11,7 +26,7 @@ export const EpicsSortOptions = [
     },
   },
   {
-    id: AvailableSortOptions.length + 20,
+    id: 4,
     title: __('Due date'),
     sortDirection: {
       descending: 'end_date_desc',
@@ -19,7 +34,7 @@ export const EpicsSortOptions = [
     },
   },
   {
-    id: AvailableSortOptions.length + 30,
+    id: 5,
     title: __('Title'),
     sortDirection: {
       descending: 'TITLE_DESC',

ee/spec/features/epics/epics_list_spec.rb

@@ -18,6 +18,7 @@ RSpec.describe 'epics list', :js do
 
   context 'epics list' do
     available_tokens = %w[Author Label My-Reaction]
+    available_sort_options = ['Created date', 'Updated date', 'Start date', 'Due date', 'Title']
 
     describe 'within a group' do
       let!(:epic1) { create(:epic, group: group, start_date: '2020-12-15', end_date: '2021-1-15') }
@@ -75,7 +76,7 @@ RSpec.describe 'epics list', :js do
 
         it_behaves_like 'epic list'
 
-        it_behaves_like 'filtered search bar', available_tokens
+        it_behaves_like 'filtered search bar', available_tokens, available_sort_options
 
         it 'shows bulk editing sidebar with actions and labels select dropdown', :aggregate_failures do
           click_button 'Edit epics'
@@ -151,7 +152,7 @@ RSpec.describe 'epics list', :js do
         wait_for_requests
       end
 
-      it_behaves_like 'filtered search bar', available_tokens
+      it_behaves_like 'filtered search bar', available_tokens, available_sort_options
     end
   end
 end

ee/spec/features/groups/group_roadmap_spec.rb

@@ -143,6 +143,7 @@ RSpec.describe 'group epic roadmap', :js do
 
   context 'when epics exist for the group' do
     available_tokens = %w[Author Label Milestone Epic My-Reaction]
+    available_sort_options = ['Start date', 'Due date']
 
     let!(:epic_with_bug) { create(:labeled_epic, group: group, start_date: 10.days.ago, end_date: 1.day.ago, labels: [bug_label]) }
     let!(:epic_with_critical) { create(:labeled_epic, group: group, start_date: 20.days.ago, end_date: 2.days.ago, labels: [critical_label]) }
@@ -247,18 +248,6 @@ RSpec.describe 'group epic roadmap', :js do
         end
       end
 
-      it 'renders the sort dropdown correctly' do
-        page.within('.vue-filtered-search-bar-container') do
-          expect(page).to have_css('.sort-dropdown-container')
-          find('.sort-dropdown-container .dropdown-toggle').click
-          page.within('.sort-dropdown-container .dropdown-menu') do
-            expect(page).to have_selector('li button', count: 2)
-            expect(page).to have_content('Start date')
-            expect(page).to have_content('Due date')
-          end
-        end
-      end
-
       it 'renders roadmap view' do
         page.within('.content-wrapper .content') do
           expect(page).to have_css('.roadmap-container')
@@ -377,7 +366,7 @@ RSpec.describe 'group epic roadmap', :js do
       end
     end
 
-    describe 'filtered search tokens' do
+    describe 'filtered search' do
       let!(:epic1) { create(:epic, group: group, end_date: 10.days.ago) }
       let!(:epic2) { create(:epic, group: group, start_date: 2.days.ago) }
       let!(:award_emoji_star) { create(:award_emoji, name: 'star', user: user, awardable: epic1) }
@@ -388,7 +377,7 @@ RSpec.describe 'group epic roadmap', :js do
         wait_for_requests
       end
 
-      it_behaves_like 'filtered search bar', available_tokens
+      it_behaves_like 'filtered search bar', available_tokens, available_sort_options
     end
 
     describe 'that is a sub-group' do
@@ -403,7 +392,7 @@ RSpec.describe 'group epic roadmap', :js do
         wait_for_requests
       end
 
-      it_behaves_like 'filtered search bar', available_tokens
+      it_behaves_like 'filtered search bar', available_tokens, available_sort_options
     end
   end
 

ee/spec/support/shared_examples/features/epics_filtered_search_shared_examples.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.shared_examples 'filtered search bar' do |tokens|
+RSpec.shared_examples 'filtered search bar' do |tokens, sort_options|
   minimum_values_for_token = {
     # Count must be at least 2 as current user are available by default
     "Author" => 2,
@@ -26,14 +26,34 @@ RSpec.shared_examples 'filtered search bar' do |tokens|
     page.first('.gl-filtered-search-suggestion').click
   end
 
-  tokens.each do |token|
-    it "renders values for token '#{token}' correctly" do
-      page.within('.vue-filtered-search-bar-container .gl-search-box-by-click') do
-        select_token(token)
+  def open_sort_dropdown
+    page.within('.vue-filtered-search-bar-container .sort-dropdown-container .gl-dropdown-toggle') do
+      page.find('.gl-dropdown-toggle').click
+    end
+  end
+
+  describe 'filtered search bar tokens list' do
+    tokens.each do |token|
+      it "renders values for token '#{token}' correctly" do
+        page.within('.vue-filtered-search-bar-container .gl-search-box-by-click') do
+          select_token(token)
+
+          wait_for_requests
+
+          expect(page.find('.gl-filtered-search-suggestion-list')).to have_selector('li.gl-filtered-search-suggestion', minimum: minimum_values_for_token[token])
+        end
+      end
+    end
+  end
 
-        wait_for_requests
+  describe 'filtered search bar sort dropdown' do
+    sort_options.each do |sort_option|
+      it "renders sort option '#{sort_option}' correctly" do
+        page.within('.vue-filtered-search-bar-container .sort-dropdown-container') do
+          page.find('.gl-dropdown-toggle').click
 
-        expect(page.find('.gl-filtered-search-suggestion-list')).to have_selector('li.gl-filtered-search-suggestion', minimum: minimum_values_for_token[token])
+          expect(page.find('.dropdown-menu')).to have_selector('li', text: sort_option)
+        end
       end
     end
   end