1 files changed, 32 insertions, 20 deletions

diff --git a/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue b/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue
index 49a89d15c35..cc90d23eda7 100644
--- a/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue
+++ b/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue
@@ -1,10 +1,13 @@
 <script>
 import { GlAlert, GlLabel } from '@gitlab/ui';
+import { last } from 'lodash';
+import { n__ } from '~/locale';
 import getIssuesListDetailsQuery from '../queries/get_issues_list_details.query.graphql';
 import {
   calculateJiraImportLabel,
-  isFinished,
   isInProgress,
+  setFinishedAlertHideMap,
+  shouldShowFinishedAlert,
 } from '~/jira_import/utils/jira_import_utils';
 
 export default {
@@ -33,8 +36,6 @@ export default {
   },
   data() {
     return {
-      isFinishedAlertShowing: true,
-      isInProgressAlertShowing: true,
       jiraImport: {},
     };
   },
@@ -46,36 +47,42 @@ export default {
           fullPath: this.projectPath,
         };
       },
-      update: ({ project }) => ({
-        isInProgress: isInProgress(project.jiraImportStatus),
-        isFinished: isFinished(project.jiraImportStatus),
-        label: calculateJiraImportLabel(
+      update: ({ project }) => {
+        const label = calculateJiraImportLabel(
           project.jiraImports.nodes,
           project.issues.nodes.flatMap(({ labels }) => labels.nodes),
-        ),
-      }),
+        );
+        return {
+          importedIssuesCount: last(project.jiraImports.nodes)?.importedIssuesCount,
+          label,
+          shouldShowFinishedAlert: shouldShowFinishedAlert(label.title, project.jiraImportStatus),
+          shouldShowInProgressAlert: isInProgress(project.jiraImportStatus),
+        };
+      },
       skip() {
         return !this.isJiraConfigured || !this.canEdit;
       },
     },
   },
   computed: {
+    finishedMessage() {
+      return n__(
+        '%d issue successfully imported with the label',
+        '%d issues successfully imported with the label',
+        this.jiraImport.importedIssuesCount,
+      );
+    },
     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: {
     hideFinishedAlert() {
-      this.isFinishedAlertShowing = false;
+      setFinishedAlertHideMap(this.jiraImport.label.title);
+      this.jiraImport.shouldShowFinishedAlert = false;
     },
     hideInProgressAlert() {
-      this.isInProgressAlertShowing = false;
+      this.jiraImport.shouldShowInProgressAlert = false;
     },
   },
 };
@@ -83,11 +90,16 @@ export default {
 
 <template>
   <div class="issuable-list-root">
-    <gl-alert v-if="shouldShowInProgressAlert" @dismiss="hideInProgressAlert">
+    <gl-alert v-if="jiraImport.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-alert
+      v-if="jiraImport.shouldShowFinishedAlert"
+      variant="success"
+      @dismiss="hideFinishedAlert"
+    >
+      {{ finishedMessage }}
       <gl-label
         :background-color="jiraImport.label.color"
         scoped