Merge branch '62788-graphql-pagination' into 'master'

Creates pagination component graphql

Closes #62788

See merge request gitlab-org/gitlab-ce!29277

3 files changed, 65 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: {