Catch YAML parse errors, show spinner while debouncing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/custom-errors.ts

@@ -23,13 +23,14 @@ import path from "path";
 
 export class ExecValidationNotFoundError extends Error {
   constructor(execPath: string) {
-    super(`User Exec command "${execPath}" not found on host.`);
     let message = `User Exec command "${execPath}" not found on host.`;
 
     if (!path.isAbsolute(execPath)) {
       message += ` Please ensure binary is found in PATH or use absolute path to binary in Kubeconfig`;
     }
-    this.message = message;
+
+    super(message);
+
     this.name = this.constructor.name;
     Error.captureStackTrace(this, this.constructor);
   }

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

@@ -50,4 +50,11 @@
     display: block;
     padding-top: 6px;
   }
+
+  .actions-panel {
+    .Spinner {
+      vertical-align: middle;
+      margin-left: $spacing;
+    }
+  }
 }

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

@@ -24,7 +24,7 @@ import "./add-cluster.scss";
 import type { KubeConfig } from "@kubernetes/client-node";
 import fse from "fs-extra";
 import { debounce } from "lodash";
-import { action, computed, observable, makeObservable } from "mobx";
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import path from "path";
 import React from "react";
@@ -41,6 +41,7 @@ import { SettingLayout } from "../layout/setting-layout";
 import MonacoEditor from "react-monaco-editor";
 import { ThemeStore } from "../../theme.store";
 import { UserStore } from "../../../common/user-store";
+import { Spinner } from "../spinner";
 
 interface Option {
   config: KubeConfig;
@@ -62,6 +63,7 @@ export class AddCluster extends React.Component {
   @observable kubeContexts = observable.map<string, Option>();
   @observable customConfig = "";
   @observable isWaiting = false;
+  @observable isCheckingInput = false;
   @observable errorText: string;
 
   constructor(props: {}) {
@@ -80,14 +82,35 @@ export class AddCluster extends React.Component {
     ].filter(Boolean);
   }
 
-  @action
-  refreshContexts = debounce(() => {
-    const { config, error } = loadConfigFromString(this.customConfig.trim() || "{}");
+  _refreshContexts = debounce(() => {
+    runInAction(() => {
+      try {
+        const text = this.customConfig.trim();
 
-    this.kubeContexts.replace(getContexts(config));
-    this.errorText = error?.toString();
+        if (!text) {
+          return this.kubeContexts.clear();
+        }
+
+        const { config, error } = loadConfigFromString(text);
+
+        this.kubeContexts.replace(getContexts(config));
+        this.errorText = error?.toString();
+      } catch (error) {
+        this.kubeContexts.clear();
+        this.errorText = error?.toString() || "An error occured";
+      } finally {
+        this.isCheckingInput = false;
+      }
+    });
   }, 500);
 
+  refreshContexts = () => {
+    // Clear the kubeContexts immediately
+    this.isCheckingInput = true;
+    this.kubeContexts.clear();
+    this._refreshContexts();
+  };
+
   @action
   addClusters = async () => {
     this.isWaiting = true;
@@ -145,6 +168,7 @@ export class AddCluster extends React.Component {
             tooltip={this.kubeContexts.size === 0 || "Paste in at least one cluster to add."}
             tooltipOverrideDisabled
           />
+          {this.isCheckingInput && <Spinner />}
         </div>
       </SettingLayout>
     );