Fix detail views not watching child components (#4345)

* Fix detail views not watching child components

- Add subscribeStores calls to all relavent details

- Add support for tracking overlapping subscribes as an optimization

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

* Resolve PR comments

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

* Detect the adding of a namespace when selected namespaces change

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

* Update debug log

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

src/renderer/components/+namespaces/namespace-details.tsx

@@ -39,6 +39,7 @@ import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { getDetailsUrl } from "../kube-detail-params";
 import logger from "../../../common/logger";
+import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
 
 interface Props extends KubeObjectDetailsProps<Namespace> {
 }
@@ -52,14 +53,16 @@ export class NamespaceDetails extends React.Component<Props> {
     makeObservable(this);
   }
 
-  @disposeOnUnmount
-  clean = reaction(() => this.props.object, () => {
-    this.metrics = null;
-  });
-
   componentDidMount() {
-    resourceQuotaStore.reloadAll();
-    limitRangeStore.reloadAll();
+    disposeOnUnmount(this, [
+      reaction(() => this.props.object, () => {
+        this.metrics = null;
+      }),
+      kubeWatchApi.subscribeStores([
+        resourceQuotaStore,
+        limitRangeStore,
+      ]),
+    ]);
   }
 
   @computed get quotas() {

src/renderer/components/+namespaces/namespace-select.tsx

@@ -23,12 +23,11 @@ import "./namespace-select.scss";
 
 import React from "react";
 import { computed, makeObservable } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { Select, SelectOption, SelectProps } from "../select";
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
-import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
@@ -50,14 +49,7 @@ export class NamespaceSelect extends React.Component<Props> {
     makeObservable(this);
   }
 
-  componentDidMount() {
-    disposeOnUnmount(this, [
-      kubeWatchApi.subscribeStores([namespaceStore], {
-        preload: true,
-        loadOnce: true, // skip reloading namespaces on every render / page visit
-      }),
-    ]);
-  }
+  // No subscribe here because the subscribe is in <App /> (the cluster frame root component)
 
   @computed.struct get options(): SelectOption[] {
     const { customizeOptions, showAllNamespacesOption, sort } = this.props;

src/renderer/components/+namespaces/namespace.store.ts

@@ -133,7 +133,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
     return super.subscribe();
   }
 
-  protected async loadItems(params: KubeObjectStoreLoadingParams<Namespace>): Promise<Namespace[]> {
+  protected async loadItems(params: KubeObjectStoreLoadingParams): Promise<Namespace[]> {
     const { allowedNamespaces } = this;
 
     let namespaces = await super.loadItems(params).catch(() => []);