Generic TopBar component for Catalog/Cluster views (#2882)

* Rendering close button in cluster view

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

* Changing Icon hover style

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

* Moving onClick handler away

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

* Removing sidebar compact view

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

* Removing 'compact' refs in SidebarItem

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

* Wrapping Catalog with MainLayout

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

* Making sidebar resizing indicator visible on hover

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

* Adding TopBar to catalog view

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

* Using TopBar in cluster views

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

* Cleaning up Sidebar styles

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

* Using getActiveClusterEntity() for searching

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

* Fix resizing anchor position

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

* Align cluster name on left

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

* Removing unused files

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

* Removing unused css var

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

* Showing Topbar in ClusterStatus page

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

* Removing TopBar from ClusterManager

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

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -32,6 +32,7 @@
     grid-area: main;
     position: relative;
     display: flex;
+    flex-direction: column;
   }
 
   .HotbarMenu {
@@ -45,7 +46,7 @@
   #lens-views {
     position: absolute;
     left: 0;
-    top: 0;
+    top: var(--main-layout-header); // Move below the TopBar
     right: 0;
     bottom: 0;
     display: flex;

src/renderer/components/cluster-manager/cluster-topbar.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import { catalogURL } from "../+catalog";
+import type { Cluster } from "../../../main/cluster";
+import { navigate } from "../../navigation";
+import { Icon } from "../icon";
+import { TopBar } from "../layout/topbar";
+import { MaterialTooltip } from "../material-tooltip/material-tooltip";
+
+interface Props {
+  cluster: Cluster
+}
+
+export function ClusterTopbar({ cluster }: Props) {
+  return (
+    <TopBar label={cluster.name}>
+      <div>
+        <MaterialTooltip title="Back to Catalog" placement="left">
+          <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(catalogURL())}/>
+        </MaterialTooltip>
+      </div>
+    </TopBar>
+  );
+}

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -32,13 +32,13 @@ import { clusterActivateHandler } from "../../../common/cluster-ipc";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL } from "../+catalog/catalog.route";
+import { ClusterTopbar } from "./cluster-topbar";
 import type { RouteComponentProps } from "react-router-dom";
 import type { IClusterViewRouteParams } from "./cluster-view.route";
 
 interface Props extends RouteComponentProps<IClusterViewRouteParams> {
 }
 
-
 @observer
 export class ClusterView extends React.Component<Props> {
   private store = ClusterStore.getInstance();
@@ -103,7 +103,8 @@ export class ClusterView extends React.Component<Props> {
 
   render() {
     return (
-      <div className="ClusterView flex align-center">
+      <div className="ClusterView flex column align-center">
+        {this.cluster && <ClusterTopbar cluster={this.cluster}/>}
         {this.renderStatus()}
       </div>
     );