From ff2d302b212e9e136e16dfdfa2f433fcc730aaa2 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 30 Aug 2021 08:09:37 +0300
Subject: [PATCH] Show cluster name in sidebar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/layout/sidebar.scss | 8 ++++++++
 src/renderer/components/layout/sidebar.tsx  | 5 +++++
 2 files changed, 13 insertions(+)

diff --git a/src/renderer/components/layout/sidebar.scss b/src/renderer/components/layout/sidebar.scss
index f0d777fadd..18ac932f69 100644
--- a/src/renderer/components/layout/sidebar.scss
+++ b/src/renderer/components/layout/sidebar.scss
@@ -45,4 +45,12 @@
     padding: $padding;
     text-align: center;
   }
+
+  .cluster-name {
+    padding: 1.25rem;
+    font-weight: bold;
+    font-size: 1.5rem;
+    word-break: break-all;
+    color: var(--textColorAccent);
+  }
 }
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 44e57e9202..6101cc79a4 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -40,6 +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";
 
 interface Props {
   className?: string;
@@ -181,6 +183,9 @@ export class Sidebar extends React.Component<Props> {
 
     return (
       <div className={cssNames(Sidebar.displayName, "flex column", className)}>
+        <div className="cluster-name">
+          {ClusterStore.getInstance().getById(App.clusterId).preferences.clusterName}
+        </div>
         <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
           <SidebarItem
             id="cluster"