From e86fe7736e7fc60ecd0f153799d7d564a3c86b38 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 9 Sep 2021 11:40:24 +0300
Subject: [PATCH] Using singe <TopBar/>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+catalog/catalog.tsx  | 42 ++++-----
 src/renderer/components/+welcome/welcome.tsx  | 86 +++++++++----------
 .../cluster-manager/cluster-manager.scss      |  2 +-
 .../cluster-manager/cluster-manager.tsx       |  2 +
 .../cluster-manager/cluster-view.tsx          |  2 -
 5 files changed, 63 insertions(+), 71 deletions(-)

diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index 7f6347f5e3..6966f2e9e7 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@@ -43,7 +43,6 @@ import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 import { RenderDelay } from "../render-delay/render-delay";
-import { TopBar } from "../layout/topbar";
 
 export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");
 
@@ -245,28 +244,25 @@ export class Catalog extends React.Component<Props> {
     }
 
     return (
-      <>
-        <TopBar/>
-        <MainLayout sidebar={this.renderNavigation()}>
-          <div className="p-6 h-full">
-            { this.renderList() }
-          </div>
-          {
-            this.catalogEntityStore.selectedItem
-              ? <CatalogEntityDetails
-                item={this.catalogEntityStore.selectedItem}
-                hideDetails={() => this.catalogEntityStore.selectedItemId = null}
-              />
-              : (
-                <RenderDelay>
-                  <CatalogAddButton
-                    category={this.catalogEntityStore.activeCategory}
-                  />
-                </RenderDelay>
-              )
-          }
-        </MainLayout>
-      </>
+      <MainLayout sidebar={this.renderNavigation()}>
+        <div className="p-6 h-full">
+          { this.renderList() }
+        </div>
+        {
+          this.catalogEntityStore.selectedItem
+            ? <CatalogEntityDetails
+              item={this.catalogEntityStore.selectedItem}
+              hideDetails={() => this.catalogEntityStore.selectedItemId = null}
+            />
+            : (
+              <RenderDelay>
+                <CatalogAddButton
+                  category={this.catalogEntityStore.activeCategory}
+                />
+              </RenderDelay>
+            )
+        }
+      </MainLayout>
     );
   }
 }
diff --git a/src/renderer/components/+welcome/welcome.tsx b/src/renderer/components/+welcome/welcome.tsx
index f813c957ab..8c8e3f231a 100644
--- a/src/renderer/components/+welcome/welcome.tsx
+++ b/src/renderer/components/+welcome/welcome.tsx
@@ -27,7 +27,6 @@ import { Icon } from "../icon";
 import { productName, slackUrl } from "../../../common/vars";
 import { WelcomeMenuRegistry } from "../../../extensions/registries";
 import { WelcomeBannerRegistry } from "../../../extensions/registries";
-import { TopBar } from "../layout/topbar";
 
 export const defaultWidth = 320;
 
@@ -48,56 +47,53 @@ export class Welcome extends React.Component {
     }, defaultWidth);
 
     return (
-      <>
-        <TopBar/>
-        <div className="flex justify-center Welcome align-center">
-          <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
-            {welcomeBanner.length > 0 ? (
-              <Carousel
-                stopAutoPlayOnHover={true}
-                indicators={welcomeBanner.length > 1}
-                autoPlay={true}
-                navButtonsAlwaysInvisible={true}
-                indicatorIconButtonProps={{
-                  style: {
-                    color: "var(--iconActiveBackground)"
-                  }
-                }}
-                activeIndicatorIconButtonProps={{
-                  style: {
-                    color: "var(--iconActiveColor)"
-                  }
-                }}
-                interval={8000}
-              >
-                {welcomeBanner.map((item, index) =>
-                  <item.Banner key={index} />
-                )}
-              </Carousel>
-            ) : <Icon svg="logo-lens" className="logo" />}
+      <div className="flex justify-center Welcome align-center">
+        <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
+          {welcomeBanner.length > 0 ? (
+            <Carousel
+              stopAutoPlayOnHover={true}
+              indicators={welcomeBanner.length > 1}
+              autoPlay={true}
+              navButtonsAlwaysInvisible={true}
+              indicatorIconButtonProps={{
+                style: {
+                  color: "var(--iconActiveBackground)"
+                }
+              }}
+              activeIndicatorIconButtonProps={{
+                style: {
+                  color: "var(--iconActiveColor)"
+                }
+              }}
+              interval={8000}
+            >
+              {welcomeBanner.map((item, index) =>
+                <item.Banner key={index} />
+              )}
+            </Carousel>
+          ) : <Icon svg="logo-lens" className="logo" />}
 
-            <div className="flex justify-center">
-              <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
-                <h2>Welcome to {productName} 5!</h2>
+          <div className="flex justify-center">
+            <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
+              <h2>Welcome to {productName} 5!</h2>
 
-                <p>
-              To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources.
-                  <br /><br />
-              If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>.
-                </p>
+              <p>
+            To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources.
+                <br /><br />
+            If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>.
+              </p>
 
-                <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
-                  {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
-                    <li key={index} className="flex grid-12" onClick={() => item.click()}>
-                      <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
-                    </li>
-                  ))}
-                </ul>
-              </div>
+              <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
+                {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
+                  <li key={index} className="flex grid-12" onClick={() => item.click()}>
+                    <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
+                  </li>
+                ))}
+              </ul>
             </div>
           </div>
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss
index e82c0d3aca..f5371febb3 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/src/renderer/components/cluster-manager/cluster-manager.scss
@@ -24,7 +24,7 @@
 
   display: grid;
   grid-template-areas:
-    "menu topbar"
+    "topbar topbar"
     "menu main"
     "bottom-bar bottom-bar";
   grid-template-rows: auto 1fr min-content;
diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx
index 3b6cf1a434..24726fec7f 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.tsx
+++ b/src/renderer/components/cluster-manager/cluster-manager.tsx
@@ -38,6 +38,7 @@ import * as routes from "../../../common/routes";
 import { reaction } from "mobx";
 import { navigation } from "../../navigation";
 import { setEntityOnRouteMatch } from "../../../main/catalog-sources/helpers/general-active-sync";
+import { TopBar } from "../layout/topbar";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -50,6 +51,7 @@ export class ClusterManager extends React.Component {
   render() {
     return (
       <div className="ClusterManager">
+        <TopBar/>
         <main>
           <div id="lens-views"/>
           <Switch>
diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx
index 1c8a9435fc..db48e051c8 100644
--- a/src/renderer/components/cluster-manager/cluster-view.tsx
+++ b/src/renderer/components/cluster-manager/cluster-view.tsx
@@ -34,7 +34,6 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
 import { previousActiveTab } from "../+catalog";
-import { TopBar } from "../layout/topbar";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -105,7 +104,6 @@ export class ClusterView extends React.Component<Props> {
   render() {
     return (
       <div className="ClusterView flex column align-center">
-        <TopBar/>
         {this.renderStatus()}
       </div>
     );