From 49160da710d6cbafa74366fd547fdba23aaf342e Mon Sep 17 00:00:00 2001
From: Yangjun Wang <yangjun.wang@wartsila.com>
Date: Sat, 19 Sep 2020 21:54:15 +0300
Subject: [PATCH] fix issue main area missing issue, add mobx observer to
 TabLayout

Signed-off-by: Yangjun Wang <yangjun.wang@wartsila.com>
---
 .../components/layout/main-layout.scss        | 22 +++++++++++++------
 .../components/layout/main-layout.tsx         |  4 +++-
 .../components/layout/tab-layout.scss         |  5 +----
 src/renderer/components/layout/tab-layout.tsx |  5 +++--
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/layout/main-layout.scss b/src/renderer/components/layout/main-layout.scss
index ac5a92f252..3a02d36717 100755
--- a/src/renderer/components/layout/main-layout.scss
+++ b/src/renderer/components/layout/main-layout.scss
@@ -1,14 +1,18 @@
-
 .MainLayout {
   --sidebar-max-size: 200px;
 
   display: grid;
-  grid-template-areas: "aside header" "aside main" "aside footer";
-  grid-template-rows: [header] var(--main-layout-header) [main] 1fr [footer] auto;
+  grid-template-areas:
+    "aside header"
+    "aside tabs"
+    "aside main"
+    "aside footer";
+  grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
   grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
+
   height: 100%;
 
-  header {
+  > header {
     grid-area: header;
     background: $layoutBackground;
     padding: $padding $padding * 2;
@@ -23,7 +27,7 @@
     }
   }
 
-  aside {
+  > aside {
     grid-area: aside;
     position: relative;
     background: $sidebarBackground;
@@ -43,15 +47,19 @@
       &.accessible:hover {
         width: var(--sidebar-max-size);
         transition-delay: 750ms;
-        box-shadow: 3px 3px 16px rgba(0, 0, 0, .35);
+        box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
         z-index: $zIndex-sidebar-hover;
       }
     }
   }
 
+  > main {
+    display: contents;
+  }
+
   footer {
     position: relative;
     grid-area: footer;
     min-width: 0; // restrict size when overflow content (e.g. <Dock> tabs scrolling)
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx
index a502e9f8a3..97f5727a2d 100755
--- a/src/renderer/components/layout/main-layout.tsx
+++ b/src/renderer/components/layout/main-layout.tsx
@@ -50,7 +50,9 @@ export class MainLayout extends React.Component<Props> {
           <Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} />
         </aside>
 
-        <ErrorBoundary>{children}</ErrorBoundary>
+        <main>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </main>
 
         <footer className={footerClass}>{footer === undefined ? <Dock /> : footer}</footer>
       </div>
diff --git a/src/renderer/components/layout/tab-layout.scss b/src/renderer/components/layout/tab-layout.scss
index e090534d7d..e8b62558d7 100755
--- a/src/renderer/components/layout/tab-layout.scss
+++ b/src/renderer/components/layout/tab-layout.scss
@@ -1,9 +1,6 @@
 
 .TabLayout {
-  display: grid;
-  grid-template-areas: "tabs" "main";
-  grid-template-rows: [tabs] min-content [main] 1fr;
-  height: 100%;
+  display: contents;
 
   > .Tabs {
     grid-area: tabs;
diff --git a/src/renderer/components/layout/tab-layout.tsx b/src/renderer/components/layout/tab-layout.tsx
index fdf3c0b82e..82c0cac6cf 100644
--- a/src/renderer/components/layout/tab-layout.tsx
+++ b/src/renderer/components/layout/tab-layout.tsx
@@ -2,6 +2,7 @@ import "./tab-layout.scss";
 
 import React, { ReactNode } from "react";
 import { matchPath, RouteProps } from "react-router-dom";
+import { observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { Tab, Tabs } from "../tabs";
 import { ErrorBoundary } from "../error-boundary";
@@ -20,7 +21,7 @@ interface Props {
   contentClass?: string;
 }
 
-export const TabLayout = ({ className, contentClass, tabs, children }: Props) => {
+export const TabLayout = observer(({ className, contentClass, tabs, children }: Props) => {
   const routePath = navigation.location.pathname;
   const cluster = getHostedCluster();
   if (!cluster) {
@@ -41,4 +42,4 @@ export const TabLayout = ({ className, contentClass, tabs, children }: Props) =>
       </main>
     </div>
   );
-};
+});