From 97a88eb2b8b2cdbac7dee3c8c120248379a49502 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 3 Mar 2021 10:50:50 +0300
Subject: [PATCH] Removing external observables out from App render()

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/app.tsx | 81 ++++++---------------------------
 1 file changed, 13 insertions(+), 68 deletions(-)

diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx
index 8a5bcf5cdd..eba890ff3f 100755
--- a/src/renderer/components/app.tsx
+++ b/src/renderer/components/app.tsx
@@ -51,6 +51,7 @@ import { CommandContainer } from "./command-palette/command-container";
 import { KubeObjectStore } from "../kube-object.store";
 import { clusterContext } from "./context";
 
+@observer
 export class App extends React.Component {
   static async init() {
     const frameId = webFrame.routingId;
@@ -90,19 +91,21 @@ export class App extends React.Component {
       reaction(() => this.warningsTotal, (count: number) => {
         broadcastMessage(`cluster-warning-event-count:${getHostedCluster().id}`, count);
       }),
+
+      reaction(getHostedCluster, () => {
+        this.setStartUrl();
+      })
     ]);
   }
 
+  @observable startUrl: string = clusterURL();
+
   @computed get warningsTotal(): number {
     return nodesStore.getWarningsCount() + eventStore.getWarningsCount();
   }
 
-  get startURL() {
-    if (isAllowedResource(["events", "nodes", "pods"])) {
-      return clusterURL();
-    }
-
-    return workloadsURL();
+  setStartUrl() {
+    this.startUrl = isAllowedResource(["events", "nodes", "pods"]) ? clusterURL() : workloadsURL();
   }
 
   getTabLayoutRoutes(menuItem: ClusterPageMenuRegistration) {
@@ -156,14 +159,11 @@ export class App extends React.Component {
   }
 
   render() {
-    const cluster = getHostedCluster();
-
     return (
       <Router history={history}>
         <ErrorBoundary>
           <MainLayout>
             <Switch>
-              <Redirect exact from="/" to={this.startURL}/>
               <Route component={ClusterOverview} {...clusterRoute}/>
               <Route component={Nodes} {...nodesRoute}/>
               <Route component={Workloads} {...workloadsRoute}/>
@@ -175,8 +175,9 @@ export class App extends React.Component {
               <Route component={CustomResources} {...crdRoute}/>
               <Route component={UserManagement} {...usersManagementRoute}/>
               <Route component={Apps} {...appsRoute}/>
-              <ExtensionTabLayoutRoutes/>
-              <ExtensionRoutes/>
+              {this.renderExtensionTabLayoutRoutes()}
+              {this.renderExtensionRoutes()}
+              <Redirect exact from="/" to={this.startUrl}/>
               <Route component={NotFound}/>
             </Switch>
           </MainLayout>
@@ -189,65 +190,9 @@ export class App extends React.Component {
           <StatefulSetScaleDialog/>
           <ReplicaSetScaleDialog/>
           <CronJobTriggerDialog/>
-          <CommandContainer cluster={cluster}/>
+          <CommandContainer/>
         </ErrorBoundary>
       </Router>
     );
   }
 }
-
-@observer
-class ExtensionRoutes extends React.Component {
-  render() {
-    return clusterPageRegistry.getItems().map((page, index) => {
-      const menu = clusterPageMenuRegistry.getByPage(page);
-
-      if (!menu) {
-        return <Route key={`extension-route-${index}`} path={page.url} component={page.components.Page}/>;
-      }
-    });
-  }
-}
-
-@observer
-class ExtensionTabLayoutRoutes extends React.Component {
-  getTabLayoutRoutes(menuItem: ClusterPageMenuRegistration) {
-    const routes: TabLayoutRoute[] = [];
-
-    if (!menuItem.id) {
-      return routes;
-    }
-    clusterPageMenuRegistry.getSubItems(menuItem).forEach((subMenu) => {
-      const page = clusterPageRegistry.getByPageTarget(subMenu.target);
-
-      if (page) {
-        routes.push({
-          routePath: page.url,
-          url: getExtensionPageUrl(subMenu.target),
-          title: subMenu.title,
-          component: page.components.Page,
-        });
-      }
-    });
-
-    return routes;
-  }
-
-  render() {
-    return clusterPageMenuRegistry.getRootItems().map((menu, index) => {
-      const tabRoutes = this.getTabLayoutRoutes(menu);
-
-      if (tabRoutes.length > 0) {
-        const pageComponent = () => <TabLayout tabs={tabRoutes}/>;
-
-        return <Route key={`extension-tab-layout-route-${index}`} component={pageComponent} path={tabRoutes.map((tab) => tab.routePath)}/>;
-      } else {
-        const page = clusterPageRegistry.getByPageTarget(menu.target);
-
-        if (page) {
-          return <Route key={`extension-tab-layout-route-${index}`} path={page.url} component={page.components.Page}/>;
-        }
-      }
-    });
-  }
-}