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>

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} />;
 }

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} />;
 }

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} />;
 }