Upgrade gitlab-ui and migrate gl-pagination

- Upgraded gitlab-ui to v4.0.0
- Migrated pagination_links to reflect breaking changes introduced
in gitlab-ui v4.0.0

2 files changed, 24 insertions, 9 deletions

diff --git a/app/assets/javascripts/vue_shared/components/pagination/constants.js b/app/assets/javascripts/vue_shared/components/pagination/constants.js
index c24b142ac7e..748ad178c70 100644
--- a/app/assets/javascripts/vue_shared/components/pagination/constants.js
+++ b/app/assets/javascripts/vue_shared/components/pagination/constants.js
@@ -7,3 +7,7 @@ export const PREV = s__('Pagination|Prev');
 export const NEXT = s__('Pagination|Next');
 export const FIRST = s__('Pagination|« First');
 export const LAST = s__('Pagination|Last »');
+export const LABEL_FIRST_PAGE = s__('Pagination|Go to first page');
+export const LABEL_PREV_PAGE = s__('Pagination|Go to previous page');
+export const LABEL_NEXT_PAGE = s__('Pagination|Go to next page');
+export const LABEL_LAST_PAGE = s__('Pagination|Go to last page');
diff --git a/app/assets/javascripts/vue_shared/components/pagination_links.vue b/app/assets/javascripts/vue_shared/components/pagination_links.vue
index 0b44f8578cb..06097913e91 100644
--- a/app/assets/javascripts/vue_shared/components/pagination_links.vue
+++ b/app/assets/javascripts/vue_shared/components/pagination_links.vue
@@ -1,6 +1,13 @@
 <script>
 import { GlPagination } from '@gitlab/ui';
-import { s__ } from '../../locale';
+import {
+  PREV,
+  NEXT,
+  LABEL_FIRST_PAGE,
+  LABEL_PREV_PAGE,
+  LABEL_NEXT_PAGE,
+  LABEL_LAST_PAGE,
+} from '~/vue_shared/components/pagination/constants';
 
 export default {
   components: {
@@ -16,23 +23,27 @@ export default {
       required: true,
     },
   },
-  firstText: s__('Pagination|« First'),
-  prevText: s__('Pagination|Prev'),
-  nextText: s__('Pagination|Next'),
-  lastText: s__('Pagination|Last »'),
+  prevText: PREV,
+  nextText: NEXT,
+  labelFirstPage: LABEL_FIRST_PAGE,
+  labelPrevPage: LABEL_PREV_PAGE,
+  labelNextPage: LABEL_NEXT_PAGE,
+  labelLastPage: LABEL_LAST_PAGE,
 };
 </script>
 
 <template>
   <gl-pagination
     v-bind="$attrs"
-    :change="change"
-    :page="pageInfo.page"
+    :value="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"
+    :label-first-page="$options.labelFirstPage"
+    :label-prev-page="$options.labelPrevPage"
+    :label-next-page="$options.labelNextPage"
+    :label-last-page="$options.labelLastPage"
+    @input="change"
   />
 </template>