TabLayout should not be part of LensRuntimeRendererEnv (#1029)

Signed-off-by: Roman <ixrock@gmail.com>

src/extensions/extension-api.ts

@@ -1,12 +1,13 @@
 // Lens-extensions api developer's kit
-export type { LensRuntimeRendererEnv } from "./lens-runtime";
+// TODO: add more common re-usable UI components + refactor interfaces (Props -> ComponentProps)
+
+// TODO: figure out how to import as normal npm-package
+export { default as React } from "react"
 
-// APIs
 export * from "./lens-extension"
+export { LensRuntimeRendererEnv } from "./lens-runtime";
 export { DynamicPageType } from "./register-page";
 
-// TODO: add more common re-usable UI components + refactor interfaces (Props -> ComponentProps)
-export { default as React } from "react"
 export * from "../renderer/components/icon"
 export * from "../renderer/components/tooltip"
 export * from "../renderer/components/button"

src/extensions/lens-runtime.ts

@@ -1,17 +1,13 @@
-// Lens renderer runtime params available to extensions after activation
+// Lens renderer runtime apis exposed to extensions once activated
 
 import logger from "../main/logger";
 import { dynamicPages } from "./register-page";
-import { TabLayout } from "../renderer/components/layout/tab-layout";
 import { navigate } from "../renderer/navigation";
 
 export interface LensRuntimeRendererEnv {
   navigate: typeof navigate;
   logger: typeof logger;
   dynamicPages: typeof dynamicPages
-  components: {
-    TabLayout: typeof TabLayout
-  }
 }
 
 export function getLensRuntime(): LensRuntimeRendererEnv {
@@ -19,8 +15,5 @@ export function getLensRuntime(): LensRuntimeRendererEnv {
     logger,
     navigate,
     dynamicPages,
-    components: {
-      TabLayout // fixme: refactor, import as pure component from "@lens/extensions"
-    }
   }
 }

src/extensions/register-page.tsx

@@ -2,18 +2,24 @@
 
 import { computed, observable } from "mobx";
 import React from "react";
-import type { IconProps } from "../renderer/components/icon";
+import { RouteProps } from "react-router";
+import { IconProps } from "../renderer/components/icon";
+import { cssNames, IClassName } from "../renderer/utils";
+import { TabLayout, TabRoute } from "../renderer/components/layout/tab-layout";
 
 export enum DynamicPageType {
   GLOBAL = "lens-scope",
   CLUSTER = "cluster-view-scope",
 }
 
-export interface PageRegistration {
+export interface PageRegistration extends RouteProps {
+  className?: IClassName;
+  url?: string; // initial url to be used for building menus and tabs, otherwise "path" applied by default
   path: string; // route-path
-  menuTitle: string;
+  title: React.ReactNode; // used in sidebar's & tabs-layout
   type: DynamicPageType;
   components: PageComponents;
+  subPages?: (PageRegistration & TabRoute)[];
 }
 
 export interface PageComponents {
@@ -43,4 +49,15 @@ export class PagesStore {
   }
 }
 
+export class DynamicPage extends React.Component<{ page: PageRegistration }> {
+  render() {
+    const { className, components: { Page }, subPages = [] } = this.props.page;
+    return (
+      <TabLayout className={cssNames("ExtensionPage", className)} tabs={subPages}>
+        <Page/>
+      </TabLayout>
+    )
+  }
+}
+
 export const dynamicPages = new PagesStore();