[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)

app/assets/javascripts/cycle_analytics/components/base.vue

@@ -51,6 +51,7 @@ export default {
       'features',
       'createdBefore',
       'createdAfter',
+      'pagination'
     ]),
     ...mapGetters(['pathNavigationData', 'filterParams']),
     displayStageEvents() {
@@ -99,7 +100,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['fetchStageData', 'setSelectedStage', 'setDateRange']),
+    ...mapActions(['fetchStageData', 'setSelectedStage', 'setDateRange', 'updateStageTablePagination']),
     onSetDateRange({ startDate, endDate }) {
       this.setDateRange({
         createdAfter: new Date(startDate),
@@ -108,6 +109,7 @@ export default {
     },
     onSelectStage(stage) {
       this.setSelectedStage(stage);
+      this.updateStageTablePagination({ ...this.pagination, page: 1 });
     },
     dismissOverviewDialog() {
       this.isOverviewDialogDismissed = true;
@@ -117,6 +119,9 @@ export default {
       const { permissions } = this;
       return Boolean(permissions?.[id]);
     },
+    onHandleUpdatePagination(data) {
+      this.updateStageTablePagination(data);
+    },    
   },
   dayRangeOptions: [7, 30, 90],
   i18n: {
@@ -163,8 +168,8 @@ export default {
       :empty-state-title="emptyStageTitle"
       :empty-state-message="emptyStageText"
       :no-data-svg-path="noDataSvgPath"
-      :pagination="null"
-      :sortable="false"
+      :pagination="pagination"
+      @handleUpdatePagination="onHandleUpdatePagination"
     />
   </div>
 </template>