Fix node shell secret pulling (#3668)

- On some KE errors are thrown if trying to get a secret with an empty
  name, instead of just ignoring the entry

- Clean up the node shell settings

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

src/main/cluster.ts

@@ -706,10 +706,10 @@ export class Cluster implements ClusterModel, ClusterState {
   }
 
   get nodeShellImage(): string {
-    return this.preferences.nodeShellImage || initialNodeShellImage;
+    return this.preferences?.nodeShellImage || initialNodeShellImage;
   }
 
-  get imagePullSecret(): string {
-    return this.preferences.imagePullSecret || "";
+  get imagePullSecret(): string | undefined {
+    return this.preferences?.imagePullSecret;
   }
 }

src/main/shell-session/node-shell-session.ts

@@ -25,6 +25,7 @@ import * as k8s from "@kubernetes/client-node";
 import type { KubeConfig } from "@kubernetes/client-node";
 import type { Cluster } from "../cluster";
 import { ShellOpenError, ShellSession } from "./shell-session";
+import { get } from "lodash";
 
 export class NodeShellSession extends ShellSession {
   ShellType = "node-shell";
@@ -49,7 +50,7 @@ export class NodeShellSession extends ShellSession {
       await this.waitForRunningPod();
     } catch (error) {
       this.deleteNodeShellPod();
-      this.sendResponse("Error occurred. ");
+      this.sendResponse(`Error occurred: ${get(error, "response.body.message", error?.toString() || "unknown error")}`);
 
       throw new ShellOpenError("failed to create node pod", error);
     }
@@ -57,10 +58,16 @@ export class NodeShellSession extends ShellSession {
     const args = ["exec", "-i", "-t", "-n", "kube-system", this.podId, "--", "sh", "-c", "((clear && bash) || (clear && ash) || (clear && sh))"];
     const env = await this.getCachedShellEnv();
 
-    super.open(shell, args, env);
+    await super.open(shell, args, env);
   }
 
   protected createNodeShellPod() {
+    const imagePullSecrets = this.cluster.imagePullSecret
+      ? [{
+        name: this.cluster.imagePullSecret,
+      }]
+      : undefined;
+
     return this
       .kc
       .makeApiClient(k8s.CoreV1Api)
@@ -88,9 +95,7 @@ export class NodeShellSession extends ShellSession {
             command: ["nsenter"],
             args: ["-t", "1", "-m", "-u", "-i", "-n", "sleep", "14000"]
           }],
-          imagePullSecrets: [{
-            name: this.cluster.imagePullSecret,
-          }]
+          imagePullSecrets,
         }
       });
   }

src/renderer/components/cluster-settings/components/cluster-node-shell-setting.tsx

@@ -20,11 +20,11 @@
  */
 
 import type { Cluster } from "../../../../main/cluster";
-import { autorun, makeObservable, observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { SubTitle } from "../../layout/sub-title";
 import React from "react";
 import { Input } from "../../input/input";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { Icon } from "../../icon/icon";
 import { initialNodeShellImage } from "../../../../common/cluster-types";
 
@@ -34,59 +34,42 @@ interface Props {
 
 @observer
 export class ClusterNodeShellSetting extends React.Component<Props> {
-  @observable nodeShellImage = "";
-  @observable imagePullSecret = "";
+  @observable nodeShellImage = this.props.cluster.preferences?.nodeShellImage || "";
+  @observable imagePullSecret = this.props.cluster.preferences?.imagePullSecret || "";
 
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
-  componentDidMount() {
-    disposeOnUnmount(this,
-      autorun(() => {
-        this.nodeShellImage = this.props.cluster.nodeShellImage;
-        this.imagePullSecret = this.props.cluster.imagePullSecret;
-      })
-    );
+  componentWillUnmount() {
+    this.props.cluster.preferences ??= {};
+    this.props.cluster.preferences.nodeShellImage = this.nodeShellImage || undefined;
+    this.props.cluster.preferences.imagePullSecret = this.imagePullSecret || undefined;
   }
 
-  onImageChange = (value: string) => {
-    this.nodeShellImage = value;
-  };
-
-  onSecretChange = (value: string) => {
-    this.imagePullSecret = value;
-  };
-
-  saveImage = () => {
-    this.props.cluster.preferences.nodeShellImage = this.nodeShellImage;
-  };
-
-  saveSecret = () => {
-    this.props.cluster.preferences.imagePullSecret = this.imagePullSecret;
-  };
-
-  resetImage = () => {
-    this.nodeShellImage = initialNodeShellImage; //revert to default
-  };
-
-  clearSecret = () => {
-    this.imagePullSecret = "";
-  };
-
   render() {
-
     return (
       <>
         <section>
           <SubTitle title="Node shell image" id="node-shell-image"/>
           <Input
             theme="round-black"
+            placeholder={`Default image: ${initialNodeShellImage}`}
             value={this.nodeShellImage}
-            onChange={this.onImageChange}
-            onBlur={this.saveImage}
-            iconRight={<Icon small material="close" onClick={this.resetImage} tooltip="Reset"/>}
+            onChange={value => this.nodeShellImage = value}
+            iconRight={
+              this.nodeShellImage
+                ? (
+                  <Icon
+                    smallest
+                    material="close"
+                    onClick={() => this.nodeShellImage = ""}
+                    tooltip="Reset"
+                  />
+                )
+                : undefined
+            }
           />
           <small className="hint">
             Node shell image. Used for creating node shell pod.
@@ -95,15 +78,25 @@ export class ClusterNodeShellSetting extends React.Component<Props> {
         <section>
           <SubTitle title="Image pull secret" id="image-pull-secret"/>
           <Input
-            placeholder={"Add a secret name..."}
+            placeholder="Specify a secret name..."
             theme="round-black"
             value={this.imagePullSecret}
-            onChange={this.onSecretChange}
-            onBlur={this.saveSecret}
-            iconRight={<Icon small material="close" onClick={this.clearSecret} tooltip="Clear"/>}
+            onChange={value => this.imagePullSecret = value}
+            iconRight={
+              this.imagePullSecret
+                ? (
+                  <Icon
+                    smallest
+                    material="close"
+                    onClick={() => this.imagePullSecret = ""}
+                    tooltip="Clear"
+                  />
+                )
+                : undefined
+            }
           />
           <small className="hint">
-            Name of a pre-existing secret (optional). Used for pulling image from a private registry.
+            Name of a pre-existing secret. An optional setting. Used for pulling image from a private registry.
           </small>
         </section>
       </>