1 files changed, 31 insertions, 11 deletions
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js b/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
index 8f2d488d661..beb058417e5 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
@@ -1,4 +1,5 @@
 import axios from '~/lib/utils/axios_utils';
+import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import createDefaultClient from '~/lib/graphql';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
@@ -8,8 +9,10 @@ import { SourceGroupsManager } from './services/source_groups_manager';
 import { StatusPoller } from './services/status_poller';
 
 export const clientTypenames = {
+  BulkImportSourceGroupConnection: 'ClientBulkImportSourceGroupConnection',
   BulkImportSourceGroup: 'ClientBulkImportSourceGroup',
   AvailableNamespace: 'ClientAvailableNamespace',
+  BulkImportPageInfo: 'ClientBulkImportPageInfo',
 };
 
 export function createResolvers({ endpoints }) {
@@ -17,22 +20,39 @@ export function createResolvers({ endpoints }) {
 
   return {
     Query: {
-      async bulkImportSourceGroups(_, __, { client }) {
+      async bulkImportSourceGroups(_, vars, { client }) {
         const {
           data: { availableNamespaces },
         } = await client.query({ query: availableNamespacesQuery });
 
-        return axios.get(endpoints.status).then(({ data }) => {
-          return data.importable_data.map((group) => ({
-            __typename: clientTypenames.BulkImportSourceGroup,
-            ...group,
-            status: STATUSES.NONE,
-            import_target: {
-              new_name: group.full_path,
-              target_namespace: availableNamespaces[0].full_path,
+        return axios
+          .get(endpoints.status, {
+            params: {
+              page: vars.page,
+              per_page: vars.perPage,
+              filter: vars.filter,
             },
-          }));
-        });
+          })
+          .then(({ headers, data }) => {
+            const pagination = parseIntPagination(normalizeHeaders(headers));
+
+            return {
+              __typename: clientTypenames.BulkImportSourceGroupConnection,
+              nodes: data.importable_data.map((group) => ({
+                __typename: clientTypenames.BulkImportSourceGroup,
+                ...group,
+                status: STATUSES.NONE,
+                import_target: {
+                  new_name: group.full_path,
+                  target_namespace: availableNamespaces[0].full_path,
+                },
+              })),
+              pageInfo: {
+                __typename: clientTypenames.BulkImportPageInfo,
+                ...pagination,
+              },
+            };
+          });
       },
 
       availableNamespaces: () =>