Add pagination to throughput table

This commit introduces pagination into the MR
Analytics Throughput table component.

ee/app/assets/javascripts/analytics/merge_request_analytics/constants.js

 import { __ } from '~/locale';
 
 export const DEFAULT_NUMBER_OF_DAYS = 365;
-export const MAX_RECORDS = 100;
+export const PER_PAGE = 20;
 export const ASSIGNEES_VISIBLE = 2;
 export const AVATAR_SIZE = 24;
 

ee/app/assets/javascripts/analytics/merge_request_analytics/graphql/queries/throughput_table.query.graphql

-query(
+#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+
+query getThroughputTableData(
   $fullPath: ID!
   $startDate: Time!
   $endDate: Time!
-  $limit: Int!
   $labels: [String!]
   $authorUsername: String
   $assigneeUsername: String
   $milestoneTitle: String
   $sourceBranches: [String!]
   $targetBranches: [String!]
+  $firstPageSize: Int
+  $lastPageSize: Int
+  $prevPageCursor: String = ""
+  $nextPageCursor: String = ""
 ) {
   project(fullPath: $fullPath) {
     mergeRequests(
-      first: $limit
+      first: $firstPageSize
+      last: $lastPageSize
+      after: $nextPageCursor
+      before: $prevPageCursor
       mergedAfter: $startDate
       mergedBefore: $endDate
       sort: MERGED_AT_DESC
@@ -23,6 +31,9 @@ query(
       sourceBranches: $sourceBranches
       targetBranches: $targetBranches
     ) {
+      pageInfo {
+        ...PageInfo
+      }
       nodes {
         iid
         title

ee/spec/frontend/analytics/merge_request_analytics/components/throughput_table_spec.js

 import Vuex from 'vuex';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlAlert, GlLoadingIcon, GlTable, GlIcon, GlAvatarsInline } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlTable, GlIcon, GlAvatarsInline, GlPagination } from '@gitlab/ui';
 import store from 'ee/analytics/merge_request_analytics/store';
 import ThroughputTable from 'ee/analytics/merge_request_analytics/components/throughput_table.vue';
 import {
@@ -13,6 +13,7 @@ import {
   endDate,
   fullPath,
   throughputTableHeaders,
+  pageInfo,
 } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -58,12 +59,10 @@ describe('ThroughputTable', () => {
 
   const additionalData = data => {
     wrapper.setData({
-      throughputTableData: [
-        {
-          ...throughputTableData[0],
-          ...data,
-        },
-      ],
+      throughputTableData: {
+        list: [{ ...throughputTableData[0], ...data }],
+        pageInfo,
+      },
     });
   };
 
@@ -77,6 +76,18 @@ describe('ThroughputTable', () => {
   const findColSubComponent = (colTestId, childComponent) =>
     findCol(colTestId).find(childComponent);
 
+  const findPagination = () => wrapper.find(GlPagination);
+
+  const findPrevious = () =>
+    findPagination()
+      .findAll('.page-item')
+      .at(0);
+
+  const findNext = () =>
+    findPagination()
+      .findAll('.page-item')
+      .at(1);
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -101,6 +112,10 @@ describe('ThroughputTable', () => {
     it('does not display the table', () => {
       displaysComponent(GlTable, false);
     });
+
+    it('does not display the pagination', () => {
+      displaysComponent(GlPagination, false);
+    });
   });
 
   describe('while loading', () => {
@@ -132,7 +147,12 @@ describe('ThroughputTable', () => {
   describe('with data', () => {
     beforeEach(() => {
       wrapper = createComponent({ func: mount });
-      wrapper.setData({ throughputTableData });
+      wrapper.setData({
+        throughputTableData: {
+          list: throughputTableData,
+          pageInfo,
+        },
+      });
     });
 
     it('displays the table', () => {
@@ -147,6 +167,10 @@ describe('ThroughputTable', () => {
       displaysComponent(GlAlert, false);
     });
 
+    it('displays the pagination', () => {
+      displaysComponent(GlPagination, true);
+    });
+
     describe('table fields', () => {
       it('displays the correct table headers', () => {
         const headers = findTable().findAll(`[data-testid="${TEST_IDS.TABLE_HEADERS}"]`);
@@ -350,6 +374,60 @@ describe('ThroughputTable', () => {
     });
   });
 
+  describe('pagination', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ func: mount });
+      wrapper.setData({
+        throughputTableData: {
+          list: throughputTableData,
+          pageInfo,
+        },
+      });
+    });
+
+    it('disables the prev button on the first page', () => {
+      expect(findPrevious().classes()).toContain('disabled');
+      expect(findNext().classes()).not.toContain('disabled');
+    });
+
+    it('disables the next button on the last page', async () => {
+      wrapper.setData({
+        pagination: {
+          currentPage: 3,
+        },
+        throughputTableData: {
+          pageInfo: {
+            hasNextPage: false,
+          },
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(findPrevious().classes()).not.toContain('disabled');
+      expect(findNext().classes()).toContain('disabled');
+    });
+
+    it('shows the prev and next buttons on middle pages', async () => {
+      wrapper.setData({
+        pagination: {
+          currentPage: 2,
+        },
+        throughputTableData: {
+          pageInfo: {
+            hasNextPage: true,
+            hasPrevPage: true,
+          },
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(findPrevious().classes()).not.toContain('disabled');
+      expect(findNext().classes()).not.toContain('disabled');
+    });
+  });
+
   describe('with errors', () => {
     beforeEach(() => {
       wrapper = createComponent();

ee/spec/frontend/analytics/merge_request_analytics/mock_data.js

@@ -57,6 +57,13 @@ export const throughputTableHeaders = [
   'Assignees',
 ];
 
+export const pageInfo = {
+  hasNextPage: true,
+  hasPreviousPage: false,
+  startCursor: 'abc',
+  endCursor: 'bcd',
+};
+
 export const throughputTableData = [
   {
     iid: '1',