Use GitLab ui pagination component for groups

3 files changed, 51 insertions, 12 deletions

diff --git a/app/assets/javascripts/commons/gitlab_ui.js b/app/assets/javascripts/commons/gitlab_ui.js
index c2dc0539398..aed26adfa5c 100644
--- a/app/assets/javascripts/commons/gitlab_ui.js
+++ b/app/assets/javascripts/commons/gitlab_ui.js
@@ -1,4 +1,5 @@
 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);
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index a1beb222950..81b2e5ea37b 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -1,11 +1,11 @@
 <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>
diff --git a/app/assets/javascripts/vue_shared/components/pagination_links.vue b/app/assets/javascripts/vue_shared/components/pagination_links.vue
new file mode 100644
index 00000000000..1f2a679c145
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pagination_links.vue
@@ -0,0 +1,34 @@
+<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>