From cd3210ac59a19c65e674bdbf6721e29cad8edd9d Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Thu, 13 Oct 2022 14:32:13 +0300
Subject: [PATCH] Introduce competition for kubernetes preference tab

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 .../helm-charts-preference-item.injectable.ts | 23 ++++++++
 ...econfig-sync-preference-item.injectable.ts | 23 ++++++++
 .../kubeconfig-sync/kubeconfig-sync.tsx}      | 34 ++++++------
 ...ary-download-preference-item.injectable.ts | 23 ++++++++
 .../kubectl-binary-download.tsx               | 38 +++++++++++++
 ...for-binaries-preference-item.injectable.ts | 23 ++++++++
 .../kubectl-directory-for-binaries.tsx        | 55 +++++++++++++++++++
 ...nload-mirror-preference-item.injectable.ts | 23 ++++++++
 .../kubectl-download-mirror.tsx               | 52 ++++++++++++++++++
 ...ubectl-group-preference-item.injectable.ts | 21 +++++++
 ...th-to-binary-preference-item.injectable.ts | 23 ++++++++
 .../kubectl-path-to-binary.tsx                | 54 ++++++++++++++++++
 .../kubernetes/kubernetes-page.tsx            | 14 +++++
 .../kubernetes-preference-page.injectable.ts  | 25 +++++++++
 .../kubernetes-preference-tab.injectable.ts   | 24 ++++++++
 .../components/+preferences/kubernetes.tsx    |  7 +--
 16 files changed, 441 insertions(+), 21 deletions(-)
 create mode 100644 src/features/helm-charts/child-features/preferences/renderer/helm-charts-preference-item.injectable.ts
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync-preference-item.injectable.ts
 rename src/{renderer/components/+preferences/kubeconfig-syncs.tsx => features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync.tsx} (81%)
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-binary-download/kubectl-binary-download-preference-item.injectable.ts
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-binary-download/kubectl-binary-download.tsx
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-directory-for-binaries/kubectl-directory-for-binaries-preference-item.injectable.ts
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-directory-for-binaries/kubectl-directory-for-binaries.tsx
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-download-mirror/kubectl-download-mirror-preference-item.injectable.ts
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-download-mirror/kubectl-download-mirror.tsx
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-group-preference-item.injectable.ts
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-path-to-binary/kubectl-path-to-binary-preference-item.injectable.ts
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-path-to-binary/kubectl-path-to-binary.tsx
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubernetes-page.tsx
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.ts
 create mode 100644 src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-tab.injectable.ts

diff --git a/src/features/helm-charts/child-features/preferences/renderer/helm-charts-preference-item.injectable.ts b/src/features/helm-charts/child-features/preferences/renderer/helm-charts-preference-item.injectable.ts
new file mode 100644
index 0000000000..a9263c2792
--- /dev/null
+++ b/src/features/helm-charts/child-features/preferences/renderer/helm-charts-preference-item.injectable.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { HelmCharts } from "./helm-charts";
+import { preferenceItemInjectionToken } from "../../../../preferences/renderer/preference-items/preference-item-injection-token";
+
+const helmChartsPreferenceItemInjectable = getInjectable({
+  id: "helm-charts-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "helm-charts",
+    parentId: "kubernetes-page",
+    orderNumber: 30,
+    Component: HelmCharts,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default helmChartsPreferenceItemInjectable;
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync-preference-item.injectable.ts
new file mode 100644
index 0000000000..5aa40f4334
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync-preference-item.injectable.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { preferenceItemInjectionToken } from "../../preference-item-injection-token";
+import { KubeconfigSync } from "./kubeconfig-sync";
+
+const kubeconfigSyncPreferenceItemInjectable = getInjectable({
+  id: "kubeconfig-sync-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "kubeconfig-sync",
+    parentId: "kubernetes-page",
+    orderNumber: 20,
+    Component: KubeconfigSync,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default kubeconfigSyncPreferenceItemInjectable;
diff --git a/src/renderer/components/+preferences/kubeconfig-syncs.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync.tsx
similarity index 81%
rename from src/renderer/components/+preferences/kubeconfig-syncs.tsx
rename to src/features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync.tsx
index a6a6fc1d10..dee7902077 100644
--- a/src/renderer/components/+preferences/kubeconfig-syncs.tsx
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync.tsx
@@ -7,17 +7,17 @@ import fse from "fs-extra";
 import { computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
-import { Notice } from "../+extensions/notice";
-import type { KubeconfigSyncEntry, KubeconfigSyncValue, UserStore } from "../../../common/user-store";
-import { iter, tuple } from "../../utils";
-import { SubTitle } from "../layout/sub-title";
-import { PathPicker } from "../path-picker/path-picker";
-import { Spinner } from "../spinner";
-import { RemovableItem } from "./removable-item";
-import userStoreInjectable from "../../../common/user-store/user-store.injectable";
-import isWindowsInjectable from "../../../common/vars/is-windows.injectable";
-import loggerInjectable from "../../../common/logger.injectable";
-import type { Logger } from "../../../common/logger";
+import { Notice } from "../../../../../../renderer/components/+extensions/notice";
+import type { KubeconfigSyncEntry, KubeconfigSyncValue, UserStore } from "../../../../../../common/user-store";
+import { iter, tuple } from "../../../../../../renderer/utils";
+import { SubTitle } from "../../../../../../renderer/components/layout/sub-title";
+import { PathPicker } from "../../../../../../renderer/components/path-picker/path-picker";
+import { Spinner } from "../../../../../../renderer/components/spinner";
+import { RemovableItem } from "../../../../../../renderer/components/+preferences/removable-item";
+import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable";
+import isWindowsInjectable from "../../../../../../common/vars/is-windows.injectable";
+import loggerInjectable from "../../../../../../common/logger.injectable";
+import type { Logger } from "../../../../../../common/logger";
 
 interface SyncInfo {
   type: "file" | "folder" | "unknown";
@@ -66,7 +66,7 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedKubeconfigSyncs extends React.Component<Dependencies> {
+class NonInjectedKubeconfigSync extends React.Component<Dependencies> {
   syncs = observable.map<string, Value>();
   @observable loaded = false;
 
@@ -195,17 +195,19 @@ class NonInjectedKubeconfigSyncs extends React.Component<Dependencies> {
 
   render() {
     return (
-      <>
+      <section id="kube-sync">
+        <h2 data-testid="kubernetes-sync-header">Kubeconfig Syncs</h2>
+
         {this.renderSyncButtons()}
         <SubTitle title="Synced Items" className="pt-5"/>
         {this.renderEntries()}
-      </>
+      </section>
     );
   }
 }
 
-export const KubeconfigSyncs = withInjectables<Dependencies>(
-  NonInjectedKubeconfigSyncs,
+export const KubeconfigSync = withInjectables<Dependencies>(
+  NonInjectedKubeconfigSync,
 
   {
     getProps: (di) => ({
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-binary-download/kubectl-binary-download-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-binary-download/kubectl-binary-download-preference-item.injectable.ts
new file mode 100644
index 0000000000..12a0717bd7
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-binary-download/kubectl-binary-download-preference-item.injectable.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { preferenceItemInjectionToken } from "../../../preference-item-injection-token";
+import { KubectlBinaryDownload } from "./kubectl-binary-download";
+
+const kubectlBinaryDownloadPreferenceItemInjectable = getInjectable({
+  id: "kubectl-binary-download-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "kubectl-binary-download",
+    parentId: "kubectl",
+    orderNumber: 10,
+    Component: KubectlBinaryDownload,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default kubectlBinaryDownloadPreferenceItemInjectable;
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-binary-download/kubectl-binary-download.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-binary-download/kubectl-binary-download.tsx
new file mode 100644
index 0000000000..de096191fd
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-binary-download/kubectl-binary-download.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { SubTitle } from "../../../../../../../renderer/components/layout/sub-title";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { UserStore } from "../../../../../../../common/user-store";
+import userStoreInjectable from "../../../../../../../common/user-store/user-store.injectable";
+import { observer } from "mobx-react";
+import { Switch } from "../../../../../../../renderer/components/switch";
+
+interface Dependencies {
+  userStore: UserStore;
+}
+
+const NonInjectedKubectlBinaryDownload = observer(({ userStore }: Dependencies) => (
+  <section>
+    <SubTitle title="Kubectl binary download" />
+    <Switch
+      checked={userStore.downloadKubectlBinaries}
+      onChange={() => userStore.downloadKubectlBinaries = !userStore.downloadKubectlBinaries}
+    >
+      Download kubectl binaries matching the Kubernetes cluster version
+    </Switch>
+  </section>
+
+));
+
+export const KubectlBinaryDownload = withInjectables<Dependencies>(
+  NonInjectedKubectlBinaryDownload,
+
+  {
+    getProps: (di) => ({
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-directory-for-binaries/kubectl-directory-for-binaries-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-directory-for-binaries/kubectl-directory-for-binaries-preference-item.injectable.ts
new file mode 100644
index 0000000000..b33d64545f
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-directory-for-binaries/kubectl-directory-for-binaries-preference-item.injectable.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { preferenceItemInjectionToken } from "../../../preference-item-injection-token";
+import { KubectlDirectoryForBinaries } from "./kubectl-directory-for-binaries";
+
+const kubectlDirectoryForBinariesPreferenceItemInjectable = getInjectable({
+  id: "kubectl-directory-for-binaries-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "kubectl-directory-for-binaries",
+    parentId: "kubectl",
+    orderNumber: 30,
+    Component: KubectlDirectoryForBinaries,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default kubectlDirectoryForBinariesPreferenceItemInjectable;
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-directory-for-binaries/kubectl-directory-for-binaries.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-directory-for-binaries/kubectl-directory-for-binaries.tsx
new file mode 100644
index 0000000000..497ec68f8e
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-directory-for-binaries/kubectl-directory-for-binaries.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React, { useState } from "react";
+import { SubTitle } from "../../../../../../../renderer/components/layout/sub-title";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { UserStore } from "../../../../../../../common/user-store";
+import userStoreInjectable from "../../../../../../../common/user-store/user-store.injectable";
+import { observer } from "mobx-react";
+import { Input, InputValidators } from "../../../../../../../renderer/components/input";
+import directoryForBinariesInjectable from "../../../../../../../common/app-paths/directory-for-binaries/directory-for-binaries.injectable";
+
+interface Dependencies {
+  userStore: UserStore;
+  defaultPathForGeneralBinaries: string;
+}
+
+const NonInjectedKubectlDirectoryForBinaries = observer(
+  ({ userStore, defaultPathForGeneralBinaries }: Dependencies) => {
+    const [downloadPath, setDownloadPath] = useState(userStore.downloadBinariesPath || "");
+    const pathValidator = downloadPath ? InputValidators.isPath : undefined;
+
+    const save = () => {
+      userStore.downloadBinariesPath = downloadPath;
+    };
+
+    return (
+      <section>
+        <SubTitle title="Directory for binaries" />
+        <Input
+          theme="round-black"
+          value={downloadPath}
+          placeholder={defaultPathForGeneralBinaries}
+          validators={pathValidator}
+          onChange={setDownloadPath}
+          onBlur={save}
+          disabled={!userStore.downloadKubectlBinaries}
+        />
+        <div className="hint">The directory to download binaries into.</div>
+      </section>
+    );
+  },
+);
+
+export const KubectlDirectoryForBinaries = withInjectables<Dependencies>(
+  NonInjectedKubectlDirectoryForBinaries,
+
+  {
+    getProps: (di) => ({
+      defaultPathForGeneralBinaries: di.inject(directoryForBinariesInjectable),
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-download-mirror/kubectl-download-mirror-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-download-mirror/kubectl-download-mirror-preference-item.injectable.ts
new file mode 100644
index 0000000000..5dde5413be
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-download-mirror/kubectl-download-mirror-preference-item.injectable.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { preferenceItemInjectionToken } from "../../../preference-item-injection-token";
+import { KubectlDownloadMirror } from "./kubectl-download-mirror";
+
+const kubectlDownloadMirrorPreferenceItemInjectable = getInjectable({
+  id: "kubectl-download-mirror-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "kubectl-download-mirror",
+    parentId: "kubectl",
+    orderNumber: 20,
+    Component: KubectlDownloadMirror,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default kubectlDownloadMirrorPreferenceItemInjectable;
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-download-mirror/kubectl-download-mirror.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-download-mirror/kubectl-download-mirror.tsx
new file mode 100644
index 0000000000..1630a96882
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-download-mirror/kubectl-download-mirror.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { SubTitle } from "../../../../../../../renderer/components/layout/sub-title";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { UserStore } from "../../../../../../../common/user-store";
+import userStoreInjectable from "../../../../../../../common/user-store/user-store.injectable";
+import { observer } from "mobx-react";
+import { Select } from "../../../../../../../renderer/components/select";
+import { defaultPackageMirror, packageMirrors } from "../../../../../../../common/user-store/preferences-helpers";
+
+interface Dependencies {
+  userStore: UserStore;
+}
+
+const downloadMirrorOptions = Array.from(packageMirrors, ([name, mirror]) => ({
+  value: name,
+  label: mirror.label,
+
+  // TODO: Side-effect
+  isDisabled: !mirror.platforms.has(process.platform),
+}));
+
+
+const NonInjectedKubectlDownloadMirror = observer(({ userStore }: Dependencies) => (
+  <section>
+    <SubTitle title="Download mirror" />
+    <Select
+      id="download-mirror-input"
+      placeholder="Download mirror for kubectl"
+      options={downloadMirrorOptions}
+      value={userStore.downloadMirror}
+      onChange={option => userStore.downloadMirror = option?.value ?? defaultPackageMirror}
+      isDisabled={!userStore.downloadKubectlBinaries}
+      themeName="lens"
+    />
+  </section>
+
+
+));
+
+export const KubectlDownloadMirror = withInjectables<Dependencies>(
+  NonInjectedKubectlDownloadMirror,
+
+  {
+    getProps: (di) => ({
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-group-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-group-preference-item.injectable.ts
new file mode 100644
index 0000000000..ea837d6373
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-group-preference-item.injectable.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { preferenceItemInjectionToken } from "../../preference-item-injection-token";
+
+const kubectlGroupPreferenceItemInjectable = getInjectable({
+  id: "kubectl-group-preference-item",
+
+  instantiate: () => ({
+    kind: "group" as const,
+    id: "kubectl",
+    parentId: "kubernetes-page",
+    orderNumber: 10,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default kubectlGroupPreferenceItemInjectable;
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-path-to-binary/kubectl-path-to-binary-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-path-to-binary/kubectl-path-to-binary-preference-item.injectable.ts
new file mode 100644
index 0000000000..8a25e89e3b
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-path-to-binary/kubectl-path-to-binary-preference-item.injectable.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { preferenceItemInjectionToken } from "../../../preference-item-injection-token";
+import { KubectlPathToBinary } from "./kubectl-path-to-binary";
+
+const kubectlPathToBinaryPreferenceItemInjectable = getInjectable({
+  id: "kubectl-path-to-binary-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "kubectl-path-to-binary",
+    parentId: "kubectl",
+    orderNumber: 40,
+    Component: KubectlPathToBinary,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default kubectlPathToBinaryPreferenceItemInjectable;
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-path-to-binary/kubectl-path-to-binary.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-path-to-binary/kubectl-path-to-binary.tsx
new file mode 100644
index 0000000000..ec5482cb88
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubectl/kubectl-path-to-binary/kubectl-path-to-binary.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React, { useState } from "react";
+import { SubTitle } from "../../../../../../../renderer/components/layout/sub-title";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { UserStore } from "../../../../../../../common/user-store";
+import userStoreInjectable from "../../../../../../../common/user-store/user-store.injectable";
+import { observer } from "mobx-react";
+import { Input, InputValidators } from "../../../../../../../renderer/components/input";
+import directoryForKubectlBinariesInjectable from "../../../../../../../common/app-paths/directory-for-kubectl-binaries/directory-for-kubectl-binaries.injectable";
+
+interface Dependencies {
+  userStore: UserStore;
+  defaultPathForKubectlBinaries: string;
+}
+
+const NonInjectedKubectlPathToBinary = observer(
+  ({ userStore, defaultPathForKubectlBinaries }: Dependencies) => {
+    const [binariesPath, setBinariesPath] = useState(userStore.kubectlBinariesPath || "");
+    const pathValidator = binariesPath ? InputValidators.isPath : undefined;
+
+    const save = () => {
+      userStore.kubectlBinariesPath = binariesPath;
+    };
+
+    return (
+      <section>
+        <SubTitle title="Path to kubectl binary" />
+        <Input
+          theme="round-black"
+          placeholder={defaultPathForKubectlBinaries}
+          value={binariesPath}
+          validators={pathValidator}
+          onChange={setBinariesPath}
+          onBlur={save}
+          disabled={userStore.downloadKubectlBinaries}
+        />
+      </section>
+    );
+  },
+);
+
+export const KubectlPathToBinary = withInjectables<Dependencies>(
+  NonInjectedKubectlPathToBinary,
+
+  {
+    getProps: (di) => ({
+      defaultPathForKubectlBinaries: di.inject(directoryForKubectlBinariesInjectable),
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-page.tsx b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-page.tsx
new file mode 100644
index 0000000000..b07d7d6e10
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-page.tsx
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import type { PreferenceItemComponent } from "../preference-item-injection-token";
+
+export const KubernetesPage: PreferenceItemComponent = ({ children }) => (
+  <section id="kubernetes">
+    <h2 data-testid="kubernetes-header">Kubernetes</h2>
+
+    {children}
+  </section>
+);
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.ts
new file mode 100644
index 0000000000..04e9e1b51c
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { preferenceItemInjectionToken } from "../preference-item-injection-token";
+import { KubernetesPage } from "./kubernetes-page";
+import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
+
+const kubernetesPreferencePageInjectable = getInjectable({
+  id: "kubernetes-preference-page",
+
+  instantiate: () => ({
+    kind: "page" as const,
+    id: "kubernetes-page",
+    parentId: "kubernetes-tab",
+    orderNumber: 0,
+    Component: KubernetesPage,
+    childrenSeparator: HorizontalLine,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default kubernetesPreferencePageInjectable;
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-tab.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-tab.injectable.ts
new file mode 100644
index 0000000000..e2b240c6fa
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-tab.injectable.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { preferenceItemInjectionToken } from "../preference-item-injection-token";
+
+const kubernetesPreferenceTabInjectable = getInjectable({
+  id: "kubernetes-preference-tab",
+
+  instantiate: () => ({
+    kind: "tab" as const,
+    id: "kubernetes-tab",
+    parentId: "preference-tabs" as const,
+    pathId: "kubernetes",
+    testId: "kubernetes-preferences-page",
+    label: "Kubernetes",
+    orderNumber: 10,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default kubernetesPreferenceTabInjectable;
diff --git a/src/renderer/components/+preferences/kubernetes.tsx b/src/renderer/components/+preferences/kubernetes.tsx
index 19f1b40566..5e7982d9e7 100644
--- a/src/renderer/components/+preferences/kubernetes.tsx
+++ b/src/renderer/components/+preferences/kubernetes.tsx
@@ -5,7 +5,7 @@
 import { observer } from "mobx-react";
 import React from "react";
 import { HelmCharts } from "../../../features/helm-charts/child-features/preferences/renderer/helm-charts";
-import { KubeconfigSyncs } from "./kubeconfig-syncs";
+import { KubeconfigSync } from "../../../features/preferences/renderer/preference-items/kubernetes/kubeconfig-sync/kubeconfig-sync";
 import { KubectlBinaries } from "./kubectl-binaries";
 import { Preferences } from "./preferences";
 
@@ -17,10 +17,7 @@ export const Kubernetes = observer(() => (
         <KubectlBinaries />
       </section>
       <hr />
-      <section id="kube-sync">
-        <h2 data-testid="kubernetes-sync-header">Kubeconfig Syncs</h2>
-        <KubeconfigSyncs />
-      </section>
+      <KubeconfigSync />
       <hr />
       <HelmCharts />
     </section>