Fixing Singleton typing to correctly return child class (#1914)

- Add distinction between `getInstance` and `getInstanceOrCreate` since
  it is not always possible to create an instance (since you might not
  know the correct arguments)

- Remove all the `export const *Store = *Store.getInstance<*Store>();`
  calls as it defeats the purpose of `Singleton`. Plus with the typing
  changes the appropriate `*Store.getInstance()` is "short enough".

- Special case the two extension export facades to not need to use
  `getInstanceOrCreate`. Plus since they are just facades it is always
  possible to create them.

- Move some other types to be also `Singleton`'s: ExtensionLoader,
  ExtensionDiscovery, ThemeStore, LocalizationStore, ...

- Fixed dev-run always using the same port with electron inspect

- Update Store documentation with new recommendations about creating
  instances of singletons

- Fix all unit tests to create their dependent singletons

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

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -13,7 +13,7 @@ import { systemName, isUrl, isPath } from "../input/input_validators";
 import { SubTitle } from "../layout/sub-title";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
-import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
+import { HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
 
 interface Props extends Partial<DialogProps> {
   onAddRepo: Function
@@ -79,7 +79,7 @@ export class AddHelmRepoDialog extends React.Component<Props> {
 
   async addCustomRepo() {
     try {
-      await repoManager.addСustomRepo(this.helmRepo);
+      await HelmRepoManager.getInstance().addСustomRepo(this.helmRepo);
       Notifications.ok(<>Helm repository <b>{this.helmRepo.name}</b> has added</>);
       this.props.onAddRepo();
       this.close();

src/renderer/components/+preferences/helm-charts.tsx

@@ -3,7 +3,7 @@ import "./helm-charts.scss";
 import React from "react";
 import { action, computed, observable } from "mobx";
 
-import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
+import { HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
 import { Button } from "../button";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
@@ -34,9 +34,9 @@ export class HelmCharts extends React.Component {
 
     try {
       if (!this.repos.length) {
-        this.repos = await repoManager.loadAvailableRepos(); // via https://helm.sh
+        this.repos = await HelmRepoManager.getInstance().loadAvailableRepos(); // via https://helm.sh
       }
-      const repos = await repoManager.repositories(); // via helm-cli
+      const repos = await HelmRepoManager.getInstance().repositories(); // via helm-cli
 
       this.addedRepos.clear();
       repos.forEach(repo => this.addedRepos.set(repo.name, repo));
@@ -49,7 +49,7 @@ export class HelmCharts extends React.Component {
 
   async addRepo(repo: HelmRepo) {
     try {
-      await repoManager.addRepo(repo);
+      await HelmRepoManager.getInstance().addRepo(repo);
       this.addedRepos.set(repo.name, repo);
     } catch (err) {
       Notifications.error(<>Adding helm branch <b>{repo.name}</b> has failed: {String(err)}</>);
@@ -58,7 +58,7 @@ export class HelmCharts extends React.Component {
 
   async removeRepo(repo: HelmRepo) {
     try {
-      await repoManager.removeRepo(repo);
+      await HelmRepoManager.getInstance().removeRepo(repo);
       this.addedRepos.delete(repo.name);
     } catch (err) {
       Notifications.error(

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Input, InputValidators } from "../input";
 import { SubTitle } from "../layout/sub-title";
-import { UserPreferences, userStore } from "../../../common/user-store";
+import { getDefaultKubectlPath, UserPreferences } from "../../../common/user-store";
 import { observer } from "mobx-react";
 import { bundledKubectlPath } from "../../../main/kubectl";
 import { SelectOption, Select } from "../select";
@@ -59,7 +59,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
         <Input
           theme="round-black"
           value={downloadPath}
-          placeholder={userStore.getDefaultKubectlPath()}
+          placeholder={getDefaultKubectlPath()}
           validators={pathValidator}
           onChange={setDownloadPath}
           onBlur={save}

src/renderer/components/+preferences/preferences.tsx

@@ -5,10 +5,10 @@ import moment from "moment-timezone";
 import { computed, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
-import { userStore } from "../../../common/user-store";
 import { isWindows } from "../../../common/vars";
 import { appPreferenceRegistry, RegisteredAppPreference } from "../../../extensions/registries/app-preference-registry";
-import { themeStore } from "../../theme.store";
+import { UserStore } from "../../../common/user-store";
+import { ThemeStore } from "../../theme.store";
 import { Input } from "../input";
 import { PageLayout } from "../layout/page-layout";
 import { SubTitle } from "../layout/sub-title";
@@ -30,12 +30,12 @@ enum Pages {
 
 @observer
 export class Preferences extends React.Component {
-  @observable httpProxy = userStore.preferences.httpsProxy || "";
-  @observable shell = userStore.preferences.shell || "";
+  @observable httpProxy = UserStore.getInstance().preferences.httpsProxy || "";
+  @observable shell = UserStore.getInstance().preferences.shell || "";
   @observable activeTab = Pages.Application;
 
   @computed get themeOptions(): SelectOption<string>[] {
-    return themeStore.themes.map(theme => ({
+    return ThemeStore.getInstance().themes.map(theme => ({
       label: theme.name,
       value: theme.id,
     }));
@@ -98,18 +98,16 @@ export class Preferences extends React.Component {
   }
 
   render() {
-    const { preferences } = userStore;
     const extensions = appPreferenceRegistry.getItems();
     const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == Pages.Telemetry);
-    let defaultShell = process.env.SHELL || process.env.PTYSHELL;
-
-    if (!defaultShell) {
-      if (isWindows) {
-        defaultShell = "powershell.exe";
-      } else {
-        defaultShell = "System default shell";
-      }
-    }
+    const { preferences } = UserStore.getInstance();
+    const defaultShell = process.env.SHELL
+      || process.env.PTYSHELL
+      || (
+        isWindows
+          ? "powershell.exe"
+          : "System default shell"
+      );
 
     return (
       <PageLayout
@@ -167,7 +165,7 @@ export class Preferences extends React.Component {
               <Select
                 options={this.timezoneOptions}
                 value={preferences.localeTimezone}
-                onChange={({ value }: SelectOption) => userStore.setLocaleTimezone(value)}
+                onChange={({ value }: SelectOption) => UserStore.getInstance().setLocaleTimezone(value)}
                 themeName="lens"
               />
             </section>