Remove icons / checks from RemoveClusterButton

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

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

@@ -16,7 +16,7 @@
     .settings-wrapper {
       margin: 0 auto;
       width: 70%;
-      min-width: 800px;
+      min-width: 690px;
 
       > div {
         margin-top: $margin * 3;
@@ -37,8 +37,10 @@
       border: 1px solid var(--drawerSubtitleBackground);
       border-radius: $radius;
 
-      .TableCell {
+      .TableRow {
-        border-bottom: 1px solid var(--drawerSubtitleBackground);
+        &:not(:last-of-type) {
+          border-bottom: 1px solid var(--drawerSubtitleBackground);
+        }
 
         &.value {
           color: var(--textColorSecondary);

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

@@ -1,63 +1,40 @@
 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 { observer } from "mobx-react";
 import { clusterIpc } from "../../../../common/cluster-ipc";
 import { clusterStore } from "../../../../common/cluster-store";
-import { observable } from "mobx";
+import { Cluster } from "../../../../main/cluster";
-import { observer } from "mobx-react";
+import { autobind } from "../../../utils";
-import { RemovalStatus } from "./statuses"
+import { Button } from "../../button";
+import { ConfirmDialog } from "../../confirm-dialog";
 
 interface Props {
-    cluster: Cluster;
+  cluster: Cluster;
 }
 
 @observer
 export class RemoveClusterButton extends React.Component<Props> {
-  @observable status = RemovalStatus.PRESENT;
+  @autobind()
-  @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 {
+        await clusterIpc.disconnect.invokeFromRenderer(cluster.id);
-          this.status = RemovalStatus.PROCESSING;
+        await clusterStore.removeById(cluster.id);
-          await clusterIpc.disconnect.invokeFromRenderer(cluster.id);
-          await clusterStore.removeById(cluster.id);
-        } catch (err) {
-          this.status = RemovalStatus.ERROR;
-          this.errorText = err.toString();
-        }
       }
     })
   }
+
+  render() {
+    return (
+      <div className="flex gaps align-center">
+        <Button accent onClick={this.confirmRemoveCluster}>
+          Remove Cluster
+        </Button>
+      </div>
+    );
+  }
 }

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

@@ -16,9 +16,3 @@ export enum ActionStatus {
     PROCESSING = "processing",
     ERROR = "error"
 }
-
-export enum RemovalStatus {
-    PRESENT = "present",
-    PROCESSING = "processing",
-    ERROR = "error",
-}

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

@@ -3,7 +3,7 @@ import { Cluster } from "../../../main/cluster";
 import { RemoveClusterButton } from "./components/remove-cluster-button";
 
 interface Props {
-    cluster: Cluster;
+  cluster: Cluster;
 }
 
 export class Removal extends React.Component<Props> {

src/renderer/components/layout/wizard-layout.tsx

@@ -18,9 +18,11 @@ export class WizardLayout extends React.Component<Props> {
     const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, children: content } = this.props;
     return (
       <div className={cssNames("WizardLayout", className)}>
-        <div className={cssNames("head-col flex gaps align-center", headerClass)}>
+        {header && (
-          {header}
+          <div className={cssNames("head-col flex gaps align-center", headerClass)}>
-        </div>
+            {header}
+          </div>
+        )}
         <div className={cssNames("content-col flex column gaps", contentClass)}>
           {content}
         </div>