From c9a28fe626431dcfdfe5de9f42394a239c17cb0e Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Wed, 20 Jan 2021 14:36:44 +0200
Subject: [PATCH] fix extension cluster pages re-render when they are
 registered as a sub-menu item

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

diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx
index 30b1be8ab2..024f48ba09 100755
--- a/src/renderer/components/app.tsx
+++ b/src/renderer/components/app.tsx
@@ -51,6 +51,8 @@ import { sum } from "lodash";
 
 @observer
 export class App extends React.Component {
+  private extensionRoutes: Map<ClusterPageMenuRegistration, JSX.Element> = new Map();
+
   static async init() {
     const frameId = webFrame.routingId;
     const clusterId = getHostedClusterId();
@@ -145,21 +147,27 @@ export class App extends React.Component {
     return routes;
   }
 
-  renderExtensionTabLayoutRoutes() {
+  renderExtensionTabLayoutRoutes(): JSX.Element[] {
     return clusterPageMenuRegistry.getRootItems().map((menu, index) => {
-      const tabRoutes = this.getTabLayoutRoutes(menu);
+      let route = this.extensionRoutes.get(menu);
+      if (route) {
+        return route;
+      }
 
+      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)} />;
+        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) {
-          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}`} path={page.routePath} exact={page.exact} component={page.components.Page}/>;
+          this.extensionRoutes.set(menu, route);
         }
       }
+
+      return route;
     });
   }