Merge branch '208907-frontend-add-vue-app-foundation' into 'master'

Add Vue app foundation for Jira Import feature

See merge request gitlab-org/gitlab!28591

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

+<script>
+import getJiraProjects from '../queries/getJiraProjects.query.graphql';
+
+export default {
+  name: 'JiraImportApp',
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+  },
+  apollo: {
+    getJiraImports: {
+      query: getJiraProjects,
+      variables() {
+        return {
+          fullPath: this.projectPath,
+        };
+      },
+      update: data => data.project.jiraImports,
+    },
+  },
+};
+</script>
+
+<template>
+  <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 App from './components/jira_import_app.vue';
+
+Vue.use(VueApollo);
+
+const defaultClient = createDefaultClient();
+
+const apolloProvider = new VueApollo({
+  defaultClient,
+});
+
+export default function mountJiraImportApp() {
+  const el = document.querySelector('.js-jira-import-root');
+  if (!el) {
+    return false;
+  }
+
+  return new Vue({
+    el,
+    apolloProvider,
+    render(createComponent) {
+      return createComponent(App, {
+        props: {
+          projectPath: el.dataset.projectPath,
+        },
+      });
+    },
+  });
+}

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

+query getJiraProjects($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    jiraImportStatus
+    jiraImports {
+      nodes {
+        jiraProjectKey
+        scheduledAt
+        scheduledBy {
+          username
+        }
+      }
+    }
+  }
+}

app/assets/javascripts/pages/projects/import/jira/index.js

+import mountJiraImportApp from '~/jira_import';
+
+document.addEventListener('DOMContentLoaded', mountJiraImportApp);

app/controllers/projects/import/jira_controller.rb

@@ -7,6 +7,8 @@ module Projects
       before_action :jira_integration_configured?
 
       def show
+        return if Feature.enabled?(:jira_issue_import_vue, @project)
+
         unless @project.import_state&.in_progress?
           jira_client = @project.jira_service.client
           jira_projects = jira_client.Project.all

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

-- title = _('Jira Issue Import')
-- page_title title
-- breadcrumb_title title
-- header_title _("Projects"), root_path
+- if Feature.enabled?(:jira_issue_import_vue, @project)
+  .js-jira-import-root{ data: { project_path: @project.full_path } }
+- else
+  - title = _('Jira Issue Import')
+  - page_title title
+  - breadcrumb_title title
+  - header_title _("Projects"), root_path
 
-= render 'import/shared/errors'
+  = render 'import/shared/errors'
 
-- if @project.import_state&.in_progress?
-  %h3.page-title.d-flex.align-items-center
-    = sprite_icon('issues', size: 16, css_class: 'mr-1')
-    = _('Import in progress')
-- elsif @jira_projects.present?
-  %h3.page-title.d-flex.align-items-center
-    = sprite_icon('issues', size: 16, css_class: 'mr-1')
-    = _('Import issues from Jira')
+  - if @project.import_state&.in_progress?
+    %h3.page-title.d-flex.align-items-center
+      = sprite_icon('issues', size: 16, css_class: 'mr-1')
+      = _('Import in progress')
+  - elsif @jira_projects.present?
+    %h3.page-title.d-flex.align-items-center
+      = sprite_icon('issues', size: 16, css_class: 'mr-1')
+      = _('Import issues from Jira')
 
-  = form_tag import_project_import_jira_path(@project), method: :post do
-    .form-group.row
-      = label_tag :jira_project_key, _('From project'), class: 'col-form-label col-md-2'
-      .col-md-4
-        = select_tag :jira_project_key, options_for_select(@jira_projects, ''), { class: 'select2' }
-    .form-actions
-      = submit_tag _('Import issues'), class: 'btn btn-success'
-      = link_to _('Cancel'), project_issues_path(@project), class: 'btn btn-cancel'
+    = form_tag import_project_import_jira_path(@project), method: :post do
+      .form-group.row
+        = label_tag :jira_project_key, _('From project'), class: 'col-form-label col-md-2'
+        .col-md-4
+          = select_tag :jira_project_key, options_for_select(@jira_projects, ''), { class: 'select2' }
+      .form-actions
+        = submit_tag _('Import issues'), class: 'btn btn-success'
+        = link_to _('Cancel'), project_issues_path(@project), class: 'btn btn-cancel'

spec/controllers/projects/import/jira_controller_spec.rb

@@ -59,6 +59,7 @@ describe Projects::Import::JiraController do
     context 'when feature flag enabled' do
       before do
         stub_feature_flags(jira_issue_import: true)
+        stub_feature_flags(jira_issue_import_vue: false)
       end
 
       context 'when jira service is enabled for the project' do