fixes / refactoring

Signed-off-by: Roman <ixrock@gmail.com>

src/common/base-store.ts

@@ -92,14 +92,14 @@ export class BaseStore<T = any> extends Singleton {
 
   protected onConfigChange(data: T, oldValue: Partial<T>) {
     if (!isEqual(this.toJSON(), data)) {
-      logger.debug(`💿 Store received update from ${this.name}`, { data, oldValue });
+      logger.info(`💿 Store received update from ${this.name}`, { data, oldValue });
       this.fromStore(data);
     }
   }
 
   protected onModelChange(model: T) {
     if (!isEqual(this.storeModel, model)) {
-      logger.debug(`💿 Store ${this.name} is saving updates from app runtime`, {
+      logger.info(`💿 Store ${this.name} is saving updates from app runtime`, {
         data: model,
         oldValue: this.storeModel
       });

src/common/cluster-store.ts

@@ -14,6 +14,7 @@ export type ClusterId = string;
 export interface ClusterModel {
   id: ClusterId;
   workspace?: string;
+  contextName?: string;
   preferences?: ClusterPreferences;
   kubeConfigPath: string;
 

src/main/cluster.ts

@@ -51,7 +51,7 @@ export class Cluster implements ClusterModel {
   updateModel(model: ClusterModel) {
     Object.assign(this, model);
     this.apiUrl = this.getKubeconfig().getCurrentCluster().server;
-    this.contextName = this.preferences.clusterName;
+    this.contextName = this.contextName || this.preferences.clusterName;
   }
 
   @action

src/renderer/components/+add-cluster/add-cluster.route.ts

@@ -0,0 +1,8 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const addClusterRoute: RouteProps = {
+  path: "/add-cluster"
+}
+
+export const addClusterURL = buildURL(addClusterRoute.path)

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

@@ -1,10 +1,12 @@
 import "./add-cluster.scss"
 import React from "react";
+import { observable } from "mobx";
 
 interface Props {
 }
 
-export class AddCluster extends React.Component {
+@observable
+export class AddCluster extends React.Component<Props> {
   render() {
     return (
       <div className="AddCluster">

src/renderer/components/+add-cluster/index.ts

@@ -1 +1,2 @@
 export * from "./add-cluster"
+export * from "./add-cluster.route"

src/renderer/components/+cluster-settings/cluster-icon.scss

@@ -6,12 +6,10 @@
   border-radius: $radius;
   cursor: pointer;
 
-  &.interactive {
+  &.active, &.interactive:hover {
-    &:hover {
+    opacity: 1;
-      opacity: 1;
+    background-color: #fff;
-      background-color: #fff;
+    box-shadow: 0 0 0 $radius #fff;
-      box-shadow: 0 0 0 $radius #fff;
-    }
   }
 
   > img {

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

@@ -14,6 +14,7 @@ interface Props extends DOMAttributes<HTMLElement> {
   errorClass?: IClassName;
   showErrors?: boolean;
   interactive?: boolean;
+  isActive?: boolean;
   options?: HashiconParams;
 }
 
@@ -26,11 +27,12 @@ export class ClusterIcon extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
   render() {
-    const { className: cName, cluster, showErrors, errorClass, options, interactive, children, ...elemProps } = this.props;
+    const { className: cName, cluster, showErrors, errorClass, options, interactive, isActive, children, ...elemProps } = this.props;
     const { isAdmin, eventCount, preferences } = cluster;
     const { clusterName, icon } = preferences;
     const className = cssNames("ClusterIcon flex inline", cName, {
       interactive: interactive || !!this.props.onClick,
+      active: isActive,
     });
     return (
       <div {...elemProps} className={className}>

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

@@ -22,9 +22,9 @@ interface Props {
 
 @observer
 export class ClustersMenu extends React.Component<Props> {
-  selectCluster = (cluster: Cluster) => {
+  showCluster = (cluster: Cluster) => {
     clusterStore.activeClusterId = cluster.id;
-    console.log('load lens for cluster:', cluster)
+    console.log('load lens for cluster:', cluster.id);
   }
 
   addCluster = () => {
@@ -59,14 +59,13 @@ export class ClustersMenu extends React.Component<Props> {
     return (
       <div className={cssNames("ClustersMenu flex gaps column", className)}>
         {clusters.map(cluster => {
-          const isActive = cluster.id === clusterStore.activeClusterId;
           return (
             <ClusterIcon
               key={cluster.id}
               showErrors={true}
               cluster={cluster}
-              className={cssNames({ active: isActive })}
+              isActive={cluster.id === clusterStore.activeClusterId}
-              onClick={() => this.selectCluster(cluster)}
+              onClick={() => this.showCluster(cluster)}
               onContextMenu={() => this.showContextMenu(cluster)}
             />
           )