Fix Jira importer user mapping limit

The Jira importer user mapping shows up to 50 users, so any
users cannot see all users if their project has more than
50 users. This commit fixes this issue.

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;
           });
@@ -280,9 +303,7 @@ export default {
           >
             <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
 
-            <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"

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;

app/services/jira_import/users_mapper_service.rb

@@ -2,6 +2,7 @@
 
 module JiraImport
   class UsersMapperService
+    # MAX_USERS must match the pageSize value in app/assets/javascripts/jira_import/utils/constants.js
     MAX_USERS = 50
 
     attr_reader :jira_service, :start_at

changelogs/unreleased/235889-jira-importer-user-mapping-shows-50-users-max.yml

+---
+title: Fix Jira importer user mapping limit
+merge_request: 40310
+author:
+type: fixed

locale/gitlab.pot

@@ -14594,6 +14594,9 @@ msgstr ""
 msgid "Load more"
 msgstr ""
 
+msgid "Load more users"
+msgstr ""
+
 msgid "Loading"
 msgstr ""
 

spec/frontend/jira_import/components/jira_import_form_spec.js

@@ -10,6 +10,7 @@ import {
   imports,
   issuesPath,
   jiraProjects,
+  jiraUsersResponse,
   projectId,
   projectPath,
   userMappings as defaultUserMappings,
@@ -38,7 +39,10 @@ describe('JiraImportForm', () => {
 
   const getHeader = name => getByRole(wrapper.element, 'columnheader', { name });
 
+  const findLoadMoreUsersButton = () => wrapper.find('[data-testid="load-more-users-button"]');
+
   const mountComponent = ({
+    hasMoreUsers = false,
     isSubmitting = false,
     loading = false,
     mutate = mutateSpy,
@@ -55,6 +59,7 @@ describe('JiraImportForm', () => {
         projectPath,
       },
       data: () => ({
+        hasMoreUsers,
         isFetching: false,
         isSubmitting,
         searchTerm: '',
@@ -300,6 +305,7 @@ describe('JiraImportForm', () => {
         variables: {
           input: {
             projectPath,
+            startAt: 0,
           },
         },
       };
@@ -318,4 +324,53 @@ describe('JiraImportForm', () => {
       });
     });
   });
+
+  describe('load more users button', () => {
+    describe('when all users have been loaded', () => {
+      it('is not shown', () => {
+        wrapper = mountComponent();
+
+        expect(findLoadMoreUsersButton().exists()).toBe(false);
+      });
+    });
+
+    describe('when all users have not been loaded', () => {
+      it('is shown', () => {
+        wrapper = mountComponent({ hasMoreUsers: true });
+
+        expect(findLoadMoreUsersButton().exists()).toBe(true);
+      });
+    });
+
+    describe('when clicked', () => {
+      beforeEach(() => {
+        mutateSpy = jest.fn(() =>
+          Promise.resolve({
+            data: {
+              jiraImportStart: { errors: [] },
+              jiraImportUsers: { jiraUsers: jiraUsersResponse, errors: [] },
+            },
+          }),
+        );
+
+        wrapper = mountComponent({ hasMoreUsers: true });
+      });
+
+      it('calls the GraphQL user mapping mutation', async () => {
+        const mutationArguments = {
+          mutation: getJiraUserMappingMutation,
+          variables: {
+            input: {
+              projectPath,
+              startAt: 0,
+            },
+          },
+        };
+
+        findLoadMoreUsersButton().vm.$emit('click');
+
+        expect(mutateSpy).toHaveBeenCalledWith(expect.objectContaining(mutationArguments));
+      });
+    });
+  });
 });

spec/frontend/jira_import/mock_data.js

 import getJiraImportDetailsQuery from '~/jira_import/queries/get_jira_import_details.query.graphql';
 import { IMPORT_STATE } from '~/jira_import/utils/jira_import_utils';
+import { userMappingsPageSize } from '~/jira_import/utils/constants';
 
 export const fullPath = 'gitlab-org/gitlab-test';
 
@@ -87,6 +88,8 @@ export const jiraProjects = [
   { text: 'Migrate to GitLab (MTG)', value: 'MTG' },
 ];
 
+export const jiraUsersResponse = new Array(userMappingsPageSize);
+
 export const imports = [
   {
     jiraProjectKey: 'MTG',