Only create TerminalStore after ThemeStore (#3359)

- Use Proxy for backwards compatability

- Fix a bunch of unit tests that needed all the Singleton's created

- Add comments on the order required for the store migrations

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/dock/__test__/dock-tabs.test.tsx

@@ -22,14 +22,18 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
+import fse from "fs-extra";
 
 import { DockTabs } from "../dock-tabs";
 import { dockStore, DockTab, TabKind } from "../dock.store";
 import { noop } from "../../../utils";
+import { ThemeStore } from "../../../theme.store";
+import { TerminalStore } from "../terminal.store";
+import { UserStore } from "../../../../common/user-store";
 
 jest.mock("electron", () => ({
   app: {
-    getPath: () => "/foo",
+    getPath: () => "tmp",
   },
 }));
 
@@ -55,10 +59,20 @@ const getTabKinds = () => dockStore.tabs.map(tab => tab.kind);
 
 describe("<DockTabs />", () => {
   beforeEach(async () => {
+    UserStore.createInstance();
+    ThemeStore.createInstance();
+    TerminalStore.createInstance();
     await dockStore.whenReady;
     dockStore.tabs = initialTabs;
   });
 
+  afterEach(() => {
+    ThemeStore.resetInstance();
+    TerminalStore.resetInstance();
+    UserStore.resetInstance();
+    fse.remove("tmp");
+  });
+
   it("renders w/o errors", () => {
     const { container } = renderTabs();
 

src/renderer/components/dock/__test__/log-tab.store.test.ts

@@ -20,14 +20,18 @@
  */
 
 import { podsStore } from "../../+workloads-pods/pods.store";
+import { UserStore } from "../../../../common/user-store";
 import { Pod } from "../../../api/endpoints";
+import { ThemeStore } from "../../../theme.store";
 import { dockStore } from "../dock.store";
 import { logTabStore } from "../log-tab.store";
+import { TerminalStore } from "../terminal.store";
 import { deploymentPod1, deploymentPod2, deploymentPod3, dockerPod } from "./pod.mock";
+import fse from "fs-extra";
 
 jest.mock("electron", () => ({
   app: {
-    getPath: () => "/foo",
+    getPath: () => "tmp",
   },
 }));
 
@@ -36,9 +40,19 @@ podsStore.items.push(new Pod(deploymentPod1));
 podsStore.items.push(new Pod(deploymentPod2));
 
 describe("log tab store", () => {
+  beforeEach(() => {
+    UserStore.createInstance();
+    ThemeStore.createInstance();
+    TerminalStore.createInstance();
+  });
+
   afterEach(() => {
     logTabStore.reset();
     dockStore.reset();
+    UserStore.resetInstance();
+    ThemeStore.resetInstance();
+    TerminalStore.resetInstance();
+    fse.remove("tmp");
   });
 
   it("creates log tab without sibling pods", () => {

src/renderer/components/dock/dock.store.ts

@@ -136,7 +136,12 @@ export class DockStore implements DockStorageState {
   }
 
   get selectedTabId(): TabId | undefined {
-    return this.storage.get().selectedTabId || this.tabs[0]?.id;
+    return this.storage.get().selectedTabId
+      || (
+        this.tabs.length > 0
+          ? this.tabs[0]?.id
+          : undefined
+      );
   }
 
   set selectedTabId(tabId: TabId) {
@@ -277,9 +282,9 @@ export class DockStore implements DockStorageState {
 
         if (newTab?.kind === TabKind.TERMINAL) {
           // close the dock when selected sibling inactive terminal tab
-          const { terminalStore } = await import("./terminal.store");
+          const { TerminalStore } = await import("./terminal.store");
 
-          if (!terminalStore.isConnected(newTab.id)) this.close();
+          if (!TerminalStore.getInstance(false)?.isConnected(newTab.id)) this.close();
         }
         this.selectTab(newTab.id);
       } else {

src/renderer/components/dock/log-tab.store.ts

@@ -108,8 +108,10 @@ export class LogTabStore extends DockTabStore<LogTabData> {
     });
   }
 
-  private updateTabsData() {
-    this.data.forEach((tabData, tabId) => {
+  private async updateTabsData() {
+    const promises: Promise<void>[] = [];
+
+    for (const [tabId, tabData] of this.data) {
       const pod = new Pod(tabData.selectedPod);
       const pods = podsStore.getPodsByOwnerId(pod.getOwnerRefs()[0]?.uid);
       const isSelectedPodInList = pods.find(item => item.getId() == pod.getId());
@@ -126,14 +128,16 @@ export class LogTabStore extends DockTabStore<LogTabData> {
 
         this.renameTab(tabId);
       } else {
-        this.closeTab(tabId);
+        promises.push(this.closeTab(tabId));
       }
-    });
+    }
+
+    await Promise.all(promises);
   }
 
-  private closeTab(tabId: string) {
+  private async closeTab(tabId: string) {
     this.clearData(tabId);
-    dockStore.closeTab(tabId);
+    await dockStore.closeTab(tabId);
   }
 }
 

src/renderer/components/dock/terminal.store.ts

@@ -20,7 +20,7 @@
  */
 
 import { autorun, observable } from "mobx";
-import { autoBind } from "../../utils";
+import { autoBind, Singleton } from "../../utils";
 import { Terminal } from "./terminal";
 import { TerminalApi } from "../../api/terminal-api";
 import { dockStore, DockTab, DockTabCreateSpecific, TabId, TabKind } from "./dock.store";
@@ -38,11 +38,12 @@ export function createTerminalTab(tabParams: DockTabCreateSpecific = {}) {
   });
 }
 
-export class TerminalStore {
+export class TerminalStore extends Singleton {
   protected terminals = new Map<TabId, Terminal>();
   protected connections = observable.map<TabId, TerminalApi>();
 
   constructor() {
+    super();
     autoBind(this);
 
     // connect active tab
@@ -129,4 +130,24 @@ export class TerminalStore {
   }
 }
 
-export const terminalStore = new TerminalStore();
+/**
+ * @deprecated use `TerminalStore.getInstance()` instead
+ */
+export const terminalStore = new Proxy({}, {
+  get(target, p) {
+    if (p === "$$typeof") {
+      return "TerminalStore";
+    }
+
+    const ts = TerminalStore.getInstance();
+    const res = (ts as any)?.[p];
+
+    if (typeof res === "function") {
+      return function(...args: any[]) {
+        return res.apply(ts, args);
+      };
+    }
+
+    return res;
+  },
+}) as TerminalStore;