1 files changed, 57 insertions, 0 deletions
diff --git a/app/assets/javascripts/runner/components/runner_pagination.vue b/app/assets/javascripts/runner/components/runner_pagination.vue
new file mode 100644
index 00000000000..8645b90f5cd
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_pagination.vue
@@ -0,0 +1,57 @@
+<script>
+import { GlPagination } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlPagination,
+  },
+  props: {
+    value: {
+      required: false,
+      type: Object,
+      default: () => ({
+        page: 1,
+      }),
+    },
+    pageInfo: {
+      required: false,
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    prevPage() {
+      return this.pageInfo?.hasPreviousPage ? this.value?.page - 1 : null;
+    },
+    nextPage() {
+      return this.pageInfo?.hasNextPage ? this.value?.page + 1 : null;
+    },
+  },
+  methods: {
+    handlePageChange(page) {
+      if (page > this.value.page) {
+        this.$emit('input', {
+          page,
+          after: this.pageInfo.endCursor,
+        });
+      } else {
+        this.$emit('input', {
+          page,
+          before: this.pageInfo.startCursor,
+        });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-pagination
+    :value="value.page"
+    :prev-page="prevPage"
+    :next-page="nextPage"
+    align="center"
+    class="gl-pagination gl-mt-3"
+    @input="handlePageChange"
+  />
+</template>