Merge branch '235889-jira-importer-user-mapping-shows-50-users-max' into 'master'

Fix Jira importer user mapping limit

See merge request gitlab-org/gitlab!40310

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

@@ -14600,6 +14600,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',