Commit 7e473c0e authored by Clement Ho's avatar Clement Ho

Merge branch 'use-gitlab-ui-pagination-for-groups' into 'master'

Use GitLab UI pagination component for groups

See merge request gitlab-org/gitlab-ce!21287
parents ddfbbf1c 106640e0
import Vue from 'vue';
import Pagination from '@gitlab-org/gitlab-ui/dist/components/base/pagination';
import progressBar from '@gitlab-org/gitlab-ui/dist/components/base/progress_bar';
import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal';
import loadingIcon from '@gitlab-org/gitlab-ui/dist/components/base/loading_icon';
......@@ -6,6 +7,7 @@ import loadingIcon from '@gitlab-org/gitlab-ui/dist/components/base/loading_icon
import dModal from '@gitlab-org/gitlab-ui/dist/directives/modal';
import dTooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip';
Vue.component('gl-pagination', Pagination);
Vue.component('gl-progress-bar', progressBar);
Vue.component('gl-ui-modal', modal);
Vue.component('gl-loading-icon', loadingIcon);
......
<script>
import tablePagination from '~/vue_shared/components/table_pagination.vue';
import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
import eventHub from '../event_hub';
import { getParameterByName } from '../../lib/utils/common_utils';
export default {
components: {
tablePagination,
PaginationLinks,
},
props: {
groups: {
......@@ -49,15 +49,18 @@ export default {
>
{{ searchEmptyMessage }}
</div>
<template
v-else
>
<group-folder
v-if="!searchEmpty"
:groups="groups"
:action="action"
/>
<table-pagination
v-if="!searchEmpty"
<pagination-links
:change="change"
:page-info="pageInfo"
class="d-flex justify-content-center prepend-top-default"
/>
</template>
</div>
</template>
<script>
import { s__ } from '../../locale';
export default {
props: {
change: {
type: Function,
required: true,
},
pageInfo: {
type: Object,
required: true,
},
},
firstText: s__('Pagination|« First'),
prevText: s__('Pagination|Prev'),
nextText: s__('Pagination|Next'),
lastText: s__('Pagination|Last »'),
};
</script>
<template>
<gl-pagination
v-bind="$attrs"
:change="change"
:page="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"
/>
</template>
......@@ -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', count: 2)
expect(page).to have_selector('.gl-pagination .page-item a[role=menuitemradio]', count: 2)
# 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:not(.active) a").click
find('.gl-pagination .page-item:not(.active) a[role=menuitemradio]').click
wait_for_requests
......
......@@ -24,6 +24,8 @@ const createComponent = (hideProjects = false) => {
const store = new GroupsStore(false);
const service = new GroupsService(mockEndpoint);
store.state.pageInfo = mockPageInfo;
return new Component({
propsData: {
store,
......@@ -484,7 +486,6 @@ describe('AppComponent', () => {
it('should render groups tree', done => {
vm.store.state.groups = [mockParentGroupItem];
vm.isLoading = false;
vm.store.state.pageInfo = mockPageInfo;
Vue.nextTick(() => {
expect(vm.$el.querySelector('.groups-list-tree-container')).toBeDefined();
done();
......
import Vue from 'vue';
import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
import { s__ } from '~/locale';
import mountComponent from '../../helpers/vue_mount_component_helper';
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 »'),
};
let paginationLinks;
let glPagination;
let destinationComponent;
beforeEach(() => {
paginationLinks = mountComponent(
paginationLinksComponent,
{
change,
pageInfo,
},
);
[glPagination] = paginationLinks.$children;
[destinationComponent] = glPagination.$children;
});
afterEach(() => {
paginationLinks.$destroy();
});
it('should provide translated text to GitLab UI pagination', () => {
Object.entries(translations).forEach(entry =>
expect(
destinationComponent[entry[0]],
).toBe(entry[1]),
);
});
it('should pass change to GitLab UI pagination', () => {
expect(
Object.is(glPagination.change, change),
).toBe(true);
});
it('should pass page from pageInfo to GitLab UI pagination', () => {
expect(
destinationComponent.value,
).toBe(pageInfo.page);
});
it('should pass per page from pageInfo to GitLab UI pagination', () => {
expect(
destinationComponent.perPage,
).toBe(pageInfo.perPage);
});
it('should pass total items from pageInfo to GitLab UI pagination', () => {
expect(
destinationComponent.totalRows,
).toBe(pageInfo.total);
});
});
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