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
This commit is contained in:
parent
6663ca0f94
commit
04cc3deaab
|
@ -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');
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 ""
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
const createComponent = () => {
|
||||
changeMock = jest.fn();
|
||||
wrapper = mount(PaginationLinks, {
|
||||
propsData: {
|
||||
change: changeMock,
|
||||
pageInfo,
|
||||
},
|
||||
localVue,
|
||||
sync: false,
|
||||
});
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
paginationLinks = mountComponent(paginationLinksComponent, {
|
||||
change,
|
||||
pageInfo,
|
||||
});
|
||||
[glPagination] = paginationLinks.$children;
|
||||
[destinationComponent] = glPagination.$children;
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue