Adding kubectl binaries section in Preferences

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

src/common/user-store.ts

@@ -1,4 +1,5 @@
 import type { ThemeId } from "../renderer/theme.store";
+import { app, remote } from 'electron';
 import semver from "semver"
 import { readFile } from "fs-extra"
 import { action, observable, reaction, toJS } from "mobx";
@@ -8,6 +9,7 @@ import { getAppVersion } from "./utils/app-version";
 import { kubeConfigDefaultPath, loadConfig } from "./kube-helpers";
 import { tracker } from "./tracker";
 import logger from "../main/logger";
+import path from 'path';
 
 export interface UserStoreModel {
   kubeConfigPath: string;
@@ -22,6 +24,9 @@ export interface UserPreferences {
   allowUntrustedCAs?: boolean;
   allowTelemetry?: boolean;
   downloadMirror?: string | "default";
+  downloadKubectlBinaries?: boolean;
+  downloadBinariesPath?: string;
+  kubectlBinariesPath?: string;
 }
 
 export class UserStore extends BaseStore<UserStoreModel> {
@@ -53,6 +58,9 @@ export class UserStore extends BaseStore<UserStoreModel> {
     allowUntrustedCAs: false,
     colorTheme: UserStore.defaultTheme,
     downloadMirror: "default",
+    downloadKubectlBinaries: true,  // Download kubectl binaries matching cluster version
+    downloadBinariesPath: "",
+    kubectlBinariesPath: "$PATH/kubectl"
   };
 
   get isNewVersion() {
@@ -98,6 +106,14 @@ export class UserStore extends BaseStore<UserStoreModel> {
     this.newContexts.clear();
   }
 
+  /**
+   * Getting default directory to download kubectl binaries
+   * @returns string
+   */
+  getDefaultKubectlPath(): string {
+    return path.join((app || remote.app).getPath("userData"), "binaries")
+  }
+
   @action
   protected async fromStore(data: Partial<UserStoreModel> = {}) {
     const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath } = data

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

@@ -0,0 +1,68 @@
+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';
+
+export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
+  const [downloadPath, setDownloadPath] = useState(preferences.downloadBinariesPath || "");
+  const [binariesPath, setBinariesPath] = useState(preferences.kubectlBinariesPath || "");
+
+  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: $PATH/kubectl</Trans>
+        </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={() =>
+          preferences.downloadKubectlBinaries = !preferences.downloadKubectlBinaries
+        }
+      />
+      <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,6 +16,7 @@ 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 {
@@ -169,6 +170,8 @@ export class Preferences extends React.Component {
             <Trans>Proxy is used only for non-cluster communication.</Trans>
           </small>
 
+          <KubectlBinaries preferences={preferences} />
+
           <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 => fse.pathExistsSync(value),
+}
+
 export const minLength: Validator = {
   condition: ({ minLength }) => !!minLength,
   message: (value, { minLength }) => _i18n._(t`Minimum length is ${minLength}`),