summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPaul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>2019-06-14 13:59:00 +0000
committerFilipa Lacerda <filipa@gitlab.com>2019-06-14 13:59:00 +0000
commit04cc3deaab0780f3b5b6e15dc9158a432e49b684 (patch)
tree16331296f0515bb31cb5eb60206f26256b6c29af
parent6663ca0f9479fb3768ee83f138072c4065d658c5 (diff)
downloadgitlab-ce-04cc3deaab0780f3b5b6e15dc9158a432e49b684.tar.gz
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
-rw-r--r--app/assets/javascripts/vue_shared/components/pagination/constants.js4
-rw-r--r--app/assets/javascripts/vue_shared/components/pagination_links.vue29
-rw-r--r--locale/gitlab.pot12
-rw-r--r--package.json2
-rw-r--r--spec/features/dashboard/groups_list_spec.rb4
-rw-r--r--spec/frontend/vue_shared/components/pagination_links_spec.js66
-rw-r--r--yarn.lock8
7 files changed, 85 insertions, 40 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>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 88ace6057cf..9aed0471e3d 100644
--- a/locale/gitlab.pot
+++ b/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 ""
diff --git a/package.json b/package.json
index 0758c27c75b..4f61c73698c 100644
--- a/package.json
+++ b/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",
diff --git a/spec/features/dashboard/groups_list_spec.rb b/spec/features/dashboard/groups_list_spec.rb
index e75c43d5338..fb76e2b0014 100644
--- a/spec/features/dashboard/groups_list_spec.rb
+++ b/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
diff --git a/spec/frontend/vue_shared/components/pagination_links_spec.js b/spec/frontend/vue_shared/components/pagination_links_spec.js
index d0cb3731050..efa5825d92f 100644
--- a/spec/frontend/vue_shared/components/pagination_links_spec.js
+++ b/spec/frontend/vue_shared/components/pagination_links_spec.js
@@ -1,59 +1,77 @@
-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);
});
});
diff --git a/yarn.lock b/yarn.lock
index dddf01414b2..31d40a5ad5e 100644
--- a/yarn.lock
+++ b/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"