Creates pagination component graphql

creates a pagination component for
the graphql api

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);
+    });
+  });
+});