Merge branch '214364-epic-activity-feed-order' into 'master'

Add ability to sort activities in Epic

See merge request gitlab-org/gitlab!35302

app/assets/javascripts/notes/components/sort_discussion.vue

@@ -49,7 +49,10 @@ export default {
 </script>
 
 <template>
-  <div class="mr-2 d-inline-block align-bottom full-width-mobile">
+  <div
+    data-testid="sort-discussion-filter"
+    class="gl-mr-2 gl-display-inline-block gl-vertical-align-bottom full-width-mobile"
+  >
     <local-storage-sync
       :value="sortDirection"
       :storage-key="storageKey"

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

@@ -67,6 +67,7 @@
 .d-flex.justify-content-between.content-block.content-block-small.emoji-list-container.js-noteable-awards
   = render 'award_emoji/awards_block', awardable: @epic, inline: true
   .d-flex.flex-wrap.align-items-center.justify-content-lg-end
+    #js-vue-sort-issue-discussions
     #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@epic),
       notes_filters: UserPreference.notes_filters.to_json } }
 .row

ee/changelogs/unreleased/214364-epic-activity-feed-order.yml

+---
+title: Add toggle to sort epic activity feed
+merge_request: 35302
+author:
+type: added

ee/spec/features/epics/epic_show_spec.rb

@@ -10,7 +10,6 @@ RSpec.describe 'Epic show', :js do
   let_it_be(:label2) { create(:group_label, group: group, title: 'enhancement') }
   let_it_be(:label3) { create(:group_label, group: group, title: 'documentation') }
   let_it_be(:public_issue) { create(:issue, project: public_project) }
-  let_it_be(:note_text) { 'Contemnit enim disserendi elegantiam.' }
   let_it_be(:epic_title) { 'Sample epic' }
 
   let_it_be(:markdown) do
@@ -137,6 +136,46 @@ RSpec.describe 'Epic show', :js do
         expect(find('.js-discussion-filter-container #discussion-filter-dropdown')).to have_content('Show all activity')
       end
     end
+
+    describe 'Sort dropdown' do
+      let!(:notes) { create_list(:note, 2, noteable: epic) }
+
+      context 'when sorted by `Oldest first`' do
+        it 'shows label `Oldest first`' do
+          page.within('[data-testid="sort-discussion-filter"]') do
+            expect(find('.js-dropdown-text')).to have_content('Oldest first')
+          end
+        end
+
+        it 'shows comments in the correct order' do
+          items = all('.timeline-entry .timeline-discussion-body p')
+          expect(items[0]).to have_content(notes[0].note)
+          expect(items[1]).to have_content(notes[1].note)
+        end
+      end
+
+      context 'when sorted by `Newest first`' do
+        before do
+          page.within('[data-testid="sort-discussion-filter"]') do
+            find('button').click
+            find('.js-newest-first').click
+            wait_for_requests
+          end
+        end
+
+        it 'shows label `Newest first`' do
+          page.within('[data-testid="sort-discussion-filter"]') do
+            expect(find('.js-dropdown-text')).to have_content('Newest first')
+          end
+        end
+
+        it 'shows comments in the correct order' do
+          items = all('.timeline-entry .timeline-discussion-body p')
+          expect(items[0]).to have_content(notes[1].note)
+          expect(items[1]).to have_content(notes[0].note)
+        end
+      end
+    end
   end
 
   describe 'Epic sidebar' do