Add pagination to cluster list

Update javascripts/clusters_list to include pagination
Updated associated tests

app/assets/javascripts/clusters_list/components/clusters.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlTable, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
+import { GlBadge, GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import { __, sprintf } from '~/locale';
 
 export default {
   components: {
-    GlTable,
+    GlBadge,
     GlLink,
     GlLoadingIcon,
-    GlBadge,
+    GlPagination,
+    GlTable,
   },
   directives: {
     tooltip,
   },
   computed: {
-    ...mapState(['clusters', 'loading']),
+    ...mapState(['clusters', 'clustersPerPage', 'loading', 'page', 'totalCulsters']),
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(newVal) {
+        this.setPage(newVal);
+        this.fetchClusters();
+      },
+    },
     fields() {
       return [
         {
@@ -47,12 +57,15 @@ export default {
         },
       ];
     },
+    hasClusters() {
+      return this.clustersPerPage > 0;
+    },
   },
   mounted() {
     this.fetchClusters();
   },
   methods: {
-    ...mapActions(['fetchClusters']),
+    ...mapActions(['fetchClusters', 'setPage']),
     statusClass(status) {
       const iconClass = STATUSES[status] || STATUSES.default;
       return iconClass.className;
@@ -67,33 +80,46 @@ export default {
 
 <template>
   <gl-loading-icon v-if="loading" size="md" class="mt-3" />
-  <gl-table v-else :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
-    <template #cell(name)="{ item }">
-      <div class="d-flex flex-row-reverse flex-md-row js-status">
-        <gl-link data-qa-selector="cluster" :data-qa-cluster-name="item.name" :href="item.path">
-          {{ item.name }}
-        </gl-link>
 
-        <gl-loading-icon
-          v-if="item.status === 'deleting'"
-          v-tooltip
-          :title="statusTitle(item.status)"
-          size="sm"
-          class="mr-2 ml-md-2"
-        />
-        <div
-          v-else
-          v-tooltip
-          class="cluster-status-indicator rounded-circle align-self-center gl-w-4 gl-h-4 mr-2 ml-md-2"
-          :class="statusClass(item.status)"
-          :title="statusTitle(item.status)"
-        ></div>
-      </div>
-    </template>
-    <template #cell(cluster_type)="{value}">
-      <gl-badge variant="light">
-        {{ value }}
-      </gl-badge>
-    </template>
-  </gl-table>
+  <section v-else>
+    <gl-table :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
+      <template #cell(name)="{ item }">
+        <div class="d-flex flex-row-reverse flex-md-row js-status">
+          <gl-link data-qa-selector="cluster" :data-qa-cluster-name="item.name" :href="item.path">
+            {{ item.name }}
+          </gl-link>
+
+          <gl-loading-icon
+            v-if="item.status === 'deleting'"
+            v-tooltip
+            :title="statusTitle(item.status)"
+            size="sm"
+            class="mr-2 ml-md-2"
+          />
+          <div
+            v-else
+            v-tooltip
+            class="cluster-status-indicator rounded-circle align-self-center gl-w-4 gl-h-4 mr-2 ml-md-2"
+            :class="statusClass(item.status)"
+            :title="statusTitle(item.status)"
+          ></div>
+        </div>
+      </template>
+      <template #cell(cluster_type)="{value}">
+        <gl-badge variant="light">
+          {{ value }}
+        </gl-badge>
+      </template>
+    </gl-table>
+
+    <gl-pagination
+      v-if="hasClusters"
+      v-model="currentPage"
+      :per-page="clustersPerPage"
+      :total-items="totalCulsters"
+      :prev-text="__('Prev')"
+      :next-text="__('Next')"
+      align="center"
+    />
+  </section>
 </template>

app/assets/javascripts/clusters_list/store/actions.js

@@ -2,18 +2,22 @@ import Poll from '~/lib/utils/poll';
 import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
+import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import * as types from './mutation_types';
 
 export const fetchClusters = ({ state, commit }) => {
   const poll = new Poll({
     resource: {
-      fetchClusters: endpoint => axios.get(endpoint),
+      fetchClusters: paginatedEndPoint => axios.get(paginatedEndPoint),
     },
-    data: state.endpoint,
+    data: `${state.endpoint}?page=${state.page}`,
     method: 'fetchClusters',
-    successCallback: ({ data }) => {
+    successCallback: ({ data, headers }) => {
       if (data.clusters) {
-        commit(types.SET_CLUSTERS_DATA, data);
+        const normalizedHeaders = normalizeHeaders(headers);
+        const paginationInformation = parseIntPagination(normalizedHeaders);
+
+        commit(types.SET_CLUSTERS_DATA, { data, paginationInformation });
         commit(types.SET_LOADING_STATE, false);
         poll.stop();
       }
@@ -24,5 +28,9 @@ export const fetchClusters = ({ state, commit }) => {
   poll.makeRequest();
 };
 
+export const setPage = ({ commit }, page) => {
+  commit(types.SET_PAGE, page);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

app/assets/javascripts/clusters_list/store/mutation_types.js

 export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
 export const SET_LOADING_STATE = 'SET_LOADING_STATE';
+export const SET_PAGE = 'SET_PAGE';

app/assets/javascripts/clusters_list/store/mutations.js

@@ -4,10 +4,15 @@ export default {
   [types.SET_LOADING_STATE](state, value) {
     state.loading = value;
   },
-  [types.SET_CLUSTERS_DATA](state, data) {
+  [types.SET_CLUSTERS_DATA](state, { data, paginationInformation }) {
     Object.assign(state, {
       clusters: data.clusters,
+      clustersPerPage: paginationInformation.perPage,
       hasAncestorClusters: data.has_ancestor_clusters,
+      totalCulsters: paginationInformation.total,
     });
   },
+  [types.SET_PAGE](state, value) {
+    state.page = Number(value) || 1;
+  },
 };

app/assets/javascripts/clusters_list/store/state.js

@@ -3,4 +3,7 @@ export default (initialState = {}) => ({
   hasAncestorClusters: false,
   loading: true,
   clusters: [],
+  clustersPerPage: 0,
+  page: 1,
+  totalCulsters: 0,
 });

changelogs/unreleased/emilyring-cluster-list-refactor-pagination.yml

+---
+title: 'Cluster index refactor: Add missing pagination'
+merge_request: 32338
+author:
+type: changed

spec/frontend/clusters_list/components/clusters_spec.js

@@ -4,7 +4,7 @@ import ClusterStore from '~/clusters_list/store';
 import MockAdapter from 'axios-mock-adapter';
 import { apiData } from '../mock_data';
 import { mount } from '@vue/test-utils';
-import { GlTable, GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlTable, GlPagination } from '@gitlab/ui';
 
 describe('Clusters', () => {
   let mock;
@@ -14,11 +14,12 @@ describe('Clusters', () => {
   const endpoint = 'some/endpoint';
 
   const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findPaginatedButtons = () => wrapper.find(GlPagination);
   const findTable = () => wrapper.find(GlTable);
   const findStatuses = () => findTable().findAll('.js-status');
 
   const mockPollingApi = (response, body, header) => {
-    mock.onGet(endpoint).reply(response, body, header);
+    mock.onGet(`${endpoint}?page=${header['x-page']}`).reply(response, body, header);
   };
 
   const mountWrapper = () => {
@@ -29,7 +30,11 @@ describe('Clusters', () => {
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    mockPollingApi(200, apiData, {});
+    mockPollingApi(200, apiData, {
+      'x-total': apiData.clusters.length,
+      'x-per-page': 20,
+      'x-page': 1,
+    });
 
     return mountWrapper();
   });
@@ -93,4 +98,47 @@ describe('Clusters', () => {
       }
     });
   });
+
+  describe('pagination', () => {
+    const perPage = apiData.clusters.length;
+    const totalFirstPage = 100;
+    const totalSecondPage = 500;
+
+    beforeEach(() => {
+      mockPollingApi(200, apiData, {
+        'x-total': totalFirstPage,
+        'x-per-page': perPage,
+        'x-page': 1,
+      });
+      return mountWrapper();
+    });
+
+    it('should load to page 1 with header values', () => {
+      const buttons = findPaginatedButtons();
+
+      expect(buttons.props('perPage')).toBe(perPage);
+      expect(buttons.props('totalItems')).toBe(totalFirstPage);
+      expect(buttons.props('value')).toBe(1);
+    });
+
+    describe('when updating currentPage', () => {
+      beforeEach(() => {
+        mockPollingApi(200, apiData, {
+          'x-total': totalSecondPage,
+          'x-per-page': perPage,
+          'x-page': 2,
+        });
+        wrapper.setData({ currentPage: 2 });
+        return axios.waitForAll();
+      });
+
+      it('should change pagination when currentPage changes', () => {
+        const buttons = findPaginatedButtons();
+
+        expect(buttons.props('perPage')).toBe(perPage);
+        expect(buttons.props('totalItems')).toBe(totalSecondPage);
+        expect(buttons.props('value')).toBe(2);
+      });
+    });
+  });
 });

spec/frontend/clusters_list/store/actions_spec.js

@@ -19,14 +19,29 @@ describe('Clusters store actions', () => {
     afterEach(() => mock.restore());
 
     it('should commit SET_CLUSTERS_DATA with received response', done => {
-      mock.onGet().reply(200, apiData);
+      const headers = {
+        'x-total': apiData.clusters.length,
+        'x-per-page': 20,
+        'x-page': 1,
+      };
+
+      const paginationInformation = {
+        nextPage: NaN,
+        page: 1,
+        perPage: 20,
+        previousPage: NaN,
+        total: apiData.clusters.length,
+        totalPages: NaN,
+      };
+
+      mock.onGet().reply(200, apiData, headers);
 
       testAction(
         actions.fetchClusters,
         { endpoint: apiData.endpoint },
         {},
         [
-          { type: types.SET_CLUSTERS_DATA, payload: apiData },
+          { type: types.SET_CLUSTERS_DATA, payload: { data: apiData, paginationInformation } },
           { type: types.SET_LOADING_STATE, payload: false },
         ],
         [],