Use entity name as cluster name in sidebar (#3751)

* Using entity name as cluster name in sidebar

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

* Use entity name if preferences name is empty

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

* simplify

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/main/initializers/ipc.ts

@@ -28,6 +28,7 @@ import type { ClusterId } from "../../common/cluster-types";
 import { appEventBus } from "../../common/event-bus";
 import { dialogShowOpenDialogHandler, ipcMainHandle } from "../../common/ipc";
 import { catalogEntityRegistry } from "../catalog";
+import { pushCatalogToRenderer } from "../catalog-pusher";
 import { ClusterManager } from "../cluster-manager";
 import { bundledKubectlPath } from "../kubectl";
 import logger from "../logger";
@@ -48,6 +49,8 @@ export function initIpcMainHandlers() {
     if (cluster) {
       clusterFrameMap.set(cluster.id, { frameId: event.frameId, processId: event.processId });
       cluster.pushState();
+
+      pushCatalogToRenderer(catalogEntityRegistry);
     }
   });
 

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

@@ -42,7 +42,7 @@ export function GeneralSettings({ entity }: EntitySettingViewProps) {
       <section>
         <div className="flex">
           <div className="flex-grow pr-8">
-            <components.ClusterNameSetting cluster={cluster} />
+            <components.ClusterNameSetting cluster={cluster} entity={entity as KubernetesCluster} />
           </div>
           <div>
             <components.ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />

src/renderer/components/cluster-settings/components/cluster-name-setting.tsx

@@ -26,9 +26,11 @@ import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
 import { isRequired } from "../../input/input_validators";
+import type { KubernetesCluster } from "../../../../common/catalog-entities";
 
 interface Props {
   cluster: Cluster;
+  entity: KubernetesCluster;
 }
 
 @observer
@@ -43,7 +45,7 @@ export class ClusterNameSetting extends React.Component<Props> {
   componentDidMount() {
     disposeOnUnmount(this,
       autorun(() => {
-        this.name = this.props.cluster.preferences.clusterName;
+        this.name = this.props.cluster.preferences.clusterName || this.props.entity.metadata.name;
       })
     );
   }

src/renderer/components/layout/sidebar.tsx

@@ -40,8 +40,7 @@ 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 { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { App } from "../app";
 
 interface Props {
   className?: string;
@@ -178,14 +177,20 @@ export class Sidebar extends React.Component<Props> {
     });
   }
 
+  get clusterEntity() {
+    return catalogEntityRegistry.activeEntity;
+  }
+
   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"