Cluster settings refactorings

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

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

@@ -9,13 +9,16 @@ import { General } from "./general";
 import { WizardLayout } from "../layout/wizard-layout";
 import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
-import { getMatchedClusterId } from "../cluster-manager/cluster-view.route";
 import { navigate } from "../../navigation";
-import { clusterSettingsRoute } from "./cluster-settings.route";
+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);
   }
@@ -36,7 +39,7 @@ export class ClusterSettings extends React.Component {
   }
 
   render() {
-    const cluster = clusterStore.getById(getMatchedClusterId([clusterSettingsRoute]));
+    const cluster = clusterStore.getById(this.props.match.params.clusterId);
     if (!cluster) return null;
     const header = (
       <>

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

@@ -19,7 +19,7 @@ import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
 export class ClusterManager extends React.Component {
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => getMatchedClusterId(), initView, {
+      reaction(getMatchedClusterId, initView, {
         fireImmediately: true
       }),
       reaction(() => [

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

@@ -15,13 +15,10 @@ export const clusterViewRoute: RouteProps = {
 
 export const clusterViewURL = buildURL<IClusterViewRouteParams>(clusterViewRoute.path)
 
-export function getMatchedClusterId(extraRoutes: RouteProps[] = []): string {
+export function getMatchedClusterId(): string {
   const matched = matchPath<IClusterViewRouteParams>(navigation.location.pathname, {
     exact: true,
-    path: [
-      clusterViewRoute.path,
-      ...extraRoutes.map(route => route.path)
-    ].flat(),
+    path: clusterViewRoute.path
   })
   if (matched) {
     return matched.params.clusterId;

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

@@ -12,15 +12,16 @@ import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
 import { cssNames, IClassName, autobind } from "../../utils";
 import { Badge } from "../badge";
-import { navigate } from "../../navigation";
+import { navigate, navigation } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
 import { clusterSettingsURL, clusterSettingsRoute } from "../+cluster-settings";
 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, clusterViewRoute } from "./cluster-view.route";
 import { DragDropContext, Droppable, Draggable, DropResult, DroppableProvided, DraggableProvided } from "react-beautiful-dnd";
+import { matchPath } from "react-router";
 
 interface Props {
   className?: IClassName;
@@ -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
@@ -101,6 +103,7 @@ export class ClustersMenu extends React.Component<Props> {
   render() {
     const { className } = this.props;
     const { newContexts } = userStore;
+    const { activeClusterId } = clusterStore;
     const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
     return (
       <div className={cssNames("ClustersMenu flex column", className)}>
@@ -112,26 +115,33 @@ export class ClustersMenu extends React.Component<Props> {
                   ref={provided.innerRef}
                   {...provided.droppableProps}
                 >
-                  {clusters.map((cluster, index) => (
-                    <Draggable draggableId={cluster.id} index={index} key={cluster.id}>
-                      {(provided: DraggableProvided) => (
-                        <div
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                        >
-                          <ClusterIcon
-                            key={cluster.id}
-                            showErrors={true}
-                            cluster={cluster}
-                            isActive={cluster.id === getMatchedClusterId([clusterSettingsRoute])}
-                            onClick={() => this.showCluster(cluster.id)}
-                            onContextMenu={() => this.showContextMenu(cluster)}
-                          />
-                        </div>
-                      )}
-                    </Draggable>
-                  ))}
+                  {clusters.map((cluster, index) => {
+                    const matched = matchPath(navigation.location.pathname, {
+                      path: [clusterViewRoute.path, clusterSettingsRoute.path].flat(),
+                      exact: true
+                    })
+                    const isActive = activeClusterId === cluster.id && !!matched;
+                    return (
+                      <Draggable draggableId={cluster.id} index={index} key={cluster.id}>
+                        {(provided: DraggableProvided) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                          >
+                            <ClusterIcon
+                              key={cluster.id}
+                              showErrors={true}
+                              cluster={cluster}
+                              isActive={isActive}
+                              onClick={() => this.showCluster(cluster.id)}
+                              onContextMenu={() => this.showContextMenu(cluster)}
+                            />
+                          </div>
+                        )}
+                      </Draggable>
+                    )}
+                  )}
                   {provided.placeholder}
                 </div>
               )}