convert the cluster settings view from Vue to React (#613)

- Add a basic file picker component
- Now stores the icons as base64 img src formatted data blobs
- Changed over cluster settings to mobx
- Removed old Vue files

Signed-off-by: Sebastian Malton <smalton@mirantis.com>

Co-authored-by: Sebastian Malton <smalton@mirantis.com>

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

@@ -1,3 +1,86 @@
 .ClusterSettings {
-  
+    overflow-y: scroll;
+    grid-template-columns: unset;
+
+    .info-col {
+        display: none;
+    }
+
+    .content-col {
+        margin-right: unset;
+    }
+
+    * {
+        margin-top: 40px;
+
+        &:first-child {
+            margin-top: 0px;
+        }
+    }
+
+    h4 {
+        margin-top: 20px;
+    }
+
+    .status-table {
+        margin-top: 20px;
+        display: grid;
+        grid-template-columns: 1fr 3fr;
+        grid-gap: 10px;
+    }
+
+    .loading {
+        margin-top: 20px;
+        text-align: center;
+
+        .Spinner {
+            display: inline-block;
+        }
+    }
+
+    .Input,.Select {
+        margin-top: 10px;
+    }
+
+    .Icon:not(.updated):not(.clean) {
+        color: #ad0000;
+    }
+
+    .Icon.updated {
+        color: #00dd1d;
+    }
+
+    .updated {
+        animation: updated-name 1s 1;
+        animation-fill-mode: forwards;
+        animation-delay: 3s;
+    }
+
+    @keyframes updated-name {
+        from {opacity :1;}
+        to {opacity :0;}
+    }
+
+    .center {
+        text-align: center;
+    }
+
+    input[type="text"]::placeholder {
+        font-size: small;
+        color: #707070;
+    }
+
+    input[type="text"] {
+        color: white;
+    }
+
+    button {
+        margin-top: 5px;
+
+        .Spinner {
+            width: 10px;
+            height: 10px;
+            border-color: transparent black;
+        }
+    }
 }

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

@@ -1,14 +1,25 @@
 import "./cluster-settings.scss"
 import React from "react";
 import { observer } from "mobx-react";
+import { Features } from "./features" 
+import { Removal } from "./removal"
+import { Status } from "./status"
+import { General } from "./general"
+import { getHostedCluster } from "../../../common/cluster-store"
+import { WizardLayout } from "../layout/wizard-layout";
 
 @observer
 export class ClusterSettings extends React.Component {
   render() {
+    const cluster = getHostedCluster();
+    
     return (
-      <div className="ClusterSettings">
-        ClusterSettings
-      </div>
-    );
+      <WizardLayout className="ClusterSettings">
+        <Status cluster={cluster}></Status>
+        <General cluster={cluster}></General>
+        <Features cluster={cluster}></Features>
+        <Removal cluster={cluster}></Removal>
+      </WizardLayout>
+    )
   }
 }

src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { Input } from "../../input";
+import { Spinner } from "../../spinner";
+import { clusterStore } from "../../../../common/cluster-store"
+import { Icon } from "../../icon";
+import { Tooltip, TooltipPosition } from "../../tooltip";
+import { autobind } from "../../../utils";
+import { TextInputStatus } from "./statuses"
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+
+interface Props {
+    cluster: Cluster;
+}
+
+@observer
+export class ClusterHomeDirSetting extends React.Component<Props> {
+  @observable directory = this.props.cluster.preferences.terminalCWD || "";
+  @observable status = TextInputStatus.CLEAN;
+  @observable errorText?: string;
+
+  render() {
+    return <>
+      <h4>Working Directory</h4>
+      <p>Set initial working directory for terminals. When set it will the `pwd` when a new terminal instance is opened for this cluster.</p>
+      <Input
+        theme="round-black"
+        className="box grow"
+        value={this.directory}
+        onSubmit={this.onWorkingDirectorySubmit}
+        onChange={this.onWorkingDirectoryChange}
+        iconRight={this.getIconRight()}
+        placeholder="$HOME"
+      />
+    </>;
+  }
+
+  @autobind()
+  onWorkingDirectoryChange(directory: string, _e: React.ChangeEvent) {
+    if (this.status === TextInputStatus.UPDATING) {
+      console.log("prevent changing cluster directory while updating");
+      return;
+    }
+    
+    this.status = this.dirDiffers(directory);
+    this.directory = directory;
+  }
+  
+  dirDiffers(directory: string): TextInputStatus {
+    const { terminalCWD = "" } = this.props.cluster.preferences;
+
+    return directory === terminalCWD ? TextInputStatus.CLEAN : TextInputStatus.DIRTY;
+  }
+  
+  getIconRight(): React.ReactNode {
+    switch (this.status) {
+    case TextInputStatus.CLEAN:
+      return null;
+    case TextInputStatus.DIRTY:
+      return <Icon size="16px" material="fiber_manual_record"/>;
+    case TextInputStatus.UPDATED:
+      return <Icon size="16px" className="updated" material="done"/>;
+    case TextInputStatus.UPDATING:
+      return <Spinner />;
+    case TextInputStatus.ERROR:
+      return <Icon id="cluster-directory-setting-error-icon" size="16px" material="error">
+        <Tooltip targetId="cluster-directory-setting-error-icon" position={TooltipPosition.TOP}>
+          {this.errorText}
+        </Tooltip>
+      </Icon>
+    }
+  }
+
+  @autobind()
+  onWorkingDirectorySubmit(directory: string) {
+    if (this.dirDiffers(directory) !== TextInputStatus.DIRTY) {
+      return;
+    }
+
+    this.status = TextInputStatus.UPDATING
+    this.props.cluster.preferences.terminalCWD = directory;
+    this.directory = directory;
+    this.status = TextInputStatus.UPDATED
+  }
+}

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

@@ -0,0 +1,72 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { clusterStore } from "../../../../common/cluster-store"
+import { Icon } from "../../icon";
+import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
+import { autobind } from "../../../utils";
+import { Button } from "../../button";
+import { GeneralInputStatus } from "./statuses"
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+
+interface Props {
+    cluster: Cluster;
+}
+
+@observer
+export class ClusterIconSetting extends React.Component<Props> {
+  @observable status = GeneralInputStatus.CLEAN;
+  @observable errorText?: string;
+
+  @autobind()
+  async onIconPick([file]: File[]) {
+    const { cluster } = this.props;
+    
+    try {
+      if (file) {
+        const buf = Buffer.from(await file.arrayBuffer());
+        cluster.preferences.icon = `data:image/jpeg;base64, ${buf.toString('base64')}`;
+      } else {
+        // this has to be done as a seperate branch (and not always) because `cluster`
+        // is observable and triggers an update loop.
+        cluster.preferences.icon = undefined;
+      }
+    } catch (e) {
+      this.errorText = e.toString()
+      this.status = GeneralInputStatus.ERROR
+    }
+  }
+
+  getClearButton() {
+    const { cluster } = this.props;
+
+    if (cluster.preferences.icon) {
+      return <Button accent onClick={() => this.onIconPick([])}>Clear</Button>
+    }
+  }
+
+  render() {
+    return <>
+      <h4>Cluster Icon</h4>
+      <p>Set cluster icon. By default it is automatically generated. {this.getIconRight()}</p>
+      <div className="center">
+        <FilePicker 
+          accept="image/*" 
+          labelText="Browse for new icon..." 
+          onOverSizeLimit={OverSizeLimitStyle.FILTER} 
+          handler={this.onIconPick}
+        />
+        {this.getClearButton()}
+      </div>
+    </>;
+  }
+  
+  getIconRight(): React.ReactNode {
+    switch (this.status) {
+    case GeneralInputStatus.CLEAN:
+      return null;
+    case GeneralInputStatus.ERROR:
+      return <Icon size="16px" material="error" title={this.errorText}></Icon>
+    }
+  }
+}

src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { Input } from "../../input";
+import { Spinner } from "../../spinner";
+import { clusterStore } from "../../../../common/cluster-store"
+import { Icon } from "../../icon";
+import { Tooltip, TooltipPosition } from "../../tooltip";
+import { autobind } from "../../../utils";
+import { TextInputStatus } from "./statuses"
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+
+interface Props {
+    cluster: Cluster;
+}
+
+@observer
+export class ClusterNameSetting extends React.Component<Props> {
+  @observable name = this.props.cluster.preferences.clusterName || "";
+  @observable status = TextInputStatus.CLEAN;
+  @observable errorText?: string;
+
+  render() {
+    return <>
+      <h4>Cluster Name</h4>
+      <p>Change cluster name:</p>
+      <Input
+        theme="round-black"
+        className="box grow"
+        value={this.name}
+        onSubmit={this.onClusterNameSubmit}
+        onChange={this.onClusterNameChange}
+        iconRight={this.getIconRight()}
+      />
+    </>;
+  }
+
+  @autobind()
+  onClusterNameChange(name: string, _e: React.ChangeEvent) {
+    if (this.status === TextInputStatus.UPDATING) {
+      console.log("prevent changing cluster name while updating");
+      return;
+    }
+    
+    this.status = this.nameDiffers(name)
+    this.name = name;
+  }
+  
+  nameDiffers(name: string): TextInputStatus {
+    const { clusterName } = this.props.cluster.preferences;
+
+    return name === clusterName ? TextInputStatus.CLEAN : TextInputStatus.DIRTY;
+  }
+  
+  getIconRight(): React.ReactNode {
+    switch (this.status) {
+    case TextInputStatus.CLEAN:
+      return null;
+    case TextInputStatus.DIRTY:
+      return <Icon size="16px" material="fiber_manual_record"/>;
+    case TextInputStatus.UPDATED:
+      return <Icon size="16px" className="updated" material="done"/>;
+    case TextInputStatus.UPDATING:
+      return <Spinner/>;
+    case TextInputStatus.ERROR:
+      return <Icon id="cluster-name-setting-error-icon" size="16px" material="error">
+        <Tooltip targetId="cluster-name-setting-error-icon" position={TooltipPosition.TOP}>
+          {this.errorText}
+        </Tooltip>
+      </Icon>
+    }
+  }
+
+  @autobind()
+  onClusterNameSubmit(name: string) {
+    if (this.nameDiffers(name) !== TextInputStatus.DIRTY) {
+      return;
+    }
+
+    this.status = TextInputStatus.UPDATING 
+    this.props.cluster.preferences.clusterName = name;
+    this.name = name;
+    this.status = TextInputStatus.UPDATED
+  }
+}

src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { clusterStore } from "../../../../common/cluster-store"
+import { Select, SelectOption, SelectProps } from "../../select";
+import { prometheusProviders } from "../../../../common/prometheus-providers";
+import { autobind } from "../../../utils";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+
+const prometheusGuide = "https://github.com/lensapp/lens/blob/master/troubleshooting/custom-prometheus.md";
+const options: SelectOption<string>[] = [
+  { value: "", label: "Auto detect" }, 
+  ...prometheusProviders.map(pp => ({value: pp.id, label: pp.name}))
+];
+
+interface Props {
+    cluster: Cluster;
+}
+
+@observer
+export class ClusterPrometheusSetting extends React.Component<Props> {
+  @observable prometheusProvider = this.props.cluster.preferences.prometheusProvider?.type || "";
+  
+  render() {
+    return <>
+      <h4>Cluster Prometheus</h4>
+      <p>Use pre-installed Prometheus service for metrics. Please refer to <a href={prometheusGuide}>this guide</a> for possible configuration changes.</p>
+      <Select
+        value={this.prometheusProvider}
+        options={options}
+        onChange={this.changePrometheusProvider}
+      />
+    </>;
+  }
+
+  @autobind()
+  changePrometheusProvider({ value: prometheusProvider }: SelectProps<string>) {
+    this.prometheusProvider = prometheusProvider;
+    this.props.cluster.preferences.prometheusProvider = { type: prometheusProvider };
+  }
+}

src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { Input } from "../../input";
+import { Spinner } from "../../spinner";
+import { clusterStore } from "../../../../common/cluster-store"
+import { Icon } from "../../icon";
+import { Tooltip, TooltipPosition } from "../../tooltip";
+import { autobind } from "../../../utils";
+import { TextInputStatus } from "./statuses"
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+
+interface Props {
+    cluster: Cluster;
+}
+
+@observer
+export class ClusterProxySetting extends React.Component<Props> {
+  @observable proxy = this.props.cluster.preferences.httpsProxy || "";
+  @observable status = TextInputStatus.CLEAN;
+  @observable errorText?: string;
+
+  render() {
+    return <>
+      <h4>HTTPS Proxy</h4>
+      <p>HTTPS Proxy server. Used for communicating with Kubernetes API.</p>
+      <Input
+        theme="round-black"
+        className="box grow"
+        value={this.proxy}
+        onSubmit={this.updateClusterProxy}
+        onChange={this.changeProxyState}
+        iconRight={this.getIconRight()}
+        placeholder="https://<address>:<port>"
+      />
+    </>;
+  }
+
+  @autobind()
+  changeProxyState(proxy: string, _e: React.ChangeEvent) {
+    if (this.status === TextInputStatus.UPDATING) {
+      console.log("prevent changing cluster proxy while updating");
+      return;
+    }
+    
+    this.status = this.proxyDiffers(proxy);
+    this.proxy = proxy;
+  }
+  
+  proxyDiffers(proxy: string): TextInputStatus {
+    const { httpsProxy = "" } = this.props.cluster.preferences;
+
+    return proxy === httpsProxy ? TextInputStatus.CLEAN : TextInputStatus.DIRTY;
+  }
+  
+  getIconRight(): React.ReactNode {
+    switch (this.status) {
+    case TextInputStatus.CLEAN:
+      return null;
+    case TextInputStatus.DIRTY:
+      return <Icon size="16px" material="fiber_manual_record"/>;
+    case TextInputStatus.UPDATED:
+      return <Icon size="16px" className="updated" material="done"/>;
+    case TextInputStatus.UPDATING:
+      return <Spinner />;
+    case TextInputStatus.ERROR:
+      return <Icon id="cluster-proxy-setting-error-icon" size="16px" material="error">
+        <Tooltip targetId="cluster-proxy-setting-error-icon" position={TooltipPosition.TOP}>
+          {this.errorText}
+        </Tooltip>
+      </Icon>
+    }
+  }
+
+  @autobind()
+  updateClusterProxy(proxy: string) {
+    if (this.proxyDiffers(proxy) !== TextInputStatus.DIRTY) {
+      return;
+    }
+
+    try {
+      const url = new URL(proxy);
+      
+      if (url.protocol !== "https") {
+        this.status = TextInputStatus.ERROR
+        this.errorText= `Proxy's protocol should be "https"`
+        return
+      }
+      if (url.port === "") {
+        this.status = TextInputStatus.ERROR
+        this.errorText= "Proxy should include a port"
+        return
+      }
+    } catch (e) {
+      this.status = TextInputStatus.ERROR
+      this.errorText= "Invalid URL"
+      return
+    }
+
+    this.status = TextInputStatus.UPDATING
+    this.props.cluster.preferences.httpsProxy = proxy;
+    this.proxy = proxy;
+    this.status = TextInputStatus.UPDATED
+  }
+}

src/renderer/components/+cluster-settings/components/cluster-workspace-setting.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { clusterStore } from "../../../../common/cluster-store"
+import { workspaceStore } from "../../../../common/workspace-store"
+import { Select, SelectOption } from "../../../components/select";
+import { GeneralInputStatus } from "./statuses"
+import { observable } from "mobx";
+import { autobind } from "../../../utils";
+import { observer } from "mobx-react";
+
+interface Props {
+    cluster: Cluster;
+}
+
+@observer
+export class ClusterWorkspaceSetting extends React.Component<Props> {
+  @observable workspace = this.props.cluster.workspace;
+
+  render() {
+    return <>
+      <h4>Cluster Workspace</h4>
+      <p>Change cluster workspace:</p>
+      <Select
+        value={workspaceStore.currentWorkspaceId}
+        options={workspaceStore.workspacesList.map(w => ({value: w.id, label: <span>{w.name}</span>}))}
+        onChange={this.changeWorkspace}
+      />
+    </>;
+  }
+
+  @autobind()
+  changeWorkspace({ value: workspace }: SelectOption<string>) {
+    this.workspace = workspace;
+    this.props.cluster.workspace = workspace;
+  }
+}

src/renderer/components/+cluster-settings/components/install-metrics.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { Button } from "../../button";
+import { autobind } from "../../../utils";
+import { Tooltip, TooltipPosition } from "../../tooltip";
+import { MetricsFeature } from "../../../../features/metrics";
+import { Spinner } from "../../spinner";
+import { Icon } from "../../icon";
+import { clusterIpc } from "../../../../common/cluster-ipc";
+import { observable } from "mobx";
+import { ActionStatus } from "./statuses"
+import { observer } from "mobx-react";
+
+interface Props {
+  cluster: Cluster;
+}
+
+@observer
+export class InstallMetrics extends React.Component<Props> {
+  @observable status = ActionStatus.IDLE;
+  @observable errorText?: string;
+
+  render() {
+    return <>
+      <h4>Metrics</h4>
+      <p>
+        User Mode feature enables non-admin users to see namespaces they have access to.
+        This is achieved by configuring RBAC rules so that every authenticated user is granted to list namespaces.
+      </p>
+      <div className="center">
+        {this.getActionButtons()}
+      </div>
+    </>;
+  }
+
+  getStatusIcon(): React.ReactNode {
+    switch (this.status) {
+    case ActionStatus.IDLE:
+      return null;
+    case ActionStatus.PROCESSING:
+      return <Spinner />;
+    case ActionStatus.ERROR:
+      return <Icon size="16px" material="error" title={this.errorText}></Icon>
+    }
+  }
+
+  getDisabledToolTip(id: string, action: string): React.ReactNode {
+    const { cluster } = this.props;
+    if (cluster.isAdmin) {
+      return null;
+    }
+
+    return (
+      <Tooltip targetId={id} position={TooltipPosition.TOP}>
+        {action} only allowed by admins
+      </Tooltip>
+    );
+  }
+
+  getActionButtons(): React.ReactNode[] {
+    const { cluster } = this.props
+    const buttons = [];
+
+    if (cluster.features[MetricsFeature.id]?.canUpgrade) {
+      buttons.push(
+        <Button key="upgrade" id="cluster-feature-metrics-upgrade" disabled={!cluster.isAdmin} primary onClick={this.runAction("upgradeFeature")}>
+          Upgrade {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-metrics-upgrade", "Upgrading")}
+        </Button>
+      );
+    }
+
+    if (cluster.features[MetricsFeature.id]?.installed) {
+      buttons.push(
+        <Button key="uninstall" id="cluster-feature-metrics-uninstall" disabled={!cluster.isAdmin} primary onClick={this.runAction("uninstallFeature")}>
+          Uninstall {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-metrics-uninstall", "Uninstalling")}
+        </Button>
+      );
+    } else {
+      buttons.push(
+        <Button key="install" id="cluster-feature-metrics-install" disabled={!cluster.isAdmin} primary onClick={this.runAction("installFeature")}>
+          Install {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-metrics-install", "Installing")}
+        </Button>
+      );
+    }
+
+    return buttons;
+  }
+
+  runAction(action: keyof typeof clusterIpc): () => Promise<void> {
+    return async () => {
+      const { cluster } = this.props;
+      console.log(`running ${action} ${MetricsFeature.id} onto ${cluster.preferences.clusterName}`);
+  
+      try {
+        this.status = ActionStatus.PROCESSING
+        await clusterIpc[action].invokeFromRenderer(cluster.id, MetricsFeature.id);
+        try {
+          await cluster.refresh();
+        } catch (err) {
+          console.error(err);
+        }
+        this.status = ActionStatus.IDLE
+      } catch (err) {
+        this.status = ActionStatus.ERROR
+        this.errorText = err.toString()
+      }
+    };
+  }
+}

src/renderer/components/+cluster-settings/components/install-user-mode.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { Button } from "../../button";
+import { autobind } from "../../../utils";
+import { Tooltip, TooltipPosition } from "../../tooltip";
+import { Spinner } from "../../spinner";
+import { Icon } from "../../icon";
+import { UserModeFeature } from "../../../../features/user-mode";
+import { clusterIpc } from "../../../../common/cluster-ipc";
+import { observable } from "mobx";
+import { ActionStatus } from "./statuses"
+import { observer } from "mobx-react";
+
+interface Props {
+    cluster: Cluster;
+}
+
+@observer
+export class InstallUserMode extends React.Component<Props> {
+  @observable status = ActionStatus.IDLE;
+  @observable errorText?: string;
+
+  render() {
+    return <>
+      <h4>User Mode</h4>
+      <p>
+        User Mode feature enables non-admin users to see namespaces they have access to. 
+        This is achieved by configuring RBAC rules so that every authenticated user is granted to list namespaces.
+      </p>
+      <div className="center">
+        {this.getActionButtons()}
+      </div>
+    </>;
+  }
+
+
+  getStatusIcon(): React.ReactNode {
+    switch (this.status) {
+    case ActionStatus.IDLE:
+      return null;
+    case ActionStatus.PROCESSING:
+      return <Spinner key="spinner" />;
+    case ActionStatus.ERROR:
+      return <Icon key="error" size="16px" material="error" title={this.errorText}></Icon>
+    }
+  }
+
+  getDisabledToolTip(id: string, action: string): React.ReactNode {
+    const { cluster } = this.props;
+    if (cluster.isAdmin) {
+      return null;
+    }
+
+    return <Tooltip targetId={id} position={TooltipPosition.TOP}>
+      {action} only allowed by admins
+    </Tooltip>;
+  }
+
+  getActionButtons(): React.ReactNode[] {
+    const { cluster } = this.props
+    const buttons = [];
+
+    if (cluster.features[UserModeFeature.id]?.canUpgrade) {
+      buttons.push(
+        <Button key="upgrade" id="cluster-feature-user-mode-upgrade" disabled={!cluster.isAdmin} primary onClick={this.runAction("upgradeFeature")}>
+          Upgrade {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-upgrade", "Upgrading")}
+        </Button>
+      );
+    }
+
+    if (cluster.features[UserModeFeature.id]?.installed) {
+      buttons.push(
+        <Button key="uninstall" id="cluster-feature-user-mode-uninstall" disabled={!cluster.isAdmin} primary onClick={this.runAction("uninstallFeature")}>
+          Uninstall {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-uninstall", "Uninstalling")}
+        </Button>
+      );
+    } else {
+      buttons.push(
+        <Button key="install" id="cluster-feature-user-mode-install" disabled={!cluster.isAdmin} primary onClick={this.runAction("installFeature")}>
+          Install {this.getStatusIcon()} {this.getDisabledToolTip("cluster-feature-user-mode-install", "Installing")}
+        </Button>
+      );
+    }
+
+    return buttons;
+  }
+
+  runAction(action: keyof typeof clusterIpc): () => Promise<void> {
+    return async () => {
+      const { cluster } = this.props;
+      console.log(`running ${action} ${UserModeFeature.id} onto ${cluster.preferences.clusterName}`);
+
+      try {
+        this.status = ActionStatus.PROCESSING
+        await clusterIpc[action].invokeFromRenderer(cluster.id, UserModeFeature.id);
+        try {
+          await cluster.refresh();
+        } catch (err) {
+          console.error(err);
+        }
+        this.status = ActionStatus.IDLE
+      } catch (err) {
+        this.status = ActionStatus.ERROR
+        this.errorText = err.toString()
+      }
+    };
+  }
+}

src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { Button } from "../../button";
+import { autobind } from "../../../utils";
+import { Spinner } from "../../spinner";
+import { Icon } from "../../icon";
+import { ConfirmDialog } from "../../confirm-dialog";
+import { Trans } from "@lingui/macro";
+import { clusterIpc } from "../../../../common/cluster-ipc";
+import { clusterStore } from "../../../../common/cluster-store";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { RemovalStatus } from "./statuses"
+
+interface Props {
+    cluster: Cluster;
+}
+
+@observer
+export class RemoveClusterButton extends React.Component<Props> {
+  @observable status = RemovalStatus.PRESENT;
+  @observable errorText?: string;
+
+  render() {
+    return (
+      <div className="center">
+        <Button accent onClick={this.confirmRemoveCluster}>Remove Cluster {this.getStatusIcon()}</Button>
+      </div>
+    );
+  }
+
+  getStatusIcon(): React.ReactNode {
+    switch (this.status) {
+    case RemovalStatus.PRESENT:
+      return null;
+    case RemovalStatus.PROCESSING:
+      return <Spinner />;
+    case RemovalStatus.ERROR:
+      return <Icon size="16px" material="error" title={this.errorText}></Icon>;
+    }
+  }
+
+    @autobind()
+  confirmRemoveCluster() {
+    const { cluster } = this.props;
+
+    ConfirmDialog.open({
+      message: <p>Are you sure you want to remove <b>{cluster.preferences.clusterName}</b> from Lens?</p>,
+      labelOk: <Trans>Yes</Trans>,
+      labelCancel: <Trans>No</Trans>,
+      ok: async () => {
+        try {
+          this.status = RemovalStatus.PROCESSING;
+          await clusterIpc.disconnect.invokeFromRenderer(cluster.id);
+          await clusterStore.removeById(cluster.id);
+        } catch (err) {
+          this.status = RemovalStatus.ERROR;
+          this.errorText = err.toString();
+        }
+      }
+    })
+  }
+}

src/renderer/components/+cluster-settings/components/statuses.ts

@@ -0,0 +1,24 @@
+export enum TextInputStatus {
+    CLEAN = "clean",
+    DIRTY = "dirty",
+    UPDATING = "updating",
+    ERROR = "error",
+    UPDATED = "updated",
+}
+
+export enum GeneralInputStatus {
+    CLEAN = "clean",
+    ERROR = "error",
+}
+
+export enum ActionStatus {
+    IDLE = "idle",
+    PROCESSING = "processing",
+    ERROR = "error"
+}
+
+export enum RemovalStatus {
+    PRESENT = "present",
+    PROCESSING = "processing",
+    ERROR = "error",
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { Cluster } from "../../../main/cluster";
+import { InstallMetrics } from "./components/install-metrics";
+import { InstallUserMode } from "./components/install-user-mode";
+
+interface Props {
+  cluster: Cluster;
+}
+
+export class Features extends React.Component<Props> {
+  render() {
+    const { cluster } = this.props;
+
+    return <div>
+      <h2>Features</h2>
+      <InstallMetrics cluster={cluster}/>
+      <InstallUserMode cluster={cluster}/>
+    </div>;
+  }
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Cluster } from "../../../main/cluster";
+import { ClusterNameSetting } from "./components/cluster-name-setting";
+import { ClusterWorkspaceSetting } from "./components/cluster-workspace-setting";
+import { ClusterIconSetting } from "./components/cluster-icon-setting";
+import { ClusterProxySetting } from "./components/cluster-proxy-setting";
+import { ClusterPrometheusSetting } from "./components/cluster-prometheus-setting";
+import { ClusterHomeDirSetting } from "./components/cluster-home-dir-setting";
+
+interface Props {
+  cluster: Cluster;
+}
+
+export class General extends React.Component<Props> {
+  render() {
+    return <div>
+      <h2>General</h2>
+      <hr/>
+      
+      <ClusterNameSetting cluster={this.props.cluster} />
+      <ClusterWorkspaceSetting cluster={this.props.cluster} />
+      <ClusterIconSetting cluster={this.props.cluster} />
+      <ClusterProxySetting cluster={this.props.cluster} />
+      <ClusterPrometheusSetting cluster={this.props.cluster} />
+      <ClusterHomeDirSetting cluster={this.props.cluster} />
+    </div>;
+  }
+}

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { Cluster } from "../../../main/cluster";
+import { RemoveClusterButton } from "./components/remove-cluster-button";
+
+interface Props {
+    cluster: Cluster;
+}
+
+export class Removal extends React.Component<Props> {
+  render() {
+    const { cluster } = this.props;
+
+    return <div>
+      <h2>Removal</h2>
+      <RemoveClusterButton cluster={cluster} />
+    </div>;
+  }
+}

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { Spinner } from "../spinner";
+import { Cluster } from "../../../main/cluster";
+
+interface Props {
+  cluster: Cluster;
+}
+
+export class Status extends React.Component<Props> {
+  renderStatusRows(): JSX.Element[] {
+    const { cluster } = this.props;
+
+    const rows: [string, React.ReactNode][] = [
+      ["Online Status", cluster.online ? "online" : `offline (${cluster.failureReason || "unknown reason"}`],
+      ["Distribution", cluster.distribution],
+      ["Kerbel Version", cluster.version],
+      ["API Address", cluster.apiUrl],
+    ];
+
+    if (cluster.nodes > 0) {
+      rows.push(["Nodes Count", cluster.nodes]);
+    }
+
+    return rows
+      .map(([header, value]) => [
+        <h5 key={header+"-header"}>{header}</h5>,
+        <span key={header + "-value"}>{value}</span>
+      ])
+      .flat();
+  }
+
+  render() {
+    const { cluster } = this.props;
+
+    return <div>
+      <h2>Status</h2>
+      <hr/>
+      <h4>Cluster status</h4>
+      <p>
+        Cluster status information including: detected distribution, kernel version, and online status.
+      </p>
+      <div className="status-table">
+        {this.renderStatusRows()}
+      </div>
+    </div>;
+  }
+}

src/renderer/components/app.scss

@@ -89,25 +89,28 @@ h1 {
 
 h2 {
   @extend h1;
-  font-size: 20px;
+  font-size: 24px;
 }
 
 h3 {
   @extend h2;
-  font-size: 17px;
+  font-size: 20px;
 }
 
 h4 {
-  @extend h2;
+  @extend h3;
+  font-size: 16px;
 }
 
 h5 {
-  @extend h2;
+  @extend h4;
   padding: $padding / 2 0;
+  font-size: 14px;
 }
 
 h6 {
-  @extend h2;
+  @extend h5;
+  font-size: 12px;
 }
 
 small {

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

@@ -46,8 +46,8 @@ export class ClusterIcon extends React.Component<Props> {
         {showTooltip && (
           <Tooltip targetId={clusterIconId}>{clusterName}</Tooltip>
         )}
-        {icon && <img src={icon} alt={clusterName}/>}
-        {!icon && <Hashicon value={clusterName} options={options}/>}
+        {icon && <img src={icon} alt={clusterName} />}
+        {!icon && <Hashicon value={clusterName} options={options} />}
         {showErrors && isAdmin && eventCount > 0 && (
           <Badge
             className={cssNames("events-count", errorClass)}

src/renderer/components/cluster-icon/index.ts

@@ -0,0 +1 @@
+export * from "./cluster-icon"

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

@@ -28,10 +28,9 @@ export class ClusterManager extends React.Component<Props> {
   }
 
   @computed get isInactive() {
-    const { activeCluster, activeClusterId } = clusterStore;
+    const { activeCluster, activeClusterId, clusters } = clusterStore;
     const isActivatedBefore = activeCluster?.initialized;
-    if (isNoClustersView() || isActivatedBefore) return;
-    return activeClusterId !== getHostedClusterId();
+    return clusters.size > 0 && !isActivatedBefore && activeClusterId !== getHostedClusterId();
   }
 
   render() {

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

@@ -9,7 +9,7 @@ import type { Cluster } from "../../../main/cluster";
 import { userStore } from "../../../common/user-store";
 import { ClusterId, clusterStore } from "../../../common/cluster-store";
 import { workspaceStore } from "../../../common/workspace-store";
-import { ClusterIcon } from "../+cluster-settings/cluster-icon";
+import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
 import { cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";

src/renderer/components/file-picker/file-picker.scss

@@ -0,0 +1,14 @@
+.FilePicker {
+    input[type="file"] {
+        display: none;
+    }
+
+    label {
+        display: inline-block;
+        border: medium solid;
+        padding: 10px;
+        border-radius: 5px;
+        cursor: pointer;
+        margin: 5px;
+    }
+}

src/renderer/components/file-picker/file-picker.tsx

@@ -0,0 +1,203 @@
+import "./file-picker.scss"
+
+import React from "react";
+import fse from "fs-extra";
+import path from "path";
+import { Icon } from "../icon";
+import { Spinner } from "../spinner";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import _ from "lodash";
+
+export interface FileUploadProps {
+    uploadDir: string;
+    rename?: boolean;
+    handler?(path: string[]): void;
+}
+
+export interface MemoryUseProps {
+    handler?(file: File[]): void;
+}
+
+enum FileInputStatus {
+  CLEAR = "clear",
+  PROCESSING = "processing",
+  ERROR = "error",
+}
+
+export enum OverLimitStyle {
+  REJECT = "reject",
+  CAP = "cap",
+}
+
+export enum OverSizeLimitStyle {
+  REJECT = "reject",
+  FILTER = "filter",
+}
+
+export enum OverTotalSizeLimitStyle {
+  REJECT = "reject",
+  FILTER_LAST = "filter-last",
+  FILTER_LARGEST = "filter-largest",
+}
+
+export interface BaseProps {
+    accept?: string;
+    labelText: string;
+    multiple?: boolean;
+
+    // limit is the optional maximum number of files to upload
+    // the larger number is upper limit, the lower is lower limit
+    // the lower limit is capped at 0 and the upper limit is capped at Infinity
+    limit?: [number, number];
+    
+    // default is "Reject"
+    onOverLimit?: OverLimitStyle;
+    
+    // individual files are checked before the total size.
+    maxSize?: number;
+    // default is "Reject"
+    onOverSizeLimit?: OverSizeLimitStyle;
+    
+    maxTotalSize?: number;
+    // default is "Reject"
+    onOverTotalSizeLimit?: OverTotalSizeLimitStyle;
+}
+
+export type Props = BaseProps & (MemoryUseProps | FileUploadProps);
+
+const defaultProps: Partial<Props> = {
+  maxSize: Infinity,
+  onOverSizeLimit: OverSizeLimitStyle.REJECT,
+  maxTotalSize: Infinity,
+  onOverLimit: OverLimitStyle.REJECT,
+  onOverTotalSizeLimit: OverTotalSizeLimitStyle.REJECT,
+};
+
+@observer
+export class FilePicker extends React.Component<Props> {
+  static defaultProps = defaultProps as Object;
+
+  @observable status = FileInputStatus.CLEAR;
+  @observable errorText?: string;
+
+  handleFileCount(files: File[]): File[] {
+    const { limit: [minLimit, maxLimit] = [0, Infinity], onOverLimit } = this.props;
+    if (files.length > maxLimit) {
+      switch (onOverLimit) {
+      case OverLimitStyle.CAP:
+        files.length = maxLimit;
+        break;
+      case OverLimitStyle.REJECT:
+        throw `Too many files. Expected at most ${maxLimit}. Got ${files.length}.`;
+      }
+    }
+    if (files.length < minLimit) {
+      throw `Too many files. Expected at most ${maxLimit}. Got ${files.length}.`;
+    }
+
+    return files;
+  }
+
+  handleIndiviualFileSizes(files: File[]): File[] {
+    const { onOverSizeLimit, maxSize } = this.props;
+
+    switch (onOverSizeLimit) {
+    case OverSizeLimitStyle.FILTER:
+      return files.filter(file => file.size <= maxSize );
+    case OverSizeLimitStyle.REJECT:
+      const firstFileToLarge = files.find(file => file.size > maxSize);
+      if (firstFileToLarge) {
+        throw `${firstFileToLarge.name} is too large. Maximum size is ${maxSize}. Has size of ${firstFileToLarge.size}`;
+      }
+
+      return files;
+    }
+  }
+
+  handleTotalFileSizes(files: File[]): File[] {
+    const { maxTotalSize, onOverTotalSizeLimit } = this.props;
+
+    const totalSize = _.sum(files.map(f => f.size));
+    if (totalSize <= maxTotalSize) {
+      return files;
+    }
+
+    switch (onOverTotalSizeLimit) {
+    case OverTotalSizeLimitStyle.FILTER_LARGEST:
+      files = _.orderBy(files, ["size"])
+    case OverTotalSizeLimitStyle.FILTER_LAST:
+      let newTotalSize = totalSize;
+      
+      for (;files.length > 0;) {
+        newTotalSize -= files.pop().size;
+        if (newTotalSize <= maxTotalSize) {
+          break;
+        }
+      }
+      return files;
+    case OverTotalSizeLimitStyle.REJECT:
+      throw `Total file size to upload is too large. Expected at most ${maxTotalSize}. Found ${totalSize}.`;
+    }
+  }
+
+  async handlePickFiles(selectedFiles: FileList) {
+    const files: File[] = Array.from(selectedFiles);
+
+    try {
+      const numberLimitedFiles = this.handleFileCount(files);
+      const sizeLimitedFiles = this.handleIndiviualFileSizes(numberLimitedFiles);
+      const totalSizeLimitedFiles = this.handleTotalFileSizes(sizeLimitedFiles);
+      
+      if ("uploadDir" in this.props) {
+        const { uploadDir } = this.props;
+        this.status = FileInputStatus.PROCESSING;
+        
+        const paths: string[] = [];
+        const promises = totalSizeLimitedFiles.map(async file => {
+          const destinationPath = path.join(uploadDir, file.name);
+          paths.push(destinationPath);
+
+          return fse.copyFile(file.path, destinationPath);
+        });
+
+        await Promise.all(promises);
+        this.props.handler(paths);
+        this.status = FileInputStatus.CLEAR;
+      } else {
+        this.props.handler(totalSizeLimitedFiles);
+      }
+    } catch (errorText) {
+      this.status = FileInputStatus.ERROR;
+      this.errorText = errorText;
+      return;
+    }
+  }
+
+  render() {
+    const { accept, labelText, multiple } = this.props;
+
+    return <div className="FilePicker">
+      <label htmlFor="file-upload">{labelText} {this.getIconRight()}</label>
+      <input 
+        id="file-upload" 
+        name="FilePicker" 
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={(event) => this.handlePickFiles(event.target.files)}
+      />
+    </div>;
+  }
+
+  getIconRight(): React.ReactNode {
+    switch (this.status) {
+    case FileInputStatus.CLEAR:
+      return <Icon className="clean" material="cloud_upload"></Icon>
+    case FileInputStatus.PROCESSING:
+      return <Spinner />;
+    case FileInputStatus.ERROR:
+      return <Icon material="error" title={this.errorText}></Icon>
+    }
+  }
+}

src/renderer/components/file-picker/index.ts

@@ -0,0 +1 @@
+export * from "./file-picker"

src/renderer/components/input/input.tsx

@@ -13,7 +13,7 @@ type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 type InputElement = HTMLInputElement | HTMLTextAreaElement;
 type InputElementProps = InputHTMLAttributes<InputElement> & TextareaHTMLAttributes<InputElement> & DOMAttributes<InputElement>;
 
-export type InputProps<T = string> = Omit<InputElementProps, "onChange"> & {
+export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSubmit"> & {
   theme?: "round-black";
   className?: string;
   value?: T;
@@ -25,6 +25,7 @@ export type InputProps<T = string> = Omit<InputElementProps, "onChange"> & {
   iconRight?: string | React.ReactNode;
   validators?: Validator | Validator[];
   onChange?(value: T, evt: React.ChangeEvent<InputElement>): void;
+  onSubmit?(value: T): void;
 }
 
 interface State {
@@ -100,7 +101,7 @@ export class Input extends React.Component<InputProps, State> {
   async validate(value = this.getValue()) {
     let validationId = (this.validationId = ""); // reset every time for async validators
     const asyncValidators: Promise<any>[] = [];
-    let errors: React.ReactNode[] = [];
+    const errors: React.ReactNode[] = [];
 
     // run validators
     for (const validator of this.validators) {
@@ -130,12 +131,10 @@ export class Input extends React.Component<InputProps, State> {
 
     // handle async validators result
     if (asyncValidators.length > 0) {
-      this.setState({ validating: true, valid: false, });
+      this.setState({ validating: true, valid: false });
       const asyncErrors = await Promise.all(asyncValidators);
-      const isLastValidationCheck = this.validationId === validationId;
-      if (isLastValidationCheck) {
-        errors = this.state.errors.concat(asyncErrors.filter(err => err));
-        this.setValidation(errors);
+      if (this.validationId === validationId) {
+        this.setValidation(errors.concat(...asyncErrors.filter(err => err)));
       }
     }
 
@@ -157,7 +156,7 @@ export class Input extends React.Component<InputProps, State> {
 
   private setupValidators() {
     this.validators = conditionalValidators
-    // add conditional validators if matches input props
+      // add conditional validators if matches input props
       .filter(validator => validator.condition(this.props))
       // add custom validators
       .concat(this.props.validators)
@@ -209,6 +208,19 @@ export class Input extends React.Component<InputProps, State> {
     }
   }
 
+  @autobind()
+  onKeyDown(evt: React.KeyboardEvent<any>) {
+    const modified = evt.shiftKey || evt.metaKey || evt.altKey || evt.ctrlKey;
+
+    switch (evt.key) {
+    case "Enter":
+      if (this.props.onSubmit && !modified && !evt.repeat) {
+        this.props.onSubmit(this.getValue());
+      }
+      break;
+    }
+  }
+
   get showMaxLenIndicator() {
     const { maxLength, multiLine } = this.props;
     return maxLength && multiLine;
@@ -269,8 +281,10 @@ export class Input extends React.Component<InputProps, State> {
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       onChange: this.onChange,
+      onKeyDown: this.onKeyDown,
       rows: multiLine ? (rows || 1) : null,
       ref: this.bindRef,
+      type: "text",
     });
 
     return (

src/renderer/components/spinner/spinner.scss

@@ -8,9 +8,7 @@
   $colorAnimation: colors $duration*4 ease-in-out infinite;
 
   @mixin spinner-color($color) {
-    border-color: $color;
-    border-left-color: transparent;
-    border-right-color: transparent;
+    border-color: transparent $color;
   }
 
   width: var(--spinner-size);

src/renderer/components/tooltip/tooltip.tsx

@@ -76,18 +76,14 @@ export class Tooltip extends React.Component<TooltipProps> {
     const { position } = this.props;
     const { elem, targetElem } = this;
 
-    let allPositions: TooltipPosition[] = [
-      TooltipPosition.RIGHT,
-      TooltipPosition.BOTTOM,
-      TooltipPosition.LEFT,
-      TooltipPosition.RIGHT,
-    ];
-    if (allPositions.includes(position)) {
-      allPositions = [
-        position, // put first as priority side for positioning
-        ...allPositions.filter(pos => pos !== position),
-      ];
+    const positionPreference = new Set<TooltipPosition>();
+    if (typeof position !== "undefined") {
+      positionPreference.add(position);
     }
+    positionPreference.add(TooltipPosition.RIGHT)
+      .add(TooltipPosition.BOTTOM)
+      .add(TooltipPosition.TOP)
+      .add(TooltipPosition.LEFT)
 
     // reset position first and get all possible client-rect area for tooltip element
     this.setPosition({ left: 0, top: 0 });
@@ -97,21 +93,21 @@ export class Tooltip extends React.Component<TooltipProps> {
     const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
 
     // find proper position
-    this.activePosition = null;
-    for (const pos of allPositions) {
+    for (const pos of positionPreference) {
       const { left, top, right, bottom } = this.getPosition(pos, selfBounds, targetBounds)
       const fitsToWindow = left >= 0 && top >= 0 && right <= viewportWidth && bottom <= viewportHeight;
       if (fitsToWindow) {
         this.activePosition = pos;
         this.setPosition({ top, left });
-        break;
+        
+        return;
       }
     }
-    if (!this.activePosition) {
-      const { left, top } = this.getPosition(allPositions[0], selfBounds, targetBounds)
-      this.activePosition = allPositions[0];
-      this.setPosition({ left, top });
-    }
+
+    const preferedPosition = Array.from(positionPreference)[0];
+    const { left, top } = this.getPosition(preferedPosition, selfBounds, targetBounds)
+    this.activePosition = preferedPosition;
+    this.setPosition({ left, top });
   }
 
   protected setPosition(pos: { left: number, top: number }) {