1 files changed, 51 insertions, 11 deletions

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
index 29db02a3c59..6bd549817f8 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
@@ -1,9 +1,10 @@
 <script>
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
+import { __ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import getProjectEnvironments from '../graphql/queries/project_environments.query.graphql';
 import getProjectVariables from '../graphql/queries/project_variables.query.graphql';
-import { mapEnvironmentNames } from '../utils';
+import { mapEnvironmentNames, reportMessageToSentry } from '../utils';
 import {
   ADD_MUTATION_ACTION,
   DELETE_MUTATION_ACTION,
@@ -25,6 +26,10 @@ export default {
   inject: ['endpoint', 'projectFullPath', 'projectId'],
   data() {
     return {
+      hasNextPage: false,
+      isLoadingMoreItems: false,
+      loadingCounter: 0,
+      pageInfo: {},
       projectEnvironments: [],
       projectVariables: [],
     };
@@ -41,21 +46,42 @@ export default {
         return mapEnvironmentNames(data?.project?.environments?.nodes);
       },
       error() {
-        createFlash({ message: environmentFetchErrorText });
+        createAlert({ message: environmentFetchErrorText });
       },
     },
     projectVariables: {
       query: getProjectVariables,
       variables() {
         return {
+          after: null,
           fullPath: this.projectFullPath,
         };
       },
       update(data) {
         return data?.project?.ciVariables?.nodes || [];
       },
+      result({ data }) {
+        this.pageInfo = data?.project?.ciVariables?.pageInfo || this.pageInfo;
+        this.hasNextPage = this.pageInfo?.hasNextPage || false;
+        // Because graphQL has a limit of 100 items,
+        // we batch load all the variables by making successive queries
+        // to keep the same UX. As a safeguard, we make sure that we cannot go over
+        // 20 consecutive API calls, which means 2000 variables loaded maximum.
+        if (!this.hasNextPage) {
+          this.isLoadingMoreItems = false;
+        } else if (this.loadingCounter < 20) {
+          this.hasNextPage = false;
+          this.fetchMoreVariables();
+          this.loadingCounter += 1;
+        } else {
+          createAlert({ message: this.$options.tooManyCallsError });
+          reportMessageToSentry(this.$options.componentName, this.$options.tooManyCallsError, {});
+        }
+      },
       error() {
-        createFlash({ message: variableFetchErrorText });
+        this.isLoadingMoreItems = false;
+        this.hasNextPage = false;
+        createAlert({ message: variableFetchErrorText });
       },
     },
   },
@@ -63,7 +89,8 @@ export default {
     isLoading() {
       return (
         this.$apollo.queries.projectVariables.loading ||
-        this.$apollo.queries.projectEnvironments.loading
+        this.$apollo.queries.projectEnvironments.loading ||
+        this.isLoadingMoreItems
       );
     },
   },
@@ -74,6 +101,16 @@ export default {
     deleteVariable(variable) {
       this.variableMutation(DELETE_MUTATION_ACTION, variable);
     },
+    fetchMoreVariables() {
+      this.isLoadingMoreItems = true;
+
+      this.$apollo.queries.projectVariables.fetchMore({
+        variables: {
+          fullPath: this.projectFullPath,
+          after: this.pageInfo.endCursor,
+        },
+      });
+    },
     updateVariable(variable) {
       this.variableMutation(UPDATE_MUTATION_ACTION, variable);
     },
@@ -89,16 +126,19 @@ export default {
             variable,
           },
         });
-
-        const { errors } = data[currentMutation.name];
-        if (errors.length > 0) {
-          createFlash({ message: errors[0] });
+        if (data[currentMutation.name]?.errors?.length) {
+          const { errors } = data[currentMutation.name];
+          createAlert({ message: errors[0] });
         }
-      } catch (e) {
-        createFlash({ message: genericMutationErrorText });
+      } catch {
+        createAlert({ message: genericMutationErrorText });
       }
     },
   },
+  componentName: 'ProjectVariables',
+  i18n: {
+    tooManyCallsError: __('Maximum number of variables loaded (2000)'),
+  },
   mutationData: {
     [ADD_MUTATION_ACTION]: { action: addProjectVariable, name: 'addProjectVariable' },
     [UPDATE_MUTATION_ACTION]: { action: updateProjectVariable, name: 'updateProjectVariable' },