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/cluster-manager/bottom-bar.test.tsx

@@ -7,7 +7,6 @@ jest.mock("../../../extensions/registries");
 import { statusBarRegistry } from "../../../extensions/registries";
 
 describe("<BottomBar />", () => {
-
   it("renders w/o errors", () => {
     const { container } = render(<BottomBar />);
 

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -10,7 +10,7 @@ import { Preferences, preferencesRoute } from "../+preferences";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
 import { clusterViewRoute } from "./cluster-view.route";
-import { clusterStore } from "../../../common/cluster-store";
+import { ClusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
 import { globalPageRegistry } from "../../../extensions/registries/page-registry";
 import { Extensions, extensionsRoute } from "../+extensions";
@@ -21,7 +21,7 @@ import { EntitySettings, entitySettingsRoute } from "../+entity-settings";
 @observer
 export class ClusterManager extends React.Component {
   componentDidMount() {
-    const getMatchedCluster = () => clusterStore.getById(getMatchedClusterId());
+    const getMatchedCluster = () => ClusterStore.getInstance().getById(getMatchedClusterId());
 
     disposeOnUnmount(this, [
       reaction(getMatchedClusterId, initView, {
@@ -59,9 +59,12 @@ export class ClusterManager extends React.Component {
             <Route component={AddCluster} {...addClusterRoute} />
             <Route component={ClusterView} {...clusterViewRoute} />
             <Route component={EntitySettings} {...entitySettingsRoute} />
-            {globalPageRegistry.getItems().map(({ url, components: { Page } }) => {
-              return <Route key={url} path={url} component={Page}/>;
-            })}
+            {
+              globalPageRegistry.getItems()
+                .map(({ url, components: { Page } }) => (
+                  <Route key={url} path={url} component={Page} />
+                ))
+            }
             <Redirect exact to={this.startUrl}/>
           </Switch>
         </main>

src/renderer/components/cluster-manager/cluster-status.tsx

@@ -10,7 +10,7 @@ import { Icon } from "../icon";
 import { Button } from "../button";
 import { cssNames, IClassName } from "../../utils";
 import { Cluster } from "../../../main/cluster";
-import { ClusterId, clusterStore } from "../../../common/cluster-store";
+import { ClusterId, ClusterStore } from "../../../common/cluster-store";
 import { CubeSpinner } from "../spinner";
 import { clusterActivateHandler } from "../../../common/cluster-ipc";
 
@@ -25,7 +25,7 @@ export class ClusterStatus extends React.Component<Props> {
   @observable isReconnecting = false;
 
   get cluster(): Cluster {
-    return clusterStore.getById(this.props.clusterId);
+    return ClusterStore.getInstance().getById(this.props.clusterId);
   }
 
   @computed get hasErrors(): boolean {

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -7,9 +7,9 @@ import { IClusterViewRouteParams } from "./cluster-view.route";
 import { ClusterStatus } from "./cluster-status";
 import { hasLoadedView } from "./lens-views";
 import { Cluster } from "../../../main/cluster";
-import { clusterStore } from "../../../common/cluster-store";
 import { navigate } from "../../navigation";
 import { catalogURL } from "../+catalog";
+import { ClusterStore } from "../../../common/cluster-store";
 
 interface Props extends RouteComponentProps<IClusterViewRouteParams> {
 }
@@ -21,12 +21,12 @@ export class ClusterView extends React.Component<Props> {
   }
 
   get cluster(): Cluster {
-    return clusterStore.getById(this.clusterId);
+    return ClusterStore.getInstance().getById(this.clusterId);
   }
 
   async componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => this.clusterId, clusterId => clusterStore.setActive(clusterId), {
+      reaction(() => this.clusterId, clusterId => ClusterStore.getInstance().setActive(clusterId), {
         fireImmediately: true,
       }),
       reaction(() => this.cluster.online, (online) => {

src/renderer/components/cluster-manager/lens-views.ts

@@ -1,5 +1,5 @@
 import { observable, when } from "mobx";
-import { ClusterId, clusterStore, getClusterFrameUrl } from "../../../common/cluster-store";
+import { ClusterId, ClusterStore, getClusterFrameUrl } from "../../../common/cluster-store";
 import { getMatchedClusterId } from "../../navigation";
 import logger from "../../../main/logger";
 
@@ -19,7 +19,7 @@ export async function initView(clusterId: ClusterId) {
   if (!clusterId || lensViews.has(clusterId)) {
     return;
   }
-  const cluster = clusterStore.getById(clusterId);
+  const cluster = ClusterStore.getInstance().getById(clusterId);
 
   if (!cluster) {
     return;
@@ -44,13 +44,9 @@ export async function initView(clusterId: ClusterId) {
 
 export async function autoCleanOnRemove(clusterId: ClusterId, iframe: HTMLIFrameElement) {
   await when(() => {
-    const cluster = clusterStore.getById(clusterId);
+    const cluster = ClusterStore.getInstance().getById(clusterId);
 
-    if (!cluster) return true;
-
-    const view = lensViews.get(clusterId);
-
-    return cluster.disconnected && view?.isLoaded;
+    return !cluster || (cluster.disconnected && lensViews.get(clusterId)?.isLoaded);
   });
   logger.info(`[LENS-VIEW]: remove dashboard, clusterId=${clusterId}`);
   lensViews.delete(clusterId);
@@ -64,7 +60,7 @@ export async function autoCleanOnRemove(clusterId: ClusterId, iframe: HTMLIFrame
 }
 
 export function refreshViews() {
-  const cluster = clusterStore.getById(getMatchedClusterId());
+  const cluster = ClusterStore.getInstance().getById(getMatchedClusterId());
 
   lensViews.forEach(({ clusterId, view, isLoaded }) => {
     const isCurrent = clusterId === cluster?.id;