Permanently close Jira import success alert

The success alert always showed after refresh even after the user
closed the alert.

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

@@ -5,8 +5,9 @@ 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 {
@@ -35,8 +36,6 @@ export default {
   },
   data() {
     return {
-      isFinishedAlertShowing: true,
-      isInProgressAlertShowing: true,
       jiraImport: {},
     };
   },
@@ -48,15 +47,18 @@ export default {
           fullPath: this.projectPath,
         };
       },
-      update: ({ project }) => ({
-        importedIssuesCount: last(project.jiraImports.nodes)?.importedIssuesCount,
-        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;
       },
@@ -73,19 +75,14 @@ export default {
     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;
     },
   },
 };
@@ -93,10 +90,15 @@ 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">
+
+    <gl-alert
+      v-if="jiraImport.shouldShowFinishedAlert"
+      variant="success"
+      @dismiss="hideFinishedAlert"
+    >
       {{ finishedMessage }}
       <gl-label
         :background-color="jiraImport.label.color"

app/assets/javascripts/issuables_list/constants.js

@@ -52,3 +52,5 @@ export const availableSortOptionsJira = [
     },
   },
 ];
+
+export const JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY = 'jira-import-success-alert-hide-map';

app/assets/javascripts/jira_import/utils/jira_import_utils.js

 import { last } from 'lodash';
+import { JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY } from '~/issuables_list/constants';
 
 export const IMPORT_STATE = {
   FAILED: 'failed',
@@ -68,3 +69,36 @@ export const calculateJiraImportLabel = (jiraImports, labels) => {
     title,
   };
 };
+
+/**
+ * Calculates whether the Jira import success alert should be shown.
+ *
+ * @param {string} labelTitle - Jira import label, for checking localStorage
+ * @param {string} importStatus - Jira import status
+ * @returns {boolean} - A boolean indicating whether to show the success alert
+ */
+export const shouldShowFinishedAlert = (labelTitle, importStatus) => {
+  const finishedAlertHideMap =
+    JSON.parse(localStorage.getItem(JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY)) || {};
+
+  const shouldHide = finishedAlertHideMap[labelTitle];
+
+  return !shouldHide && isFinished(importStatus);
+};
+
+/**
+ * Updates the localStorage map to permanently hide the Jira import success alert
+ *
+ * @param {string} labelTitle - Jira import label, for checking localStorage
+ */
+export const setFinishedAlertHideMap = labelTitle => {
+  const finishedAlertHideMap =
+    JSON.parse(localStorage.getItem(JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY)) || {};
+
+  finishedAlertHideMap[labelTitle] = true;
+
+  localStorage.setItem(
+    JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY,
+    JSON.stringify(finishedAlertHideMap),
+  );
+};

changelogs/unreleased/227351-impossible-to-permanently-close-jira-import-success-alert.yml

+---
+title: Permanently close Jira import success alert
+merge_request: 36571
+author:
+type: fixed

spec/frontend/issuables_list/components/issuable_list_root_app_spec.js

@@ -16,10 +16,8 @@ describe('IssuableListRootApp', () => {
   const findAlertLabel = () => wrapper.find(GlAlert).find(GlLabel);
 
   const mountComponent = ({
-    isFinishedAlertShowing = false,
-    isInProgressAlertShowing = false,
-    isInProgress = false,
-    isFinished = false,
+    shouldShowFinishedAlert = false,
+    shouldShowInProgressAlert = false,
   } = {}) =>
     shallowMount(IssuableListRootApp, {
       propsData: {
@@ -30,13 +28,11 @@ describe('IssuableListRootApp', () => {
       },
       data() {
         return {
-          isFinishedAlertShowing,
-          isInProgressAlertShowing,
           jiraImport: {
             importedIssuesCount: 1,
-            isInProgress,
-            isFinished,
             label,
+            shouldShowFinishedAlert,
+            shouldShowInProgressAlert,
           },
         };
       },
@@ -58,8 +54,7 @@ describe('IssuableListRootApp', () => {
   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,
+        shouldShowInProgressAlert: true,
       });
 
       expect(findAlert().text()).toBe(
@@ -71,8 +66,7 @@ describe('IssuableListRootApp', () => {
   describe('when Jira import has finished', () => {
     beforeEach(() => {
       wrapper = mountComponent({
-        isFinishedAlertShowing: true,
-        isFinished: true,
+        shouldShowFinishedAlert: true,
       });
     });
 
@@ -106,8 +100,7 @@ describe('IssuableListRootApp', () => {
   describe('alert message', () => {
     it('is hidden when dismissed', () => {
       wrapper = mountComponent({
-        isInProgressAlertShowing: true,
-        isInProgress: true,
+        shouldShowInProgressAlert: true,
       });
 
       expect(wrapper.contains(GlAlert)).toBe(true);

spec/frontend/jira_import/utils/jira_import_utils_spec.js

+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import {
   calculateJiraImportLabel,
   extractJiraProjectsOptions,
   IMPORT_STATE,
   isFinished,
   isInProgress,
+  setFinishedAlertHideMap,
+  shouldShowFinishedAlert,
 } from '~/jira_import/utils/jira_import_utils';
+import { JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY } from '~/issuables_list/constants';
+
+useLocalStorageSpy();
 
 describe('isInProgress', () => {
   it.each`
@@ -89,3 +95,56 @@ describe('calculateJiraImportLabel', () => {
     expect(label.color).toBe('#333');
   });
 });
+
+describe('shouldShowFinishedAlert', () => {
+  const labelTitle = 'jira-import::JCP-1';
+
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  it('checks localStorage value', () => {
+    jest.spyOn(localStorage, 'getItem').mockReturnValue(JSON.stringify({}));
+
+    shouldShowFinishedAlert(labelTitle, IMPORT_STATE.FINISHED);
+
+    expect(localStorage.getItem).toHaveBeenCalledWith(JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY);
+  });
+
+  it('returns true when an import has finished', () => {
+    jest.spyOn(localStorage, 'getItem').mockReturnValue(JSON.stringify({}));
+
+    expect(shouldShowFinishedAlert(labelTitle, IMPORT_STATE.FINISHED)).toBe(true);
+  });
+
+  it('returns false when an import has finished but the user chose to hide the alert', () => {
+    jest.spyOn(localStorage, 'getItem').mockReturnValue(JSON.stringify({ [labelTitle]: true }));
+
+    expect(shouldShowFinishedAlert(labelTitle, IMPORT_STATE.FINISHED)).toBe(false);
+  });
+
+  it('returns false when an import has not finished', () => {
+    jest.spyOn(localStorage, 'getItem').mockReturnValue(JSON.stringify({}));
+
+    expect(shouldShowFinishedAlert(labelTitle, IMPORT_STATE.SCHEDULED)).toBe(false);
+  });
+});
+
+describe('setFinishedAlertHideMap', () => {
+  const labelTitle = 'jira-import::ABC-1';
+  const newLabelTitle = 'jira-import::JCP-1';
+
+  it('sets item to localStorage correctly', () => {
+    jest.spyOn(localStorage, 'getItem').mockReturnValue(JSON.stringify({ [labelTitle]: true }));
+
+    setFinishedAlertHideMap(newLabelTitle);
+
+    expect(localStorage.setItem).toHaveBeenCalledWith(
+      JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY,
+      JSON.stringify({
+        [labelTitle]: true,
+        [newLabelTitle]: true,
+      }),
+    );
+  });
+});