From 5ea3dd5f5b80c57899493a38656718b891a11e8e Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Wed, 20 Jan 2021 16:26:47 +0200
Subject: [PATCH] Fix extension cluster submenu re-render (#1996)

* fix extension cluster pages re-render when they are registered as a sub-menu item

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* lint fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* refactor

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 src/renderer/components/app.tsx | 46 +++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx
index 30b1be8ab2..8df692ebc7 100755
--- a/src/renderer/components/app.tsx
+++ b/src/renderer/components/app.tsx
@@ -44,7 +44,7 @@ import { ClusterPageMenuRegistration, clusterPageMenuRegistry } from "../../exte
 import { TabLayoutRoute, TabLayout } from "./layout/tab-layout";
 import { StatefulSetScaleDialog } from "./+workloads-statefulsets/statefulset-scale-dialog";
 import { eventStore } from "./+events/event.store";
-import { reaction, computed } from "mobx";
+import { reaction, computed, observable } from "mobx";
 import { nodesStore } from "./+nodes/nodes.store";
 import { podsStore } from "./+workloads-pods/pods.store";
 import { sum } from "lodash";
@@ -76,6 +76,8 @@ export class App extends React.Component {
     whatInput.ask(); // Start to monitor user input device
   }
 
+  @observable extensionRoutes: Map<ClusterPageMenuRegistration, React.ReactNode> = new Map();
+
   async componentDidMount() {
     const cluster = getHostedCluster();
     const promises: Promise<void>[] = [];
@@ -102,6 +104,12 @@ export class App extends React.Component {
     reaction(() => this.warningsCount, (count) => {
       broadcastMessage(`cluster-warning-event-count:${cluster.id}`, count);
     });
+
+    reaction(() => clusterPageMenuRegistry.getRootItems(), (rootItems) => {
+      this.generateExtensionTabLayoutRoutes(rootItems);
+    }, {
+      fireImmediately: true
+    });
   }
 
   @computed
@@ -145,22 +153,38 @@ export class App extends React.Component {
     return routes;
   }
 
-  renderExtensionTabLayoutRoutes() {
-    return clusterPageMenuRegistry.getRootItems().map((menu, index) => {
-      const tabRoutes = this.getTabLayoutRoutes(menu);
+  generateExtensionTabLayoutRoutes(rootItems: ClusterPageMenuRegistration[]) {
+    rootItems.forEach((menu, index) => {
+      let route = this.extensionRoutes.get(menu);
 
-      if (tabRoutes.length > 0) {
-        const pageComponent = () => <TabLayout tabs={tabRoutes} />;
+      if (!route) {
+        const tabRoutes = this.getTabLayoutRoutes(menu);
 
-        return <Route key={`extension-tab-layout-route-${index}`} component={pageComponent} path={tabRoutes.map((tab) => tab.routePath)} />;
-      } else {
-        const page = clusterPageRegistry.getByPageMenuTarget(menu.target);
+        if (tabRoutes.length > 0) {
+          const pageComponent = () => <TabLayout tabs={tabRoutes} />;
 
-        if (page) {
-          return <Route key={`extension-tab-layout-route-${index}`} path={page.routePath} exact={page.exact} component={page.components.Page}/>;
+          route = <Route key={`extension-tab-layout-route-${index}`} component={pageComponent} path={tabRoutes.map((tab) => tab.routePath)} />;
+          this.extensionRoutes.set(menu, route);
+        } else {
+          const page = clusterPageRegistry.getByPageMenuTarget(menu.target);
+
+          if (page) {
+            route = <Route key={`extension-tab-layout-route-${index}`} path={page.routePath} exact={page.exact} component={page.components.Page}/>;
+            this.extensionRoutes.set(menu, route);
+          }
         }
       }
     });
+
+    Array.from(this.extensionRoutes.keys()).forEach((menu) => {
+      if (!rootItems.includes(menu)) {
+        this.extensionRoutes.delete(menu);
+      }
+    });
+  }
+
+  renderExtensionTabLayoutRoutes() {
+    return Array.from(this.extensionRoutes.values());
   }
 
   renderExtensionRoutes() {