1 files changed, 62 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/incubation/pagination.vue b/app/assets/javascripts/vue_shared/components/incubation/pagination.vue
new file mode 100644
index 00000000000..b5afe92316a
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/incubation/pagination.vue
@@ -0,0 +1,62 @@
+<script>
+import { GlKeysetPagination } from '@gitlab/ui';
+import { setUrlParams } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
+
+export default {
+  name: 'KeysetPagination',
+  components: {
+    GlKeysetPagination,
+  },
+  props: {
+    startCursor: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    endCursor: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    hasNextPage: {
+      type: Boolean,
+      required: true,
+    },
+    hasPreviousPage: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    previousPageLink() {
+      return setUrlParams({ cursor: this.startCursor });
+    },
+    nextPageLink() {
+      return setUrlParams({ cursor: this.endCursor });
+    },
+    isPaginationVisible() {
+      return this.hasPreviousPage || this.hasNextPage;
+    },
+  },
+  i18n: {
+    previousPageButtonLabel: __('Prev'),
+    nextPageButtonLabel: __('Next'),
+  },
+};
+</script>
+
+<template>
+  <div v-if="isPaginationVisible" class="gl--flex-center">
+    <gl-keyset-pagination
+      :start-cursor="startCursor"
+      :end-cursor="endCursor"
+      :has-previous-page="hasPreviousPage"
+      :has-next-page="hasNextPage"
+      :prev-text="$options.i18n.previousPageButtonLabel"
+      :next-text="$options.i18n.nextPageButtonLabel"
+      :prev-button-link="previousPageLink"
+      :next-button-link="nextPageLink"
+    />
+  </div>
+</template>