TabLayout should not be part of LensRuntimeRendererEnv (#1029)

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

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 } }) => {
-                  return <Route key={path} path={path} component={Page}/>
+                {dynamicPages.clusterPages.map(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>
       )}