diff --git a/src/renderer/components/+cluster-settings/cluster-settings.tsx b/src/renderer/components/+cluster-settings/cluster-settings.tsx index 085ebdd37a..5383504979 100644 --- a/src/renderer/components/+cluster-settings/cluster-settings.tsx +++ b/src/renderer/components/+cluster-settings/cluster-settings.tsx @@ -9,8 +9,10 @@ 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 { getMatchedClusterId } from "../cluster-manager/cluster-view.route"; import { navigate } from "../../navigation"; +import { clusterSettingsRoute } from "./cluster-settings.route"; +import { clusterStore } from "../../../common/cluster-store"; @observer export class ClusterSettings extends React.Component { @@ -34,7 +36,7 @@ export class ClusterSettings extends React.Component { } render() { - const cluster = getMatchedCluster(); + const cluster = clusterStore.getById(getMatchedClusterId([clusterSettingsRoute])); 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 6011549e8c..eccb597af8 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 d2e39cbb0c..c60a456741 100644 --- a/src/renderer/components/cluster-manager/cluster-view.route.ts +++ b/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, getHostedClusterId } from "../../../common/cluster-store"; -import { clusterSettingsRoute } from "../+cluster-settings/cluster-settings.route"; export interface IClusterViewRouteParams { clusterId: string; @@ -16,12 +15,12 @@ export const clusterViewRoute: RouteProps = { export const clusterViewURL = buildURL(clusterViewRoute.path) -export function getMatchedClusterId(): string { +export function getMatchedClusterId(extraRoutes: RouteProps[] = []): string { const matched = matchPath(navigation.location.pathname, { exact: true, path: [ clusterViewRoute.path, - clusterSettingsRoute.path, + ...extraRoutes.map(route => route.path) ].flat(), }) if (matched) { diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx index b8d7a232b6..6cfb0ccb55 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.tsx +++ b/src/renderer/components/cluster-manager/clusters-menu.tsx @@ -14,7 +14,7 @@ import { cssNames, IClassName, autobind } from "../../utils"; import { Badge } from "../badge"; import { navigate } from "../../navigation"; import { addClusterURL } from "../+add-cluster"; -import { clusterSettingsURL } from "../+cluster-settings"; +import { clusterSettingsURL, clusterSettingsRoute } from "../+cluster-settings"; import { landingURL } from "../+landing-page"; import { Tooltip } from "../tooltip"; import { ConfirmDialog } from "../confirm-dialog"; @@ -124,7 +124,7 @@ export class ClustersMenu extends React.Component { key={cluster.id} showErrors={true} cluster={cluster} - isActive={cluster.id === getMatchedClusterId()} + isActive={cluster.id === getMatchedClusterId([clusterSettingsRoute])} onClick={() => this.showCluster(cluster.id)} onContextMenu={() => this.showContextMenu(cluster)} />