From 09824a6e016e9f33ddb2a136e7727f738620c74d Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Thu, 3 Feb 2022 12:26:14 +0100
Subject: [PATCH] Prevent creation of dynamic components where withInjectables
 use type parameters to make React not re-mount because of dynamic components
 being different (#4808)

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 .../kube-object-list-layout.tsx               | 30 ++++++++--------
 .../kube-object-menu/kube-object-menu.tsx     | 34 +++++++++----------
 src/renderer/components/table/table.tsx       | 22 ++++++------
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx b/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
index de1253fd65..ec0245c512 100644
--- a/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
+++ b/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
@@ -138,23 +138,25 @@ class NonInjectedKubeObjectListLayout<K extends KubeObject> extends React.Compon
   }
 }
 
+const InjectedKubeObjectListLayout = withInjectables<
+  Dependencies,
+  KubeObjectListLayoutProps<KubeObject>
+>(
+  NonInjectedKubeObjectListLayout,
+
+  {
+    getProps: (di, props) => ({
+      clusterFrameContext: di.inject(clusterFrameContextInjectable),
+      subscribeToStores: di.inject(kubeWatchApiInjectable).subscribeStores,
+      ...props,
+    }),
+  },
+);
+
+
 export function KubeObjectListLayout<K extends KubeObject>(
   props: KubeObjectListLayoutProps<K>,
 ) {
-  const InjectedKubeObjectListLayout = withInjectables<
-    Dependencies,
-    KubeObjectListLayoutProps<K>
-  >(
-    NonInjectedKubeObjectListLayout,
-
-    {
-      getProps: (di, props) => ({
-        clusterFrameContext: di.inject(clusterFrameContextInjectable),
-        subscribeToStores: di.inject(kubeWatchApiInjectable).subscribeStores,
-        ...props,
-      }),
-    },
-  );
 
   return <InjectedKubeObjectListLayout {...props} />;
 }
diff --git a/src/renderer/components/kube-object-menu/kube-object-menu.tsx b/src/renderer/components/kube-object-menu/kube-object-menu.tsx
index 6d425ab9c3..83cba3ade7 100644
--- a/src/renderer/components/kube-object-menu/kube-object-menu.tsx
+++ b/src/renderer/components/kube-object-menu/kube-object-menu.tsx
@@ -108,25 +108,25 @@ class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject> extends React.Co
   }
 }
 
+const InjectedKubeObjectMenu = withInjectables<Dependencies, KubeObjectMenuProps<KubeObject>>(
+  NonInjectedKubeObjectMenu,
+  {
+    getProps: (di, props) => ({
+      clusterName: di.inject(clusterNameInjectable),
+      apiManager: di.inject(apiManagerInjectable),
+      createEditResourceTab: di.inject(createEditResourceTabInjectable),
+      hideDetails: di.inject(hideDetailsInjectable),
+
+      kubeObjectMenuItems: di.inject(kubeObjectMenuItemsInjectable, {
+        kubeObject: props.object,
+      }),
+      ...props,
+    }),
+  },
+);
+
 export function KubeObjectMenu<T extends KubeObject>(
   props: KubeObjectMenuProps<T>,
 ) {
-  const InjectedKubeObjectMenu = withInjectables<Dependencies, KubeObjectMenuProps<T>>(
-    NonInjectedKubeObjectMenu,
-    {
-      getProps: (di, props) => ({
-        clusterName: di.inject(clusterNameInjectable),
-        apiManager: di.inject(apiManagerInjectable),
-        createEditResourceTab: di.inject(createEditResourceTabInjectable),
-        hideDetails: di.inject(hideDetailsInjectable),
-
-        kubeObjectMenuItems: di.inject(kubeObjectMenuItemsInjectable, {
-          kubeObject: props.object,
-        }),
-        ...props,
-      }),
-    },
-  );
-
   return <InjectedKubeObjectMenu {...props} />;
 }
diff --git a/src/renderer/components/table/table.tsx b/src/renderer/components/table/table.tsx
index 4823626094..be9a6f6ac8 100644
--- a/src/renderer/components/table/table.tsx
+++ b/src/renderer/components/table/table.tsx
@@ -246,18 +246,18 @@ class NonInjectedTable<Item> extends React.Component<TableProps<Item> & Dependen
   }
 }
 
+const InjectedTable = withInjectables<Dependencies, TableProps<any>>(
+  NonInjectedTable,
+
+  {
+    getProps: (di, props) => ({
+      model: di.inject(tableModelInjectable),
+      ...props,
+    }),
+  },
+);
+
 export function Table<Item>(props: TableProps<Item>) {
-  const InjectedTable = withInjectables<Dependencies, TableProps<Item>>(
-    NonInjectedTable,
-
-    {
-      getProps: (di, props) => ({
-        model: di.inject(tableModelInjectable),
-        ...props,
-      }),
-    },
-  );
-
   return <InjectedTable {...props} />;
 }