Merge branch '216145-frontend-create-jira-import-user-mapping-form' into 'master'

Create Jira Importer user mapping form on the UI

Closes #216145

See merge request gitlab-org/gitlab!33320

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

@@ -3,6 +3,7 @@ import { GlAlert, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { last } from 'lodash';
 import { __ } from '~/locale';
 import getJiraImportDetailsQuery from '../queries/get_jira_import_details.query.graphql';
+import getJiraUserMappingMutation from '../queries/get_jira_user_mapping.mutation.graphql';
 import initiateJiraImportMutation from '../queries/initiate_jira_import.mutation.graphql';
 import { addInProgressImportToStore } from '../utils/cache_update';
 import { isInProgress, extractJiraProjectsOptions } from '../utils/jira_import_utils';
@@ -37,6 +38,10 @@ export default {
       type: String,
       required: true,
     },
+    projectId: {
+      type: String,
+      required: true,
+    },
     projectPath: {
       type: String,
       required: true,
@@ -48,10 +53,12 @@ export default {
   },
   data() {
     return {
+      isSubmitting: false,
       jiraImportDetails: {},
+      selectedProject: undefined,
+      userMappings: [],
       errorMessage: '',
       showAlert: false,
-      selectedProject: undefined,
     };
   },
   apollo: {
@@ -89,16 +96,43 @@ export default {
         : 'jira-import::KEY-1';
     },
   },
+  mounted() {
+    if (this.isJiraConfigured) {
+      this.$apollo
+        .mutate({
+          mutation: getJiraUserMappingMutation,
+          variables: {
+            input: {
+              projectPath: this.projectPath,
+              startAt: 1,
+            },
+          },
+        })
+        .then(({ data }) => {
+          if (data.jiraImportUsers.errors.length) {
+            this.setAlertMessage(data.jiraImportUsers.errors.join('. '));
+          } else {
+            this.userMappings = data.jiraImportUsers.jiraUsers;
+          }
+        })
+        .catch(() => this.setAlertMessage(__('There was an error retrieving the Jira users.')));
+    }
+  },
   methods: {
     initiateJiraImport(project) {
+      this.isSubmitting = true;
+
       this.$apollo
         .mutate({
           mutation: initiateJiraImportMutation,
           variables: {
             input: {
-              projectPath: this.projectPath,
               jiraProjectKey: project,
-              usersMapping: [],
+              projectPath: this.projectPath,
+              usersMapping: this.userMappings.map(({ gitlabId, jiraAccountId }) => ({
+                gitlabId,
+                jiraAccountId,
+              })),
             },
           },
           update: (store, { data }) =>
@@ -111,7 +145,21 @@ export default {
             this.selectedProject = undefined;
           }
         })
-        .catch(() => this.setAlertMessage(__('There was an error importing the Jira project.')));
+        .catch(() => this.setAlertMessage(__('There was an error importing the Jira project.')))
+        .finally(() => {
+          this.isSubmitting = false;
+        });
+    },
+    updateMapping(jiraAccountId, gitlabId, gitlabUsername) {
+      this.userMappings = this.userMappings.map(userMapping =>
+        userMapping.jiraAccountId === jiraAccountId
+          ? {
+              ...userMapping,
+              gitlabId,
+              gitlabUsername,
+            }
+          : userMapping,
+      );
     },
     setAlertMessage(message) {
       this.errorMessage = message;
@@ -156,9 +204,13 @@ export default {
       v-else
       v-model="selectedProject"
       :import-label="importLabel"
+      :is-submitting="isSubmitting"
       :issues-path="issuesPath"
       :jira-projects="jiraImportDetails.projects"
+      :project-id="projectId"
+      :user-mappings="userMappings"
       @initiateJiraImport="initiateJiraImport"
+      @updateMapping="updateMapping"
     />
   </div>
 </template>

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

 <script>
-import { GlAvatar, GlButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui';
+import {
+  GlButton,
+  GlNewDropdown,
+  GlNewDropdownItem,
+  GlNewDropdownText,
+  GlFormGroup,
+  GlFormSelect,
+  GlIcon,
+  GlLabel,
+  GlLoadingIcon,
+  GlSearchBoxByType,
+  GlTable,
+} from '@gitlab/ui';
+import { debounce } from 'lodash';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
 
 export default {
   name: 'JiraImportForm',
   components: {
-    GlAvatar,
     GlButton,
+    GlNewDropdown,
+    GlNewDropdownItem,
+    GlNewDropdownText,
     GlFormGroup,
     GlFormSelect,
+    GlIcon,
     GlLabel,
+    GlLoadingIcon,
+    GlSearchBoxByType,
+    GlTable,
   },
-  currentUserAvatarUrl: gon.current_user_avatar_url,
   currentUsername: gon.current_username,
+  dropdownLabel: __('The GitLab user to which the Jira user %{jiraDisplayName} will be mapped'),
+  tableConfig: [
+    {
+      key: 'jiraDisplayName',
+      label: __('Jira display name'),
+    },
+    {
+      key: 'arrow',
+      label: '',
+    },
+    {
+      key: 'gitlabUsername',
+      label: __('GitLab username'),
+    },
+  ],
   props: {
     importLabel: {
       type: String,
       required: true,
     },
+    isSubmitting: {
+      type: Boolean,
+      required: true,
+    },
     issuesPath: {
       type: String,
       required: true,
@@ -25,6 +64,14 @@ export default {
       type: Array,
       required: true,
     },
+    projectId: {
+      type: String,
+      required: true,
+    },
+    userMappings: {
+      type: Array,
+      required: true,
+    },
     value: {
       type: String,
       required: false,
@@ -33,10 +80,53 @@ export default {
   },
   data() {
     return {
+      isFetching: false,
+      searchTerm: '',
       selectState: null,
+      users: [],
     };
   },
+  computed: {
+    shouldShowNoMatchesFoundText() {
+      return !this.isFetching && this.users.length === 0;
+    },
+  },
+  watch: {
+    searchTerm: debounce(function debouncedUserSearch() {
+      this.searchUsers();
+    }, 500),
+  },
+  mounted() {
+    this.searchUsers()
+      .then(data => {
+        this.initialUsers = data;
+      })
+      .catch(() => {});
+  },
   methods: {
+    searchUsers() {
+      const params = {
+        active: true,
+        project_id: this.projectId,
+        search: this.searchTerm,
+      };
+
+      this.isFetching = true;
+
+      return axios
+        .get('/-/autocomplete/users.json', { params })
+        .then(({ data }) => {
+          this.users = data;
+          return data;
+        })
+        .finally(() => {
+          this.isFetching = false;
+        });
+    },
+    resetDropdown() {
+      this.searchTerm = '';
+      this.users = this.initialUsers;
+    },
     initiateJiraImport(event) {
       event.preventDefault();
       if (this.value) {
@@ -80,7 +170,7 @@ export default {
       </gl-form-group>
 
       <gl-form-group
-        class="row align-items-center"
+        class="row gl-align-items-center gl-mb-6"
         :label="__('Issue label')"
         label-cols-sm="2"
         label-for="jira-project-label"
@@ -94,46 +184,54 @@ export default {
         />
       </gl-form-group>
 
-      <hr />
+      <h4 class="gl-mb-4">{{ __('Jira-GitLab user mapping template') }}</h4>
 
-      <p class="offset-md-1">
+      <p>
         {{
           __(
-            "For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:",
+            `Jira users have been matched with similar GitLab users.
+            This can be overwritten by selecting a GitLab user from the dropdown in the "GitLab
+            username" column.
+            If it wasn't possible to match a Jira user with a GitLab user, the dropdown defaults to
+            the user conducting the import.`,
           )
         }}
       </p>
 
-      <gl-form-group
-        class="row align-items-center mb-1"
-        :label="__('Title')"
-        label-cols-sm="2"
-        label-for="jira-project-title"
-      >
-        <p id="jira-project-title" class="mb-2">{{ __('jira.issue.summary') }}</p>
-      </gl-form-group>
-      <gl-form-group
-        class="row align-items-center mb-1"
-        :label="__('Reporter')"
-        label-cols-sm="2"
-        label-for="jira-project-reporter"
+      <gl-table :fields="$options.tableConfig" :items="userMappings" fixed>
+        <template #cell(arrow)>
+          <gl-icon name="arrow-right" :aria-label="__('Will be mapped to')" />
+        </template>
+        <template #cell(gitlabUsername)="data">
+          <gl-new-dropdown
+            :text="data.value || $options.currentUsername"
+            class="w-100"
+            :aria-label="
+              sprintf($options.dropdownLabel, { jiraDisplayName: data.item.jiraDisplayName })
+            "
+            @hide="resetDropdown"
           >
-        <gl-avatar
-          id="jira-project-reporter"
-          class="mb-2"
-          :src="$options.currentUserAvatarUrl"
-          :size="24"
-          :aria-label="$options.currentUsername"
-        />
-      </gl-form-group>
-      <gl-form-group
-        class="row align-items-center mb-1"
-        :label="__('Description')"
-        label-cols-sm="2"
-        label-for="jira-project-description"
+            <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-new-dropdown-item
+              v-for="user in users"
+              v-else
+              :key="user.id"
+              @click="$emit('updateMapping', data.item.jiraAccountId, user.id, user.username)"
             >
-        <p id="jira-project-description" class="mb-2">{{ __('jira.issue.description.content') }}</p>
-      </gl-form-group>
+              {{ user.username }} ({{ user.name }})
+            </gl-new-dropdown-item>
+
+            <gl-new-dropdown-text v-show="shouldShowNoMatchesFoundText" class="text-secondary">
+              {{ __('No matches found') }}
+            </gl-new-dropdown-text>
+          </gl-new-dropdown>
+        </template>
+      </gl-table>
 
       <div class="footer-block row-content-block d-flex justify-content-between">
         <gl-button
@@ -141,9 +239,10 @@ export default {
           category="primary"
           variant="success"
           class="js-no-auto-disable"
+          :loading="isSubmitting"
           data-qa-selector="jira_issues_import_button"
         >
-          {{ __('Next') }}
+          {{ __('Continue') }}
         </gl-button>
         <gl-button :href="issuesPath">{{ __('Cancel') }}</gl-button>
       </div>

app/assets/javascripts/jira_import/index.js

@@ -28,6 +28,7 @@ export default function mountJiraImportApp() {
           isJiraConfigured: parseBoolean(el.dataset.isJiraConfigured),
           issuesPath: el.dataset.issuesPath,
           jiraIntegrationPath: el.dataset.jiraIntegrationPath,
+          projectId: el.dataset.projectId,
           projectPath: el.dataset.projectPath,
           setupIllustration: el.dataset.setupIllustration,
         },

app/assets/javascripts/jira_import/queries/get_jira_user_mapping.mutation.graphql

+mutation($input: JiraImportUsersInput!) {
+  jiraImportUsers(input: $input) {
+    jiraUsers {
+      jiraAccountId
+      jiraDisplayName
+      jiraEmail
+      gitlabId
+    }
+    errors
+  }
+}

app/views/projects/import/jira/show.html.haml

@@ -3,4 +3,5 @@
   jira_integration_path: edit_project_service_path(@project, :jira),
   is_jira_configured: @project.jira_service&.active? && @project.jira_service&.valid_connection?.to_s,
   in_progress_illustration: image_path('illustrations/export-import.svg'),
+  project_id: @project.id,
   setup_illustration: image_path('illustrations/manual_action.svg') } }

changelogs/unreleased/216145-frontend-create-jira-import-user-mapping-form.yml

+---
+title: Add Jira Importer user mapping form
+merge_request: 33320
+author:
+type: added

doc/user/project/import/jira.md

@@ -40,6 +40,8 @@ Make sure you have the integration set up before trying to import Jira issues.
 
 ## Import Jira issues to GitLab
 
+> New import form [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/216145) in GitLab 13.2.
+
 To import Jira issues to a GitLab project, follow the steps below.
 
 NOTE: **Note:**
@@ -47,27 +49,34 @@ Importing Jira issues is done as an asynchronous background job, which
 may result in delays based on import queues load, system load, or other factors.
 Importing large projects may take several minutes depending on the size of the import.
 
-1. On the **{issues}** **Issues** page, click the **Import Issues** (**{import}**) button.
-1. Select **Import from Jira**.
-   This option is only visible if you have the [correct permissions](#permissions).
+1. On the **{issues}** **Issues** page, click **Import Issues** (**{import}**) **> Import from Jira**.
 
    ![Import issues from Jira button](img/jira/import_issues_from_jira_button_v12_10.png)
 
+   The **Import from Jira** option is only visible if you have the [correct permissions](#permissions).
+
    The following form appears.
+   If you've previously set up the [Jira integration](../integrations/jira.md), you can now see
+   the Jira projects that you have access to in the dropdown.
+
+   ![Import issues from Jira form](img/jira/import_issues_from_jira_form_v13_2.png)
 
-   ![Import issues from Jira form](img/jira/import_issues_from_jira_form_v12_10.png)
+1. Click the **Import from** dropdown and select the Jira project that you wish to import issues from.
 
-   If you've previously set up the [Jira integration](../integrations/jira.md), you now see the Jira
-   projects that you have access to in the dropdown.
+   In the **Jira-GitLab user mapping template** section, the table shows to which GitLab users your Jira
+   users will be mapped.
+   If it wasn't possible to match a Jira user with a GitLab user, the dropdown defaults to the user
+   conducting the import.
 
-1. Select the Jira project that you wish to import issues from.
+1. To change any of the suggested mappings, click the dropdown in the **GitLab username** column and
+   select the user you want to map to each Jira user.
 
-   ![Import issues from Jira form](img/jira/import_issues_from_jira_projects_v12_10.png)
+   The dropdown may not show all the users, so use the search bar to find a specific
+   user in this GitLab project.
+
+1. Click **Continue**. You're presented with a confirmation that import has started.
 
-1. Click **Import Issues**. You're presented with a confirmation that import has started.
    While the import is running in the background, you can navigate away from the import status page
    to the issues page, and you'll see the new issues appearing in the issues list.
 
-1. To check the status of your import, go back to the Jira import page.
-
-   ![Import issues from Jira button](img/jira/import_issues_from_jira_button_v12_10.png)
+1. To check the status of your import, go to the Jira import page again.

locale/gitlab.pot

@@ -10410,9 +10410,6 @@ msgstr ""
 msgid "Footer message"
 msgstr ""
 
-msgid "For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:"
-msgstr ""
-
 msgid "For internal projects, any logged in user can view pipelines and access job details (output logs and artifacts)"
 msgstr ""
 
@@ -11082,6 +11079,9 @@ msgstr ""
 msgid "GitLab single sign-on URL"
 msgstr ""
 
+msgid "GitLab username"
+msgstr ""
+
 msgid "GitLab uses %{jaeger_link} to monitor distributed systems."
 msgstr ""
 
@@ -13065,6 +13065,9 @@ msgstr ""
 msgid "Jira Issues"
 msgstr ""
 
+msgid "Jira display name"
+msgstr ""
+
 msgid "Jira import is already running."
 msgstr ""
 
@@ -13080,6 +13083,12 @@ msgstr ""
 msgid "Jira service not configured."
 msgstr ""
 
+msgid "Jira users have been matched with similar GitLab users. This can be overwritten by selecting a GitLab user from the dropdown in the \"GitLab username\" column. If it wasn't possible to match a Jira user with a GitLab user, the dropdown defaults to the user conducting the import."
+msgstr ""
+
+msgid "Jira-GitLab user mapping template"
+msgstr ""
+
 msgid "JiraService| on branch %{branch_link}"
 msgstr ""
 
@@ -19630,9 +19639,6 @@ msgstr ""
 msgid "Reported %{timeAgo} by %{reportedBy}"
 msgstr ""
 
-msgid "Reporter"
-msgstr ""
-
 msgid "Reporting"
 msgstr ""
 
@@ -23138,6 +23144,9 @@ msgstr ""
 msgid "The Git LFS objects will <strong>not</strong> be synced."
 msgstr ""
 
+msgid "The GitLab user to which the Jira user %{jiraDisplayName} will be mapped"
+msgstr ""
+
 msgid "The Issue Tracker is the place to add things that need to be improved or solved in a project"
 msgstr ""
 
@@ -23671,6 +23680,9 @@ msgstr ""
 msgid "There was an error resetting user pipeline minutes."
 msgstr ""
 
+msgid "There was an error retrieving the Jira users."
+msgstr ""
+
 msgid "There was an error saving this Geo Node."
 msgstr ""
 
@@ -26594,6 +26606,9 @@ msgstr ""
 msgid "Will be created"
 msgstr ""
 
+msgid "Will be mapped to"
+msgstr ""
+
 msgid "Will deploy to"
 msgstr ""
 
@@ -27959,12 +27974,6 @@ msgstr ""
 msgid "jigsaw is not defined"
 msgstr ""
 
-msgid "jira.issue.description.content"
-msgstr ""
-
-msgid "jira.issue.summary"
-msgstr ""
-
 msgid "latest"
 msgstr ""
 

spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JiraImportForm table body shows correct information in each cell 1`] = `
+<table
+  aria-busy="false"
+  aria-colcount="3"
+  class="table b-table gl-table b-table-fixed"
+  role="table"
+>
+  <!---->
+  <!---->
+  <thead
+    class=""
+    role="rowgroup"
+  >
+    <!---->
+    <tr
+      class=""
+      role="row"
+    >
+      <th
+        aria-colindex="1"
+        class=""
+        role="columnheader"
+        scope="col"
+      >
+        Jira display name
+      </th>
+      <th
+        aria-colindex="2"
+        aria-label="Arrow"
+        class=""
+        role="columnheader"
+        scope="col"
+      />
+      <th
+        aria-colindex="3"
+        class=""
+        role="columnheader"
+        scope="col"
+      >
+        GitLab username
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    role="rowgroup"
+  >
+    <!---->
+    <tr
+      class=""
+      role="row"
+    >
+      <td
+        aria-colindex="1"
+        class=""
+        role="cell"
+      >
+        Jane Doe
+      </td>
+      <td
+        aria-colindex="2"
+        class=""
+        role="cell"
+      >
+        <svg
+          aria-label="Will be mapped to"
+          class="gl-icon s16"
+        >
+          <use
+            href="#arrow-right"
+          />
+        </svg>
+      </td>
+      <td
+        aria-colindex="3"
+        class=""
+        role="cell"
+      >
+        <div
+          aria-label="The GitLab user to which the Jira user Jane Doe will be mapped"
+          class="dropdown b-dropdown gl-new-dropdown w-100 btn-group"
+        >
+          <!---->
+          <button
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
+            type="button"
+          >
+            <!---->
+             
+            <span
+              class="gl-new-dropdown-button-text"
+            >
+              janedoe
+            </span>
+             
+            <svg
+              class="dropdown-chevron gl-icon s16"
+            >
+              <use
+                href="#chevron-down"
+              />
+            </svg>
+          </button>
+          <ul
+            class="dropdown-menu"
+            role="menu"
+            tabindex="-1"
+          >
+            <!---->
+             
+            <div
+              class="gl-search-box-by-type m-2"
+            >
+              <svg
+                class="gl-search-box-by-type-search-icon gl-icon s16"
+              >
+                <use
+                  href="#search"
+                />
+              </svg>
+               
+              <input
+                aria-label="Search"
+                class="gl-form-input gl-search-box-by-type-input form-control"
+                placeholder="Search"
+                type="text"
+              />
+               
+              <div
+                class="gl-search-box-by-type-right-icons"
+              >
+                <!---->
+                 
+                <button
+                  aria-hidden="true"
+                  class="gl-clear-icon-button gl-search-box-by-type-clear gl-clear-icon-button"
+                  name="clear"
+                  style="display: none;"
+                  title="Clear"
+                >
+                  <svg
+                    class="gl-icon s16"
+                  >
+                    <use
+                      href="#clear"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+              
+            <li
+              class="gl-new-dropdown-text text-secondary"
+              role="presentation"
+            >
+              <p
+                class="b-dropdown-text"
+              >
+                
+            No matches found
+          
+              </p>
+            </li>
+             
+          </ul>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class=""
+      role="row"
+    >
+      <td
+        aria-colindex="1"
+        class=""
+        role="cell"
+      >
+        Fred Chopin
+      </td>
+      <td
+        aria-colindex="2"
+        class=""
+        role="cell"
+      >
+        <svg
+          aria-label="Will be mapped to"
+          class="gl-icon s16"
+        >
+          <use
+            href="#arrow-right"
+          />
+        </svg>
+      </td>
+      <td
+        aria-colindex="3"
+        class=""
+        role="cell"
+      >
+        <div
+          aria-label="The GitLab user to which the Jira user Fred Chopin will be mapped"
+          class="dropdown b-dropdown gl-new-dropdown w-100 btn-group"
+        >
+          <!---->
+          <button
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
+            type="button"
+          >
+            <!---->
+             
+            <span
+              class="gl-new-dropdown-button-text"
+            >
+              mrgitlab
+            </span>
+             
+            <svg
+              class="dropdown-chevron gl-icon s16"
+            >
+              <use
+                href="#chevron-down"
+              />
+            </svg>
+          </button>
+          <ul
+            class="dropdown-menu"
+            role="menu"
+            tabindex="-1"
+          >
+            <!---->
+             
+            <div
+              class="gl-search-box-by-type m-2"
+            >
+              <svg
+                class="gl-search-box-by-type-search-icon gl-icon s16"
+              >
+                <use
+                  href="#search"
+                />
+              </svg>
+               
+              <input
+                aria-label="Search"
+                class="gl-form-input gl-search-box-by-type-input form-control"
+                placeholder="Search"
+                type="text"
+              />
+               
+              <div
+                class="gl-search-box-by-type-right-icons"
+              >
+                <!---->
+                 
+                <button
+                  aria-hidden="true"
+                  class="gl-clear-icon-button gl-search-box-by-type-clear gl-clear-icon-button"
+                  name="clear"
+                  style="display: none;"
+                  title="Clear"
+                >
+                  <svg
+                    class="gl-icon s16"
+                  >
+                    <use
+                      href="#clear"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+              
+            <li
+              class="gl-new-dropdown-text text-secondary"
+              role="presentation"
+            >
+              <p
+                class="b-dropdown-text"
+              >
+                
+            No matches found
+          
+              </p>
+            </li>
+             
+          </ul>
+        </div>
+      </td>
+    </tr>
+    <!---->
+    <!---->
+  </tbody>
+  <!---->
+</table>
+`;

spec/frontend/jira_import/components/jira_import_app_spec.js

 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
 import Vue from 'vue';
+import axios from '~/lib/utils/axios_utils';
 import JiraImportApp from '~/jira_import/components/jira_import_app.vue';
 import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
 import JiraImportProgress from '~/jira_import/components/jira_import_progress.vue';
 import JiraImportSetup from '~/jira_import/components/jira_import_setup.vue';
 import initiateJiraImportMutation from '~/jira_import/queries/initiate_jira_import.mutation.graphql';
+import getJiraUserMappingMutation from '~/jira_import/queries/get_jira_user_mapping.mutation.graphql';
+import { imports, issuesPath, jiraIntegrationPath, jiraProjects, userMappings } from '../mock_data';
 
-const mountComponent = ({
+describe('JiraImportApp', () => {
+  let axiosMock;
+  let mutateSpy;
+  let wrapper;
+
+  const getFormComponent = () => wrapper.find(JiraImportForm);
+
+  const getProgressComponent = () => wrapper.find(JiraImportProgress);
+
+  const getSetupComponent = () => wrapper.find(JiraImportSetup);
+
+  const getAlert = () => wrapper.find(GlAlert);
+
+  const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
+
+  const mountComponent = ({
     isJiraConfigured = true,
     errorMessage = '',
     selectedProject = 'MTG',
     showAlert = false,
     isInProgress = false,
     loading = false,
-  mutate = jest.fn(() => Promise.resolve()),
-  mountType,
-} = {}) => {
-  const mountFunction = mountType === 'mount' ? mount : shallowMount;
-
-  return mountFunction(JiraImportApp, {
+    mutate = mutateSpy,
+    mountFunction = shallowMount,
+  } = {}) =>
+    mountFunction(JiraImportApp, {
       propsData: {
         inProgressIllustration: 'in-progress-illustration.svg',
         isJiraConfigured,
-      issuesPath: 'gitlab-org/gitlab-test/-/issues',
-      jiraIntegrationPath: 'gitlab-org/gitlab-test/-/services/jira/edit',
+        issuesPath,
+        jiraIntegrationPath,
+        projectId: '5',
         projectPath: 'gitlab-org/gitlab-test',
         setupIllustration: 'setup-illustration.svg',
       },
       data() {
         return {
+          isSubmitting: false,
+          selectedProject,
+          userMappings,
           errorMessage,
           showAlert,
-        selectedProject,
           jiraImportDetails: {
             isInProgress,
-          imports: [
-            {
-              jiraProjectKey: 'MTG',
-              scheduledAt: '2020-04-08T10:11:12+00:00',
-              scheduledBy: {
-                name: 'John Doe',
-              },
-            },
-            {
-              jiraProjectKey: 'MSJP',
-              scheduledAt: '2020-04-09T13:14:15+00:00',
-              scheduledBy: {
-                name: 'Jimmy Doe',
-              },
-            },
-            {
-              jiraProjectKey: 'MTG',
-              scheduledAt: '2020-04-09T16:17:18+00:00',
-              scheduledBy: {
-                name: 'Jane Doe',
-              },
-            },
-          ],
-          mostRecentImport: {
-            jiraProjectKey: 'MTG',
-            scheduledAt: '2020-04-09T16:17:18+00:00',
-            scheduledBy: {
-              name: 'Jane Doe',
-            },
-          },
-          projects: [
-            { text: 'My Jira Project (MJP)', value: 'MJP' },
-            { text: 'My Second Jira Project (MSJP)', value: 'MSJP' },
-            { text: 'Migrate to GitLab (MTG)', value: 'MTG' },
-          ],
+            imports,
+            mostRecentImport: imports[imports.length - 1],
+            projects: jiraProjects,
           },
         };
       },
@@ -80,22 +68,22 @@ const mountComponent = ({
         },
       },
     });
-};
-
-describe('JiraImportApp', () => {
-  let wrapper;
-
-  const getFormComponent = () => wrapper.find(JiraImportForm);
-
-  const getProgressComponent = () => wrapper.find(JiraImportProgress);
-
-  const getSetupComponent = () => wrapper.find(JiraImportSetup);
 
-  const getAlert = () => wrapper.find(GlAlert);
-
-  const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+    mutateSpy = jest.fn(() =>
+      Promise.resolve({
+        data: {
+          jiraImportStart: { errors: [] },
+          jiraImportUsers: { jiraUsers: [], errors: [] },
+        },
+      }),
+    );
+  });
 
   afterEach(() => {
+    axiosMock.restore();
+    mutateSpy.mockRestore();
     wrapper.destroy();
     wrapper = null;
   });
@@ -223,7 +211,7 @@ describe('JiraImportApp', () => {
       });
 
       it('shows warning alert to explain project MTG has been imported 2 times before', () => {
-        wrapper = mountComponent({ mountType: 'mount' });
+        wrapper = mountComponent({ mountFunction: mount });
 
         expect(getAlert().text()).toBe(
           'You have imported from this project 2 times before. Each new import will create duplicate issues.',
@@ -248,9 +236,7 @@ describe('JiraImportApp', () => {
 
   describe('initiating a Jira import', () => {
     it('calls the mutation with the expected arguments', () => {
-      const mutate = jest.fn(() => Promise.resolve());
-
-      wrapper = mountComponent({ mutate });
+      wrapper = mountComponent();
 
       const mutationArguments = {
         mutation: initiateJiraImportMutation,
@@ -258,14 +244,23 @@ describe('JiraImportApp', () => {
           input: {
             jiraProjectKey: 'MTG',
             projectPath: 'gitlab-org/gitlab-test',
-            usersMapping: [],
+            usersMapping: [
+              {
+                jiraAccountId: 'aei23f98f-q23fj98qfj',
+                gitlabId: 15,
+              },
+              {
+                jiraAccountId: 'fu39y8t34w-rq3u289t3h4i',
+                gitlabId: undefined,
+              },
+            ],
           },
         },
       };
 
       getFormComponent().vm.$emit('initiateJiraImport', 'MTG');
 
-      expect(mutate).toHaveBeenCalledWith(expect.objectContaining(mutationArguments));
+      expect(mutateSpy).toHaveBeenCalledWith(expect.objectContaining(mutationArguments));
     });
 
     it('shows alert message with error message on error', () => {
@@ -284,7 +279,8 @@ describe('JiraImportApp', () => {
     });
   });
 
-  it('can dismiss alert message', () => {
+  describe('alert', () => {
+    it('can be dismissed', () => {
       wrapper = mountComponent({
         errorMessage: 'There was an error importing the Jira project.',
         showAlert: true,
@@ -299,4 +295,37 @@ describe('JiraImportApp', () => {
         expect(getAlert().exists()).toBe(false);
       });
     });
+  });
+
+  describe('on mount', () => {
+    it('makes a GraphQL mutation call to get user mappings', () => {
+      wrapper = mountComponent();
+
+      const mutationArguments = {
+        mutation: getJiraUserMappingMutation,
+        variables: {
+          input: {
+            projectPath: 'gitlab-org/gitlab-test',
+            startAt: 1,
+          },
+        },
+      };
+
+      expect(mutateSpy).toHaveBeenCalledWith(expect.objectContaining(mutationArguments));
+    });
+
+    it('does not make a GraphQL mutation call to get user mappings when Jira is not configured', () => {
+      wrapper = mountComponent({ isJiraConfigured: false });
+
+      expect(mutateSpy).not.toHaveBeenCalled();
+    });
+
+    it('shows error message when there is an error with the GraphQL mutation call', () => {
+      const mutate = jest.fn(() => Promise.reject());
+
+      wrapper = mountComponent({ mutate });
+
+      expect(getAlert().exists()).toBe(true);
+    });
+  });
 });

spec/frontend/jira_import/components/jira_import_form_spec.js

-import { GlAvatar, GlButton, GlFormSelect, GlLabel } from '@gitlab/ui';
+import { GlButton, GlFormSelect, GlLabel, GlTable } from '@gitlab/ui';
+import { getByRole } from '@testing-library/dom';
 import { mount, shallowMount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
+import { issuesPath, jiraProjects, userMappings } from '../mock_data';
 
-const importLabel = 'jira-import::MTG-1';
-const value = 'MTG';
+describe('JiraImportForm', () => {
+  let axiosMock;
+  let wrapper;
+
+  const currentUsername = 'mrgitlab';
+  const importLabel = 'jira-import::MTG-1';
+  const value = 'MTG';
+
+  const getSelectDropdown = () => wrapper.find(GlFormSelect);
+
+  const getCancelButton = () => wrapper.findAll(GlButton).at(1);
 
-const mountComponent = ({ mountType } = {}) => {
-  const mountFunction = mountType === 'mount' ? mount : shallowMount;
+  const getHeader = name => getByRole(wrapper.element, 'columnheader', { name });
 
-  return mountFunction(JiraImportForm, {
+  const mountComponent = ({ isSubmitting = false, mountFunction = shallowMount } = {}) =>
+    mountFunction(JiraImportForm, {
       propsData: {
         importLabel,
-      issuesPath: 'gitlab-org/gitlab-test/-/issues',
-      jiraProjects: [
-        {
-          text: 'My Jira Project',
-          value: 'MJP',
-        },
-        {
-          text: 'My Second Jira Project',
-          value: 'MSJP',
-        },
-        {
-          text: 'Migrate to GitLab',
-          value: 'MTG',
-        },
-      ],
+        isSubmitting,
+        issuesPath,
+        jiraProjects,
+        projectId: '5',
+        userMappings,
         value,
       },
+      data: () => ({
+        isFetching: false,
+        searchTerm: '',
+        selectState: null,
+        users: [],
+      }),
+      currentUsername,
     });
-};
 
-describe('JiraImportForm', () => {
-  let wrapper;
-
-  const getSelectDropdown = () => wrapper.find(GlFormSelect);
-
-  const getCancelButton = () => wrapper.findAll(GlButton).at(1);
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
 
   afterEach(() => {
+    axiosMock.restore();
     wrapper.destroy();
     wrapper = null;
   });
@@ -51,15 +58,21 @@ describe('JiraImportForm', () => {
     });
 
     it('contains a list of Jira projects to select from', () => {
-      wrapper = mountComponent({ mountType: 'mount' });
-
-      const optionItems = ['My Jira Project', 'My Second Jira Project', 'Migrate to GitLab'];
+      wrapper = mountComponent({ mountFunction: mount });
 
       getSelectDropdown()
         .findAll('option')
         .wrappers.forEach((optionEl, index) => {
-          expect(optionEl.text()).toBe(optionItems[index]);
+          expect(optionEl.text()).toBe(jiraProjects[index].text);
+        });
     });
+
+    it('emits an "input" event when the input select value changes', () => {
+      wrapper = mountComponent();
+
+      getSelectDropdown().vm.$emit('change', value);
+
+      expect(wrapper.emitted('input')[0]).toEqual([value]);
     });
   });
 
@@ -72,38 +85,69 @@ describe('JiraImportForm', () => {
       expect(wrapper.find(GlLabel).props('title')).toBe(importLabel);
     });
 
+    it('shows a heading for the user mapping section', () => {
+      expect(
+        getByRole(wrapper.element, 'heading', { name: 'Jira-GitLab user mapping template' }),
+      ).toBeTruthy();
+    });
+
     it('shows information to the user', () => {
       expect(wrapper.find('p').text()).toBe(
-        "For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:",
+        'Jira users have been matched with similar GitLab users. This can be overwritten by selecting a GitLab user from the dropdown in the "GitLab username" column. If it wasn\'t possible to match a Jira user with a GitLab user, the dropdown defaults to the user conducting the import.',
       );
     });
+  });
 
-    it('shows jira.issue.summary for the Title', () => {
-      expect(wrapper.find('[id="jira-project-title"]').text()).toBe('jira.issue.summary');
+  describe('table', () => {
+    describe('headers', () => {
+      beforeEach(() => {
+        wrapper = mountComponent({ mountFunction: mount });
       });
 
-    it('shows an avatar for the Reporter', () => {
-      expect(wrapper.contains(GlAvatar)).toBe(true);
+      it('has a "Jira display name" column', () => {
+        expect(getHeader('Jira display name')).toBeTruthy();
       });
 
-    it('shows jira.issue.description.content for the Description', () => {
-      expect(wrapper.find('[id="jira-project-description"]').text()).toBe(
-        'jira.issue.description.content',
-      );
+      it('has an "arrow" column', () => {
+        expect(getHeader('Arrow')).toBeTruthy();
+      });
+
+      it('has a "GitLab username" column', () => {
+        expect(getHeader('GitLab username')).toBeTruthy();
       });
     });
 
-  describe('Next button', () => {
-    beforeEach(() => {
-      wrapper = mountComponent();
+    describe('body', () => {
+      it('shows all user mappings', () => {
+        wrapper = mountComponent({ mountFunction: mount });
+
+        expect(wrapper.find(GlTable).findAll('tbody tr').length).toBe(userMappings.length);
       });
 
+      it('shows correct information in each cell', () => {
+        wrapper = mountComponent({ mountFunction: mount });
+
+        expect(wrapper.find(GlTable).element).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('buttons', () => {
+    describe('"Continue" button', () => {
       it('is shown', () => {
-      expect(wrapper.find(GlButton).text()).toBe('Next');
+        wrapper = mountComponent();
+
+        expect(wrapper.find(GlButton).text()).toBe('Continue');
+      });
+
+      it('is in loading state when the form is submitting', async () => {
+        wrapper = mountComponent({ isSubmitting: true });
+
+        expect(wrapper.find(GlButton).props('loading')).toBe(true);
       });
     });
 
-  describe('Cancel button', () => {
+    describe('"Cancel" button', () => {
       beforeEach(() => {
         wrapper = mountComponent();
       });
@@ -113,18 +157,12 @@ describe('JiraImportForm', () => {
       });
 
       it('links to the Issues page', () => {
-      expect(getCancelButton().attributes('href')).toBe('gitlab-org/gitlab-test/-/issues');
+        expect(getCancelButton().attributes('href')).toBe(issuesPath);
       });
     });
-
-  it('emits an "input" event when the input select value changes', () => {
-    wrapper = mountComponent({ mountType: 'mount' });
-
-    getSelectDropdown().vm.$emit('change', value);
-
-    expect(wrapper.emitted('input')[0]).toEqual([value]);
   });
 
+  describe('form', () => {
     it('emits an "initiateJiraImport" event with the selected dropdown value when submitted', () => {
       wrapper = mountComponent();
 
@@ -132,4 +170,5 @@ describe('JiraImportForm', () => {
 
       expect(wrapper.emitted('initiateJiraImport')[0]).toEqual([value]);
     });
+  });
 });

spec/frontend/jira_import/components/jira_import_progress_spec.js

 import { GlEmptyState } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import JiraImportProgress from '~/jira_import/components/jira_import_progress.vue';
-
-const illustration = 'illustration.svg';
-const importProject = 'JIRAPROJECT';
-const issuesPath = 'gitlab-org/gitlab-test/-/issues';
+import { illustration, issuesPath } from '../mock_data';
 
 describe('JiraImportProgress', () => {
   let wrapper;
 
+  const importProject = 'JIRAPROJECT';
+
   const getGlEmptyStateProp = attribute => wrapper.find(GlEmptyState).props(attribute);
 
   const getParagraphText = () => wrapper.find('p').text();

spec/frontend/jira_import/components/jira_import_setup_spec.js

 import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import JiraImportSetup from '~/jira_import/components/jira_import_setup.vue';
-
-const illustration = 'illustration.svg';
-const jiraIntegrationPath = 'gitlab-org/gitlab-test/-/services/jira/edit';
+import { illustration, jiraIntegrationPath } from '../mock_data';
 
 describe('JiraImportSetup', () => {
   let wrapper;

spec/frontend/jira_import/mock_data.js

@@ -70,3 +70,56 @@ export const jiraImportMutationResponse = {
     __typename: 'JiraImportStartPayload',
   },
 };
+
+export const issuesPath = 'gitlab-org/gitlab-test/-/issues';
+
+export const jiraIntegrationPath = 'gitlab-org/gitlab-test/-/services/jira/edit';
+
+export const illustration = 'illustration.svg';
+
+export const jiraProjects = [
+  { text: 'My Jira Project (MJP)', value: 'MJP' },
+  { text: 'My Second Jira Project (MSJP)', value: 'MSJP' },
+  { text: 'Migrate to GitLab (MTG)', value: 'MTG' },
+];
+
+export const imports = [
+  {
+    jiraProjectKey: 'MTG',
+    scheduledAt: '2020-04-08T10:11:12+00:00',
+    scheduledBy: {
+      name: 'John Doe',
+    },
+  },
+  {
+    jiraProjectKey: 'MSJP',
+    scheduledAt: '2020-04-09T13:14:15+00:00',
+    scheduledBy: {
+      name: 'Jimmy Doe',
+    },
+  },
+  {
+    jiraProjectKey: 'MTG',
+    scheduledAt: '2020-04-09T16:17:18+00:00',
+    scheduledBy: {
+      name: 'Jane Doe',
+    },
+  },
+];
+
+export const userMappings = [
+  {
+    jiraAccountId: 'aei23f98f-q23fj98qfj',
+    jiraDisplayName: 'Jane Doe',
+    jiraEmail: 'janedoe@example.com',
+    gitlabId: 15,
+    gitlabUsername: 'janedoe',
+  },
+  {
+    jiraAccountId: 'fu39y8t34w-rq3u289t3h4i',
+    jiraDisplayName: 'Fred Chopin',
+    jiraEmail: 'fredchopin@example.com',
+    gitlabId: undefined,
+    gitlabUsername: undefined,
+  },
+];