Add alert on issues page to show Jira import has finished

Show Jira import has finished to give the user indication
of the state of the import

app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue

 <script>
-import { GlAlert } from '@gitlab/ui';
-import getJiraImportDetailsQuery from '~/jira_import/queries/get_jira_import_details.query.graphql';
-import { isInProgress } from '~/jira_import/utils';
+import { GlAlert, GlLabel } from '@gitlab/ui';
+import getIssuesListDetailsQuery from '../queries/get_issues_list_details.query.graphql';
+import { calculateJiraImportLabel, isFinished, isInProgress } from '~/jira_import/utils';
 
 export default {
   name: 'IssuableListRoot',
   components: {
     GlAlert,
+    GlLabel,
   },
   props: {
     canEdit: {
@@ -17,6 +18,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    issuesPath: {
+      type: String,
+      required: true,
+    },
     projectPath: {
       type: String,
       required: true,
@@ -24,12 +29,14 @@ export default {
   },
   data() {
     return {
-      isAlertShowing: true,
+      isFinishedAlertShowing: true,
+      isInProgressAlertShowing: true,
+      jiraImport: {},
     };
   },
   apollo: {
     jiraImport: {
-      query: getJiraImportDetailsQuery,
+      query: getIssuesListDetailsQuery,
       variables() {
         return {
           fullPath: this.projectPath,
@@ -37,6 +44,11 @@ export default {
       },
       update: ({ project }) => ({
         isInProgress: isInProgress(project.jiraImportStatus),
+        isFinished: isFinished(project.jiraImportStatus),
+        label: calculateJiraImportLabel(
+          project.jiraImports.nodes,
+          project.issues.nodes.flatMap(({ labels }) => labels.nodes),
+        ),
       }),
       skip() {
         return !this.isJiraConfigured || !this.canEdit;
@@ -44,20 +56,41 @@ export default {
     },
   },
   computed: {
-    shouldShowAlert() {
-      return this.isAlertShowing && this.jiraImport?.isInProgress;
+    labelTarget() {
+      return `${this.issuesPath}?label_name[]=${encodeURIComponent(this.jiraImport.label.title)}`;
+    },
+    shouldShowFinishedAlert() {
+      return this.isFinishedAlertShowing && this.jiraImport.isFinished;
+    },
+    shouldShowInProgressAlert() {
+      return this.isInProgressAlertShowing && this.jiraImport.isInProgress;
     },
   },
   methods: {
-    hideAlert() {
-      this.isAlertShowing = false;
+    hideFinishedAlert() {
+      this.isFinishedAlertShowing = false;
+    },
+    hideInProgressAlert() {
+      this.isInProgressAlertShowing = false;
     },
   },
 };
 </script>
 
 <template>
-  <gl-alert v-if="shouldShowAlert" @dismiss="hideAlert">
+  <div class="issuable-list-root">
+    <gl-alert v-if="shouldShowInProgressAlert" @dismiss="hideInProgressAlert">
       {{ __('Import in progress. Refresh page to see newly added issues.') }}
     </gl-alert>
+    <gl-alert v-if="shouldShowFinishedAlert" variant="success" @dismiss="hideFinishedAlert">
+      {{ __('Issues successfully imported with the label') }}
+      <gl-label
+        :background-color="jiraImport.label.color"
+        scoped
+        size="sm"
+        :target="labelTarget"
+        :title="jiraImport.label.title"
+      />
+    </gl-alert>
+  </div>
 </template>

app/assets/javascripts/issuables_list/index.js

@@ -27,6 +27,7 @@ function mountIssuableListRootApp() {
         props: {
           canEdit: parseBoolean(el.dataset.canEdit),
           isJiraConfigured: parseBoolean(el.dataset.isJiraConfigured),
+          issuesPath: el.dataset.issuesPath,
           projectPath: el.dataset.projectPath,
         },
       });

app/assets/javascripts/issuables_list/queries/get_issues_list_details.query.graphql

+#import "~/jira_import/queries/jira_import.fragment.graphql"
+
+query($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    issues {
+      nodes {
+        labels {
+          nodes {
+            title
+            color
+          }
+        }
+      }
+    }
+    jiraImportStatus
+    jiraImports {
+      nodes {
+        ...JiraImport
+      }
+    }
+  }
+}

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

 <script>
 import { GlAlert, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
-import last from 'lodash/last';
+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';

app/assets/javascripts/jira_import/utils.js

+import { last } from 'lodash';
+
 export const IMPORT_STATE = {
   FAILED: 'failed',
   FINISHED: 'finished',
@@ -8,3 +10,50 @@ export const IMPORT_STATE = {
 
 export const isInProgress = state =>
   state === IMPORT_STATE.SCHEDULED || state === IMPORT_STATE.STARTED;
+
+export const isFinished = state => state === IMPORT_STATE.FINISHED;
+
+/**
+ * Calculates the label title for the most recent Jira import.
+ *
+ * @param {Object[]} jiraImports - List of Jira imports
+ * @param {string} jiraImports[].jiraProjectKey - Jira project key
+ * @returns {string} - A label title
+ */
+const calculateJiraImportLabelTitle = jiraImports => {
+  const mostRecentJiraProjectKey = last(jiraImports)?.jiraProjectKey;
+  const jiraProjectImportCount = jiraImports.filter(
+    jiraImport => jiraImport.jiraProjectKey === mostRecentJiraProjectKey,
+  ).length;
+  return `jira-import::${mostRecentJiraProjectKey}-${jiraProjectImportCount}`;
+};
+
+/**
+ * Finds the label color from a list of labels.
+ *
+ * @param {string} labelTitle - Label title
+ * @param {Object[]} labels - List of labels
+ * @param {string} labels[].title - Label title
+ * @param {string} labels[].color - Label color
+ * @returns {string} - The label color associated with the given labelTitle
+ */
+const calculateJiraImportLabelColor = (labelTitle, labels) =>
+  labels.find(label => label.title === labelTitle)?.color;
+
+/**
+ * Calculates the label for the most recent Jira import.
+ *
+ * @param {Object[]} jiraImports - List of Jira imports
+ * @param {string} jiraImports[].jiraProjectKey - Jira project key
+ * @param {Object[]} labels - List of labels
+ * @param {string} labels[].title - Label title
+ * @param {string} labels[].color - Label color
+ * @returns {{color: string, title: string}} - A label object containing a label color and title
+ */
+export const calculateJiraImportLabel = (jiraImports, labels) => {
+  const title = calculateJiraImportLabelTitle(jiraImports);
+  return {
+    color: calculateJiraImportLabelColor(title, labels),
+    title,
+  };
+};

app/assets/stylesheets/pages/issues.scss

@@ -303,3 +303,13 @@ ul.related-merge-requests > li {
     }
   }
 }
+
+.issuable-list-root {
+  .gl-label-link {
+    text-decoration: none;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}

app/views/projects/issues/index.html.haml

@@ -9,6 +9,7 @@
 - if @project.jira_issues_import_feature_flag_enabled?
   .js-projects-issues-root{ data: { can_edit: can?(current_user, :admin_project, @project).to_s,
     is_jira_configured: @project.jira_service.present?.to_s,
+    issues_path: project_issues_path(@project),
     project_path: @project.full_path } }
 
 - if project_issues(@project).exists?

changelogs/unreleased/215542-add-jira-import-finished-alert.yml

+---
+title: Add alert on project issues page to show Jira import has finished
+merge_request: 31375
+author:
+type: added

locale/gitlab.pot

@@ -12026,6 +12026,9 @@ msgstr ""
 msgid "Issues referenced by merge requests and commits within the default branch will be closed automatically"
 msgstr ""
 
+msgid "Issues successfully imported with the label"
+msgstr ""
+
 msgid "Issues with comments, merge requests with diffs and comments, labels, milestones, snippets, and other project entities"
 msgstr ""
 

spec/frontend/issuables_list/components/issuable_list_root_app_spec.js

-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlLabel } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import IssuableListRootApp from '~/issuables_list/components/issuable_list_root_app.vue';
 
-const mountComponent = ({
-  canEdit = true,
-  isAlertShowing = true,
+describe('IssuableListRootApp', () => {
+  const issuesPath = 'gitlab-org/gitlab-test/-/issues';
+  const label = {
+    color: '#333',
+    title: 'jira-import::MTG-3',
+  };
+  let wrapper;
+
+  const findAlert = () => wrapper.find(GlAlert);
+
+  const findAlertLabel = () => wrapper.find(GlAlert).find(GlLabel);
+
+  const mountComponent = ({
+    isFinishedAlertShowing = false,
+    isInProgressAlertShowing = false,
     isInProgress = false,
-  isJiraConfigured = true,
-} = {}) =>
+    isFinished = false,
+  } = {}) =>
     shallowMount(IssuableListRootApp, {
       propsData: {
-      canEdit,
-      isJiraConfigured,
+        canEdit: true,
+        isJiraConfigured: true,
+        issuesPath,
         projectPath: 'gitlab-org/gitlab-test',
       },
       data() {
         return {
-        isAlertShowing,
+          isFinishedAlertShowing,
+          isInProgressAlertShowing,
           jiraImport: {
             isInProgress,
+            isFinished,
+            label,
           },
         };
       },
     });
 
-describe('IssuableListRootApp', () => {
-  let wrapper;
-
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
+  describe('when Jira import is not in progress', () => {
+    it('does not show an alert', () => {
+      wrapper = mountComponent();
+
+      expect(wrapper.contains(GlAlert)).toBe(false);
+    });
+  });
+
   describe('when Jira import is in progress', () => {
     it('shows an alert that tells the user a Jira import is in progress', () => {
       wrapper = mountComponent({
+        isInProgressAlertShowing: true,
         isInProgress: true,
       });
 
-      expect(wrapper.find(GlAlert).text()).toBe(
+      expect(findAlert().text()).toBe(
         'Import in progress. Refresh page to see newly added issues.',
       );
     });
   });
 
-  describe('when Jira import is not in progress', () => {
-    it('does not show an alert', () => {
-      wrapper = mountComponent();
+  describe('when Jira import has finished', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({
+        isFinishedAlertShowing: true,
+        isFinished: true,
+      });
+    });
 
-      expect(wrapper.contains(GlAlert)).toBe(false);
+    describe('shows an alert', () => {
+      it('tells the user the Jira import has finished', () => {
+        expect(findAlert().text()).toBe('Issues successfully imported with the label');
+      });
+
+      it('contains the label title associated with the Jira import', () => {
+        const alertLabelTitle = findAlertLabel().props('title');
+
+        expect(alertLabelTitle).toBe(label.title);
+      });
+
+      it('contains the correct label color', () => {
+        const alertLabelTitle = findAlertLabel().props('backgroundColor');
+
+        expect(alertLabelTitle).toBe(label.color);
+      });
+
+      it('contains a link within the label', () => {
+        const alertLabelTarget = findAlertLabel().props('target');
+
+        expect(alertLabelTarget).toBe(
+          `${issuesPath}?label_name[]=${encodeURIComponent(label.title)}`,
+        );
+      });
     });
   });
 
   describe('alert message', () => {
     it('is hidden when dismissed', () => {
       wrapper = mountComponent({
+        isInProgressAlertShowing: true,
         isInProgress: true,
       });
 
       expect(wrapper.contains(GlAlert)).toBe(true);
 
-      wrapper.find(GlAlert).vm.$emit('dismiss');
+      findAlert().vm.$emit('dismiss');
 
       return Vue.nextTick(() => {
         expect(wrapper.contains(GlAlert)).toBe(false);

spec/frontend/jira_import/utils_spec.js

-import { IMPORT_STATE, isInProgress } from '~/jira_import/utils';
+import {
+  calculateJiraImportLabel,
+  IMPORT_STATE,
+  isFinished,
+  isInProgress,
+} from '~/jira_import/utils';
 
 describe('isInProgress', () => {
-  it('returns true when state is IMPORT_STATE.SCHEDULED', () => {
-    expect(isInProgress(IMPORT_STATE.SCHEDULED)).toBe(true);
+  it.each`
+    state                     | result
+    ${IMPORT_STATE.SCHEDULED} | ${true}
+    ${IMPORT_STATE.STARTED}   | ${true}
+    ${IMPORT_STATE.FAILED}    | ${false}
+    ${IMPORT_STATE.FINISHED}  | ${false}
+    ${IMPORT_STATE.NONE}      | ${false}
+    ${undefined}              | ${false}
+  `('returns $result when state is $state', ({ state, result }) => {
+    expect(isInProgress(state)).toBe(result);
   });
+});
 
-  it('returns true when state is IMPORT_STATE.STARTED', () => {
-    expect(isInProgress(IMPORT_STATE.STARTED)).toBe(true);
+describe('isFinished', () => {
+  it.each`
+    state                     | result
+    ${IMPORT_STATE.SCHEDULED} | ${false}
+    ${IMPORT_STATE.STARTED}   | ${false}
+    ${IMPORT_STATE.FAILED}    | ${false}
+    ${IMPORT_STATE.FINISHED}  | ${true}
+    ${IMPORT_STATE.NONE}      | ${false}
+    ${undefined}              | ${false}
+  `('returns $result when state is $state', ({ state, result }) => {
+    expect(isFinished(state)).toBe(result);
   });
+});
 
-  it('returns false when state is IMPORT_STATE.FAILED', () => {
-    expect(isInProgress(IMPORT_STATE.FAILED)).toBe(false);
-  });
+describe('calculateJiraImportLabel', () => {
+  const jiraImports = [
+    { jiraProjectKey: 'MTG' },
+    { jiraProjectKey: 'MJP' },
+    { jiraProjectKey: 'MTG' },
+    { jiraProjectKey: 'MSJP' },
+    { jiraProjectKey: 'MTG' },
+  ];
 
-  it('returns false when state is IMPORT_STATE.FINISHED', () => {
-    expect(isInProgress(IMPORT_STATE.FINISHED)).toBe(false);
-  });
+  const labels = [
+    { color: '#111', title: 'jira-import::MTG-1' },
+    { color: '#222', title: 'jira-import::MTG-2' },
+    { color: '#333', title: 'jira-import::MTG-3' },
+  ];
+
+  it('returns a label with the Jira project key and correct import count in the title', () => {
+    const label = calculateJiraImportLabel(jiraImports, labels);
 
-  it('returns false when state is IMPORT_STATE.NONE', () => {
-    expect(isInProgress(IMPORT_STATE.NONE)).toBe(false);
+    expect(label.title).toBe('jira-import::MTG-3');
   });
 
-  it('returns false when state is undefined', () => {
-    expect(isInProgress()).toBe(false);
+  it('returns a label with the correct color', () => {
+    const label = calculateJiraImportLabel(jiraImports, labels);
+
+    expect(label.color).toBe('#333');
   });
 });