Fix infinite render loop in release details (#4710)

* Fix infinite render loop in release details by replacing stateful, UI-triggered releaseStore with reactive async computed

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

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Update injectable

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

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Remove unnecessary return

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Remove empty lines

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Allow injection of history

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

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Make data required for opening of release details a dependency to make sure it's present

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

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Remove dead code

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

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Make arriving release values not re-render whole details

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/frames/cluster-frame/cluster-frame.tsx

@@ -6,7 +6,6 @@ import React from "react";
 import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
-import { history } from "../../navigation";
 import { UserManagement } from "../../components/+user-management/user-management";
 import { ConfirmDialog } from "../../components/confirm-dialog";
 import { ClusterOverview } from "../../components/+cluster/cluster-overview";
@@ -41,17 +40,18 @@ import { PortForwardDialog } from "../../port-forward";
 import { DeleteClusterDialog } from "../../components/delete-cluster-dialog";
 import type { NamespaceStore } from "../../components/+namespaces/namespace-store/namespace.store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import namespaceStoreInjectable
-  from "../../components/+namespaces/namespace-store/namespace-store.injectable";
+import namespaceStoreInjectable  from "../../components/+namespaces/namespace-store/namespace-store.injectable";
 import type { ClusterId } from "../../../common/cluster-types";
-import hostedClusterInjectable
-  from "../../../common/cluster-store/hosted-cluster/hosted-cluster.injectable";
+import hostedClusterInjectable from "../../../common/cluster-store/hosted-cluster/hosted-cluster.injectable";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import type { Disposer } from "../../../common/utils";
 import kubeWatchApiInjectable from "../../kube-watch-api/kube-watch-api.injectable";
+import historyInjectable from "../../navigation/history.injectable";
+import type { History } from "history";
 
 interface Dependencies {
+  history: History,
   namespaceStore: NamespaceStore
   hostedClusterId: ClusterId
   subscribeStores: (stores: KubeObjectStore<KubeObject>[]) => Disposer
@@ -135,10 +135,11 @@ class NonInjectedClusterFrame extends React.Component<Dependencies> {
 
   render() {
     return (
-      <Router history={history}>
+      <Router history={this.props.history}>
         <ErrorBoundary>
           <MainLayout sidebar={<Sidebar />} footer={<Dock />}>
             <Switch>
+
               <Route component={ClusterOverview} {...routes.clusterRoute}/>
               <Route component={Nodes} {...routes.nodesRoute}/>
               <Route component={Workloads} {...routes.workloadsRoute}/>
@@ -181,6 +182,7 @@ class NonInjectedClusterFrame extends React.Component<Dependencies> {
 
 export const ClusterFrame = withInjectables<Dependencies>(NonInjectedClusterFrame, {
   getProps: di => ({
+    history: di.inject(historyInjectable),
     namespaceStore: di.inject(namespaceStoreInjectable),
     hostedClusterId: di.inject(hostedClusterInjectable).id,
     subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,

src/renderer/frames/root-frame/root-frame.tsx

@@ -7,7 +7,6 @@ import { injectSystemCAs } from "../../../common/system-ca";
 import React from "react";
 import { Route, Router, Switch } from "react-router";
 import { observer } from "mobx-react";
-import { history } from "../../navigation";
 import { ClusterManager } from "../../components/cluster-manager";
 import { ErrorBoundary } from "../../components/error-boundary";
 import { Notifications } from "../../components/notifications";
@@ -16,14 +15,21 @@ import { CommandContainer } from "../../components/command-palette/command-conta
 import { ipcRenderer } from "electron";
 import { IpcRendererNavigationEvents } from "../../navigation/events";
 import { ClusterFrameHandler } from "../../components/cluster-manager/lens-views";
+import historyInjectable from "../../navigation/history.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { History } from "history";
 
 injectSystemCAs();
 
+interface Dependencies {
+  history: History
+}
+
 @observer
-export class RootFrame extends React.Component {
+class NonInjectedRootFrame extends React.Component<Dependencies> {
   static displayName = "RootFrame";
 
-  constructor(props: {}) {
+  constructor(props: Dependencies) {
     super(props);
 
     ClusterFrameHandler.createInstance();
@@ -35,7 +41,7 @@ export class RootFrame extends React.Component {
 
   render() {
     return (
-      <Router history={history}>
+      <Router history={this.props.history}>
         <ErrorBoundary>
           <Switch>
             <Route component={ClusterManager} />
@@ -48,3 +54,7 @@ export class RootFrame extends React.Component {
     );
   }
 }
+
+export const RootFrame = withInjectables(NonInjectedRootFrame, {
+  getProps: (di) => ({ history: di.inject(historyInjectable) }),
+});