Custom delete cluster dialog

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

src/renderer/components/app.scss

@@ -172,7 +172,6 @@ code {
   padding: 0.2em;
   vertical-align: middle;
   border-radius: $radius;
-  font-family: $font-monospace;
   font-size: calc(var(--font-size) * .9);
   color: #b4b5b4;
 

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

@@ -35,6 +35,7 @@ import { HotbarMenu } from "../hotbar/hotbar-menu";
 import { EntitySettings } from "../+entity-settings";
 import { Welcome } from "../+welcome";
 import * as routes from "../../../common/routes";
+import { DeleteClusterDialog } from "../delete-cluster-dialog";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -62,6 +63,7 @@ export class ClusterManager extends React.Component {
         </main>
         <HotbarMenu/>
         <BottomBar/>
+        <DeleteClusterDialog/>
       </div>
     );
   }

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

@@ -0,0 +1,46 @@
+.code {
+  @apply block overflow-auto whitespace-nowrap;
+  background: #e0e0e0;
+  padding: 6px 8px;
+  color: #4c4c4c;
+  font-size: 0.9em;
+}
+
+.warning {
+  @apply mt-4 flex;
+  padding: 10px 16px;
+  background: #fad8d7;
+  color: #797979;
+  border-radius: 3px;
+}
+
+.warningIcon {
+  @apply mr-5 mt-2.5;
+  font-size: 26px;
+}
+
+.dialog {
+  > div {
+    max-width: 50vw;
+    min-width: calc(45 * var(--unit));
+    background-color: white;
+    border-radius: 3px;
+  }
+}
+
+.dialogContent {
+  padding: 24px;
+  line-height: 1.4;
+}
+
+.dialogButtons {
+  background: #f4f4f4;
+  padding: 16px;
+  display: flex;
+  justify-content: flex-end;
+  border-radius: 3px;
+
+  > * {
+    margin-left: var(--margin)
+  }
+}

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

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import styles from "./delete-cluster-dialog.module.css";
+
+import { 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 { Cluster } from "../../../main/cluster";
+import { saveKubeconfig } from "./save-config";
+import { requestMain } from "../../../common/ipc";
+import { clusterClearDeletingHandler, clusterDeleteHandler, clusterSetDeletingHandler } from "../../../common/cluster-ipc";
+import { Notifications } from "../notifications";
+import { HotbarStore } from "../../../common/hotbar-store";
+import { boundMethod } from "autobind-decorator";
+import { Dialog } from "../dialog";
+import { Icon } from "../icon";
+
+type DialogState = {
+  isOpen: boolean,
+  config?: KubeConfig,
+  cluster?: Cluster
+};
+
+const dialogState: DialogState = observable({
+  isOpen: false
+});
+
+@observer
+export class DeleteClusterDialog extends React.Component {
+  static open({ config, cluster }: Partial<DialogState>) {
+    dialogState.isOpen = true;
+    dialogState.config = config;
+    dialogState.cluster = cluster;
+  }
+
+  static close() {
+    dialogState.isOpen = false;
+  }
+
+  onClose() {
+    DeleteClusterDialog.close();
+  }
+
+  @boundMethod
+  async onDelete() {
+    await requestMain(clusterSetDeletingHandler, dialogState.cluster.id);
+    dialogState.config.contexts = dialogState.config.contexts.filter(item => item.name !== dialogState.cluster.contextName);
+
+    try {
+      await saveKubeconfig(dialogState.config, dialogState.cluster.kubeConfigPath);
+      HotbarStore.getInstance().removeAllHotbarItems(dialogState.cluster.id);
+      await requestMain(clusterDeleteHandler, dialogState.cluster.id);
+    } catch(error) {
+      Notifications.error(`Cannot remove cluster, failed to process config file. ${error}`);
+      await requestMain(clusterClearDeletingHandler, dialogState.cluster.id);
+    }
+
+    this.onClose();
+  }
+
+  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 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>
+      </>
+    ) : (
+      <p>The contents of your kubeconfig file will be changed!</p>
+    );
+
+    return (
+      <Dialog
+        className={styles.dialog}
+        isOpen={isOpen}
+        close={this.onClose}
+      >
+        <div className={styles.dialogContent}>
+          <div>
+            Delete the <b>{cluster.getMeta().name}</b> context from <b>{cluster.kubeConfigPath}</b>?
+          </div>
+          <div className={styles.warning}>
+            <Icon material="warning_amber" className={styles.warningIcon}/>
+            {warning}
+          </div>
+        </div>
+        <div className={styles.dialogButtons}>
+          <Button
+            onClick={this.onClose} plain
+            label="Cancel"
+          />
+          <Button
+            onClick={this.onDelete}
+            autoFocus accent
+            label="Delete Context"
+          />
+        </div>
+      </Dialog>
+    );
+  }
+}

src/renderer/components/delete-cluster-dialog/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export * from "./delete-cluster-dialog";