1 files changed, 76 insertions, 7 deletions
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js b/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
index 261e30edbbb..2c88d25358f 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
@@ -1,5 +1,7 @@
 import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
 import produce from 'immer';
+import { debounce, merge } from 'lodash';
+import { STATUSES } from '../../../constants';
 import ImportSourceGroupFragment from '../fragments/bulk_import_source_group_item.fragment.graphql';
 
 function extractTypeConditionFromFragment(fragment) {
@@ -13,15 +15,24 @@ function generateGroupId(id) {
   });
 }
 
+export const KEY = 'gl-bulk-imports-import-state';
+export const DEBOUNCE_INTERVAL = 200;
+
 export class SourceGroupsManager {
-  static importMap = new Map();
+  constructor({ client, sourceUrl, storage = window.localStorage }) {
+    this.client = client;
+    this.sourceUrl = sourceUrl;
 
-  static attachImportId(group, importId) {
-    SourceGroupsManager.importMap.set(importId, group.id);
+    this.storage = storage;
+    this.importStates = this.loadImportStatesFromStorage();
   }
 
-  constructor({ client }) {
-    this.client = client;
+  loadImportStatesFromStorage() {
+    try {
+      return JSON.parse(this.storage.getItem(KEY)) ?? {};
+    } catch {
+      return {};
+    }
   }
 
   findById(id) {
@@ -42,8 +53,48 @@ export class SourceGroupsManager {
     this.update(group, fn);
   }
 
-  findByImportId(importId) {
-    return this.findById(SourceGroupsManager.importMap.get(importId));
+  saveImportState(importId, group) {
+    this.importStates[this.getStorageKey(importId)] = {
+      id: group.id,
+      importTarget: group.import_target,
+      status: group.status,
+    };
+    this.saveImportStatesToStorage();
+  }
+
+  getImportStateFromStorage(importId) {
+    return this.importStates[this.getStorageKey(importId)];
+  }
+
+  getImportStateFromStorageByGroupId(groupId) {
+    const PREFIX = this.getStorageKey('');
+    const [, importState] =
+      Object.entries(this.importStates).find(
+        ([key, group]) => key.startsWith(PREFIX) && group.id === groupId,
+      ) ?? [];
+
+    return importState;
+  }
+
+  getStorageKey(importId) {
+    return `${this.sourceUrl}|${importId}`;
+  }
+
+  saveImportStatesToStorage = debounce(() => {
+    try {
+      // storage might be changed in other tab so fetch first
+      this.storage.setItem(
+        KEY,
+        JSON.stringify(merge({}, this.loadImportStatesFromStorage(), this.importStates)),
+      );
+    } catch {
+      // empty catch intentional: storage might be unavailable or full
+    }
+  }, DEBOUNCE_INTERVAL);
+
+  startImport({ group, importId }) {
+    this.setImportStatus(group, STATUSES.CREATED);
+    this.saveImportState(importId, group);
   }
 
   setImportStatus(group, status) {
@@ -52,4 +103,22 @@ export class SourceGroupsManager {
       sourceGroup.status = status;
     });
   }
+
+  setImportStatusByImportId(importId, status) {
+    const importState = this.getImportStateFromStorage(importId);
+    if (!importState) {
+      return;
+    }
+
+    if (importState.status !== status) {
+      importState.status = status;
+    }
+
+    const group = this.findById(importState.id);
+    if (group?.id) {
+      this.setImportStatus(group, status);
+    }
+
+    this.saveImportStatesToStorage();
+  }
 }