Change Jira Importer to getting list of projects through GraphQL

Before, Jira Importer got the list of projects from the backend
through the HAML template. This commit changes this to get the list
of projects from GraphQL

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

@@ -4,7 +4,7 @@ import { last } from 'lodash';
 import { __ } from '~/locale';
 import getJiraImportDetailsQuery from '../queries/get_jira_import_details.query.graphql';
 import initiateJiraImportMutation from '../queries/initiate_jira_import.mutation.graphql';
-import { IMPORT_STATE, isInProgress } from '../utils';
+import { IMPORT_STATE, isInProgress, extractJiraProjectsOptions } from '../utils';
 import JiraImportForm from './jira_import_form.vue';
 import JiraImportProgress from './jira_import_progress.vue';
 import JiraImportSetup from './jira_import_setup.vue';
@@ -36,10 +36,6 @@ export default {
       type: String,
       required: true,
     },
-    jiraProjects: {
-      type: Array,
-      required: true,
-    },
     projectPath: {
       type: String,
       required: true,
@@ -51,6 +47,7 @@ export default {
   },
   data() {
     return {
+      jiraImportDetails: {},
       errorMessage: '',
       showAlert: false,
       selectedProject: undefined,
@@ -65,6 +62,7 @@ export default {
         };
       },
       update: ({ project }) => ({
+        projects: extractJiraProjectsOptions(project.services.nodes[0].projects.nodes),
         status: project.jiraImportStatus,
         imports: project.jiraImports.nodes,
       }),
@@ -75,17 +73,14 @@ export default {
   },
   computed: {
     isImportInProgress() {
-      return isInProgress(this.jiraImportDetails?.status);
-    },
-    jiraProjectsOptions() {
-      return this.jiraProjects.map(([text, value]) => ({ text, value }));
+      return isInProgress(this.jiraImportDetails.status);
     },
     mostRecentImport() {
       // The backend returns JiraImports ordered by created_at asc in app/models/project.rb
-      return last(this.jiraImportDetails?.imports);
+      return last(this.jiraImportDetails.imports);
     },
     numberOfPreviousImportsForProject() {
-      return this.jiraImportDetails?.imports?.reduce?.(
+      return this.jiraImportDetails.imports?.reduce?.(
         (acc, jiraProject) => (jiraProject.jiraProjectKey === this.selectedProject ? acc + 1 : acc),
         0,
       );
@@ -202,7 +197,7 @@ export default {
       v-model="selectedProject"
       :import-label="importLabel"
       :issues-path="issuesPath"
-      :jira-projects="jiraProjectsOptions"
+      :jira-projects="jiraImportDetails.projects"
       @initiateJiraImport="initiateJiraImport"
     />
   </div>

app/assets/javascripts/jira_import/index.js

@@ -28,7 +28,6 @@ export default function mountJiraImportApp() {
           isJiraConfigured: parseBoolean(el.dataset.isJiraConfigured),
           issuesPath: el.dataset.issuesPath,
           jiraIntegrationPath: el.dataset.jiraIntegrationPath,
-          jiraProjects: el.dataset.jiraProjects ? JSON.parse(el.dataset.jiraProjects) : [],
           projectPath: el.dataset.projectPath,
           setupIllustration: el.dataset.setupIllustration,
         },

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

@@ -8,5 +8,17 @@ query($fullPath: ID!) {
         ...JiraImport
       }
     }
+    services(active: true, type: JIRA_SERVICE) {
+      nodes {
+        ... on JiraService {
+          projects {
+            nodes {
+              key
+              name
+            }
+          }
+        }
+      }
+    }
   }
 }

app/assets/javascripts/jira_import/utils.js

@@ -13,6 +13,17 @@ export const isInProgress = state =>
 
 export const isFinished = state => state === IMPORT_STATE.FINISHED;
 
+/**
+ * Converts the list of Jira projects into a format consumable by GlFormSelect.
+ *
+ * @param {Object[]} projects - List of Jira projects
+ * @param {string} projects[].key - Jira project key
+ * @param {string} projects[].name - Jira project name
+ * @returns {Object[]} - List of Jira projects in a format consumable by GlFormSelect
+ */
+export const extractJiraProjectsOptions = projects =>
+  projects.map(({ key, name }) => ({ text: `${name} (${key})`, value: key }));
+
 /**
  * Calculates the label title for the most recent Jira import.
  *

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

@@ -3,7 +3,6 @@
     issues_path: project_issues_path(@project),
     jira_integration_path: edit_project_service_path(@project, :jira),
     is_jira_configured: @project.jira_service.present?.to_s,
-    jira_projects: @jira_projects.to_json,
     in_progress_illustration: image_path('illustrations/export-import.svg'),
     setup_illustration: image_path('illustrations/manual_action.svg') } }
 - else

spec/frontend/jira_import/components/jira_import_app_spec.js

@@ -25,11 +25,6 @@ const mountComponent = ({
       isJiraConfigured,
       inProgressIllustration: 'in-progress-illustration.svg',
       issuesPath: 'gitlab-org/gitlab-test/-/issues',
-      jiraProjects: [
-        ['My Jira Project', 'MJP'],
-        ['My Second Jira Project', 'MSJP'],
-        ['Migrate to GitLab', 'MTG'],
-      ],
       jiraIntegrationPath: 'gitlab-org/gitlab-test/-/services/jira/edit',
       projectPath: 'gitlab-org/gitlab-test',
       setupIllustration: 'setup-illustration.svg',
@@ -40,6 +35,11 @@ const mountComponent = ({
         showAlert,
         selectedProject,
         jiraImportDetails: {
+          projects: [
+            { text: 'My Jira Project (MJP)', value: 'MJP' },
+            { text: 'My Second Jira Project (MSJP)', value: 'MSJP' },
+            { text: 'Migrate to GitLab (MTG)', value: 'MTG' },
+          ],
           status,
           imports: [
             {

spec/frontend/jira_import/utils_spec.js

 import {
   calculateJiraImportLabel,
+  extractJiraProjectsOptions,
   IMPORT_STATE,
   isFinished,
   isInProgress,
@@ -33,6 +34,34 @@ describe('isFinished', () => {
   });
 });
 
+describe('extractJiraProjectsOptions', () => {
+  const jiraProjects = [
+    {
+      key: 'MJP',
+      name: 'My Jira project',
+    },
+    {
+      key: 'MTG',
+      name: 'Migrate to GitLab',
+    },
+  ];
+
+  const expected = [
+    {
+      text: 'My Jira project (MJP)',
+      value: 'MJP',
+    },
+    {
+      text: 'Migrate to GitLab (MTG)',
+      value: 'MTG',
+    },
+  ];
+
+  it('returns a list of Jira projects in a format suitable for GlFormSelect', () => {
+    expect(extractJiraProjectsOptions(jiraProjects)).toEqual(expected);
+  });
+});
+
 describe('calculateJiraImportLabel', () => {
   const jiraImports = [
     { jiraProjectKey: 'MTG' },