Add latest changes from gitlab-org/gitlab@master

2 files changed, 57 insertions, 22 deletions

diff --git a/app/assets/javascripts/jira_import/components/jira_import_form.vue b/app/assets/javascripts/jira_import/components/jira_import_form.vue
index b5d17398f3a..42fdba12f13 100644
--- a/app/assets/javascripts/jira_import/components/jira_import_form.vue
+++ b/app/assets/javascripts/jira_import/components/jira_import_form.vue
@@ -23,6 +23,7 @@ import { addInProgressImportToStore } from '../utils/cache_update';
 import {
   debounceWait,
   dropdownLabel,
+  userMappingsPageSize,
   previousImportsMessage,
   tableConfig,
   userMappingMessage,
@@ -74,12 +75,15 @@ export default {
   },
   data() {
     return {
+      hasMoreUsers: false,
       isFetching: false,
+      isLoadingMoreUsers: false,
       isSubmitting: false,
       searchTerm: '',
       selectedProject: undefined,
       selectState: null,
       userMappings: [],
+      userMappingsStartAt: 0,
       users: [],
     };
   },
@@ -101,6 +105,9 @@ export default {
         ? `jira-import::${this.selectedProject}-${this.numberOfPreviousImports + 1}`
         : 'jira-import::KEY-1';
     },
+    isInitialLoadingState() {
+      return this.isLoadingMoreUsers && !this.hasMoreUsers;
+    },
   },
   watch: {
     searchTerm: debounce(function debouncedUserSearch() {
@@ -108,23 +115,7 @@ export default {
     }, debounceWait),
   },
   mounted() {
-    this.$apollo
-      .mutate({
-        mutation: getJiraUserMappingMutation,
-        variables: {
-          input: {
-            projectPath: this.projectPath,
-          },
-        },
-      })
-      .then(({ data }) => {
-        if (data.jiraImportUsers.errors.length) {
-          this.$emit('error', data.jiraImportUsers.errors.join('. '));
-        } else {
-          this.userMappings = data.jiraImportUsers.jiraUsers;
-        }
-      })
-      .catch(() => this.$emit('error', __('There was an error retrieving the Jira users.')));
+    this.getJiraUserMapping();
 
     this.searchUsers()
       .then(data => {
@@ -133,6 +124,36 @@ export default {
       .catch(() => {});
   },
   methods: {
+    getJiraUserMapping() {
+      this.isLoadingMoreUsers = true;
+
+      this.$apollo
+        .mutate({
+          mutation: getJiraUserMappingMutation,
+          variables: {
+            input: {
+              projectPath: this.projectPath,
+              startAt: this.userMappingsStartAt,
+            },
+          },
+        })
+        .then(({ data }) => {
+          if (data.jiraImportUsers.errors.length) {
+            this.$emit('error', data.jiraImportUsers.errors.join('. '));
+            return;
+          }
+
+          this.userMappings = this.userMappings.concat(data.jiraImportUsers.jiraUsers);
+          this.hasMoreUsers = data.jiraImportUsers.jiraUsers.length === userMappingsPageSize;
+          this.userMappingsStartAt += userMappingsPageSize;
+        })
+        .catch(() => {
+          this.$emit('error', __('There was an error retrieving the Jira users.'));
+        })
+        .finally(() => {
+          this.isLoadingMoreUsers = false;
+        });
+    },
     searchUsers() {
       const params = {
         active: true,
@@ -187,7 +208,9 @@ export default {
               this.selectedProject = undefined;
             }
           })
-          .catch(() => this.$emit('error', __('There was an error importing the Jira project.')))
+          .catch(() => {
+            this.$emit('error', __('There was an error importing the Jira project.'));
+          })
           .finally(() => {
             this.isSubmitting = false;
           });
@@ -278,11 +301,9 @@ export default {
             "
             @hide="resetDropdown"
           >
-            <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
+            <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
 
-            <div v-if="isFetching" class="gl-text-center">
-              <gl-loading-icon />
-            </div>
+            <gl-loading-icon v-if="isFetching" />
 
             <gl-new-dropdown-item
               v-for="user in users"
@@ -300,6 +321,17 @@ export default {
         </template>
       </gl-table>
 
+      <gl-loading-icon v-if="isInitialLoadingState" />
+
+      <gl-button
+        v-if="hasMoreUsers"
+        :loading="isLoadingMoreUsers"
+        data-testid="load-more-users-button"
+        @click="getJiraUserMapping"
+      >
+        {{ __('Load more users') }}
+      </gl-button>
+
       <div class="footer-block row-content-block d-flex justify-content-between">
         <gl-button
           type="submit"
diff --git a/app/assets/javascripts/jira_import/utils/constants.js b/app/assets/javascripts/jira_import/utils/constants.js
index 6adc3e5306c..178159be009 100644
--- a/app/assets/javascripts/jira_import/utils/constants.js
+++ b/app/assets/javascripts/jira_import/utils/constants.js
@@ -27,3 +27,6 @@ export const tableConfig = [
 export const userMappingMessage = __(`Jira users have been imported from the configured Jira
   instance. They can be mapped by selecting a GitLab user from the dropdown in the "GitLab username"
   column. When the form appears, the dropdown defaults to the user conducting the import.`);
+
+// pageSize must match the MAX_USERS value in app/services/jira_import/users_mapper_service.rb
+export const userMappingsPageSize = 50;