Merge branch...

Merge branch '215545-change-jira-importer-vue-app-to-use-api-instead-of-controller-show-for-list-of-jira-projects' into 'master'

Change Jira importer Vue app to use API instead of controller#show for list of Jira projects

See merge request gitlab-org/gitlab!33034

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' },