1 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_pagination.vue b/app/assets/javascripts/ci/runner/components/runner_pagination.vue
new file mode 100644
index 00000000000..a5bf3074dd1
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/runner_pagination.vue
@@ -0,0 +1,50 @@
+<script>
+import { GlKeysetPagination } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlKeysetPagination,
+  },
+  inheritAttrs: false,
+  props: {
+    pageInfo: {
+      required: false,
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    paginationProps() {
+      return { ...this.pageInfo, ...this.$attrs };
+    },
+    isShown() {
+      const { hasPreviousPage, hasNextPage } = this.pageInfo;
+      return hasPreviousPage || hasNextPage;
+    },
+  },
+  methods: {
+    prevPage() {
+      this.$emit('input', {
+        before: this.pageInfo.startCursor,
+      });
+    },
+    nextPage() {
+      this.$emit('input', {
+        after: this.pageInfo.endCursor,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="isShown" class="gl-text-center">
+    <gl-keyset-pagination
+      v-bind="paginationProps"
+      :prev-text="s__('Pagination|Prev')"
+      :next-text="s__('Pagination|Next')"
+      @prev="prevPage"
+      @next="nextPage"
+    />
+  </div>
+</template>