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/+add-cluster/add-cluster.tsx

@@ -11,10 +11,10 @@ import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
 import { Icon } from "../icon";
 import { kubeConfigDefaultPath, loadConfig, splitConfig, validateConfig, validateKubeConfig } from "../../../common/kube-helpers";
-import { ClusterModel, ClusterStore, clusterStore } from "../../../common/cluster-store";
+import { ClusterModel, ClusterStore } from "../../../common/cluster-store";
 import { v4 as uuid } from "uuid";
 import { navigate } from "../../navigation";
-import { userStore } from "../../../common/user-store";
+import { UserStore } from "../../../common/user-store";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Tab, Tabs } from "../tabs";
@@ -44,13 +44,13 @@ export class AddCluster extends React.Component {
   @observable showSettings = false;
 
   componentDidMount() {
-    clusterStore.setActive(null);
-    this.setKubeConfig(userStore.kubeConfigPath);
+    ClusterStore.getInstance().setActive(null);
+    this.setKubeConfig(UserStore.getInstance().kubeConfigPath);
     appEventBus.emit({ name: "cluster-add", action: "start" });
   }
 
   componentWillUnmount() {
-    userStore.markNewContextsAsSeen();
+    UserStore.getInstance().markNewContextsAsSeen();
   }
 
   @action
@@ -60,9 +60,9 @@ export class AddCluster extends React.Component {
       validateConfig(this.kubeConfigLocal);
       this.refreshContexts();
       this.kubeConfigPath = filePath;
-      userStore.kubeConfigPath = filePath; // save to store
+      UserStore.getInstance().kubeConfigPath = filePath; // save to store
     } catch (err) {
-      if (!userStore.isDefaultKubeConfigPath) {
+      if (!UserStore.getInstance().isDefaultKubeConfigPath) {
         Notifications.error(
           <div>Can&apos;t setup <code>{filePath}</code> as kubeconfig: {String(err)}</div>
         );
@@ -181,7 +181,7 @@ export class AddCluster extends React.Component {
       });
 
       runInAction(() => {
-        clusterStore.addClusters(...newClusters);
+        ClusterStore.getInstance().addClusters(...newClusters);
 
         Notifications.ok(
           <>Successfully imported <b>{newClusters.length}</b> cluster(s)</>
@@ -308,7 +308,7 @@ export class AddCluster extends React.Component {
   }
 
   onKubeConfigInputBlur = () => {
-    const isChanged = this.kubeConfigPath !== userStore.kubeConfigPath;
+    const isChanged = this.kubeConfigPath !== UserStore.getInstance().kubeConfigPath;
 
     if (isChanged) {
       this.kubeConfigPath = this.kubeConfigPath.replace("~", os.homedir());
@@ -316,7 +316,7 @@ export class AddCluster extends React.Component {
       try {
         this.setKubeConfig(this.kubeConfigPath, { throwError: true });
       } catch (err) {
-        this.setKubeConfig(userStore.kubeConfigPath); // revert to previous valid path
+        this.setKubeConfig(UserStore.getInstance().kubeConfigPath); // revert to previous valid path
       }
     }
   };
@@ -328,7 +328,7 @@ export class AddCluster extends React.Component {
   };
 
   protected formatContextLabel = ({ value: context }: SelectOption<string>) => {
-    const isNew = userStore.newContexts.has(context);
+    const isNew = UserStore.getInstance().newContexts.has(context);
     const isSelected = this.selectedContexts.includes(context);
 
     return (