Switching current-context from dialog

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.module.css

@@ -21,7 +21,7 @@
 
 .dialog {
   > div {
-    max-width: 50vw;
+    max-width: 600px;
     min-width: calc(45 * var(--unit));
     background-color: white;
     border-radius: 3px;

src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx

@@ -20,12 +20,12 @@
  */
 import styles from "./delete-cluster-dialog.module.css";
 
-import { observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 
 import { Button } from "../button";
-import type { KubeConfig } from "@kubernetes/client-node";
+import type { Context, KubeConfig } from "@kubernetes/client-node";
 import type { Cluster } from "../../../main/cluster";
 import { saveKubeconfig } from "./save-config";
 import { requestMain } from "../../../common/ipc";
@@ -35,6 +35,7 @@ import { HotbarStore } from "../../../common/hotbar-store";
 import { boundMethod } from "autobind-decorator";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";
+import { Select } from "../select";
 
 type DialogState = {
   isOpen: boolean,
@@ -46,8 +47,21 @@ const dialogState: DialogState = observable({
   isOpen: false
 });
 
+type Props = {};
+
 @observer
 export class DeleteClusterDialog extends React.Component {
+  showContextSwitch = false;
+  newCurrentContext = "";
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this, {
+      showContextSwitch: observable,
+      newCurrentContext: observable
+    });
+  }
+
   static open({ config, cluster }: Partial<DialogState>) {
     dialogState.isOpen = true;
     dialogState.config = config;
@@ -58,40 +72,90 @@ export class DeleteClusterDialog extends React.Component {
     dialogState.isOpen = false;
   }
 
+  @boundMethod
+  onOpen() {
+    this.showContextSwitch = false;
+    this.newCurrentContext = "";
+  }
+
   onClose() {
     DeleteClusterDialog.close();
   }
 
+  removeContext() {
+    dialogState.config.contexts = dialogState.config.contexts.filter(item =>
+      item.name !== dialogState.cluster.contextName
+    );
+  }
+
+  changeCurrentContext() {
+    if (this.newCurrentContext) {
+      dialogState.config.currentContext = this.newCurrentContext;
+    }
+  }
+
   @boundMethod
   async onDelete() {
-    await requestMain(clusterSetDeletingHandler, dialogState.cluster.id);
-    dialogState.config.contexts = dialogState.config.contexts.filter(item => item.name !== dialogState.cluster.contextName);
+    const { cluster, config } = dialogState;
+
+    await requestMain(clusterSetDeletingHandler, cluster.id);
+    this.removeContext();
+    this.changeCurrentContext();
 
     try {
-      await saveKubeconfig(dialogState.config, dialogState.cluster.kubeConfigPath);
-      HotbarStore.getInstance().removeAllHotbarItems(dialogState.cluster.id);
-      await requestMain(clusterDeleteHandler, dialogState.cluster.id);
+      await saveKubeconfig(config, cluster.kubeConfigPath);
+      HotbarStore.getInstance().removeAllHotbarItems(cluster.id);
+      await requestMain(clusterDeleteHandler, cluster.id);
     } catch(error) {
       Notifications.error(`Cannot remove cluster, failed to process config file. ${error}`);
-      await requestMain(clusterClearDeletingHandler, dialogState.cluster.id);
+      await requestMain(clusterClearDeletingHandler, cluster.id);
     }
 
     this.onClose();
   }
 
+  renderCurrentContextSwitch(contexts: Context[]) {
+    if (!this.showContextSwitch) return null;
+
+    const options = [
+      ...contexts.map(context => ({
+        label: context.name,
+        value: context.name,
+      })),
+    ];
+
+    return (
+      <div className="mt-4">
+        <p className="mb-4 font-semibold">Choose new current-context</p>
+        <Select
+          options={options}
+          onChange={({ value }) => this.newCurrentContext = value}
+          themeName="light"
+          className="ml-[1px] mr-[1px]"
+        />
+      </div>
+    )
+  }
+
   render() {
     const { cluster, config, isOpen } = dialogState;
 
     if (!cluster || !config) return null;
 
     const isCurrentContext = config.currentContext == cluster.contextName;
-    // const contexts = config.contexts.filter(context => context.name !== cluster.contextName);
+    const contexts = config.contexts.filter(context => context.name !== cluster.contextName);
 
     const warning = isCurrentContext ? (
       <>
         <p>The <b>current-context</b> field from the kubeconfig file indicates a minikube context
-        that will cease to exist after the change. This will affect the operation of kubectl.
-        {" "}<b>Replace current context</b></p>
+        that will cease to exist after the change. This will affect the operation of kubectl.{" "}
+        {contexts.length > 0 && (
+          <b
+            className="cursor-pointer underline"
+            onClick={() => this.showContextSwitch = !this.showContextSwitch}
+          >Replace current context</b>
+        )}
+        </p>
       </>
     ) : (
       <p>The contents of your kubeconfig file will be changed!</p>
@@ -102,6 +166,7 @@ export class DeleteClusterDialog extends React.Component {
         className={styles.dialog}
         isOpen={isOpen}
         close={this.onClose}
+        open={this.onOpen}
       >
         <div className={styles.dialogContent}>
           <div>
@@ -111,6 +176,7 @@ export class DeleteClusterDialog extends React.Component {
             <Icon material="warning_amber" className={styles.warningIcon}/>
             {warning}
           </div>
+          {this.renderCurrentContextSwitch(contexts)}
         </div>
         <div className={styles.dialogButtons}>
           <Button