Showing Topbar in ClusterStatus page

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

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

@@ -25,7 +25,7 @@ import React from "react";
 import { Redirect, Route, Switch } from "react-router";
 import { observer } from "mobx-react";
 import { BottomBar } from "./bottom-bar";
-import { Catalog, catalogRoute, catalogURL } from "../+catalog";
+import { Catalog, catalogRoute } from "../+catalog";
 import { Preferences, preferencesRoute } from "../+preferences";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
@@ -35,12 +35,9 @@ import { Extensions, extensionsRoute } from "../+extensions";
 import { HotbarMenu } from "../hotbar/hotbar-menu";
 import { EntitySettings, entitySettingsRoute } from "../+entity-settings";
 import { Welcome, welcomeRoute, welcomeURL } from "../+welcome";
-import { TopBar } from "../layout/topbar";
 import { hasLoadedView } from "./lens-views";
-import { navigate } from "../../navigation";
-import { Icon } from "../icon";
-import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterTopbar } from "./cluster-topbar";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -52,13 +49,7 @@ export class ClusterManager extends React.Component {
       <div className="ClusterManager">
         <main>
           { isClusterVisible && (
-            <TopBar label={cluster.name}>
+            <ClusterTopbar cluster={cluster}/>
-              <div>
-                <MaterialTooltip title="Back to Catalog" placement="left">
-                  <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(catalogURL())}/>
-                </MaterialTooltip>
-              </div>
-            </TopBar>
           )}
           <div id="lens-views"/>
           <Switch>

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,6 +32,7 @@ import { clusterActivateHandler } from "../../../common/cluster-ipc";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { getMatchedClusterId, navigate } from "../../navigation";
 import { catalogURL } from "../+catalog/catalog.route";
+import { ClusterTopbar } from "./cluster-topbar";
 
 @observer
 export class ClusterView extends React.Component {
@@ -87,7 +88,12 @@ export class ClusterView extends React.Component {
     const { clusterId, cluster, isReady } = this;
 
     if (cluster && !isReady) {
-      return <ClusterStatus clusterId={clusterId} className="box center"/>;
+      return (
+        <>
+          <ClusterTopbar cluster={cluster}/>
+          <ClusterStatus clusterId={clusterId} className="box center"/>
+        </>
+      );
     }
 
     return null;
@@ -95,7 +101,7 @@ export class ClusterView extends React.Component {
 
   render() {
     return (
-      <div className="ClusterView flex align-center">
+      <div className="ClusterView flex column align-center">
         {this.renderStatus()}
       </div>
     );

src/renderer/components/layout/topbar.module.css

@@ -26,6 +26,7 @@
   grid-template-areas: "title controls";
   background-color: var(--layoutBackground);
   z-index: 1;
+  width: 100%;
 }
 
 .title {

src/renderer/components/layout/topbar.tsx

@@ -21,7 +21,6 @@
 
 import styles from "./topbar.module.css";
 import React from "react";
-import { sidebarStorage } from "./sidebar-storage";
 import { observer } from "mobx-react";
 
 interface Props extends React.HTMLAttributes<any> {
@@ -29,11 +28,8 @@ interface Props extends React.HTMLAttributes<any> {
 }
 
 export const TopBar = observer(({ label, children, ...rest }: Props) => {
-  const { width } = sidebarStorage.get();
-  const style = { "--sidebar-width": `${width}px` } as React.CSSProperties;
-
   return (
-    <div className={styles.topBar} style={style} {...rest}>
+    <div className={styles.topBar} {...rest}>
       <div className={styles.title}>{label}</div>
       <div className={styles.controls}>{children}</div>
     </div>