Creates pagination component graphql

creates a pagination component for
the graphql api

2 files changed, 56 insertions, 0 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>