Merge branch '241746-use-graphql-for-jira-importer-user-mapping-member-search' into 'master'

Use GraphQL for Jira importer user mapping member search

See merge request gitlab-org/gitlab!52211

app/assets/javascripts/jira_import/components/jira_import_form.vue

@@ -15,10 +15,11 @@ import {
   GlTable,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
-import axios from '~/lib/utils/axios_utils';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import getJiraUserMappingMutation from '../queries/get_jira_user_mapping.mutation.graphql';
 import initiateJiraImportMutation from '../queries/initiate_jira_import.mutation.graphql';
+import searchProjectMembersQuery from '../queries/search_project_members.query.graphql';
 import { addInProgressImportToStore } from '../utils/cache_update';
 import {
   debounceWait,
@@ -155,19 +156,23 @@ export default {
         });
     },
     searchUsers() {
-      const params = {
-        active: true,
-        project_id: this.projectId,
-        search: this.searchTerm,
-      };
-
       this.isFetching = true;
 
-      return axios
-        .get('/-/autocomplete/users.json', { params })
+      return this.$apollo
+        .query({
+          query: searchProjectMembersQuery,
+          variables: {
+            fullPath: this.projectPath,
+            search: this.searchTerm,
+          },
+        })
         .then(({ data }) => {
-          this.users = data;
-          return data;
+          this.users =
+            data?.project?.projectMembers?.nodes?.map(({ user }) => ({
+              ...user,
+              id: getIdFromGraphQLId(user.id),
+            })) || [];
+          return this.users;
         })
         .finally(() => {
           this.isFetching = false;

app/assets/javascripts/jira_import/queries/search_project_members.query.graphql

+query searchProjectMembers($fullPath: ID!, $search: String) {
+  project(fullPath: $fullPath) {
+    projectMembers(search: $search) {
+      nodes {
+        user {
+          id
+          name
+          username
+        }
+      }
+    }
+  }
+}

spec/frontend/jira_import/components/jira_import_form_spec.js

-import { GlAlert, GlButton, GlDropdown, GlFormSelect, GlLabel, GlTable } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlButton,
+  GlDropdown,
+  GlDropdownItem,
+  GlFormSelect,
+  GlLabel,
+  GlSearchBoxByType,
+  GlTable,
+} from '@gitlab/ui';
 import { getByRole } from '@testing-library/dom';
 import { mount, shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
@@ -6,6 +15,7 @@ import axios from '~/lib/utils/axios_utils';
 import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
 import getJiraUserMappingMutation from '~/jira_import/queries/get_jira_user_mapping.mutation.graphql';
 import initiateJiraImportMutation from '~/jira_import/queries/initiate_jira_import.mutation.graphql';
+import searchProjectMembersQuery from '~/jira_import/queries/search_project_members.query.graphql';
 import {
   imports,
   issuesPath,
@@ -19,6 +29,7 @@ import {
 describe('JiraImportForm', () => {
   let axiosMock;
   let mutateSpy;
+  let querySpy;
   let wrapper;
 
   const currentUsername = 'mrgitlab';
@@ -72,6 +83,7 @@ describe('JiraImportForm', () => {
         $apollo: {
           loading,
           mutate,
+          query: querySpy,
         },
       },
       currentUsername,
@@ -79,19 +91,21 @@ describe('JiraImportForm', () => {
 
   beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
-    mutateSpy = jest.fn(() =>
-      Promise.resolve({
-        data: {
-          jiraImportStart: { errors: [] },
-          jiraImportUsers: { jiraUsers: [], errors: [] },
-        },
-      }),
-    );
+    mutateSpy = jest.fn().mockResolvedValue({
+      data: {
+        jiraImportStart: { errors: [] },
+        jiraImportUsers: { jiraUsers: [], errors: [] },
+      },
+    });
+    querySpy = jest.fn().mockResolvedValue({
+      data: { project: { projectMembers: { nodes: [] } } },
+    });
   });
 
   afterEach(() => {
     axiosMock.restore();
     mutateSpy.mockRestore();
+    querySpy.mockRestore();
     wrapper.destroy();
     wrapper = null;
   });
@@ -236,6 +250,53 @@ describe('JiraImportForm', () => {
     });
   });
 
+  describe('member search', () => {
+    describe('when searching for a member', () => {
+      beforeEach(() => {
+        querySpy = jest.fn().mockResolvedValue({
+          data: {
+            project: {
+              projectMembers: {
+                nodes: [
+                  {
+                    user: {
+                      id: 7,
+                      name: 'Frederic Chopin',
+                      username: 'fchopin',
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        });
+
+        wrapper = mountComponent({ mountFunction: mount });
+
+        wrapper.find(GlSearchBoxByType).vm.$emit('input', 'fred');
+      });
+
+      it('makes a GraphQL call', () => {
+        const queryArgument = {
+          query: searchProjectMembersQuery,
+          variables: {
+            fullPath: projectPath,
+            search: 'fred',
+          },
+        };
+
+        expect(querySpy).toHaveBeenCalledWith(expect.objectContaining(queryArgument));
+      });
+
+      it('updates the user list', () => {
+        expect(getUserDropdown().findAll(GlDropdownItem)).toHaveLength(1);
+        expect(getUserDropdown().find(GlDropdownItem).text()).toContain(
+          'fchopin (Frederic Chopin)',
+        );
+      });
+    });
+  });
+
   describe('buttons', () => {
     describe('"Continue" button', () => {
       it('is shown', () => {