[VSA][FE] Add sorting and pagination to the project level stage table

What does this MR do and why?

Adds pagination and sorting support to the project VSA stage table. Currently the project vsa stage table has 2 columns (issue/merge request, and time) that can be used to sort the entries by.

The stage table displays 20 items on each page and will not display the pagination component if the stage contains less than 20 items in total.

Note: a separate issue will introduce deep linking for the filter parameters

Screenshots or screen recordings

project-vsa-sorting-pagination

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #335974 (closed)

spec/features/cycle_analytics_spec.rb

@@ -7,10 +7,12 @@
   let_it_be(:guest) { create(:user) }
   let_it_be(:stage_table_selector) { '[data-testid="vsa-stage-table"]' }
   let_it_be(:stage_table_event_selector) { '[data-testid="vsa-stage-event"]' }
+  let_it_be(:stage_table_event_title_selector) { '[data-testid="vsa-stage-event-title"]' }
+  let_it_be(:stage_table_pagination_selector) { '[data-testid="vsa-stage-pagination"]' }
   let_it_be(:metrics_selector) { "[data-testid='vsa-time-metrics']" }
   let_it_be(:metric_value_selector) { "[data-testid='displayValue']" }
 
-  let(:stage_table) { page.find(stage_table_selector) }
+  let(:stage_table) { find(stage_table_selector) }
   let(:project) { create(:project, :repository) }
   let(:issue) { create(:issue, project: project, created_at: 2.days.ago) }
   let(:milestone) { create(:milestone, project: project) }
@@ -53,6 +55,7 @@ def set_daterange(from_date, to_date)
       # So setting the date range to be the last 2 days should skip past the existing data
       from = 2.days.ago.strftime("%Y-%m-%d")
       to = 1.day.ago.strftime("%Y-%m-%d")
+      MAX_ITEMS_PER_PAGE = 20
 
       around do |example|
         travel_to(5.days.ago) { example.run }
@@ -60,9 +63,8 @@ def set_daterange(from_date, to_date)
 
       before do
         project.add_maintainer(user)
-        create_list(:issue, 2, project: project, created_at: 2.weeks.ago, milestone: milestone)
-
         create_cycle(user, project, issue, mr, milestone, pipeline)
+        create_list(:issue, MAX_ITEMS_PER_PAGE, project: project, created_at: 2.weeks.ago, milestone: milestone)
         deploy_master(user, project)
 
         issue.metrics.update!(first_mentioned_in_commit_at: issue.metrics.first_associated_with_milestone_at + 1.hour)
@@ -81,6 +83,8 @@ def set_daterange(from_date, to_date)
         wait_for_requests
       end
 
+      let(:stage_table_events) { stage_table.all(stage_table_event_selector) }
+
       it 'displays metrics' do
         metrics_tiles = page.find(metrics_selector)
 
@@ -112,20 +116,61 @@ def set_daterange(from_date, to_date)
       end
 
       it 'can filter the issues by date' do
-        expect(stage_table.all(stage_table_event_selector).length).to eq(3)
+        expect(stage_table_events.length).to eq(20)
 
         set_daterange(from, to)
 
-        expect(stage_table.all(stage_table_event_selector).length).to eq(0)
+        expect(stage_table_events.length).to eq(0)
       end
 
       it 'can filter the metrics by date' do
-        expect(metrics_values).to eq(["3.0", "2.0", "1.0", "0.0"])
+        expect(metrics_values).to eq(["21.0", "2.0", "1.0", "0.0"])
 
         set_daterange(from, to)
 
         expect(metrics_values).to eq(['-'] * 4)
       end
+
+      it 'can sort records' do
+        # NOTE: checking that the string changes should suffice
+        # depending on the order the tests are run we might run into problems with hard coded strings
+        original_first_title = first_stage_title
+        stage_time_column.click
+
+        expect_to_be_sorted "descending"
+        expect(first_stage_title).to have_text(original_first_title, exact: true)
+
+        stage_time_column.click
+
+        expect_to_be_sorted "ascending"
+        expect(first_stage_title).not_to have_text(original_first_title, exact: true)
+      end
+
+      it 'paginates the results' do
+        original_first_title = first_stage_title
+
+        expect(page).to have_selector(stage_table_pagination_selector)
+
+        go_to_next_page
+
+        expect(page).not_to have_text(original_first_title, exact: true)
+      end
+
+      def stage_time_column
+        stage_table.all("thead th").last
+      end
+
+      def first_stage_title
+        stage_table.all(stage_table_event_title_selector).first.text
+      end
+
+      def expect_to_be_sorted(direction = "descending")
+        expect(stage_time_column['aria-sort']).to eq(direction)
+      end
+
+      def go_to_next_page
+        page.find(stage_table_pagination_selector).all("a").last.click
+      end
     end
   end