Using entity name as cluster name in sidebar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/ipc/index.ts

@@ -20,6 +20,7 @@
  */
 
 export const dialogShowOpenDialogHandler = "dialog:show-open-dialog";
+export const catalogBroadcastHandler = "catalog:broadcast-items";
 
 export * from "./ipc";
 export * from "./invalid-kubeconfig";

src/main/catalog-pusher.ts

@@ -28,13 +28,13 @@ import { debounce } from "lodash";
 import type { CatalogEntity } from "../common/catalog";
 
 
-const broadcaster = debounce((items: CatalogEntity[]) => {
+export const catalogBroadcaster = debounce((items: CatalogEntity[]) => {
   broadcastMessage("catalog:items", items);
 }, 1_000, { leading: true, trailing: true });
 
 export function pushCatalogToRenderer(catalog: CatalogEntityRegistry) {
   return reaction(() => toJS(catalog.items), (items) => {
-    broadcaster(items);
+    catalogBroadcaster(items);
   }, {
     fireImmediately: true,
   });

src/main/initializers/ipc.ts

@@ -26,8 +26,9 @@ import { clusterActivateHandler, clusterSetFrameIdHandler, clusterVisibilityHand
 import { ClusterStore } from "../../common/cluster-store";
 import type { ClusterId } from "../../common/cluster-types";
 import { appEventBus } from "../../common/event-bus";
-import { dialogShowOpenDialogHandler, ipcMainHandle } from "../../common/ipc";
+import { catalogBroadcastHandler, dialogShowOpenDialogHandler, ipcMainHandle } from "../../common/ipc";
 import { catalogEntityRegistry } from "../catalog";
+import { catalogBroadcaster } from "../catalog-pusher";
 import { ClusterManager } from "../cluster-manager";
 import { bundledKubectlPath } from "../kubectl";
 import logger from "../logger";
@@ -145,4 +146,9 @@ export function initIpcMainHandlers() {
 
     return dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), dialogOpts);
   });
+
+
+  ipcMainHandle(catalogBroadcastHandler, async () => {
+    catalogBroadcaster(catalogEntityRegistry.items);
+  });
 }

src/renderer/components/app.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import React from "react";
-import { observable, makeObservable, reaction } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
 import { history } from "../navigation";
@@ -37,7 +37,7 @@ import { webFrame } from "electron";
 import { ClusterPageRegistry, getExtensionPageUrl } from "../../extensions/registries/page-registry";
 import { ExtensionLoader } from "../../extensions/extension-loader";
 import { appEventBus } from "../../common/event-bus";
-import { requestMain } from "../../common/ipc";
+import { catalogBroadcastHandler, requestMain } from "../../common/ipc";
 import whatInput from "what-input";
 import { clusterSetFrameIdHandler } from "../../common/cluster-ipc";
 import { ClusterPageMenuRegistration, ClusterPageMenuRegistry } from "../../extensions/registries";
@@ -92,19 +92,12 @@ export class App extends React.Component {
     logger.info(`[APP]: Init dashboard, clusterId=${App.clusterId}, frameId=${frameId}`);
     await Terminal.preloadFonts();
     await requestMain(clusterSetFrameIdHandler, App.clusterId);
+    await requestMain(catalogBroadcastHandler);
 
     const cluster = ClusterStore.getInstance().getById(App.clusterId);
 
     await cluster.whenReady; // cluster.activate() is done at this point
 
-    const activeEntityDisposer = reaction(() => catalogEntityRegistry.getById(App.clusterId), (entity) => {
-      if (!entity) {
-        return;
-      }
-      catalogEntityRegistry.activeEntity = entity;
-      activeEntityDisposer();
-    }, {fireImmediately: true});
-
     ExtensionLoader.getInstance().loadOnClusterRenderer();
     setTimeout(() => {
       appEventBus.emit({

src/renderer/components/layout/sidebar.tsx

@@ -40,8 +40,8 @@ import { SidebarItem } from "./sidebar-item";
 import { Apps } from "../+apps";
 import * as routes from "../../../common/routes";
 import { Config } from "../+config";
-import { ClusterStore } from "../../../common/cluster-store";
 import { App } from "../app";
+import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 
 interface Props {
   className?: string;
@@ -178,14 +178,20 @@ export class Sidebar extends React.Component<Props> {
     });
   }
 
+  get clusterEntity() {
+    return catalogEntityRegistry.getById(App.clusterId);
+  }
+
   render() {
     const { className } = this.props;
 
     return (
       <div className={cssNames(Sidebar.displayName, "flex column", className)}>
-        <div className="cluster-name">
+        {this.clusterEntity && (
-          {ClusterStore.getInstance().getById(App.clusterId)?.name}
+          <div className="cluster-name">
-        </div>
+            {this.clusterEntity.metadata.name}
+          </div>
+        )}
         <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
           <SidebarItem
             id="cluster"