Commit c449e35b authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '62097-update-gl-pagination' into 'master'

Upgrade gitlab-ui and migrate gl-pagination

Closes #62097

See merge request gitlab-org/gitlab-ce!29555
parents 6663ca0f 04cc3dea
......@@ -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');
<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 ""
......
......@@ -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
......
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);
});
});
......@@ -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"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment