Allow user to configure kubectl binary preferences (#800)

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Trans } from '@lingui/macro';
+import { isPath } from '../input/input.validators';
+import { Checkbox } from '../checkbox';
+import { Input } from '../input';
+import { SubTitle } from '../layout/sub-title';
+import { UserPreferences, userStore } from '../../../common/user-store';
+import { observer } from 'mobx-react';
+import { Kubectl } from '../../../main/kubectl';
+import { SelectOption, Select } from '../select';
+
+export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
+  const [downloadPath, setDownloadPath] = useState(preferences.downloadBinariesPath || "");
+  const [binariesPath, setBinariesPath] = useState(preferences.kubectlBinariesPath || "");
+
+  const downloadMirrorOptions: SelectOption<string>[] = [
+    { value: "default", label: "Default (Google)" },
+    { value: "china", label: "China (Azure)" },
+  ]
+
+
+  const save = () => {
+    preferences.downloadBinariesPath = downloadPath;
+    preferences.kubectlBinariesPath = binariesPath;
+  }
+
+  const renderPath = () => {
+    if (preferences.downloadKubectlBinaries) {
+      return null;
+    }
+    return (
+      <>
+        <SubTitle title="Path to Kubectl binary"/>
+        <Input
+          theme="round-black"
+          value={binariesPath}
+          validators={isPath}
+          onChange={setBinariesPath}
+          onBlur={save}
+        />
+        <small className="hint">
+          <Trans>Default:</Trans>{" "}{Kubectl.bundledKubectlPath}
+        </small>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <h2><Trans>Kubectl Binary</Trans></h2>
+      <small className="hint">
+        <Trans>Download kubectl binaries matching to Kubernetes cluster verison.</Trans>
+      </small>
+      <Checkbox
+        label={<Trans>Download kubectl binaries</Trans>}
+        value={preferences.downloadKubectlBinaries}
+        onChange={downloadKubectlBinaries => preferences.downloadKubectlBinaries = downloadKubectlBinaries}
+      />
+      <SubTitle title="Download mirror" />
+      <Select
+        placeholder={<Trans>Download mirror for kubectl</Trans>}
+        options={downloadMirrorOptions}
+        value={preferences.downloadMirror}
+        onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
+        disabled={!preferences.downloadKubectlBinaries}
+      />
+      <SubTitle title="Directory for binaries"/>
+      <Input
+        theme="round-black"
+        value={downloadPath}
+        placeholder={`Directory to download binaries into`}
+        validators={isPath}
+        onChange={setDownloadPath}
+        onBlur={save}
+        disabled={!preferences.downloadKubectlBinaries}
+      />
+      <small>
+        Default: {userStore.getDefaultKubectlPath()}
+      </small>
+      {renderPath()}
+    </>
+  );
+});

src/renderer/components/+preferences/preferences.scss

@@ -19,6 +19,11 @@
         }
       }
 
+      .SubTitle {
+        text-transform: none;
+        margin: 0!important;
+      }
+
       .repos {
         position: relative;
 

src/renderer/components/+preferences/preferences.tsx

@@ -16,18 +16,13 @@ import { Badge } from "../badge";
 import { themeStore } from "../../theme.store";
 import { history } from "../../navigation";
 import { Tooltip } from "../tooltip";
+import { KubectlBinaries } from "./kubectl-binaries";
 
 @observer
 export class Preferences extends React.Component {
   @observable helmLoading = false;
   @observable helmRepos: HelmRepo[] = [];
   @observable helmAddedRepos = observable.map<string, HelmRepo>();
-
-  @observable downloadMirrorOptions: SelectOption<string>[] = [
-    { value: "default", label: "Default (Google)" },
-    { value: "china", label: "China (Azure)" },
-  ]
-
   @observable httpProxy = userStore.preferences.httpsProxy || "";
 
   @computed get themeOptions(): SelectOption<string>[] {
@@ -135,13 +130,19 @@ export class Preferences extends React.Component {
             onChange={({ value }: SelectOption) => preferences.colorTheme = value}
           />
 
-          <h2><Trans>Download Mirror</Trans></h2>
-          <Select
-            placeholder={<Trans>Download mirror for kubectl</Trans>}
-            options={this.downloadMirrorOptions}
-            value={preferences.downloadMirror}
-            onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
+          <h2><Trans>HTTP Proxy</Trans></h2>
+          <Input
+            theme="round-black"
+            placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
+            value={this.httpProxy}
+            onChange={v => this.httpProxy = v}
+            onBlur={() => preferences.httpsProxy = this.httpProxy}
           />
+          <small className="hint">
+            <Trans>Proxy is used only for non-cluster communication.</Trans>
+          </small>
+
+          <KubectlBinaries preferences={preferences} />
 
           <h2><Trans>Helm</Trans></h2>
           <Select
@@ -172,18 +173,6 @@ export class Preferences extends React.Component {
             })}
           </div>
 
-          <h2><Trans>HTTP Proxy</Trans></h2>
-          <Input
-            theme="round-black"
-            placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
-            value={this.httpProxy}
-            onChange={v => this.httpProxy = v}
-            onBlur={() => preferences.httpsProxy = this.httpProxy}
-          />
-          <small className="hint">
-            <Trans>Proxy is used only for non-cluster communication.</Trans>
-          </small>
-
           <h2><Trans>Certificate Trust</Trans></h2>
           <Checkbox
             label={<Trans>Allow untrusted Certificate Authorities</Trans>}

src/renderer/components/input/input.validators.ts

@@ -2,6 +2,7 @@ import type { InputProps } from "./input";
 import { ReactNode } from "react";
 import { t } from "@lingui/macro";
 import { _i18n } from '../../i18n';
+import fse from "fs-extra";
 
 export interface Validator {
   debounce?: number; // debounce for async validators in ms
@@ -41,6 +42,12 @@ export const isUrl: Validator = {
   validate: value => !!value.match(/^http(s)?:\/\/\w+(\.\w+)*(:[0-9]+)?\/?(\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)*$/),
 };
 
+export const isPath: Validator = {
+  condition: ({ type }) => type === "text",
+  message: () => _i18n._(t`This field must be a path to an existing file`),
+  validate: value => !value || fse.pathExistsSync(value),
+}
+
 export const minLength: Validator = {
   condition: ({ minLength }) => !!minLength,
   message: (value, { minLength }) => _i18n._(t`Minimum length is ${minLength}`),