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/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 { App } from "../app";
+import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 
 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">
-          {ClusterStore.getInstance().getById(App.clusterId)?.name}
-        </div>
+        {this.clusterEntity && (
+          <div className="cluster-name">
+            {this.clusterEntity.metadata.name}
+          </div>
+        )}
         <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
           <SidebarItem
             id="cluster"