1 files changed, 56 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue b/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue
new file mode 100644
index 00000000000..01c2c751cac
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/shared/components/persisted_pagination.vue
@@ -0,0 +1,56 @@
+<script>
+import { GlKeysetPagination } from '@gitlab/ui';
+import UrlSync from '~/vue_shared/components/url_sync.vue';
+
+export default {
+  name: 'PersistedPagination',
+  components: {
+    GlKeysetPagination,
+    UrlSync,
+  },
+  inheritAttrs: false,
+  props: {
+    pagination: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+  },
+  computed: {
+    attrs() {
+      return {
+        ...this.pagination,
+        ...this.$attrs,
+      };
+    },
+  },
+  methods: {
+    onPrev(updateQuery) {
+      updateQuery({
+        before: this.pagination?.startCursor,
+        after: null,
+      });
+      this.$emit('prev');
+    },
+    onNext(updateQuery) {
+      updateQuery({
+        after: this.pagination?.endCursor,
+        before: null,
+      });
+      this.$emit('next');
+    },
+  },
+};
+</script>
+
+<template>
+  <url-sync>
+    <template #default="{ updateQuery }">
+      <gl-keyset-pagination
+        v-bind="attrs"
+        @prev="onPrev(updateQuery)"
+        @next="onNext(updateQuery)"
+      />
+    </template>
+  </url-sync>
+</template>