Persist local-storage in external json-file (#2279)

src/renderer/utils/__tests__/storageHelper.test.ts

@@ -0,0 +1,190 @@
+import { reaction } from "mobx";
+import { StorageAdapter, StorageHelper } from "../storageHelper";
+import { delay } from "../../../common/utils/delay";
+
+describe("renderer/utils/StorageHelper", () => {
+  describe("window.localStorage might be used as StorageAdapter", () => {
+    type StorageModel = string;
+
+    const storageKey = "ui-settings";
+    let storageHelper: StorageHelper<StorageModel>;
+
+    beforeEach(() => {
+      localStorage.clear();
+
+      storageHelper = new StorageHelper<StorageModel>(storageKey, {
+        autoInit: false,
+        storage: localStorage,
+        defaultValue: "test",
+      });
+    });
+
+    it("initialized with default value", async () => {
+      localStorage.setItem(storageKey, "saved"); // pretending it was saved previously
+
+      expect(storageHelper.key).toBe(storageKey);
+      expect(storageHelper.defaultValue).toBe("test");
+      expect(storageHelper.get()).toBe("test");
+
+      await storageHelper.init();
+
+      expect(storageHelper.key).toBe(storageKey);
+      expect(storageHelper.defaultValue).toBe("test");
+      expect(storageHelper.get()).toBe("saved");
+    });
+
+    it("updates storage", async () => {
+      storageHelper.init();
+
+      storageHelper.set("test2");
+      expect(localStorage.getItem(storageKey)).toBe("test2");
+
+      localStorage.setItem(storageKey, "test3");
+      storageHelper.init({ force: true }); // reload from underlying storage and merge
+      expect(storageHelper.get()).toBe("test3");
+    });
+  });
+
+  describe("Using custom StorageAdapter", () => {
+    type SettingsStorageModel = {
+      [key: string]: any;
+      message: string;
+    };
+
+    const storageKey = "mySettings";
+    const storageMock: Record<string, any> = {};
+    let storageHelper: StorageHelper<SettingsStorageModel>;
+    let storageHelperAsync: StorageHelper<SettingsStorageModel>;
+    let storageAdapter: StorageAdapter<SettingsStorageModel>;
+
+    const storageHelperDefaultValue: SettingsStorageModel = {
+      message: "hello-world",
+      anyOtherStorableData: 123,
+    };
+
+    beforeEach(() => {
+      storageMock[storageKey] = {
+        message: "saved-before",
+      } as SettingsStorageModel;
+
+      storageAdapter = {
+        onChange: jest.fn(),
+        getItem: jest.fn((key: string) => {
+          return storageMock[key];
+        }),
+        setItem: jest.fn((key: string, value: any) => {
+          storageMock[key] = value;
+        }),
+        removeItem: jest.fn((key: string) => {
+          delete storageMock[key];
+        }),
+      };
+
+      storageHelper = new StorageHelper(storageKey, {
+        autoInit: false,
+        defaultValue: storageHelperDefaultValue,
+        storage: storageAdapter,
+      });
+
+      storageHelperAsync = new StorageHelper(storageKey, {
+        autoInit: false,
+        defaultValue: storageHelperDefaultValue,
+        storage: {
+          ...storageAdapter,
+          async getItem(key: string): Promise<SettingsStorageModel> {
+            await delay(500); // fake loading timeout
+
+            return storageAdapter.getItem(key);
+          }
+        },
+      });
+    });
+
+    it("loads data from storage with fallback to default-value", () => {
+      expect(storageHelper.get()).toEqual(storageHelperDefaultValue);
+      storageHelper.init();
+
+      expect(storageHelper.get().message).toBe("saved-before");
+      expect(storageAdapter.getItem).toHaveBeenCalledWith(storageHelper.key);
+    });
+
+    it("async loading from storage supported too", async () => {
+      expect(storageHelperAsync.initialized).toBeFalsy();
+      storageHelperAsync.init();
+      await delay(300);
+      expect(storageHelperAsync.get()).toEqual(storageHelperDefaultValue);
+      await delay(200);
+      expect(storageHelperAsync.get().message).toBe("saved-before");
+    });
+
+    it("set() fully replaces data in storage", () => {
+      storageHelper.init();
+      storageHelper.set({ message: "test2" });
+      expect(storageHelper.get().message).toBe("test2");
+      expect(storageMock[storageKey]).toEqual({ message: "test2" });
+      expect(storageAdapter.setItem).toHaveBeenCalledWith(storageHelper.key, { message: "test2" });
+    });
+
+    it("merge() does partial data tree updates", () => {
+      storageHelper.init();
+      storageHelper.merge({ message: "updated" });
+
+      expect(storageHelper.get()).toEqual({ ...storageHelperDefaultValue, message: "updated" });
+      expect(storageAdapter.setItem).toHaveBeenCalledWith(storageHelper.key, { ...storageHelperDefaultValue, message: "updated" });
+
+      storageHelper.merge(draft => {
+        draft.message = "updated2";
+      });
+      expect(storageHelper.get()).toEqual({ ...storageHelperDefaultValue, message: "updated2" });
+
+      storageHelper.merge(draft => ({
+        message: draft.message.replace("2", "3")
+      }));
+      expect(storageHelper.get()).toEqual({ ...storageHelperDefaultValue, message: "updated3" });
+    });
+
+    it("clears data in storage", () => {
+      storageHelper.init();
+
+      expect(storageHelper.get()).toBeTruthy();
+      storageHelper.clear();
+      expect(storageHelper.get()).toBeFalsy();
+      expect(storageMock[storageKey]).toBeUndefined();
+      expect(storageAdapter.removeItem).toHaveBeenCalledWith(storageHelper.key);
+    });
+
+  });
+
+  describe("data in storage-helper is observable (mobx)", () => {
+    let storageHelper: StorageHelper<any>;
+    const defaultValue: any = { firstName: "Joe" };
+    const observedChanges: any[] = [];
+
+    beforeEach(() => {
+      observedChanges.length = 0;
+
+      storageHelper = new StorageHelper<typeof defaultValue>("some-key", {
+        autoInit: true,
+        defaultValue,
+        storage: {
+          getItem: jest.fn(),
+          setItem: jest.fn(),
+          removeItem: jest.fn(),
+        },
+      });
+    });
+
+    it("storage.get() is observable", () => {
+      expect(storageHelper.get()).toEqual(defaultValue);
+
+      reaction(() => storageHelper.toJS(), change => {
+        observedChanges.push(change);
+      });
+
+      storageHelper.merge({ lastName: "Black" });
+      storageHelper.set("whatever");
+      expect(observedChanges).toEqual([{ ...defaultValue, lastName: "Black" }, "whatever",]);
+    });
+  });
+
+});

src/renderer/utils/createStorage.ts

@@ -1,73 +1,72 @@
-// Helper to work with browser's local/session storage api
+// Keeps window.localStorage state in external JSON-files.
+// Because app creates random port between restarts => storage session wiped out each time.
+import type { CreateObservableOptions } from "mobx/lib/api/observable";
 
-export interface IStorageHelperOptions {
-  addKeyPrefix?: boolean;
-  useSession?: boolean; // use `sessionStorage` instead of `localStorage`
-}
+import path from "path";
+import { app, remote } from "electron";
+import { observable, reaction, when } from "mobx";
+import fse from "fs-extra";
+import { StorageHelper } from "./storageHelper";
+import { clusterStore, getHostedClusterId } from "../../common/cluster-store";
+import logger from "../../main/logger";
 
-export function createStorage<T>(key: string, defaultValue?: T, options?: IStorageHelperOptions) {
-  return new StorageHelper(key, defaultValue, options);
-}
+let initialized = false;
+const loaded = observable.box(false);
+const storage = observable.map<string/* key */, any /* serializable */>();
 
-export class StorageHelper<T> {
-  static keyPrefix = "lens_";
+export function createStorage<T>(key: string, defaultValue?: T, observableOptions?: CreateObservableOptions) {
+  const clusterId = getHostedClusterId();
+  const savingFolder = path.resolve((app || remote.app).getPath("userData"), "lens-local-storage");
+  const jsonFilePath = path.resolve(savingFolder, `${clusterId ?? "app"}.json`);
 
-  static defaultOptions: IStorageHelperOptions = {
-    addKeyPrefix: true,
-    useSession: false,
-  };
+  if (!initialized) {
+    initialized = true;
 
-  constructor(protected key: string, protected defaultValue?: T, protected options?: IStorageHelperOptions) {
-    this.options = Object.assign({}, StorageHelper.defaultOptions, options);
+    // read once per cluster domain
+    fse.readJson(jsonFilePath)
+      .then((data = {}) => storage.merge(data))
+      .catch(() => null) // ignore empty / non-existing / invalid json files
+      .finally(() => loaded.set(true));
 
-    if (this.options.addKeyPrefix) {
-      this.key = StorageHelper.keyPrefix + key;
+    // bind auto-saving
+    reaction(() => storage.toJSON(), saveFile, { delay: 250 });
+
+    // remove json-file when cluster deleted
+    if (clusterId !== undefined) {
+      when(() => clusterStore.removedClusters.has(clusterId)).then(removeFile);
     }
   }
 
-  protected get storage() {
-    if (this.options.useSession) return window.sessionStorage;
-
-    return window.localStorage;
+  async function saveFile(json = {}) {
+    try {
+      await fse.ensureDir(savingFolder, { mode: 0o755 });
+      await fse.writeJson(jsonFilePath, json, { spaces: 2 });
+    } catch (error) {
+      logger.error(`[save]: ${error}`, { json, jsonFilePath });
+    }
   }
 
-  get(): T {
-    const strValue = this.storage.getItem(this.key);
+  function removeFile() {
+    logger.debug("[remove]:", jsonFilePath);
+    fse.unlink(jsonFilePath).catch(Function);
+  }
 
-    if (strValue != null) {
-      try {
-        return JSON.parse(strValue);
-      } catch (e) {
-        console.error(`Parsing json failed for pair: ${this.key}=${strValue}`);
+  return new StorageHelper<T>(key, {
+    autoInit: true,
+    observable: observableOptions,
+    defaultValue,
+    storage: {
+      async getItem(key: string) {
+        await when(() => loaded.get());
+
+        return storage.get(key);
+      },
+      setItem(key: string, value: any) {
+        storage.set(key, value);
+      },
+      removeItem(key: string) {
+        storage.delete(key);
       }
-    }
-
-    return this.defaultValue;
-  }
-
-  set(value: T) {
-    this.storage.setItem(this.key, JSON.stringify(value));
-
-    return this;
-  }
-
-  merge(value: Partial<T>) {
-    const currentValue = this.get();
-
-    return this.set(Object.assign(currentValue, value));
-  }
-
-  clear() {
-    this.storage.removeItem(this.key);
-
-    return this;
-  }
-
-  getDefaultValue() {
-    return this.defaultValue;
-  }
-
-  restoreDefaultValue() {
-    return this.set(this.defaultValue);
-  }
+    },
+  });
 }

src/renderer/utils/index.ts

@@ -7,6 +7,7 @@ export * from "./cssNames";
 export * from "../../common/event-emitter";
 export * from "./saveFile";
 export * from "./prevDefault";
+export * from "./storageHelper";
 export * from "./createStorage";
 export * from "./interval";
 export * from "./copyToClipboard";

src/renderer/utils/storageHelper.ts

@@ -0,0 +1,162 @@
+// Helper for working with storages (e.g. window.localStorage, NodeJS/file-system, etc.)
+
+import type { CreateObservableOptions } from "mobx/lib/api/observable";
+import { action, comparer, observable, toJS, when } from "mobx";
+import produce, { Draft, enableMapSet, setAutoFreeze } from "immer";
+import { isEqual, isFunction, isPlainObject } from "lodash";
+import logger from "../../main/logger";
+
+setAutoFreeze(false); // allow to merge observables
+enableMapSet(); // allow merging maps and sets
+
+export interface StorageAdapter<T> {
+  [metadata: string]: any;
+  getItem(key: string): T | Promise<T>;
+  setItem(key: string, value: T): void;
+  removeItem(key: string): void;
+  onChange?(change: { key: string, value: T, oldValue?: T }): void;
+}
+
+export interface StorageHelperOptions<T> {
+  autoInit?: boolean; // start preloading data immediately, default: true
+  observable?: CreateObservableOptions;
+  storage: StorageAdapter<T>;
+  defaultValue?: T;
+}
+
+export class StorageHelper<T> {
+  static defaultOptions: Partial<StorageHelperOptions<any>> = {
+    autoInit: true,
+    observable: {
+      deep: true,
+      equals: comparer.shallow,
+    }
+  };
+
+  @observable private data = observable.box<T>();
+  @observable initialized = false;
+  whenReady = when(() => this.initialized);
+
+  get storage(): StorageAdapter<T> {
+    return this.options.storage;
+  }
+
+  get defaultValue(): T {
+    return this.options.defaultValue;
+  }
+
+  constructor(readonly key: string, private options: StorageHelperOptions<T>) {
+    this.options = { ...StorageHelper.defaultOptions, ...options };
+    this.configureObservable();
+    this.reset();
+
+    if (this.options.autoInit) {
+      this.init();
+    }
+  }
+
+  @action
+  init({ force = false } = {}) {
+    if (this.initialized && !force) return;
+
+    this.loadFromStorage({
+      onData: (data: T) => {
+        const notEmpty = data != null;
+        const notDefault = !this.isDefaultValue(data);
+
+        if (notEmpty && notDefault) {
+          this.merge(data);
+        }
+
+        this.initialized = true;
+      },
+      onError: (error?: any) => {
+        logger.error(`[init]: ${error}`, this);
+      },
+    });
+  }
+
+  private loadFromStorage(opts: { onData?(data: T): void, onError?(error?: any): void } = {}) {
+    let data: T | Promise<T>;
+
+    try {
+      data = this.storage.getItem(this.key); // sync reading from storage when exposed
+
+      if (data instanceof Promise) {
+        data.then(opts.onData, opts.onError);
+      } else {
+        opts?.onData(data);
+      }
+    } catch (error) {
+      logger.error(`[load]: ${error}`, this);
+      opts?.onError(error);
+    }
+
+    return data;
+  }
+
+  isDefaultValue(value: T): boolean {
+    return isEqual(value, this.defaultValue);
+  }
+
+  @action
+  private configureObservable(options = this.options.observable) {
+    this.data = observable.box<T>(this.data.get(), {
+      ...StorageHelper.defaultOptions.observable, // inherit default observability options
+      ...(options ?? {}),
+    });
+    this.data.observe(change => {
+      const { newValue, oldValue } = toJS(change, { recurseEverything: true });
+
+      this.onChange(newValue, oldValue);
+    });
+  }
+
+  protected onChange(value: T, oldValue?: T) {
+    if (!this.initialized) return;
+
+    try {
+      if (value == null) {
+        this.storage.removeItem(this.key);
+      } else {
+        this.storage.setItem(this.key, value);
+      }
+
+      this.storage.onChange?.({ value, oldValue, key: this.key });
+    } catch (error) {
+      logger.error(`[change]: ${error}`, this, { value, oldValue });
+    }
+  }
+
+  get(): T {
+    return this.data.get();
+  }
+
+  set(value: T) {
+    this.data.set(value);
+  }
+
+  reset() {
+    this.set(this.defaultValue);
+  }
+
+  clear() {
+    this.data.set(null);
+  }
+
+  merge(value: Partial<T> | ((draft: Draft<T>) => Partial<T> | void)) {
+    const nextValue = produce(this.get(), (state: Draft<T>) => {
+      const newValue = isFunction(value) ? value(state) : value;
+
+      return isPlainObject(newValue)
+        ? Object.assign(state, newValue) // partial updates for returned plain objects
+        : newValue;
+    });
+
+    this.set(nextValue as T);
+  }
+
+  toJS() {
+    return toJS(this.get(), { recurseEverything: true });
+  }
+}