From 04517148c08565a0d0d7c4f4d9f907a8d6cee195 Mon Sep 17 00:00:00 2001
From: Lauri Nevala <lauri.nevala@gmail.com>
Date: Wed, 18 Nov 2020 09:12:11 +0200
Subject: [PATCH] Add computed name property to cluster (#1428)

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>
---
 src/main/cluster.ts                                   | 4 ++++
 src/main/tray.ts                                      | 2 +-
 src/renderer/components/cluster-icon/cluster-icon.tsx | 8 ++++----
 src/renderer/components/layout/main-layout.tsx        | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/main/cluster.ts b/src/main/cluster.ts
index 600b377729..b808f6d997 100644
--- a/src/main/cluster.ts
+++ b/src/main/cluster.ts
@@ -86,6 +86,10 @@ export class Cluster implements ClusterModel, ClusterState {
     return this.accessible && !this.disconnected;
   }
 
+  @computed get name() {
+    return this.preferences.clusterName || this.contextName
+  }
+
   get version(): string {
     return String(this.metadata?.version) || ""
   }
diff --git a/src/main/tray.ts b/src/main/tray.ts
index f170517e62..268e006089 100644
--- a/src/main/tray.ts
+++ b/src/main/tray.ts
@@ -89,7 +89,7 @@ export function createTrayMenu(windowManager: WindowManager): Menu {
             label: workspace.name,
             toolTip: workspace.description,
             submenu: clusters.map(cluster => {
-              const { id: clusterId, preferences: { clusterName: label }, online, workspace } = cluster;
+              const { id: clusterId, name: label, online, workspace } = cluster;
               return {
                 label: `${online ? '✓' : '\x20'.repeat(3)/*offset*/}${label}`,
                 toolTip: clusterId,
diff --git a/src/renderer/components/cluster-icon/cluster-icon.tsx b/src/renderer/components/cluster-icon/cluster-icon.tsx
index ccc65892de..34fbb9ebf8 100644
--- a/src/renderer/components/cluster-icon/cluster-icon.tsx
+++ b/src/renderer/components/cluster-icon/cluster-icon.tsx
@@ -34,8 +34,8 @@ export class ClusterIcon extends React.Component<Props> {
       cluster, showErrors, showTooltip, errorClass, options, interactive, isActive,
       children, ...elemProps
     } = this.props;
-    const { isAdmin, eventCount, preferences, id: clusterId } = cluster;
-    const { clusterName, icon } = preferences;
+    const { isAdmin, name, eventCount, preferences, id: clusterId } = cluster;
+    const { icon } = preferences;
     const clusterIconId = `cluster-icon-${clusterId}`;
     const className = cssNames("ClusterIcon flex inline", this.props.className, {
       interactive: interactive !== undefined ? interactive : !!this.props.onClick,
@@ -44,9 +44,9 @@ export class ClusterIcon extends React.Component<Props> {
     return (
       <div {...elemProps} className={className} id={showTooltip ? clusterIconId : null}>
         {showTooltip && (
-          <Tooltip targetId={clusterIconId}>{clusterName}</Tooltip>
+          <Tooltip targetId={clusterIconId}>{name}</Tooltip>
         )}
-        {icon && <img src={icon} alt={clusterName}/>}
+        {icon && <img src={icon} alt={name}/>}
         {!icon && <Hashicon value={clusterId} options={options}/>}
         {showErrors && isAdmin && eventCount > 0 && (
           <Badge
diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx
index e66fed3d17..baf3bd2f59 100755
--- a/src/renderer/components/layout/main-layout.tsx
+++ b/src/renderer/components/layout/main-layout.tsx
@@ -65,7 +65,7 @@ export class MainLayout extends React.Component<MainLayoutProps> {
     return (
       <div className={cssNames("MainLayout", className)} style={this.getSidebarSize() as any}>
         <header className={cssNames("flex gaps align-center", headerClass)}>
-          <span className="cluster">{cluster.preferences.clusterName || cluster.contextName}</span>
+          <span className="cluster">{cluster.name}</span>
         </header>
 
         <aside className={cssNames("flex column", { pinned: this.isPinned, accessible: this.isAccessible })}>