App reload in cluster settings (#858)

* Passing extra routes where to find clusterId

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cluster settings refactorings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+cluster-settings/cluster-settings.tsx

@@ -9,11 +9,16 @@ import { General } from "./general";
 import { WizardLayout } from "../layout/wizard-layout";
 import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
-import { getMatchedCluster } from "../cluster-manager/cluster-view.route";
 import { navigate } from "../../navigation";
+import { IClusterSettingsRouteParams } from "./cluster-settings.route";
+import { clusterStore } from "../../../common/cluster-store";
+import { RouteComponentProps } from "react-router";
+
+interface Props extends RouteComponentProps<IClusterSettingsRouteParams> {
+}
 
 @observer
-export class ClusterSettings extends React.Component {
+export class ClusterSettings extends React.Component<Props> {
   async componentDidMount() {
     window.addEventListener('keydown', this.onEscapeKey);
   }
@@ -34,7 +39,7 @@ export class ClusterSettings extends React.Component {
   }
 
   render() {
-    const cluster = getMatchedCluster();
+    const cluster = clusterStore.getById(this.props.match.params.clusterId);
     if (!cluster) return null;
     const header = (
       <>

src/renderer/components/cluster-manager/cluster-view.route.ts

@@ -3,7 +3,6 @@ import { ipcRenderer } from "electron";
 import { matchPath, RouteProps } from "react-router";
 import { buildURL, navigation } from "../../navigation";
 import { clusterStore } from "../../../common/cluster-store";
-import { clusterSettingsRoute } from "../+cluster-settings/cluster-settings.route";
 
 export interface IClusterViewRouteParams {
   clusterId: string;
@@ -19,10 +18,7 @@ export const clusterViewURL = buildURL<IClusterViewRouteParams>(clusterViewRoute
 export function getMatchedClusterId(): string {
   const matched = matchPath<IClusterViewRouteParams>(navigation.location.pathname, {
     exact: true,
-    path: [
+    path: clusterViewRoute.path
-      clusterViewRoute.path,
-      clusterSettingsRoute.path,
-    ].flat(),
   })
   if (matched) {
     return matched.params.clusterId;

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import { observer } from "mobx-react";
 import { _i18n } from "../../i18n";
 import { t, Trans } from "@lingui/macro";
-import type { Cluster } from "../../../main/cluster";
 import { userStore } from "../../../common/user-store";
 import { ClusterId, clusterStore } from "../../../common/cluster-store";
 import { workspaceStore } from "../../../common/workspace-store";
@@ -19,8 +18,9 @@ import { landingURL } from "../+landing-page";
 import { Tooltip } from "../tooltip";
 import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
-import { clusterViewURL, getMatchedClusterId } from "./cluster-view.route";
+import { clusterViewURL } from "./cluster-view.route";
 import { DragDropContext, Droppable, Draggable, DropResult, DroppableProvided, DraggableProvided } from "react-beautiful-dnd";
+import type { Cluster } from "../../../main/cluster";
 
 interface Props {
   className?: IClassName;
@@ -35,6 +35,7 @@ export class ClustersMenu extends React.Component<Props> {
 
   addCluster = () => {
     navigate(addClusterURL());
+    clusterStore.setActive(null);
   }
 
   showContextMenu = (cluster: Cluster) => {
@@ -44,6 +45,7 @@ export class ClustersMenu extends React.Component<Props> {
     menu.append(new MenuItem({
       label: _i18n._(t`Settings`),
       click: () => {
+        clusterStore.setActive(cluster.id);
         navigate(clusterSettingsURL({
           params: {
             clusterId: cluster.id
@@ -57,6 +59,7 @@ export class ClustersMenu extends React.Component<Props> {
         click: async () => {
           if (clusterStore.isActive(cluster.id)) {
             navigate(landingURL());
+            clusterStore.setActive(null);
           }
           await clusterIpc.disconnect.invokeFromRenderer(cluster.id);
         }
@@ -112,7 +115,9 @@ export class ClustersMenu extends React.Component<Props> {
                   ref={provided.innerRef}
                   {...provided.droppableProps}
                 >
-                  {clusters.map((cluster, index) => (
+                  {clusters.map((cluster, index) => {
+                    const isActive = cluster.id === clusterStore.activeClusterId;
+                    return (
                       <Draggable draggableId={cluster.id} index={index} key={cluster.id}>
                         {(provided: DraggableProvided) => (
                           <div
@@ -124,14 +129,15 @@ export class ClustersMenu extends React.Component<Props> {
                               key={cluster.id}
                               showErrors={true}
                               cluster={cluster}
-                            isActive={cluster.id === getMatchedClusterId()}
+                              isActive={isActive}
                               onClick={() => this.showCluster(cluster.id)}
                               onContextMenu={() => this.showContextMenu(cluster)}
                             />
                           </div>
                         )}
                       </Draggable>
-                  ))}
+                    )}
+                  )}
                   {provided.placeholder}
                 </div>
               )}