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 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 progressBar from '@gitlab-org/gitlab-ui/dist/components/base/progress_bar';
import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal'; import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal';
import loadingIcon from '@gitlab-org/gitlab-ui/dist/components/base/loading_icon'; 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 ...@@ -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 dModal from '@gitlab-org/gitlab-ui/dist/directives/modal';
import dTooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip'; import dTooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip';
Vue.component('gl-pagination', Pagination);
Vue.component('gl-progress-bar', progressBar); Vue.component('gl-progress-bar', progressBar);
Vue.component('gl-ui-modal', modal); Vue.component('gl-ui-modal', modal);
Vue.component('gl-loading-icon', loadingIcon); Vue.component('gl-loading-icon', loadingIcon);
......
<script> <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 eventHub from '../event_hub';
import { getParameterByName } from '../../lib/utils/common_utils'; import { getParameterByName } from '../../lib/utils/common_utils';
export default { export default {
components: { components: {
tablePagination, PaginationLinks,
}, },
props: { props: {
groups: { groups: {
...@@ -49,15 +49,18 @@ export default { ...@@ -49,15 +49,18 @@ export default {
> >
{{ searchEmptyMessage }} {{ searchEmptyMessage }}
</div> </div>
<group-folder <template
v-if="!searchEmpty" v-else
:groups="groups" >
:action="action" <group-folder
/> :groups="groups"
<table-pagination :action="action"
v-if="!searchEmpty" />
:change="change" <pagination-links
:page-info="pageInfo" :change="change"
/> :page-info="pageInfo"
class="d-flex justify-content-center prepend-top-default"
/>
</template>
</div> </div>
</template> </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 ...@@ -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', count: 2) expect(page).to have_selector('.gl-pagination .page-item a[role=menuitemradio]', count: 2)
# 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:not(.active) a").click find('.gl-pagination .page-item:not(.active) a[role=menuitemradio]').click
wait_for_requests wait_for_requests
......
...@@ -24,6 +24,8 @@ const createComponent = (hideProjects = false) => { ...@@ -24,6 +24,8 @@ const createComponent = (hideProjects = false) => {
const store = new GroupsStore(false); const store = new GroupsStore(false);
const service = new GroupsService(mockEndpoint); const service = new GroupsService(mockEndpoint);
store.state.pageInfo = mockPageInfo;
return new Component({ return new Component({
propsData: { propsData: {
store, store,
...@@ -484,7 +486,6 @@ describe('AppComponent', () => { ...@@ -484,7 +486,6 @@ describe('AppComponent', () => {
it('should render groups tree', done => { it('should render groups tree', done => {
vm.store.state.groups = [mockParentGroupItem]; vm.store.state.groups = [mockParentGroupItem];
vm.isLoading = false; vm.isLoading = false;
vm.store.state.pageInfo = mockPageInfo;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$el.querySelector('.groups-list-tree-container')).toBeDefined(); expect(vm.$el.querySelector('.groups-list-tree-container')).toBeDefined();
done(); 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