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

Cluster settings refactorings

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-09-11 16:59:44 +03:00
parent ceff5a2574
commit 5a53259873
4 changed files with 42 additions and 32 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,13 +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 { getMatchedClusterId } from "../cluster-manager/cluster-view.route";
import { navigate } from "../../navigation"; import { navigate } from "../../navigation";
import { clusterSettingsRoute } from "./cluster-settings.route"; import { IClusterSettingsRouteParams } from "./cluster-settings.route";
import { clusterStore } from "../../../common/cluster-store"; 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);
} }
@ -36,7 +39,7 @@ export class ClusterSettings extends React.Component {
} }
render() { render() {
const cluster = clusterStore.getById(getMatchedClusterId([clusterSettingsRoute])); const cluster = clusterStore.getById(this.props.match.params.clusterId);
if (!cluster) return null; if (!cluster) return null;
const header = ( const header = (
<> <>

2
src/renderer/components/cluster-manager/cluster-manager.tsx
View File

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

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

@ -15,13 +15,10 @@ export const clusterViewRoute: RouteProps = {
export const clusterViewURL = buildURL<IClusterViewRouteParams>(clusterViewRoute.path) export const clusterViewURL = buildURL<IClusterViewRouteParams>(clusterViewRoute.path)
export function getMatchedClusterId(extraRoutes: RouteProps[] = []): 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,
...extraRoutes.map(route => route.path)
].flat(),
}) })
if (matched) { if (matched) {
return matched.params.clusterId; return matched.params.clusterId;

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

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