diff --git a/src/renderer/components/+cluster-settings/cluster-settings.tsx b/src/renderer/components/+cluster-settings/cluster-settings.tsx index 5383504979..0cec665538 100644 --- a/src/renderer/components/+cluster-settings/cluster-settings.tsx +++ b/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 { +} @observer -export class ClusterSettings extends React.Component { +export class ClusterSettings extends React.Component { 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 = ( <> diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index ccab5892ec..db0026bf75 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/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(() => [ diff --git a/src/renderer/components/cluster-manager/cluster-view.route.ts b/src/renderer/components/cluster-manager/cluster-view.route.ts index be342ecc35..82e99497d5 100644 --- a/src/renderer/components/cluster-manager/cluster-view.route.ts +++ b/src/renderer/components/cluster-manager/cluster-view.route.ts @@ -15,13 +15,10 @@ export const clusterViewRoute: RouteProps = { export const clusterViewURL = buildURL(clusterViewRoute.path) -export function getMatchedClusterId(extraRoutes: RouteProps[] = []): string { +export function getMatchedClusterId(): string { const matched = matchPath(navigation.location.pathname, { exact: true, - path: [ - clusterViewRoute.path, - ...extraRoutes.map(route => route.path) - ].flat(), + path: clusterViewRoute.path }) if (matched) { return matched.params.clusterId; diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx index 6cfb0ccb55..d65828f358 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.tsx +++ b/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 { 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 { render() { const { className } = this.props; const { newContexts } = userStore; + const { activeClusterId } = clusterStore; const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId); return (
@@ -112,26 +115,33 @@ export class ClustersMenu extends React.Component { ref={provided.innerRef} {...provided.droppableProps} > - {clusters.map((cluster, index) => ( - - {(provided: DraggableProvided) => ( -
- this.showCluster(cluster.id)} - onContextMenu={() => this.showContextMenu(cluster)} - /> -
- )} -
- ))} + {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 ( + + {(provided: DraggableProvided) => ( +
+ this.showCluster(cluster.id)} + onContextMenu={() => this.showContextMenu(cluster)} + /> +
+ )} +
+ )} + )} {provided.placeholder}
)}