Add Jira Import form

Added a Jira Import form with just a UI with no functionality

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

 <script>
 import getJiraProjects from '../queries/getJiraProjects.query.graphql';
+import JiraImportForm from './jira_import_form.vue';
 import JiraImportSetup from './jira_import_setup.vue';
 
 export default {
   name: 'JiraImportApp',
   components: {
+    JiraImportForm,
     JiraImportSetup,
   },
   props: {
@@ -41,6 +43,6 @@ export default {
 <template>
   <div>
     <jira-import-setup v-if="!isJiraConfigured" :illustration="setupIllustration" />
-    <div v-else></div>
+    <jira-import-form v-else />
   </div>
 </template>

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

+<script>
+import { GlAvatar, GlNewButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui';
+
+export default {
+  name: 'JiraImportForm',
+  components: {
+    GlAvatar,
+    GlNewButton,
+    GlFormGroup,
+    GlFormSelect,
+    GlLabel,
+  },
+  currentUserAvatarUrl: gon.current_user_avatar_url,
+  currentUsername: gon.current_username,
+};
+</script>
+
+<template>
+  <div>
+    <h3 class="page-title">{{ __('New Jira import') }}</h3>
+    <hr />
+    <form>
+      <gl-form-group
+        class="row align-items-center"
+        :label="__('Import from')"
+        label-cols-sm="2"
+        label-for="jira-project-select"
+      >
+        <gl-form-select id="jira-project-select" class="mb-2" />
+      </gl-form-group>
+
+      <gl-form-group
+        class="row align-items-center"
+        :label="__('Issue label')"
+        label-cols-sm="2"
+        label-for="jira-project-label"
+      >
+        <gl-label
+          id="jira-project-label"
+          class="mb-2"
+          background-color="#428BCA"
+          title="jira-import::KEY-1"
+          scoped
+        />
+      </gl-form-group>
+
+      <hr />
+
+      <p class="offset-md-1">
+        {{
+          __(
+            "For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:",
+          )
+        }}
+      </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-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"
+      >
+        <p id="jira-project-description" class="mb-2">{{ __('jira.issue.description.content') }}</p>
+      </gl-form-group>
+
+      <div class="footer-block row-content-block d-flex justify-content-between">
+        <gl-new-button category="primary" variant="success">{{ __('Next') }}</gl-new-button>
+        <gl-new-button>{{ __('Cancel') }}</gl-new-button>
+      </div>
+    </form>
+  </div>
+</template>

locale/gitlab.pot

@@ -9171,6 +9171,9 @@ 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 ""
 
@@ -10900,6 +10903,9 @@ msgstr ""
 msgid "Import an exported GitLab project"
 msgstr ""
 
+msgid "Import from"
+msgstr ""
+
 msgid "Import from Jira"
 msgstr ""
 
@@ -11307,6 +11313,9 @@ msgstr ""
 msgid "Issue first depoloyed to production"
 msgstr ""
 
+msgid "Issue label"
+msgstr ""
+
 msgid "Issue or Merge Request ID is required"
 msgstr ""
 
@@ -13314,6 +13323,9 @@ msgid_plural "New Issues"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "New Jira import"
+msgstr ""
+
 msgid "New Label"
 msgstr ""
 
@@ -17007,6 +17019,9 @@ msgstr ""
 msgid "Reported %{timeAgo} by %{reportedBy}"
 msgstr ""
 
+msgid "Reporter"
+msgstr ""
+
 msgid "Reporting"
 msgstr ""
 
@@ -24494,6 +24509,12 @@ 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/jira_import_form_spec.js

+import { GlAvatar, GlNewButton, GlFormSelect, GlLabel } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
+
+describe('JiraImportForm', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(JiraImportForm);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('shows a dropdown to choose the Jira project to import from', () => {
+    expect(wrapper.find(GlFormSelect).exists()).toBe(true);
+  });
+
+  it('shows a label which will be applied to imported Jira projects', () => {
+    expect(wrapper.find(GlLabel).attributes('title')).toBe('jira-import::KEY-1');
+  });
+
+  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:",
+    );
+  });
+
+  it('shows jira.issue.summary for the Title', () => {
+    expect(wrapper.find('[id="jira-project-title"]').text()).toBe('jira.issue.summary');
+  });
+
+  it('shows an avatar for the Reporter', () => {
+    expect(wrapper.find(GlAvatar).exists()).toBe(true);
+  });
+
+  it('shows jira.issue.description.content for the Description', () => {
+    expect(wrapper.find('[id="jira-project-description"]').text()).toBe(
+      'jira.issue.description.content',
+    );
+  });
+
+  it('shows a Next button', () => {
+    const nextButton = wrapper
+      .findAll(GlNewButton)
+      .at(0)
+      .text();
+
+    expect(nextButton).toBe('Next');
+  });
+
+  it('shows a Cancel button', () => {
+    const cancelButton = wrapper
+      .findAll(GlNewButton)
+      .at(1)
+      .text();
+
+    expect(cancelButton).toBe('Cancel');
+  });
+});