1 files changed, 34 insertions, 8 deletions
diff --git a/app/assets/javascripts/organizations/index/components/organizations_list.vue b/app/assets/javascripts/organizations/index/components/organizations_list.vue
index 539a4fcfe29..971d4710be2 100644
--- a/app/assets/javascripts/organizations/index/components/organizations_list.vue
+++ b/app/assets/javascripts/organizations/index/components/organizations_list.vue
@@ -1,26 +1,52 @@
 <script>
+import { GlKeysetPagination } from '@gitlab/ui';
+import { __ } from '~/locale';
 import OrganizationsListItem from './organizations_list_item.vue';
 
 export default {
   name: 'OrganizationsList',
   components: {
     OrganizationsListItem,
+    GlKeysetPagination,
+  },
+  i18n: {
+    prev: __('Prev'),
+    next: __('Next'),
   },
   props: {
     organizations: {
-      type: Array,
+      type: Object,
       required: true,
     },
   },
+  computed: {
+    nodes() {
+      return this.organizations.nodes || [];
+    },
+    pageInfo() {
+      return this.organizations.pageInfo || {};
+    },
+  },
 };
 </script>
 
 <template>
-  <ul class="gl-p-0 gl-list-style-none">
-    <organizations-list-item
-      v-for="organization in organizations"
-      :key="organization.id"
-      :organization="organization"
-    />
-  </ul>
+  <div>
+    <ul class="gl-p-0 gl-list-style-none">
+      <organizations-list-item
+        v-for="organization in nodes"
+        :key="organization.id"
+        :organization="organization"
+      />
+    </ul>
+    <div v-if="pageInfo.hasNextPage || pageInfo.hasPreviousPage" class="gl-text-center gl-mt-5">
+      <gl-keyset-pagination
+        v-bind="pageInfo"
+        :prev-text="$options.i18n.prev"
+        :next-text="$options.i18n.next"
+        @prev="$emit('prev', $event)"
+        @next="$emit('next', $event)"
+      />
+    </div>
+  </div>
 </template>