diff options
author | Phil Hughes <me@iamphill.com> | 2019-06-11 17:01:42 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-06-11 17:01:42 +0000 |
commit | 7e350ab309ee270885fa5138b6e0badd74472e35 (patch) | |
tree | 6a5de01198d211f318162d7dc428fd8dc3d4c8bf | |
parent | 7e2f44e0f642344a319d7fcd2468165d5cd3756b (diff) | |
parent | 18b906c026d885124c5b4eb1608d1b883a932956 (diff) | |
download | gitlab-ce-7e350ab309ee270885fa5138b6e0badd74472e35.tar.gz |
Merge branch '62788-graphql-pagination' into 'master'
Creates pagination component graphql
Closes #62788
See merge request gitlab-org/gitlab-ce!29277
5 files changed, 140 insertions, 9 deletions
diff --git a/app/assets/javascripts/vue_shared/components/pagination/constants.js b/app/assets/javascripts/vue_shared/components/pagination/constants.js new file mode 100644 index 00000000000..c24b142ac7e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/pagination/constants.js @@ -0,0 +1,9 @@ +import { s__ } from '~/locale'; + +export const PAGINATION_UI_BUTTON_LIMIT = 4; +export const UI_LIMIT = 6; +export const SPREAD = '...'; +export const PREV = s__('Pagination|Prev'); +export const NEXT = s__('Pagination|Next'); +export const FIRST = s__('Pagination|« First'); +export const LAST = s__('Pagination|Last »'); diff --git a/app/assets/javascripts/vue_shared/components/pagination/graphql_pagination.vue b/app/assets/javascripts/vue_shared/components/pagination/graphql_pagination.vue new file mode 100644 index 00000000000..53e473432db --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/pagination/graphql_pagination.vue @@ -0,0 +1,47 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { PREV, NEXT } from '~/vue_shared/components/pagination/constants'; + +/** + * Pagination Component for graphql API + */ +export default { + name: 'GraphqlPaginationComponent', + components: { + GlButton, + }, + labels: { + prev: PREV, + next: NEXT, + }, + props: { + hasNextPage: { + required: true, + type: Boolean, + }, + hasPreviousPage: { + required: true, + type: Boolean, + }, + }, +}; +</script> +<template> + <div class="justify-content-center d-flex prepend-top-default"> + <div class="btn-group"> + <gl-button + class="js-prev-btn page-link" + :disabled="!hasPreviousPage" + @click="$emit('previousClicked')" + >{{ $options.labels.prev }}</gl-button + > + + <gl-button + class="js-next-btn page-link" + :disabled="!hasNextPage" + @click="$emit('nextClicked')" + >{{ $options.labels.next }}</gl-button + > + </div> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue index 9cce9a4e542..1e2d4ffa7e3 100644 --- a/app/assets/javascripts/vue_shared/components/table_pagination.vue +++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue @@ -1,13 +1,13 @@ <script> -import { s__ } from '../../locale'; - -const PAGINATION_UI_BUTTON_LIMIT = 4; -const UI_LIMIT = 6; -const SPREAD = '...'; -const PREV = s__('Pagination|Prev'); -const NEXT = s__('Pagination|Next'); -const FIRST = s__('Pagination|« First'); -const LAST = s__('Pagination|Last »'); +import { + PAGINATION_UI_BUTTON_LIMIT, + UI_LIMIT, + SPREAD, + PREV, + NEXT, + FIRST, + LAST, +} from '~/vue_shared/components/pagination/constants'; export default { props: { diff --git a/changelogs/unreleased/62788-graphql-pagination.yml b/changelogs/unreleased/62788-graphql-pagination.yml new file mode 100644 index 00000000000..a7bc317a08f --- /dev/null +++ b/changelogs/unreleased/62788-graphql-pagination.yml @@ -0,0 +1,5 @@ +--- +title: Adds pagination component for graphql api +merge_request: 29277 +author: +type: added diff --git a/spec/javascripts/vue_shared/components/pagination/graphql_pagination_spec.js b/spec/javascripts/vue_shared/components/pagination/graphql_pagination_spec.js new file mode 100644 index 00000000000..7445da6cdee --- /dev/null +++ b/spec/javascripts/vue_shared/components/pagination/graphql_pagination_spec.js @@ -0,0 +1,70 @@ +import { shallowMount } from '@vue/test-utils'; +import GraphqlPagination from '~/vue_shared/components/pagination/graphql_pagination.vue'; + +describe('Graphql Pagination component', () => { + let wrapper; + function factory({ hasNextPage = true, hasPreviousPage = true }) { + wrapper = shallowMount(GraphqlPagination, { + propsData: { + hasNextPage, + hasPreviousPage, + }, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + describe('without previous page', () => { + beforeEach(() => { + factory({ hasPreviousPage: false }); + }); + + it('renders disabled previous button', () => { + expect(wrapper.find('.js-prev-btn').attributes().disabled).toEqual('true'); + }); + }); + + describe('with previous page', () => { + beforeEach(() => { + factory({ hasPreviousPage: true }); + }); + + it('renders enabled previous button', () => { + expect(wrapper.find('.js-prev-btn').attributes().disabled).toEqual(undefined); + }); + + it('emits previousClicked on click', () => { + wrapper.find('.js-prev-btn').vm.$emit('click'); + + expect(wrapper.emitted().previousClicked.length).toBe(1); + }); + }); + + describe('without next page', () => { + beforeEach(() => { + factory({ hasNextPage: false }); + }); + + it('renders disabled next button', () => { + expect(wrapper.find('.js-next-btn').attributes().disabled).toEqual('true'); + }); + }); + + describe('with next page', () => { + beforeEach(() => { + factory({ hasNextPage: true }); + }); + + it('renders enabled next button', () => { + expect(wrapper.find('.js-next-btn').attributes().disabled).toEqual(undefined); + }); + + it('emits nextClicked on click', () => { + wrapper.find('.js-next-btn').vm.$emit('click'); + + expect(wrapper.emitted().nextClicked.length).toBe(1); + }); + }); +}); |