Fix CRDs not updating in Sidebar (#4288)

src/renderer/components/+custom-resources/crd-list.tsx

@@ -92,6 +92,8 @@ export class CrdList extends React.Component {
         tableId="crd"
         className="CrdList"
         store={crdStore}
+        // Don't subscribe the `crdStore` because <Sidebar> already has and is always mounted
+        subscribeStores={false}
         items={items}
         sortingCallbacks={sortingCallbacks}
         searchFilters={Object.values(sortingCallbacks)}

src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx

@@ -36,10 +36,12 @@ import { kubeSelectedUrlParam, toggleDetails } from "../kube-detail-params";
 export interface KubeObjectListLayoutProps<K extends KubeObject> extends ItemListLayoutProps<K> {
   store: KubeObjectStore<K>;
   dependentStores?: KubeObjectStore<KubeObject>[];
+  subscribeStores?: boolean;
 }
 
 const defaultProps: Partial<KubeObjectListLayoutProps<KubeObject>> = {
   onDetails: (item: KubeObject) => toggleDetails(item.selfLink),
+  subscribeStores: true,
 };
 
 @observer
@@ -56,15 +58,17 @@ export class KubeObjectListLayout<K extends KubeObject> extends React.Component<
   }
 
   componentDidMount() {
-    const { store, dependentStores = [] } = this.props;
+    const { store, dependentStores = [], subscribeStores } = this.props;
     const stores = Array.from(new Set([store, ...dependentStores]));
 
-    disposeOnUnmount(this, [
-      kubeWatchApi.subscribeStores(stores, {
-        preload: true,
-        namespaces: clusterContext.contextNamespaces,
-      }),
-    ]);
+    if (subscribeStores) {
+      disposeOnUnmount(this, [
+        kubeWatchApi.subscribeStores(stores, {
+          preload: true,
+          namespaces: clusterContext.contextNamespaces,
+        }),
+      ]);
+    }
   }
 
   render() {

src/renderer/components/layout/sidebar.tsx

@@ -23,7 +23,7 @@ import styles from "./sidebar.module.css";
 import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { Workloads } from "../+workloads";
@@ -42,6 +42,7 @@ import * as routes from "../../../common/routes";
 import { Config } from "../+config";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { SidebarCluster } from "./sidebar-cluster";
+import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
 
 interface Props {
   className?: string;
@@ -51,8 +52,10 @@ interface Props {
 export class Sidebar extends React.Component<Props> {
   static displayName = "Sidebar";
 
-  async componentDidMount() {
-    crdStore.reloadAll();
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      kubeWatchApi.subscribeStores([crdStore]),
+    ]);
   }
 
   renderCustomResources() {