1 files changed, 49 insertions, 40 deletions
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 73ae928b0d9..81b2e5ea37b 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -1,39 +1,44 @@
 <script>
-  import tablePagination from '~/vue_shared/components/table_pagination.vue';
-  import eventHub from '../event_hub';
-  import { getParameterByName } from '../../lib/utils/common_utils';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import eventHub from '../event_hub';
+import { getParameterByName } from '../../lib/utils/common_utils';
 
-  export default {
-    components: {
-      tablePagination,
+export default {
+  components: {
+    PaginationLinks,
+  },
+  props: {
+    groups: {
+      type: Array,
+      required: true,
     },
-    props: {
-      groups: {
-        type: Array,
-        required: true,
-      },
-      pageInfo: {
-        type: Object,
-        required: true,
-      },
-      searchEmpty: {
-        type: Boolean,
-        required: true,
-      },
-      searchEmptyMessage: {
-        type: String,
-        required: true,
-      },
+    pageInfo: {
+      type: Object,
+      required: true,
     },
-    methods: {
-      change(page) {
-        const filterGroupsParam = getParameterByName('filter_groups');
-        const sortParam = getParameterByName('sort');
-        const archivedParam = getParameterByName('archived');
-        eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
-      },
+    searchEmpty: {
+      type: Boolean,
+      required: true,
     },
-  };
+    searchEmptyMessage: {
+      type: String,
+      required: true,
+    },
+    action: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    change(page) {
+      const filterGroupsParam = getParameterByName('filter_groups');
+      const sortParam = getParameterByName('sort');
+      const archivedParam = getParameterByName('archived');
+      eventHub.$emit(`${this.action}fetchPage`, page, filterGroupsParam, sortParam, archivedParam);
+    },
+  },
+};
 </script>
 
 <template>
@@ -44,14 +49,18 @@
     >
       {{ searchEmptyMessage }}
     </div>
-    <group-folder
-      v-if="!searchEmpty"
-      :groups="groups"
-    />
-    <table-pagination
-      v-if="!searchEmpty"
-      :change="change"
-      :page-info="pageInfo"
-    />
+    <template
+      v-else
+    >
+      <group-folder
+        :groups="groups"
+        :action="action"
+      />
+      <pagination-links
+        :change="change"
+        :page-info="pageInfo"
+        class="d-flex justify-content-center prepend-top-default"
+      />
+    </template>
   </div>
 </template>