Use GitLab ui pagination component for groups

app/assets/javascripts/commons/gitlab_ui.js

 import Vue from 'vue';
+import Pagination from '@gitlab-org/gitlab-ui/dist/components/base/pagination';
 import progressBar from '@gitlab-org/gitlab-ui/dist/components/base/progress_bar';
 import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal';
 import loadingIcon from '@gitlab-org/gitlab-ui/dist/components/base/loading_icon';
@@ -6,6 +7,7 @@ import loadingIcon from '@gitlab-org/gitlab-ui/dist/components/base/loading_icon
 import dModal from '@gitlab-org/gitlab-ui/dist/directives/modal';
 import dTooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip';
 
+Vue.component('gl-pagination', Pagination);
 Vue.component('gl-progress-bar', progressBar);
 Vue.component('gl-ui-modal', modal);
 Vue.component('gl-loading-icon', loadingIcon);

app/assets/javascripts/groups/components/groups.vue

 <script>
-import tablePagination from '~/vue_shared/components/table_pagination.vue';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
 import eventHub from '../event_hub';
 import { getParameterByName } from '../../lib/utils/common_utils';
 
 export default {
   components: {
-    tablePagination,
+    PaginationLinks,
   },
   props: {
     groups: {
@@ -49,15 +49,18 @@ export default {
     >
       {{ searchEmptyMessage }}
     </div>
-    <group-folder
-      v-if="!searchEmpty"
-      :groups="groups"
-      :action="action"
-    />
-    <table-pagination
-      v-if="!searchEmpty"
-      :change="change"
-      :page-info="pageInfo"
-    />
+    <template
+      v-else
+    >
+      <group-folder
+        :groups="groups"
+        :action="action"
+      />
+      <pagination-links
+        :change="change"
+        :page-info="pageInfo"
+        class="d-flex justify-content-center prepend-top-default"
+      />
+    </template>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/pagination_links.vue

+<script>
+import { s__ } from '../../locale';
+
+export default {
+  props: {
+    change: {
+      type: Function,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  firstText: s__('Pagination|« First'),
+  prevText: s__('Pagination|Prev'),
+  nextText: s__('Pagination|Next'),
+  lastText: s__('Pagination|Last »'),
+};
+</script>
+
+<template>
+  <gl-pagination
+    v-bind="$attrs"
+    :change="change"
+    :page="pageInfo.page"
+    :per-page="pageInfo.perPage"
+    :total-items="pageInfo.total"
+    :first-text="$options.firstText"
+    :prev-text="$options.prevText"
+    :next-text="$options.nextText"
+    :last-text="$options.lastText"
+  />
+</template>

spec/features/dashboard/groups_list_spec.rb

@@ -125,7 +125,7 @@ describe 'Dashboard Groups page', :js do
     end
 
     it 'loads results for next page' do
-      expect(page).to have_selector('.gl-pagination .page', count: 2)
+      expect(page).to have_selector('.gl-pagination .page-item a[role=menuitemradio]', count: 2)
 
       # Check first page
       expect(page).to have_content(group2.full_name)
@@ -134,7 +134,7 @@ describe 'Dashboard Groups page', :js do
       expect(page).not_to have_selector("#group-#{group.id}")
 
       # Go to next page
-      find(".gl-pagination .page:not(.active) a").click
+      find('.gl-pagination .page-item:not(.active) a[role=menuitemradio]').click
 
       wait_for_requests
 

spec/javascripts/groups/components/app_spec.js

@@ -24,6 +24,8 @@ const createComponent = (hideProjects = false) => {
   const store = new GroupsStore(false);
   const service = new GroupsService(mockEndpoint);
 
+  store.state.pageInfo = mockPageInfo;
+
   return new Component({
     propsData: {
       store,
@@ -484,7 +486,6 @@ describe('AppComponent', () => {
     it('should render groups tree', done => {
       vm.store.state.groups = [mockParentGroupItem];
       vm.isLoading = false;
-      vm.store.state.pageInfo = mockPageInfo;
       Vue.nextTick(() => {
         expect(vm.$el.querySelector('.groups-list-tree-container')).toBeDefined();
         done();

spec/javascripts/vue_shared/components/pagination_links_spec.js

+import Vue from 'vue';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import { s__ } from '~/locale';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Pagination links component', () => {
+  const paginationLinksComponent = Vue.extend(PaginationLinks);
+  const change = page => page;
+  const pageInfo = {
+    page: 3,
+    perPage: 5,
+    total: 30,
+  };
+  const translations = {
+    firstText: s__('Pagination|« First'),
+    prevText: s__('Pagination|Prev'),
+    nextText: s__('Pagination|Next'),
+    lastText: s__('Pagination|Last »'),
+  };
+
+  let paginationLinks;
+  let glPagination;
+  let destinationComponent;
+
+  beforeEach(() => {
+    paginationLinks = mountComponent(
+      paginationLinksComponent,
+      {
+        change,
+        pageInfo,
+      },
+    );
+    [glPagination] = paginationLinks.$children;
+    [destinationComponent] = glPagination.$children;
+  });
+
+  afterEach(() => {
+    paginationLinks.$destroy();
+  });
+
+  it('should provide translated text to GitLab UI pagination', () => {
+    Object.entries(translations).forEach(entry =>
+      expect(
+        destinationComponent[entry[0]],
+      ).toBe(entry[1]),
+    );
+  });
+
+  it('should pass change to GitLab UI pagination', () => {
+    expect(
+      Object.is(glPagination.change, change),
+    ).toBe(true);
+  });
+
+  it('should pass page from pageInfo to GitLab UI pagination', () => {
+    expect(
+      destinationComponent.value,
+    ).toBe(pageInfo.page);
+  });
+
+  it('should pass per page from pageInfo to GitLab UI pagination', () => {
+    expect(
+      destinationComponent.perPage,
+    ).toBe(pageInfo.perPage);
+  });
+
+  it('should pass total items from pageInfo to GitLab UI pagination', () => {
+    expect(
+      destinationComponent.totalRows,
+    ).toBe(pageInfo.total);
+  });
+});