hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

App reload in cluster settings (#858)

Browse Source 
* 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>
This commit is contained in:
Alex Andreev 2020-09-12 16:35:04 +03:00 committed by GitHub
parent cc973bb9ef
commit c6b3738a75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/components/+cluster-settings/cluster-settings.tsx
View File

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

6
src/renderer/components/cluster-manager/cluster-view.route.ts
View File

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

50
src/renderer/components/cluster-manager/clusters-menu.tsx
View File

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