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'); ...@@ -7,3 +7,7 @@ export const PREV = s__('Pagination|Prev');
export const NEXT = s__('Pagination|Next'); export const NEXT = s__('Pagination|Next');
export const FIRST = s__('Pagination|« First'); export const FIRST = s__('Pagination|« First');
export const LAST = s__('Pagination|Last »'); 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> <script>
import { GlPagination } from '@gitlab/ui'; 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 { export default {
components: { components: {
...@@ -16,23 +23,27 @@ export default { ...@@ -16,23 +23,27 @@ export default {
required: true, required: true,
}, },
}, },
firstText: s__('Pagination|« First'), prevText: PREV,
prevText: s__('Pagination|Prev'), nextText: NEXT,
nextText: s__('Pagination|Next'), labelFirstPage: LABEL_FIRST_PAGE,
lastText: s__('Pagination|Last »'), labelPrevPage: LABEL_PREV_PAGE,
labelNextPage: LABEL_NEXT_PAGE,
labelLastPage: LABEL_LAST_PAGE,
}; };
</script> </script>
<template> <template>
<gl-pagination <gl-pagination
v-bind="$attrs" v-bind="$attrs"
:change="change" :value="pageInfo.page"
:page="pageInfo.page"
:per-page="pageInfo.perPage" :per-page="pageInfo.perPage"
:total-items="pageInfo.total" :total-items="pageInfo.total"
:first-text="$options.firstText"
:prev-text="$options.prevText" :prev-text="$options.prevText"
:next-text="$options.nextText" :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> </template>
...@@ -6916,6 +6916,18 @@ msgstr "" ...@@ -6916,6 +6916,18 @@ msgstr ""
msgid "Pages getting started guide" msgid "Pages getting started guide"
msgstr "" 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 »" msgid "Pagination|Last »"
msgstr "" msgstr ""
......
...@@ -125,7 +125,7 @@ describe 'Dashboard Groups page', :js do ...@@ -125,7 +125,7 @@ describe 'Dashboard Groups page', :js do
end end
it 'loads results for next page' do 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 # Check first page
expect(page).to have_content(group2.full_name) expect(page).to have_content(group2.full_name)
...@@ -134,7 +134,7 @@ describe 'Dashboard Groups page', :js do ...@@ -134,7 +134,7 @@ describe 'Dashboard Groups page', :js do
expect(page).not_to have_selector("#group-#{group.id}") expect(page).not_to have_selector("#group-#{group.id}")
# Go to next page # 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 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 PaginationLinks from '~/vue_shared/components/pagination_links.vue';
import { s__ } from '~/locale'; import {
import mountComponent from '../../helpers/vue_mount_component_helper'; 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', () => { describe('Pagination links component', () => {
const paginationLinksComponent = Vue.extend(PaginationLinks);
const change = page => page;
const pageInfo = { const pageInfo = {
page: 3, page: 3,
perPage: 5, perPage: 5,
total: 30, total: 30,
}; };
const translations = { const translations = {
firstText: s__('Pagination|« First'), prevText: PREV,
prevText: s__('Pagination|Prev'), nextText: NEXT,
nextText: s__('Pagination|Next'), labelFirstPage: LABEL_FIRST_PAGE,
lastText: s__('Pagination|Last »'), labelPrevPage: LABEL_PREV_PAGE,
labelNextPage: LABEL_NEXT_PAGE,
labelLastPage: LABEL_LAST_PAGE,
}; };
let paginationLinks; let wrapper;
let glPagination; let glPagination;
let destinationComponent; let changeMock;
beforeEach(() => { const createComponent = () => {
paginationLinks = mountComponent(paginationLinksComponent, { changeMock = jest.fn();
change, wrapper = mount(PaginationLinks, {
pageInfo, propsData: {
change: changeMock,
pageInfo,
},
localVue,
sync: false,
}); });
[glPagination] = paginationLinks.$children; };
[destinationComponent] = glPagination.$children;
beforeEach(() => {
createComponent();
glPagination = wrapper.find(GlPagination);
}); });
afterEach(() => { afterEach(() => {
paginationLinks.$destroy(); wrapper.destroy();
}); });
it('should provide translated text to GitLab UI pagination', () => { it('should provide translated text to GitLab UI pagination', () => {
Object.entries(translations).forEach(entry => { 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', () => { it('should call change when page changes', () => {
expect(Object.is(glPagination.change, change)).toBe(true); wrapper.find('a').trigger('click');
expect(changeMock).toHaveBeenCalled();
}); });
it('should pass page from pageInfo to GitLab UI pagination', () => { 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', () => { 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', () => { 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 @@ ...@@ -705,10 +705,10 @@
resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.63.0.tgz#9dd544026d203e4ce6efed72b05db68f710c4d49" resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.63.0.tgz#9dd544026d203e4ce6efed72b05db68f710c4d49"
integrity sha512-YztrReFTg31B7v5wtUC5j15KHNcMebtW+kACytEU42XomMaIwk4USIbygqWlq0VRHA2VHJrHApfJHIjxiCCQcA== integrity sha512-YztrReFTg31B7v5wtUC5j15KHNcMebtW+kACytEU42XomMaIwk4USIbygqWlq0VRHA2VHJrHApfJHIjxiCCQcA==
"@gitlab/ui@^3.11.0": "@gitlab/ui@^4.0.0":
version "3.11.0" version "4.0.0"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.11.0.tgz#7bba82c893f47abbfe7995281dc0ce95290dcc4e" resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-4.0.0.tgz#998a94d4ff91c5baa68d0591763e467a18293081"
integrity sha512-55Qxyj2wZILznZJUTUxY1SUuw028IgmP6ZyLd5XF3xk91HWSyq5/zrlr/qRTFGL1cABhxoBLScmXsnOc2CIO0w== integrity sha512-Z8T3xK3EV1eC2eBmnuO/cvcuLfH5TskGJsc2Hdxar+iUVxACbzs3bfjpFjslVHCCGzSRnewZCoRPO7GJO3miIg==
dependencies: dependencies:
"@babel/standalone" "^7.0.0" "@babel/standalone" "^7.0.0"
"@gitlab/vue-toasted" "^1.2.1" "@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