TabLayout should not be part of LensRuntimeRendererEnv (#1029)

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

extensions/example-extension/index.tsx

@@ -1,4 +1,4 @@
-import { Button, DynamicPageType, Icon, IconProps, LensExtension, React } from "@lens/extensions";
+import { Button, Icon, IconProps, LensExtension, React, DynamicPageType } from "@lens/extensions";
 import { CoffeeDoodle } from "react-open-doodles";
 import path from "path";
 
@@ -8,7 +8,7 @@ export default class ExampleExtension extends LensExtension {
     this.registerPage({
       type: DynamicPageType.CLUSTER,
       path: "/extension-example",
-      menuTitle: "Example Extension",
+      title: "Example Extension",
       components: {
         Page: () => <ExtensionPage extension={this}/>,
         MenuIcon: ExtensionIcon,
@@ -33,19 +33,16 @@ export class ExtensionPage extends React.Component<{ extension: ExampleExtension
   }
 
   render() {
-    const { TabLayout } = this.props.extension.runtime.components;
     const doodleStyle = {
       width: "200px"
     }
     return (
-      <TabLayout className="ExampleExtension">
+      <div className="ExampleExtension flex column gaps align-flex-start">
-        <div className="flex column gaps align-flex-start">
+        <div style={doodleStyle}><CoffeeDoodle accent="#3d90ce"/></div>
-          <div style={doodleStyle}><CoffeeDoodle accent="#3d90ce" /></div>
         <p>Hello from Example extension!</p>
         <p>File: <i>{__filename}</i></p>
         <Button accent label="Deactivate" onClick={this.deactivate}/>
       </div>
-      </TabLayout>
     )
   }
 }

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();

src/renderer/components/app.tsx

@@ -36,7 +36,7 @@ import { getHostedCluster, getHostedClusterId } from "../../common/cluster-store
 import logger from "../../main/logger";
 import { clusterIpc } from "../../common/cluster-ipc";
 import { webFrame } from "electron";
-import { dynamicPages } from "../../extensions/register-page";
+import { DynamicPage, dynamicPages } from "../../extensions/register-page";
 
 @observer
 export class App extends React.Component {
@@ -74,8 +74,8 @@ export class App extends React.Component {
                 <Route component={CustomResources} {...crdRoute}/>
                 <Route component={UserManagement} {...usersManagementRoute}/>
                 <Route component={Apps} {...appsRoute}/>
-                {dynamicPages.clusterPages.map(({ path, components: { Page } }) => {
+                {dynamicPages.clusterPages.map(page => {
-                  return <Route key={path} path={path} component={Page}/>
+                  return <Route {...page} key={page.path} render={() => <DynamicPage page={page}/>}/>
                 })}
                 <Redirect exact from="/" to={this.startURL}/>
                 <Route component={NotFound}/>

src/renderer/components/layout/sidebar.tsx

@@ -184,14 +184,14 @@ export class Sidebar extends React.Component<Props> {
             >
               {this.renderCustomResources()}
             </SidebarNavItem>
-            {dynamicPages.clusterPages.map(({ path, menuTitle, components: { MenuIcon } }) => {
+            {dynamicPages.clusterPages.map(({ path, title, components: { MenuIcon } }) => {
               return (
                 <SidebarNavItem
                   key={path}
                   id={`extension-${path}`}
                   url={path}
                   routePath={path}
-                  text={menuTitle}
+                  text={title}
                   icon={<MenuIcon/>}
                 />
               )

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

@@ -1,5 +1,4 @@
 import "./tab-layout.scss";
-
 import React, { ReactNode } from "react";
 import { matchPath, RouteProps } from "react-router-dom";
 import { observer } from "mobx-react";
@@ -7,7 +6,6 @@ import { cssNames } from "../../utils";
 import { Tab, Tabs } from "../tabs";
 import { ErrorBoundary } from "../error-boundary";
 import { navigate, navigation } from "../../navigation";
-import { getHostedCluster } from "../../../common/cluster-store";
 
 export interface TabRoute extends RouteProps {
   title: React.ReactNode;
@@ -23,17 +21,13 @@ interface Props {
 
 export const TabLayout = observer(({ className, contentClass, tabs, children }: Props) => {
   const routePath = navigation.location.pathname;
-  const cluster = getHostedCluster();
-  if (!cluster) {
-    return null; // fix: skip render when removing active (visible) cluster
-  }
   return (
     <div className={cssNames("TabLayout", className)}>
       {tabs && (
         <Tabs center onChange={(url) => navigate(url)}>
           {tabs.map(({ title, path, url, ...routeProps }) => {
             const isActive = !!matchPath(routePath, { path, ...routeProps });
-            return <Tab key={url} label={title} value={url} active={isActive} />;
+            return <Tab key={url} label={title} value={url} active={isActive}/>;
           })}
         </Tabs>
       )}