Using TopBar in cluster views

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

src/renderer/components/+catalog/catalog.tsx

@@ -44,7 +44,7 @@ import { cssNames } from "../../utils";
 import { TopBar } from "../layout/topbar";
 import { welcomeURL } from "../+welcome";
 import { Icon } from "../icon";
-import { MaterialTooltip } from "./material-tooltip/material-tooltip";
+import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 
 enum sortBy {
   name = "name",
@@ -142,7 +142,7 @@ export class Catalog extends React.Component<Props> {
   renderNavigation() {
     return (
       <Tabs className={cssNames(styles.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
-        <div className="pt-4">
+        <div>
           <Tab
             value={undefined}
             key="*"
@@ -210,7 +210,7 @@ export class Catalog extends React.Component<Props> {
 
     return (
       <>
-        <TopBar sidebar={<div>Catalog</div>}>
+        <TopBar label="Catalog">
           <div>
             <MaterialTooltip title="Close Catalog" placement="left">
               <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(welcomeURL())}/>

src/renderer/components/+welcome/welcome.scss

@@ -22,6 +22,7 @@
 .Welcome {
   text-align: center;
   width: 100%;
+  height: 100%;
   z-index: 1;
 
   .box {

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

@@ -46,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-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 } from "../+catalog";
+import { Catalog, catalogRoute, catalogURL } from "../+catalog";
 import { Preferences, preferencesRoute } from "../+preferences";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
@@ -35,13 +35,36 @@ 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 { ClusterStore } from "../../../common/cluster-store";
+import { hasLoadedView } from "./lens-views";
+import { navigate } from "../../navigation";
+import { Icon } from "../icon";
+import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 
 @observer
 export class ClusterManager extends React.Component {
   render() {
+    const cluster = ClusterStore.getInstance().active;
+    const isClusterVisible = cluster?.available && cluster?.ready && hasLoadedView(cluster.id);
+
     return (
       <div className="ClusterManager">
         <main>
+          { isClusterVisible && (
+            <TopBar label={(
+              <>
+                <Icon svg="kube"/>{" "}
+                {cluster.contextName}
+              </>)
+            }>
+              <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>
             <Route component={Welcome} {...welcomeRoute} />
@@ -66,3 +89,19 @@ export class ClusterManager extends React.Component {
     );
   }
 }
+
+// const ClusterTopBar = observer(() => {
+//   const cluster = ClusterStore.getInstance().activeCluster;
+  
+//   // console.log(cluster)
+  
+//   // if (!cluster) {
+//   //   return null;
+//   // }
+
+//   return (
+//     <TopBar sidebar={<div>Lens</div>}>
+//       {cluster}
+//     </TopBar>
+//   );
+// });

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

@@ -65,6 +65,7 @@ export class ClusterView extends React.Component {
         initView(clusterId); // init cluster-view (iframe), requires parent container #lens-views to be in DOM
         requestMain(clusterActivateHandler, clusterId, false); // activate and fetch cluster's state from main
         catalogEntityRegistry.activeEntity = catalogEntityRegistry.getById(clusterId);
+        ClusterStore.getInstance().setActive(clusterId);
       }, {
         fireImmediately: true,
       }),

src/renderer/components/layout/main-layout-header.tsx

@@ -23,7 +23,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
-import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
+import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 import { catalogURL } from "../+catalog";
 import { broadcastMessage } from "../../../common/ipc";
 import { IpcRendererNavigationEvents } from "../../navigation/events";

src/renderer/components/layout/tab-layout.scss

@@ -27,6 +27,7 @@
 
   > .Tabs {
     background: $layoutTabsBackground;
+    min-height: 32px;
   }
 
   main {

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

@@ -1,16 +1,24 @@
 .topBar {
   display: grid;
-  grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr;
+  grid-template-columns: [title] 1fr [controls] auto;
   grid-template-rows: var(--main-layout-header);
-  grid-template-areas: "sidebar contents";
+  grid-template-areas: "title controls";
+  background-color: var(--layoutBackground);
   z-index: 1;
 }
 
-.sidebar {
+.title {
-  width: var(--sidebar-width);
+  @apply font-bold;
-  background-color: var(--sidebarLogoBackground);
+  color: var(--textColorAccent);
+  align-items: center;
+  justify-content: center;
+  display: flex;
 }
 
-.contents {
+.controls {
-  background-color: var(--layoutBackground);
+  align-self: flex-end;
+  padding-right: 1.5rem;
+  align-items: center;
+  display: flex;
+  height: 100%;
 }

src/renderer/components/layout/topbar.tsx

@@ -20,22 +20,22 @@
  */
 
 import styles from "./topbar.module.css";
-import React, { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 import { sidebarStorage } from "./sidebar-storage";
 import { observer } from "mobx-react";
 
-interface Props extends HTMLAttributes<any> {
+interface Props extends React.HTMLAttributes<any> {
-  sidebar: ReactNode;
+  label: React.ReactNode;
 }
 
-export const TopBar = observer((props: Props) => {
+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}>
+    <div className={styles.topBar} style={style} {...rest}>
-      <div className={styles.sidebar}>{props.sidebar}</div>
+      <div className={styles.title}>{label}</div>
-      <div className={styles.contents}>{props.children}</div>
+      <div className={styles.controls}>{children}</div>
     </div>
   );
 });