Add "Set Up Jira Integration" page

If Jira integration is not set up for Jira Import,
show a message to the user to direct them to the
Jira integration page

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

 <script>
 import getJiraProjects from '../queries/getJiraProjects.query.graphql';
+import JiraImportSetup from './jira_import_setup.vue';
 
 export default {
   name: 'JiraImportApp',
+  components: {
+    JiraImportSetup,
+  },
   props: {
+    isJiraConfigured: {
+      type: Boolean,
+      required: true,
+    },
     projectPath: {
       type: String,
       required: true,
     },
+    setupIllustration: {
+      type: String,
+      required: true,
+    },
   },
   apollo: {
     getJiraImports: {
@@ -18,11 +30,17 @@ export default {
         };
       },
       update: data => data.project.jiraImports,
+      skip() {
+        return !this.isJiraConfigured;
+      },
     },
   },
 };
 </script>
 
 <template>
-  <div></div>
+  <div>
+    <jira-import-setup v-if="!isJiraConfigured" :illustration="setupIllustration" />
+    <div v-else></div>
+  </div>
 </template>

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

+<script>
+export default {
+  name: 'JiraImportSetup',
+  props: {
+    illustration: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="empty-state">
+    <div class="svg-content">
+      <img :src="illustration" :alt="__('Set up Jira Integration illustration')" />
+    </div>
+    <div class="text-content d-flex flex-column align-items-center">
+      <p>{{ __('You will first need to set up Jira Integration to use this feature.') }}</p>
+      <a class="btn btn-success" href="../services/jira/edit">
+        {{ __('Set up Jira Integration') }}
+      </a>
+    </div>
+  </div>
+</template>

app/assets/javascripts/jira_import/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import App from './components/jira_import_app.vue';
 
 Vue.use(VueApollo);
@@ -23,7 +24,9 @@ export default function mountJiraImportApp() {
     render(createComponent) {
       return createComponent(App, {
         props: {
+          isJiraConfigured: parseBoolean(el.dataset.isJiraConfigured),
           projectPath: el.dataset.projectPath,
+          setupIllustration: el.dataset.setupIllustration,
         },
       });
     },

app/controllers/projects/import/jira_controller.rb

@@ -7,6 +7,7 @@ module Projects
       before_action :jira_integration_configured?
 
       def show
+        @is_jira_configured = @project.jira_service.present?
         return if Feature.enabled?(:jira_issue_import_vue, @project)
 
         unless @project.latest_jira_import&.in_progress?
@@ -45,6 +46,7 @@ module Projects
       end
 
       def jira_integration_configured?
+        return if Feature.enabled?(:jira_issue_import_vue, @project)
         return if @project.jira_service
 
         flash[:notice] = _("Configure the Jira integration first on your project's %{strong_start} Settings > Integrations > Jira%{strong_end} page." %

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

 - if Feature.enabled?(:jira_issue_import_vue, @project)
-  .js-jira-import-root{ data: { project_path: @project.full_path } }
+  .js-jira-import-root{ data: { project_path: @project.full_path,
+    is_jira_configured: @is_jira_configured.to_s,
+    setup_illustration: image_path('illustrations/manual_action.svg') } }
 - else
   - title = _('Jira Issue Import')
   - page_title title

locale/gitlab.pot

@@ -18324,6 +18324,12 @@ msgstr ""
 msgid "Set up CI/CD"
 msgstr ""
 
+msgid "Set up Jira Integration"
+msgstr ""
+
+msgid "Set up Jira Integration illustration"
+msgstr ""
+
 msgid "Set up a %{type} Runner automatically"
 msgstr ""
 
@@ -23583,6 +23589,9 @@ msgstr ""
 msgid "You will be removed from existing projects/groups"
 msgstr ""
 
+msgid "You will first need to set up Jira Integration to use this feature."
+msgstr ""
+
 msgid "You will lose all changes you've made to this file. This action cannot be undone."
 msgstr ""
 

spec/frontend/jira_import/components/jira_import_app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import JiraImportApp from '~/jira_import/components/jira_import_app.vue';
+import JiraImportSetup from '~/jira_import/components/jira_import_setup.vue';
+
+describe('JiraImportApp', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('set up Jira integration page', () => {
+    it('is shown when Jira integration is not configured', () => {
+      wrapper = shallowMount(JiraImportApp, {
+        propsData: {
+          isJiraConfigured: false,
+          projectPath: 'gitlab-org/gitlab-test',
+          setupIllustration: 'illustration.svg',
+        },
+      });
+
+      expect(wrapper.find(JiraImportSetup).exists()).toBe(true);
+    });
+
+    it('is not shown when Jira integration is configured', () => {
+      wrapper = shallowMount(JiraImportApp, {
+        propsData: {
+          isJiraConfigured: true,
+          projectPath: 'gitlab-org/gitlab-test',
+          setupIllustration: 'illustration.svg',
+        },
+      });
+
+      expect(wrapper.find(JiraImportSetup).exists()).toBe(false);
+    });
+  });
+});

spec/frontend/jira_import/components/jira_import_setup_spec.js

+import { shallowMount } from '@vue/test-utils';
+import JiraImportSetup from '~/jira_import/components/jira_import_setup.vue';
+
+describe('JiraImportSetup', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(JiraImportSetup, {
+      propsData: {
+        illustration: 'illustration.svg',
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('displays a message to the user', () => {
+    const message = 'You will first need to set up Jira Integration to use this feature.';
+    expect(wrapper.find('p').text()).toBe(message);
+  });
+
+  it('contains button to set up Jira integration', () => {
+    expect(wrapper.find('a').text()).toBe('Set up Jira Integration');
+  });
+});