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

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');

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

 <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>

locale/gitlab.pot

@@ -6916,6 +6916,18 @@ msgstr ""
 msgid "Pages getting started guide"
 msgstr ""
 
+msgid "Pagination|Go to first page"
+msgstr ""
+
+msgid "Pagination|Go to last page"
+msgstr ""
+
+msgid "Pagination|Go to next page"
+msgstr ""
+
+msgid "Pagination|Go to previous page"
+msgstr ""
+
 msgid "Pagination|Last »"
 msgstr ""
 

package.json

@@ -38,7 +38,7 @@
     "@babel/preset-env": "^7.4.4",
     "@gitlab/csslab": "^1.9.0",
     "@gitlab/svgs": "^1.63.0",
-    "@gitlab/ui": "^3.11.0",
+    "@gitlab/ui": "^4.0.0",
     "apollo-cache-inmemory": "^1.5.1",
     "apollo-client": "^2.5.1",
     "apollo-link": "^1.2.11",

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-item a[role=menuitemradio]', count: 2)
+      expect(page).to have_selector('.gl-pagination .page-item a.page-link', count: 3)
 
       # 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-item:not(.active) a[role=menuitemradio]').click
+      find('.gl-pagination .page-item:last-of-type a.page-link').click
 
       wait_for_requests
 

spec/frontend/vue_shared/components/pagination_links_spec.js

-import Vue from 'vue';
+import { mount, createLocalVue } from '@vue/test-utils';
+import { GlPagination } from '@gitlab/ui';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
-import { s__ } from '~/locale';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import {
+  PREV,
+  NEXT,
+  LABEL_FIRST_PAGE,
+  LABEL_PREV_PAGE,
+  LABEL_NEXT_PAGE,
+  LABEL_LAST_PAGE,
+} from '~/vue_shared/components/pagination/constants';
+
+const localVue = createLocalVue();
 
 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 »'),
+    prevText: PREV,
+    nextText: NEXT,
+    labelFirstPage: LABEL_FIRST_PAGE,
+    labelPrevPage: LABEL_PREV_PAGE,
+    labelNextPage: LABEL_NEXT_PAGE,
+    labelLastPage: LABEL_LAST_PAGE,
   };
 
-  let paginationLinks;
+  let wrapper;
   let glPagination;
-  let destinationComponent;
+  let changeMock;
 
-  beforeEach(() => {
-    paginationLinks = mountComponent(paginationLinksComponent, {
-      change,
-      pageInfo,
+  const createComponent = () => {
+    changeMock = jest.fn();
+    wrapper = mount(PaginationLinks, {
+      propsData: {
+        change: changeMock,
+        pageInfo,
+      },
+      localVue,
+      sync: false,
     });
-    [glPagination] = paginationLinks.$children;
-    [destinationComponent] = glPagination.$children;
+  };
+
+  beforeEach(() => {
+    createComponent();
+    glPagination = wrapper.find(GlPagination);
   });
 
   afterEach(() => {
-    paginationLinks.$destroy();
+    wrapper.destroy();
   });
 
   it('should provide translated text to GitLab UI pagination', () => {
     Object.entries(translations).forEach(entry => {
-      expect(destinationComponent[entry[0]]).toBe(entry[1]);
+      expect(glPagination.vm[entry[0]]).toBe(entry[1]);
     });
   });
 
-  it('should pass change to GitLab UI pagination', () => {
-    expect(Object.is(glPagination.change, change)).toBe(true);
+  it('should call change when page changes', () => {
+    wrapper.find('a').trigger('click');
+    expect(changeMock).toHaveBeenCalled();
   });
 
   it('should pass page from pageInfo to GitLab UI pagination', () => {
-    expect(destinationComponent.value).toBe(pageInfo.page);
+    expect(glPagination.vm.value).toBe(pageInfo.page);
   });
 
   it('should pass per page from pageInfo to GitLab UI pagination', () => {
-    expect(destinationComponent.perPage).toBe(pageInfo.perPage);
+    expect(glPagination.vm.perPage).toBe(pageInfo.perPage);
   });
 
   it('should pass total items from pageInfo to GitLab UI pagination', () => {
-    expect(destinationComponent.totalRows).toBe(pageInfo.total);
+    expect(glPagination.vm.totalItems).toBe(pageInfo.total);
   });
 });

yarn.lock

@@ -705,10 +705,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.63.0.tgz#9dd544026d203e4ce6efed72b05db68f710c4d49"
   integrity sha512-YztrReFTg31B7v5wtUC5j15KHNcMebtW+kACytEU42XomMaIwk4USIbygqWlq0VRHA2VHJrHApfJHIjxiCCQcA==
 
-"@gitlab/ui@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.11.0.tgz#7bba82c893f47abbfe7995281dc0ce95290dcc4e"
-  integrity sha512-55Qxyj2wZILznZJUTUxY1SUuw028IgmP6ZyLd5XF3xk91HWSyq5/zrlr/qRTFGL1cABhxoBLScmXsnOc2CIO0w==
+"@gitlab/ui@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-4.0.0.tgz#998a94d4ff91c5baa68d0591763e467a18293081"
+  integrity sha512-Z8T3xK3EV1eC2eBmnuO/cvcuLfH5TskGJsc2Hdxar+iUVxACbzs3bfjpFjslVHCCGzSRnewZCoRPO7GJO3miIg==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.2.1"