From c6cb8adbcfbfd6c3ec36beccc15958483d57c76b Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Tue, 8 Sep 2020 16:03:47 +0300
Subject: [PATCH] example-extension reworks (3): wrap example-extension into
 main-layout

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../example-extension/example-extension.tsx          | 12 +++++++++---
 src/extensions/lens-runtime.ts                       | 10 +++++++++-
 src/renderer/components/layout/main-layout.tsx       |  4 ++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/extensions/example-extension/example-extension.tsx b/src/extensions/example-extension/example-extension.tsx
index 9a95f30f6e..f360cbf3cf 100644
--- a/src/extensions/example-extension/example-extension.tsx
+++ b/src/extensions/example-extension/example-extension.tsx
@@ -1,4 +1,4 @@
-import { DynamicPageType, Icon, LensExtension } from "@lens/extensions"; // fixme: map to generated types from "extension-api.d.ts"
+import { DynamicPageType, Icon, LensExtension } from "@lens/extensions"; // fixme: map to generated types from "extension-api.ts"
 import React from "react";
 import path from "path";
 
@@ -7,12 +7,18 @@ export default class ExampleExtension extends LensExtension {
 
   onActivate() {
     console.log('EXAMPLE EXTENSION: ACTIVATE', this.getMeta())
-    this.unRegisterPage = this.runtime.dynamicPages.register({
+    const { dynamicPages, components: { MainLayout } } = this.runtime;
+
+    this.unRegisterPage = dynamicPages.register({
       type: DynamicPageType.CLUSTER,
       path: "/extension-example",
       menuTitle: "Example Extension",
       components: {
-        Page: ExtensionPage,
+        Page: () => (
+          <MainLayout>
+            <ExtensionPage/>
+          </MainLayout>
+        ),
         MenuIcon: ExtensionIcon,
       }
     })
diff --git a/src/extensions/lens-runtime.ts b/src/extensions/lens-runtime.ts
index 333282a734..4e335317e1 100644
--- a/src/extensions/lens-runtime.ts
+++ b/src/extensions/lens-runtime.ts
@@ -1,15 +1,23 @@
-// Lens renderer runtime params available to the extension after activation
+// Lens renderer runtime params available to extensions after activation
+
 import logger from "../main/logger";
 import { dynamicPages } from "./register-page";
+import { MainLayout } from "../renderer/components/layout/main-layout";
 
 export interface LensRuntimeRendererEnv {
   logger: typeof logger;
   dynamicPages: typeof dynamicPages
+  components: {
+    MainLayout: typeof MainLayout
+  }
 }
 
 export function getLensRuntime(): LensRuntimeRendererEnv {
   return {
     logger,
     dynamicPages,
+    components: {
+      MainLayout // fixme: refactor, import as pure component from "@lens/extensions"
+    }
   }
 }
diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx
index def55961fa..8672e4ba23 100755
--- a/src/renderer/components/layout/main-layout.tsx
+++ b/src/renderer/components/layout/main-layout.tsx
@@ -17,7 +17,7 @@ export interface TabRoute extends RouteProps {
   url: string;
 }
 
-interface Props {
+export interface MainLayoutProps {
   className?: any;
   tabs?: TabRoute[];
   footer?: React.ReactNode;
@@ -27,7 +27,7 @@ interface Props {
 }
 
 @observer
-export class MainLayout extends React.Component<Props> {
+export class MainLayout extends React.Component<MainLayoutProps> {
   public storage = createStorage("main_layout", { pinnedSidebar: true });
 
   @observable isPinned = this.storage.get().pinnedSidebar;