From 6fd9b7cf76041296d50d098c12c969e799b474e9 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Thu, 23 Jul 2020 16:01:32 +0300
Subject: [PATCH] preferences page -- part 2

Signed-off-by: Roman <ixrock@gmail.com>
---
 locales/en/messages.po                        |  81 ++++--
 locales/fi/messages.po                        |  81 ++++--
 locales/ru/messages.po                        |  81 ++++--
 src/common/request.ts                         |  27 +-
 src/common/user-store.ts                      |   6 +
 src/main/helm/helm-chart-manager.ts           |   5 +-
 src/main/helm/helm-repo-manager.ts            |  94 ++++---
 src/main/kubectl.ts                           |  72 +++--
 .../_vue/components/PreferencesPage.vue       | 259 ------------------
 .../components/+preferences/preferences.scss  |  18 +-
 .../components/+preferences/preferences.tsx   | 130 ++++++++-
 src/renderer/components/badge/badge.tsx       |   2 +-
 .../components/layout/wizard-layout.scss      |   9 +-
 src/renderer/theme.store.ts                   | 122 +--------
 14 files changed, 452 insertions(+), 535 deletions(-)
 delete mode 100644 src/renderer/_vue/components/PreferencesPage.vue

diff --git a/locales/en/messages.po b/locales/en/messages.po
index ac03d7f19a..06527cbf15 100644
--- a/locales/en/messages.po
+++ b/locales/en/messages.po
@@ -112,6 +112,22 @@ msgstr "Add cluster"
 msgid "Add field"
 msgstr "Add field"
 
+#: src/renderer/components/+preferences/preferences.tsx:123
+#~ msgid "Added repos"
+#~ msgstr "Added repos"
+
+#: src/renderer/components/+preferences/preferences.tsx:149
+msgid "Added repos:"
+msgstr "Added repos:"
+
+#: src/renderer/components/+preferences/preferences.tsx:108
+msgid "Adding helm branch <0>{0}</0> has failed: {1}"
+msgstr "Adding helm branch <0>{0}</0> has failed: {1}"
+
+#: src/renderer/components/+preferences/preferences.tsx:108
+#~ msgid "Adding repo <0>{0}</0> has failed: {1}"
+#~ msgstr "Adding repo <0>{0}</0> has failed: {1}"
+
 #: src/renderer/components/+custom-resources/crd-details.tsx:78
 msgid "Additional Printer Columns"
 msgstr "Additional Printer Columns"
@@ -186,11 +202,11 @@ msgstr "Allocatable"
 msgid "Allow Privilege Escalation"
 msgstr "Allow Privilege Escalation"
 
-#: src/renderer/components/+preferences/preferences.tsx:76
+#: src/renderer/components/+preferences/preferences.tsx:177
 msgid "Allow telemetry & usage tracking"
 msgstr "Allow telemetry & usage tracking"
 
-#: src/renderer/components/+preferences/preferences.tsx:68
+#: src/renderer/components/+preferences/preferences.tsx:169
 msgid "Allow untrusted Certificate Authorities"
 msgstr "Allow untrusted Certificate Authorities"
 
@@ -385,7 +401,7 @@ msgstr "Cancel"
 msgid "Capacity"
 msgstr "Capacity"
 
-#: src/renderer/components/+preferences/preferences.tsx:67
+#: src/renderer/components/+preferences/preferences.tsx:168
 msgid "Certificate Trust"
 msgstr "Certificate Trust"
 
@@ -452,7 +468,7 @@ msgstr "Cluster IP"
 msgid "Cluster Issuers"
 msgstr "Cluster Issuers"
 
-#: src/renderer/components/+preferences/preferences.tsx:50
+#: src/renderer/components/+preferences/preferences.tsx:139
 msgid "Color Theme"
 msgstr "Color Theme"
 
@@ -701,7 +717,7 @@ msgstr "Daemon Sets"
 msgid "DaemonSets"
 msgstr "DaemonSets"
 
-#: src/renderer/components/+preferences/preferences.tsx:22
+#: src/renderer/components/+preferences/preferences.tsx:40
 msgid "Dark"
 msgstr "Dark"
 
@@ -764,7 +780,7 @@ msgstr "Disk"
 msgid "Disk:"
 msgstr "Disk:"
 
-#: src/renderer/components/+preferences/preferences.tsx:72
+#: src/renderer/components/+preferences/preferences.tsx:173
 msgid "Does not affect cluster communications!"
 msgstr "Does not affect cluster communications!"
 
@@ -772,7 +788,7 @@ msgstr "Does not affect cluster communications!"
 msgid "Domains"
 msgstr "Domains"
 
-#: src/renderer/components/+preferences/preferences.tsx:53
+#: src/renderer/components/+preferences/preferences.tsx:142
 msgid "Download Mirror"
 msgstr "Download Mirror"
 
@@ -780,7 +796,7 @@ msgstr "Download Mirror"
 msgid "Download file"
 msgstr "Download file"
 
-#: src/renderer/components/+preferences/preferences.tsx:54
+#: src/renderer/components/+preferences/preferences.tsx:143
 msgid "Download mirror for kubectl"
 msgstr "Download mirror for kubectl"
 
@@ -951,7 +967,7 @@ msgstr "Groups"
 msgid "HPA"
 msgstr "HPA"
 
-#: src/renderer/components/+preferences/preferences.tsx:61
+#: src/renderer/components/+preferences/preferences.tsx:162
 msgid "HTTP Proxy"
 msgstr "HTTP Proxy"
 
@@ -959,7 +975,7 @@ msgstr "HTTP Proxy"
 msgid "HTTP Proxy server. Used for communicating with Kubernetes API."
 msgstr "HTTP Proxy server. Used for communicating with Kubernetes API."
 
-#: src/renderer/components/+preferences/preferences.tsx:56
+#: src/renderer/components/+preferences/preferences.tsx:145
 msgid "Helm"
 msgstr "Helm"
 
@@ -971,10 +987,18 @@ msgstr "Helm Chart Install"
 msgid "Helm Install: {repo}/{name}"
 msgstr "Helm Install: {repo}/{name}"
 
+#: src/renderer/components/+preferences/preferences.tsx:61
+#~ msgid "Helm Repository <0>{0}</0> already in use."
+#~ msgstr "Helm Repository <0>{0}</0> already in use."
+
 #: src/renderer/components/dock/upgrade-chart.store.ts:114
 msgid "Helm Upgrade: {0}"
 msgstr "Helm Upgrade: {0}"
 
+#: src/renderer/components/+preferences/preferences.tsx:61
+msgid "Helm branch <0>{0}</0> already in use"
+msgstr "Helm branch <0>{0}</0> already in use"
+
 #: src/renderer/components/+config-secrets/secret-details.tsx:93
 #: src/renderer/components/+workloads-pods/pod-logs-dialog.tsx:215
 #: src/renderer/components/drawer/drawer-param-toggler.tsx:19
@@ -1185,7 +1209,7 @@ msgstr "Last seen"
 msgid "Last transition time: {lastTransitionTime}"
 msgstr "Last transition time: {lastTransitionTime}"
 
-#: src/renderer/components/+preferences/preferences.tsx:42
+#: src/renderer/components/+preferences/preferences.tsx:131
 msgid "Lens Global Settings"
 msgstr "Lens Global Settings"
 
@@ -1193,7 +1217,7 @@ msgstr "Lens Global Settings"
 msgid "Level"
 msgstr "Level"
 
-#: src/renderer/components/+preferences/preferences.tsx:23
+#: src/renderer/components/+preferences/preferences.tsx:41
 msgid "Light"
 msgstr "Light"
 
@@ -1461,7 +1485,7 @@ msgstr "Namespaces"
 msgid "Namespaces: {0}"
 msgstr "Namespaces: {0}"
 
-#: src/renderer/components/+preferences/preferences.tsx:71
+#: src/renderer/components/+preferences/preferences.tsx:172
 msgid "Needed with some corporate proxies that do certificate re-writing."
 msgstr "Needed with some corporate proxies that do certificate re-writing."
 
@@ -1731,7 +1755,7 @@ msgstr "Port"
 msgid "Ports"
 msgstr "Ports"
 
-#: src/renderer/components/+preferences/preferences.tsx:37
+#: src/renderer/components/+preferences/preferences.tsx:126
 msgid "Preferences"
 msgstr "Preferences"
 
@@ -1753,7 +1777,7 @@ msgstr "Privileged"
 msgid "Provisioner"
 msgstr "Provisioner"
 
-#: src/renderer/components/+preferences/preferences.tsx:64
+#: src/renderer/components/+preferences/preferences.tsx:165
 msgid "Proxy is used only for non-cluster communication."
 msgstr "Proxy is used only for non-cluster communication."
 
@@ -1837,6 +1861,7 @@ msgstr "Release: {0}"
 msgid "Releases"
 msgstr "Releases"
 
+#: src/renderer/components/+preferences/preferences.tsx:156
 #: src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx:60
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:60
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:64
@@ -1878,6 +1903,14 @@ msgstr "Remove selected items ({0})"
 msgid "Remove {resourceKind} <0>{resourceName}</0>?"
 msgstr "Remove {resourceKind} <0>{resourceName}</0>?"
 
+#: src/renderer/components/+preferences/preferences.tsx:119
+msgid "Removing helm branch <0>{0}</0> has failed: {1}"
+msgstr "Removing helm branch <0>{0}</0> has failed: {1}"
+
+#: src/renderer/components/+preferences/preferences.tsx:119
+#~ msgid "Removing repo <0>{0}</0> has failed: {1}"
+#~ msgstr "Removing repo <0>{0}</0> has failed: {1}"
+
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:62
 msgid "Renew Before"
 msgstr "Renew Before"
@@ -1894,6 +1927,10 @@ msgstr "Replicas"
 msgid "Repo/Name"
 msgstr "Repo/Name"
 
+#: src/renderer/components/+preferences/preferences.tsx:146
+msgid "Repositories"
+msgstr "Repositories"
+
 #: src/renderer/components/+apps-helm-charts/helm-charts.tsx:68
 msgid "Repository"
 msgstr "Repository"
@@ -2136,6 +2173,10 @@ msgstr "Select a quota.."
 msgid "Select kubeconfig"
 msgstr "Select kubeconfig"
 
+#: src/renderer/components/+preferences/preferences.tsx:88
+#~ msgid "Select repository"
+#~ msgstr "Select repository"
+
 #: src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx:188
 msgid "Select role.."
 msgstr "Select role.."
@@ -2337,11 +2378,11 @@ msgstr "TLS"
 msgid "Taints"
 msgstr "Taints"
 
-#: src/renderer/components/+preferences/preferences.tsx:75
+#: src/renderer/components/+preferences/preferences.tsx:176
 msgid "Telemetry & Usage Tracking"
 msgstr "Telemetry & Usage Tracking"
 
-#: src/renderer/components/+preferences/preferences.tsx:78
+#: src/renderer/components/+preferences/preferences.tsx:179
 msgid "Telemetry & usage data is collected to continuously improve the Lens experience."
 msgstr "Telemetry & usage data is collected to continuously improve the Lens experience."
 
@@ -2373,7 +2414,7 @@ msgstr "This field must contain only lowercase latin characters, numbers and das
 msgid "This is the quick launch menu."
 msgstr "This is the quick launch menu."
 
-#: src/renderer/components/+preferences/preferences.tsx:70
+#: src/renderer/components/+preferences/preferences.tsx:171
 msgid "This will make Lens to trust ANY certificate authority without any validations."
 msgstr "This will make Lens to trust ANY certificate authority without any validations."
 
@@ -2416,7 +2457,7 @@ msgstr "Transmit"
 msgid "Type"
 msgstr "Type"
 
-#: src/renderer/components/+preferences/preferences.tsx:62
+#: src/renderer/components/+preferences/preferences.tsx:163
 msgid "Type HTTP proxy url (example: http://proxy.acme.org:8080)"
 msgstr "Type HTTP proxy url (example: http://proxy.acme.org:8080)"
 
@@ -2609,7 +2650,7 @@ msgstr "ago"
 msgid "and <0>{tailCount}</0> more"
 msgstr "and <0>{tailCount}</0> more"
 
-#: src/renderer/components/+preferences/preferences.tsx:42
+#: src/renderer/components/+preferences/preferences.tsx:131
 msgid "applicable to all clusters"
 msgstr "applicable to all clusters"
 
diff --git a/locales/fi/messages.po b/locales/fi/messages.po
index 3a53e4ec23..a2d3505cdc 100644
--- a/locales/fi/messages.po
+++ b/locales/fi/messages.po
@@ -112,6 +112,22 @@ msgstr ""
 msgid "Add field"
 msgstr ""
 
+#: src/renderer/components/+preferences/preferences.tsx:123
+#~ msgid "Added repos"
+#~ msgstr ""
+
+#: src/renderer/components/+preferences/preferences.tsx:149
+msgid "Added repos:"
+msgstr ""
+
+#: src/renderer/components/+preferences/preferences.tsx:108
+msgid "Adding helm branch <0>{0}</0> has failed: {1}"
+msgstr ""
+
+#: src/renderer/components/+preferences/preferences.tsx:108
+#~ msgid "Adding repo <0>{0}</0> has failed: {1}"
+#~ msgstr ""
+
 #: src/renderer/components/+custom-resources/crd-details.tsx:78
 msgid "Additional Printer Columns"
 msgstr ""
@@ -186,11 +202,11 @@ msgstr ""
 msgid "Allow Privilege Escalation"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:76
+#: src/renderer/components/+preferences/preferences.tsx:177
 msgid "Allow telemetry & usage tracking"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:68
+#: src/renderer/components/+preferences/preferences.tsx:169
 msgid "Allow untrusted Certificate Authorities"
 msgstr ""
 
@@ -385,7 +401,7 @@ msgstr ""
 msgid "Capacity"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:67
+#: src/renderer/components/+preferences/preferences.tsx:168
 msgid "Certificate Trust"
 msgstr ""
 
@@ -448,7 +464,7 @@ msgstr ""
 msgid "Cluster Issuers"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:50
+#: src/renderer/components/+preferences/preferences.tsx:139
 msgid "Color Theme"
 msgstr ""
 
@@ -697,7 +713,7 @@ msgstr ""
 msgid "DaemonSets"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:22
+#: src/renderer/components/+preferences/preferences.tsx:40
 msgid "Dark"
 msgstr ""
 
@@ -760,7 +776,7 @@ msgstr ""
 msgid "Disk:"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:72
+#: src/renderer/components/+preferences/preferences.tsx:173
 msgid "Does not affect cluster communications!"
 msgstr ""
 
@@ -768,7 +784,7 @@ msgstr ""
 msgid "Domains"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:53
+#: src/renderer/components/+preferences/preferences.tsx:142
 msgid "Download Mirror"
 msgstr ""
 
@@ -776,7 +792,7 @@ msgstr ""
 msgid "Download file"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:54
+#: src/renderer/components/+preferences/preferences.tsx:143
 msgid "Download mirror for kubectl"
 msgstr ""
 
@@ -942,7 +958,7 @@ msgstr ""
 msgid "HPA"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:61
+#: src/renderer/components/+preferences/preferences.tsx:162
 msgid "HTTP Proxy"
 msgstr ""
 
@@ -950,7 +966,7 @@ msgstr ""
 msgid "HTTP Proxy server. Used for communicating with Kubernetes API."
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:56
+#: src/renderer/components/+preferences/preferences.tsx:145
 msgid "Helm"
 msgstr ""
 
@@ -962,10 +978,18 @@ msgstr ""
 msgid "Helm Install: {repo}/{name}"
 msgstr ""
 
+#: src/renderer/components/+preferences/preferences.tsx:61
+#~ msgid "Helm Repository <0>{0}</0> already in use."
+#~ msgstr ""
+
 #: src/renderer/components/dock/upgrade-chart.store.ts:114
 msgid "Helm Upgrade: {0}"
 msgstr ""
 
+#: src/renderer/components/+preferences/preferences.tsx:61
+msgid "Helm branch <0>{0}</0> already in use"
+msgstr ""
+
 #: src/renderer/components/+config-secrets/secret-details.tsx:93
 #: src/renderer/components/+workloads-pods/pod-logs-dialog.tsx:215
 #: src/renderer/components/drawer/drawer-param-toggler.tsx:19
@@ -1176,7 +1200,7 @@ msgstr ""
 msgid "Last transition time: {lastTransitionTime}"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:42
+#: src/renderer/components/+preferences/preferences.tsx:131
 msgid "Lens Global Settings"
 msgstr ""
 
@@ -1184,7 +1208,7 @@ msgstr ""
 msgid "Level"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:23
+#: src/renderer/components/+preferences/preferences.tsx:41
 msgid "Light"
 msgstr ""
 
@@ -1452,7 +1476,7 @@ msgstr ""
 msgid "Namespaces: {0}"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:71
+#: src/renderer/components/+preferences/preferences.tsx:172
 msgid "Needed with some corporate proxies that do certificate re-writing."
 msgstr ""
 
@@ -1714,7 +1738,7 @@ msgstr ""
 msgid "Ports"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:37
+#: src/renderer/components/+preferences/preferences.tsx:126
 msgid "Preferences"
 msgstr ""
 
@@ -1736,7 +1760,7 @@ msgstr ""
 msgid "Provisioner"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:64
+#: src/renderer/components/+preferences/preferences.tsx:165
 msgid "Proxy is used only for non-cluster communication."
 msgstr ""
 
@@ -1820,6 +1844,7 @@ msgstr ""
 msgid "Releases"
 msgstr ""
 
+#: src/renderer/components/+preferences/preferences.tsx:156
 #: src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx:60
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:60
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:64
@@ -1861,6 +1886,14 @@ msgstr ""
 msgid "Remove {resourceKind} <0>{resourceName}</0>?"
 msgstr ""
 
+#: src/renderer/components/+preferences/preferences.tsx:119
+msgid "Removing helm branch <0>{0}</0> has failed: {1}"
+msgstr ""
+
+#: src/renderer/components/+preferences/preferences.tsx:119
+#~ msgid "Removing repo <0>{0}</0> has failed: {1}"
+#~ msgstr ""
+
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:62
 msgid "Renew Before"
 msgstr ""
@@ -1877,6 +1910,10 @@ msgstr ""
 msgid "Repo/Name"
 msgstr ""
 
+#: src/renderer/components/+preferences/preferences.tsx:146
+msgid "Repositories"
+msgstr ""
+
 #: src/renderer/components/+apps-helm-charts/helm-charts.tsx:68
 msgid "Repository"
 msgstr ""
@@ -2119,6 +2156,10 @@ msgstr ""
 msgid "Select kubeconfig"
 msgstr ""
 
+#: src/renderer/components/+preferences/preferences.tsx:88
+#~ msgid "Select repository"
+#~ msgstr ""
+
 #: src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx:188
 msgid "Select role.."
 msgstr ""
@@ -2320,11 +2361,11 @@ msgstr ""
 msgid "Taints"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:75
+#: src/renderer/components/+preferences/preferences.tsx:176
 msgid "Telemetry & Usage Tracking"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:78
+#: src/renderer/components/+preferences/preferences.tsx:179
 msgid "Telemetry & usage data is collected to continuously improve the Lens experience."
 msgstr ""
 
@@ -2356,7 +2397,7 @@ msgstr ""
 msgid "This is the quick launch menu."
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:70
+#: src/renderer/components/+preferences/preferences.tsx:171
 msgid "This will make Lens to trust ANY certificate authority without any validations."
 msgstr ""
 
@@ -2399,7 +2440,7 @@ msgstr ""
 msgid "Type"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:62
+#: src/renderer/components/+preferences/preferences.tsx:163
 msgid "Type HTTP proxy url (example: http://proxy.acme.org:8080)"
 msgstr ""
 
@@ -2592,7 +2633,7 @@ msgstr ""
 msgid "and <0>{tailCount}</0> more"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:42
+#: src/renderer/components/+preferences/preferences.tsx:131
 msgid "applicable to all clusters"
 msgstr ""
 
diff --git a/locales/ru/messages.po b/locales/ru/messages.po
index 8702f65059..06f2b26186 100644
--- a/locales/ru/messages.po
+++ b/locales/ru/messages.po
@@ -113,6 +113,22 @@ msgstr ""
 msgid "Add field"
 msgstr "Добавить поле"
 
+#: src/renderer/components/+preferences/preferences.tsx:123
+#~ msgid "Added repos"
+#~ msgstr ""
+
+#: src/renderer/components/+preferences/preferences.tsx:149
+msgid "Added repos:"
+msgstr ""
+
+#: src/renderer/components/+preferences/preferences.tsx:108
+msgid "Adding helm branch <0>{0}</0> has failed: {1}"
+msgstr ""
+
+#: src/renderer/components/+preferences/preferences.tsx:108
+#~ msgid "Adding repo <0>{0}</0> has failed: {1}"
+#~ msgstr ""
+
 #: src/renderer/components/+custom-resources/crd-details.tsx:78
 msgid "Additional Printer Columns"
 msgstr ""
@@ -187,11 +203,11 @@ msgstr ""
 msgid "Allow Privilege Escalation"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:76
+#: src/renderer/components/+preferences/preferences.tsx:177
 msgid "Allow telemetry & usage tracking"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:68
+#: src/renderer/components/+preferences/preferences.tsx:169
 msgid "Allow untrusted Certificate Authorities"
 msgstr ""
 
@@ -386,7 +402,7 @@ msgstr "Отмена"
 msgid "Capacity"
 msgstr "Емкость"
 
-#: src/renderer/components/+preferences/preferences.tsx:67
+#: src/renderer/components/+preferences/preferences.tsx:168
 msgid "Certificate Trust"
 msgstr ""
 
@@ -453,7 +469,7 @@ msgstr "IP-адрес кластера"
 msgid "Cluster Issuers"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:50
+#: src/renderer/components/+preferences/preferences.tsx:139
 msgid "Color Theme"
 msgstr ""
 
@@ -702,7 +718,7 @@ msgstr ""
 msgid "DaemonSets"
 msgstr "DaemonSets"
 
-#: src/renderer/components/+preferences/preferences.tsx:22
+#: src/renderer/components/+preferences/preferences.tsx:40
 msgid "Dark"
 msgstr ""
 
@@ -765,7 +781,7 @@ msgstr "Диск"
 msgid "Disk:"
 msgstr "Диск:"
 
-#: src/renderer/components/+preferences/preferences.tsx:72
+#: src/renderer/components/+preferences/preferences.tsx:173
 msgid "Does not affect cluster communications!"
 msgstr ""
 
@@ -773,7 +789,7 @@ msgstr ""
 msgid "Domains"
 msgstr "Домены"
 
-#: src/renderer/components/+preferences/preferences.tsx:53
+#: src/renderer/components/+preferences/preferences.tsx:142
 msgid "Download Mirror"
 msgstr ""
 
@@ -781,7 +797,7 @@ msgstr ""
 msgid "Download file"
 msgstr "Скачать файл"
 
-#: src/renderer/components/+preferences/preferences.tsx:54
+#: src/renderer/components/+preferences/preferences.tsx:143
 msgid "Download mirror for kubectl"
 msgstr ""
 
@@ -952,7 +968,7 @@ msgstr "Группы"
 msgid "HPA"
 msgstr "HPA"
 
-#: src/renderer/components/+preferences/preferences.tsx:61
+#: src/renderer/components/+preferences/preferences.tsx:162
 msgid "HTTP Proxy"
 msgstr ""
 
@@ -960,7 +976,7 @@ msgstr ""
 msgid "HTTP Proxy server. Used for communicating with Kubernetes API."
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:56
+#: src/renderer/components/+preferences/preferences.tsx:145
 msgid "Helm"
 msgstr ""
 
@@ -972,10 +988,18 @@ msgstr "Установка Helm чарта"
 msgid "Helm Install: {repo}/{name}"
 msgstr "Helm установка: {repo}/{name}"
 
+#: src/renderer/components/+preferences/preferences.tsx:61
+#~ msgid "Helm Repository <0>{0}</0> already in use."
+#~ msgstr ""
+
 #: src/renderer/components/dock/upgrade-chart.store.ts:114
 msgid "Helm Upgrade: {0}"
 msgstr "Helm обновление: {0}"
 
+#: src/renderer/components/+preferences/preferences.tsx:61
+msgid "Helm branch <0>{0}</0> already in use"
+msgstr ""
+
 #: src/renderer/components/+config-secrets/secret-details.tsx:93
 #: src/renderer/components/+workloads-pods/pod-logs-dialog.tsx:215
 #: src/renderer/components/drawer/drawer-param-toggler.tsx:19
@@ -1186,7 +1210,7 @@ msgstr "Увиденно в последний раз"
 msgid "Last transition time: {lastTransitionTime}"
 msgstr "Последнее изменение: {lastTransitionTime}"
 
-#: src/renderer/components/+preferences/preferences.tsx:42
+#: src/renderer/components/+preferences/preferences.tsx:131
 msgid "Lens Global Settings"
 msgstr ""
 
@@ -1194,7 +1218,7 @@ msgstr ""
 msgid "Level"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:23
+#: src/renderer/components/+preferences/preferences.tsx:41
 msgid "Light"
 msgstr ""
 
@@ -1462,7 +1486,7 @@ msgstr "Namespaces"
 msgid "Namespaces: {0}"
 msgstr "Namespaces: {0}"
 
-#: src/renderer/components/+preferences/preferences.tsx:71
+#: src/renderer/components/+preferences/preferences.tsx:172
 msgid "Needed with some corporate proxies that do certificate re-writing."
 msgstr ""
 
@@ -1732,7 +1756,7 @@ msgstr ""
 msgid "Ports"
 msgstr "Порты"
 
-#: src/renderer/components/+preferences/preferences.tsx:37
+#: src/renderer/components/+preferences/preferences.tsx:126
 msgid "Preferences"
 msgstr ""
 
@@ -1754,7 +1778,7 @@ msgstr ""
 msgid "Provisioner"
 msgstr "Комиссия"
 
-#: src/renderer/components/+preferences/preferences.tsx:64
+#: src/renderer/components/+preferences/preferences.tsx:165
 msgid "Proxy is used only for non-cluster communication."
 msgstr ""
 
@@ -1838,6 +1862,7 @@ msgstr "Установка: {0}"
 msgid "Releases"
 msgstr "Релизы"
 
+#: src/renderer/components/+preferences/preferences.tsx:156
 #: src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx:60
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:60
 #: src/renderer/components/cluster-manager/clusters-menu.tsx:64
@@ -1879,6 +1904,14 @@ msgstr "Удалить выбранные элементы ({0})"
 msgid "Remove {resourceKind} <0>{resourceName}</0>?"
 msgstr "Удалить {resourceKind} <0>{resourceName}</0>?"
 
+#: src/renderer/components/+preferences/preferences.tsx:119
+msgid "Removing helm branch <0>{0}</0> has failed: {1}"
+msgstr ""
+
+#: src/renderer/components/+preferences/preferences.tsx:119
+#~ msgid "Removing repo <0>{0}</0> has failed: {1}"
+#~ msgstr ""
+
 #: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:62
 msgid "Renew Before"
 msgstr "Обновить до"
@@ -1895,6 +1928,10 @@ msgstr "Реплики"
 msgid "Repo/Name"
 msgstr "Репозиторий/Имя"
 
+#: src/renderer/components/+preferences/preferences.tsx:146
+msgid "Repositories"
+msgstr ""
+
 #: src/renderer/components/+apps-helm-charts/helm-charts.tsx:68
 msgid "Repository"
 msgstr "Репозиторий"
@@ -2137,6 +2174,10 @@ msgstr "Выберите квоту..."
 msgid "Select kubeconfig"
 msgstr ""
 
+#: src/renderer/components/+preferences/preferences.tsx:88
+#~ msgid "Select repository"
+#~ msgstr ""
+
 #: src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx:188
 msgid "Select role.."
 msgstr "Выбрать роль.."
@@ -2338,11 +2379,11 @@ msgstr "TLS"
 msgid "Taints"
 msgstr "Метки блокировки"
 
-#: src/renderer/components/+preferences/preferences.tsx:75
+#: src/renderer/components/+preferences/preferences.tsx:176
 msgid "Telemetry & Usage Tracking"
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:78
+#: src/renderer/components/+preferences/preferences.tsx:179
 msgid "Telemetry & usage data is collected to continuously improve the Lens experience."
 msgstr ""
 
@@ -2374,7 +2415,7 @@ msgstr "Это поле может содержать только латинс
 msgid "This is the quick launch menu."
 msgstr ""
 
-#: src/renderer/components/+preferences/preferences.tsx:70
+#: src/renderer/components/+preferences/preferences.tsx:171
 msgid "This will make Lens to trust ANY certificate authority without any validations."
 msgstr ""
 
@@ -2417,7 +2458,7 @@ msgstr "Транзит"
 msgid "Type"
 msgstr "Тип"
 
-#: src/renderer/components/+preferences/preferences.tsx:62
+#: src/renderer/components/+preferences/preferences.tsx:163
 msgid "Type HTTP proxy url (example: http://proxy.acme.org:8080)"
 msgstr ""
 
@@ -2610,7 +2651,7 @@ msgstr "тому назад"
 msgid "and <0>{tailCount}</0> more"
 msgstr "и <0>{tailCount}</0> ещё"
 
-#: src/renderer/components/+preferences/preferences.tsx:42
+#: src/renderer/components/+preferences/preferences.tsx:131
 msgid "applicable to all clusters"
 msgstr ""
 
diff --git a/src/common/request.ts b/src/common/request.ts
index ca6fbd2893..536e2eccc9 100644
--- a/src/common/request.ts
+++ b/src/common/request.ts
@@ -1,11 +1,28 @@
 import request from "request"
+import requestPromise from "request-promise-native"
 import { userStore } from "./user-store"
 
-export function globalRequestOpts(requestOpts: request.Options) {
+// todo: get rid of "request" (deprecated)
+// https://github.com/lensapp/lens/issues/459
+
+function getDefaultRequestOpts(): Partial<request.Options> {
   const { httpsProxy, allowUntrustedCAs } = userStore.preferences
-  if (httpsProxy) {
-    requestOpts.proxy = httpsProxy
+  return {
+    proxy: httpsProxy || undefined,
+    rejectUnauthorized: !allowUntrustedCAs,
   }
-  requestOpts.rejectUnauthorized = !allowUntrustedCAs;
-  return requestOpts
+}
+
+/**
+ * @deprecated
+ */
+export function customRequest(opts: request.Options) {
+  return request.defaults(getDefaultRequestOpts())(opts)
+}
+
+/**
+ * @deprecated
+ */
+export function customRequestPromise(opts: requestPromise.Options) {
+  return requestPromise.defaults(getDefaultRequestOpts())(opts)
 }
diff --git a/src/common/user-store.ts b/src/common/user-store.ts
index 7841cbe4bb..ebe1616524 100644
--- a/src/common/user-store.ts
+++ b/src/common/user-store.ts
@@ -13,6 +13,12 @@ export enum ThemeType {
   DARK = "dark",
 }
 
+export interface Theme {
+  name: string;
+  type: ThemeType;
+  colors?: Record<string, string>;
+}
+
 export interface UserStoreModel {
   lastSeenAppVersion: string;
   seenContexts: string[];
diff --git a/src/main/helm/helm-chart-manager.ts b/src/main/helm/helm-chart-manager.ts
index e4fe94898e..e42f7a1aaf 100644
--- a/src/main/helm/helm-chart-manager.ts
+++ b/src/main/helm/helm-chart-manager.ts
@@ -6,12 +6,13 @@ import { promiseExec } from "../promise-exec"
 import { helmCli } from "./helm-cli"
 
 type CachedYaml = {
-  entries: any;
+  entries: any; // todo: types
 }
 
 export class HelmChartManager {
-  protected cache: any
+  protected cache: any = {}
   protected repo: HelmRepo
+
   constructor(repo: HelmRepo){
     this.cache = HelmRepoManager.cache
     this.repo = repo
diff --git a/src/main/helm/helm-repo-manager.ts b/src/main/helm/helm-repo-manager.ts
index 3622c37f7e..2c132311c3 100644
--- a/src/main/helm/helm-repo-manager.ts
+++ b/src/main/helm/helm-repo-manager.ts
@@ -1,28 +1,51 @@
-import fs from "fs";
-import logger from "../logger";
-import * as yaml from "js-yaml";
+import yaml from "js-yaml";
+import { readFile } from "fs-extra";
 import { promiseExec } from "../promise-exec";
 import { helmCli } from "./helm-cli";
 import { Singleton } from "../../common/utils/singleton";
+import { customRequestPromise } from "../../common/request";
+import orderBy from "lodash/orderBy";
+import logger from "../logger";
 
 export type HelmEnv = Record<string, string> & {
   HELM_REPOSITORY_CACHE?: string;
   HELM_REPOSITORY_CONFIG?: string;
 }
 
-export type HelmRepo = {
+export interface HelmRepoConfig {
+  repositories: HelmRepo[]
+}
+
+export interface HelmRepo {
   name: string;
   url: string;
-  cacheFilePath?: string;
+  cacheFilePath?: string
+  caFile?: string,
+  certFile?: string,
+  insecure_skip_tls_verify?: boolean,
+  keyFile?: string,
+  username?: string,
+  password?: string,
 }
 
 export class HelmRepoManager extends Singleton {
-  static cache = {}
+  static cache = {} // todo: remove implicit updates in helm-chart-manager.ts
 
+  protected repos: HelmRepo[];
   protected helmEnv: HelmEnv
   protected initialized: boolean
 
-  public async init() {
+  async loadAvailableRepos(): Promise<HelmRepo[]> {
+    const res = await customRequestPromise({
+      uri: "https://hub.helm.sh/assets/js/repos.json",
+      json: true,
+      resolveWithFullResponse: true,
+      timeout: 10000,
+    });
+    return orderBy<HelmRepo>(res.body.data, repo => repo.name);
+  }
+
+  async init() {
     await helmCli.ensureBinary();
     if (!this.initialized) {
       this.helmEnv = await this.parseHelmEnv()
@@ -47,60 +70,57 @@ export class HelmRepoManager extends Singleton {
     return env
   }
 
-  public async repositories(): Promise<Array<HelmRepo>> {
+  public async repositories(): Promise<HelmRepo[]> {
     if (!this.initialized) {
       await this.init()
     }
-    const repositoryFilePath = this.helmEnv.HELM_REPOSITORY_CONFIG
-    const repoFile = await fs.promises.readFile(repositoryFilePath, 'utf8').catch(async (error) => {
-      return null
-    })
-    if (!repoFile) {
-      await this.addRepo({ name: "stable", url: "https://kubernetes-charts.storage.googleapis.com/" })
-      return await this.repositories()
-    }
     try {
-      const repositories = yaml.safeLoad(repoFile)
-      const result = repositories['repositories'].map((repository: HelmRepo) => {
-        return {
-          name: repository.name,
-          url: repository.url,
-          cacheFilePath: `${this.helmEnv.HELM_REPOSITORY_CACHE}/${repository['name']}-index.yaml`
-        }
-      });
-      if (result.length == 0) {
-        await this.addRepo({ name: "stable", url: "https://kubernetes-charts.storage.googleapis.com/" })
-        return await this.repositories()
+      const repoConfigFile = this.helmEnv.HELM_REPOSITORY_CONFIG;
+      const { repositories }: HelmRepoConfig = await readFile(repoConfigFile, 'utf8')
+        .then((yamlContent: string) => yaml.safeLoad(yamlContent))
+        .catch(() => ({
+          repositories: []
+        }));
+      if (!repositories.length) {
+        await this.addRepo({ name: "stable", url: "https://kubernetes-charts.storage.googleapis.com/" });
+        return await this.repositories();
       }
-      return result
+      return repositories.map(repo => ({
+        ...repo,
+        cacheFilePath: `${this.helmEnv.HELM_REPOSITORY_CACHE}/${repo.name}-index.yaml`
+      }));
     } catch (error) {
-      logger.debug(error)
+      logger.error(`[HELM]: repositories listing error "${error}"`)
       return []
     }
   }
 
   public async repository(name: string) {
     const repositories = await this.repositories()
-    return repositories.find((repo: HelmRepo) => {
-      return repo.name == name
-    })
+    return repositories.find(repo => repo.name == name);
   }
 
   public async update() {
     const helm = await helmCli.binaryPath()
-    logger.debug(`${helm} repo update`)
-
     const { stdout } = await promiseExec(`"${helm}" repo update`).catch((error) => {
       return { stdout: error.stdout }
     })
     return stdout
   }
 
-  public async addRepo(repository: HelmRepo) {
+  public async addRepo({ name, url }: HelmRepo) {
+    logger.info(`[HELM]: adding repo "${name}" from ${url}`);
     const helm = await helmCli.binaryPath()
-    logger.debug(`${helm} repo add ${repository.name} ${repository.url}`)
+    const { stdout } = await promiseExec(`"${helm}" repo add ${name} ${url}`).catch((error) => {
+      throw(error.stderr)
+    })
+    return stdout
+  }
 
-    const { stdout } = await promiseExec(`"${helm}" repo add ${repository.name} ${repository.url}`).catch((error) => {
+  public async removeRepo({ name, url }: HelmRepo): Promise<string> {
+    logger.info(`[HELM]: removing repo "${name}" from ${url}`);
+    const helm = await helmCli.binaryPath()
+    const { stdout, stderr } = await promiseExec(`"${helm}" repo remove ${name}`).catch((error) => {
       throw(error.stderr)
     })
     return stdout
diff --git a/src/main/kubectl.ts b/src/main/kubectl.ts
index db54f2bd12..dbd9e8fb14 100644
--- a/src/main/kubectl.ts
+++ b/src/main/kubectl.ts
@@ -1,15 +1,15 @@
 import { app, remote } from "electron"
 import path from "path"
 import fs from "fs"
-import request from "request"
-import { promiseExec} from "./promise-exec"
+import { promiseExec } from "./promise-exec"
 import logger from "./logger"
 import { ensureDir, pathExists } from "fs-extra"
-import { globalRequestOpts } from "../common/request"
 import * as lockFile from "proper-lockfile"
 import { helmCli } from "./helm/helm-cli"
 import { userStore } from "../common/user-store"
-import { getBundledKubectlVersion} from "../common/utils/app-version"
+import { customRequest } from "../common/request";
+import { getBundledKubectlVersion } from "../common/utils/app-version"
+import { isDevelopment, isWindows } from "../common/vars";
 
 const bundledVersion = getBundledKubectlVersion()
 const kubectlMap: Map<string, string> = new Map([
@@ -32,18 +32,18 @@ const packageMirrors: Map<string, string> = new Map([
   ["china", "https://mirror.azure.cn/kubernetes/kubectl"]
 ])
 
+let bundledPath: string
 const initScriptVersionString = "# lens-initscript v3\n"
 
-const isDevelopment = process.env.NODE_ENV !== "production"
-let bundledPath: string = null
-
-if(isDevelopment) {
+if (isDevelopment) {
   bundledPath = path.join(process.cwd(), "binaries", "client", process.platform, process.arch, "kubectl")
 } else {
   bundledPath = path.join(process.resourcesPath, process.arch, "kubectl")
 }
 
-if(process.platform === "win32") bundledPath = `${bundledPath}.exe`
+if (isWindows) {
+  bundledPath = `${bundledPath}.exe`
+}
 
 export class Kubectl {
   public kubectlVersion: string
@@ -52,7 +52,7 @@ export class Kubectl {
   protected path: string
   protected dirname: string
 
-  static get kubectlDir(){
+  static get kubectlDir() {
     return path.join((app || remote.app).getPath("userData"), "binaries", "kubectl")
   }
 
@@ -62,7 +62,7 @@ export class Kubectl {
 
   // Returns the single bundled Kubectl instance
   public static bundled() {
-    if(!Kubectl.bundledInstance) Kubectl.bundledInstance = new Kubectl(Kubectl.bundledKubectlVersion)
+    if (!Kubectl.bundledInstance) Kubectl.bundledInstance = new Kubectl(Kubectl.bundledKubectlVersion)
     return Kubectl.bundledInstance
   }
 
@@ -71,7 +71,7 @@ export class Kubectl {
     const minorVersion = versionParts[1]
     /* minorVersion is the first two digits of kube server version
        if the version map includes that, use that version, if not, fallback to the exact x.y.z of kube version */
-    if(kubectlMap.has(minorVersion)) {
+    if (kubectlMap.has(minorVersion)) {
       this.kubectlVersion = kubectlMap.get(minorVersion)
       logger.debug("Set kubectl version " + this.kubectlVersion + " for cluster version " + clusterVersion + " using version map")
     } else {
@@ -81,16 +81,16 @@ export class Kubectl {
 
     let arch = null
 
-    if(process.arch == "x64") {
+    if (process.arch == "x64") {
       arch = "amd64"
-    } else if(process.arch == "x86" || process.arch == "ia32") {
+    } else if (process.arch == "x86" || process.arch == "ia32") {
       arch = "386"
     } else {
       arch = process.arch
     }
 
-    const platformName = process.platform === "win32" ? "windows" : process.platform
-    const binaryName = process.platform === "win32" ? "kubectl.exe" : "kubectl"
+    const platformName = isWindows ? "windows" : process.platform
+    const binaryName = isWindows ? "kubectl.exe" : "kubectl"
 
     this.url = `${this.getDownloadMirror()}/v${this.kubectlVersion}/bin/${platformName}/${arch}/${binaryName}`
 
@@ -102,7 +102,7 @@ export class Kubectl {
     try {
       await this.ensureKubectl()
       return this.path
-    } catch(err) {
+    } catch (err) {
       logger.error("Failed to ensure kubectl, fallback to the bundled version")
       logger.error(err)
       return Kubectl.bundledKubectlPath
@@ -113,7 +113,7 @@ export class Kubectl {
     try {
       await this.ensureKubectl()
       return this.dirname
-    } catch(err) {
+    } catch (err) {
       logger.error(err)
       return ""
     }
@@ -138,8 +138,7 @@ export class Kubectl {
           return true
         }
         logger.error(`Local kubectl is version ${version}, expected ${this.kubectlVersion}, unlinking`)
-      }
-      catch(err) {
+      } catch (err) {
         logger.error(`Local kubectl failed to run properly (${err.message}), unlinking`)
       }
       await fs.promises.unlink(this.path)
@@ -148,7 +147,7 @@ export class Kubectl {
   }
 
   protected async checkBundled(): Promise<boolean> {
-    if(this.kubectlVersion === Kubectl.bundledKubectlVersion) {
+    if (this.kubectlVersion === Kubectl.bundledKubectlVersion) {
       try {
         const exist = await pathExists(this.path)
         if (!exist) {
@@ -156,7 +155,7 @@ export class Kubectl {
           await fs.promises.chmod(this.path, 0o755)
         }
         return true
-      } catch(err) {
+      } catch (err) {
         logger.error("Could not copy the bundled kubectl to app-data: " + err)
         return false
       }
@@ -171,10 +170,15 @@ export class Kubectl {
       logger.debug(`Acquired a lock for ${this.kubectlVersion}`)
       const bundled = await this.checkBundled()
       const isValid = await this.checkBinary(!bundled)
-      if(!isValid) {
-        await this.downloadKubectl().catch((error) => { logger.error(error) });
+      if (!isValid) {
+        await this.downloadKubectl().catch((error) => {
+          logger.error(error)
+        });
       }
-      await this.writeInitScripts().catch((error) => { logger.error("Failed to write init scripts"); logger.error(error) })
+      await this.writeInitScripts().catch((error) => {
+        logger.error("Failed to write init scripts");
+        logger.error(error)
+      })
       logger.debug(`Releasing lock for ${this.kubectlVersion}`)
       release()
       return true
@@ -190,10 +194,10 @@ export class Kubectl {
 
     logger.info(`Downloading kubectl ${this.kubectlVersion} from ${this.url} to ${this.path}`)
     return new Promise((resolve, reject) => {
-      const stream = request({
+      const stream = customRequest({
+        url: this.url,
         gzip: true,
-        ...this.getRequestOpts()
-      })
+      });
       const file = fs.createWriteStream(this.path)
       stream.on("complete", () => {
         logger.debug("kubectl binary download finished")
@@ -215,7 +219,7 @@ export class Kubectl {
 
   protected async scriptIsLatest(scriptPath: string) {
     const scriptExists = await pathExists(scriptPath)
-    if(!scriptExists) return false
+    if (!scriptExists) return false
 
     try {
       const filehandle = await fs.promises.open(scriptPath, 'r')
@@ -234,7 +238,7 @@ export class Kubectl {
     const fsPromises = fs.promises;
     const bashScriptPath = path.join(this.dirname, '.bash_set_path')
     const bashScriptIsLatest = await this.scriptIsLatest(bashScriptPath)
-    if(!bashScriptIsLatest) {
+    if (!bashScriptIsLatest) {
       let bashScript = "" + initScriptVersionString
       bashScript += "tempkubeconfig=\"$KUBECONFIG\"\n"
       bashScript += "test -f \"/etc/profile\" && . \"/etc/profile\"\n"
@@ -253,7 +257,7 @@ export class Kubectl {
 
     const zshScriptPath = path.join(this.dirname, '.zlogin')
     const zshScriptIsLatest = await this.scriptIsLatest(zshScriptPath)
-    if(!zshScriptIsLatest) {
+    if (!zshScriptIsLatest) {
       let zshScript = "" + initScriptVersionString
 
       zshScript += "tempkubeconfig=\"$KUBECONFIG\"\n"
@@ -280,12 +284,6 @@ export class Kubectl {
     }
   }
 
-  protected getRequestOpts() {
-    return globalRequestOpts({
-      url: this.url
-    })
-  }
-
   protected getDownloadMirror() {
     const mirror = packageMirrors.get(userStore.preferences.downloadMirror)
     if (mirror) {
diff --git a/src/renderer/_vue/components/PreferencesPage.vue b/src/renderer/_vue/components/PreferencesPage.vue
deleted file mode 100644
index 2d4b6c40ca..0000000000
--- a/src/renderer/_vue/components/PreferencesPage.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-  <div class="content">
-    <ClosePageButton />
-    <div class="container-fluid lens-preferences">
-      <div class="header sticky-top">
-        <h2>Preferences</h2>
-      </div>
-      <div class="row">
-        <div class="col-3" />
-        <div ref="content" class="global-settings col-6">
-          <h2>Color Theme</h2>
-
-          <b-form-group
-            label="Cluster Color theme:"
-            label-for="input-color-theme"
-          >
-            <b-form-select
-              id="input-color-theme"
-              v-model="preferences.colorTheme"
-              @change="onSave"
-              :options="colorThemeOptions"
-            />
-          </b-form-group>
-        </div>
-        <div class="col-3" />
-      </div>
-      <div class="row">
-        <div class="col-3" />
-        <div ref="content" class="global-settings col-6">
-          <h2>Download Mirror</h2>
-
-          <b-form-group
-            label="Download mirror for kubectl:"
-            label-for="input-download-mirror"
-          >
-            <b-form-select
-              id="input-download-mirror"
-              v-model="preferences.downloadMirror"
-              @change="onSave"
-              :options="downloadMirrorOptions"
-            />
-          </b-form-group>
-        </div>
-        <div class="col-3" />
-      </div>
-      <div class="row">
-        <div class="col-3" />
-        <div ref="content" class="global-settings col-6">
-          <h2>Helm</h2>
-
-          <b-form-group
-            label="Repositories:"
-            label-for="textarea-helm-repositories"
-          >
-            <b-input-group>
-              <b-form-select
-                :options="hubRepositories"
-                v-model="selectedHubRepo"
-              >
-                <template v-slot:first>
-                  <option value="">
-                    Select Helm repository
-                  </option>
-                </template>
-              </b-form-select>
-              <b-input-group-append>
-                <b-button :disabled="!selectedHubRepo" @click="addHubRepo" variant="primary">
-                  Add <b-spinner small v-if="isHelmProcessing" label="Small Spinner" />
-                </b-button>
-              </b-input-group-append>
-            </b-input-group>
-          </b-form-group>
-          <b-list-group>
-            <b-list-group-item v-for="repo in helmRepos" :key="repo.name">
-              <span v-b-tooltip.hover v-b-tooltip.right :title="repo.url">{{ repo.name }}</span>
-              <button @click="removeRepo(repo)" :data-repo="repo.name" class="close">
-                <i class="material-icons">delete</i>
-              </button>
-            </b-list-group-item>
-          </b-list-group>
-        </div>
-        <div class="col-3" />
-      </div>
-      <div class="row">
-        <div class="col-3" />
-        <div ref="content" class="global-settings col-6">
-          <h2>HTTP Proxy</h2>
-
-          <b-form-group
-            label="Proxy URL:"
-            label-for="input-https-proxy"
-            description="Proxy is used only for non-cluster communication."
-          >
-            <b-form-input
-              id="input-https-proxy"
-              v-model="preferences.httpsProxy"
-              trim
-              @blur="onSave"
-              placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
-            />
-          </b-form-group>
-          <h2>Certificate Trust</h2>
-          <b-form-group
-            label-for="checkbox-allow-untrusted-cas"
-            description="This will make Lens to trust ANY certificate authority without any validations. Needed with some corporate proxies that do certificate re-writing. Does not affect cluster communications!"
-          >
-            <b-form-checkbox
-              id="checkbox-allow-untrusted-cas"
-              switch
-              v-model="preferences.allowUntrustedCAs"
-              @input="onSave"
-            >
-              Allow untrusted Certificate Authorities
-            </b-form-checkbox>
-          </b-form-group>
-          <h2>Telemetry & Usage Tracking</h2>
-          <b-form-group
-            label-for="checkbox-allow-telemetry"
-            description="Telemetry & usage data is collected to continuously improve the Lens experience."
-          >
-            <b-form-checkbox
-              id="checkbox-allow-telemetry"
-              switch
-              v-model="preferences.allowTelemetry"
-              @input="onSave"
-            >
-              Allow telemetry & usage tracking
-            </b-form-checkbox>
-          </b-form-group>
-        </div>
-        <div class="col-3" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import request from 'request-promise-native'
-import { globalRequestOpts } from "../../../common/request"
-import ClosePageButton from "@/_vue/components/common/ClosePageButton";
-
-export default {
-  name: 'PreferencesPage',
-  components: {
-    ClosePageButton
-  },
-  data(){
-    return {
-      hubRepositories: [],
-      selectedHubRepo: "",
-      colorThemeOptions: [
-        { value: "dark", text: "Dark" },
-        { value: "light", text: "Light" },
-      ],
-      downloadMirrorOptions: [
-        { value: "default", text: "Default (Google)" },
-        { value: "china", text: "China (Azure)" },
-      ],
-      isHelmProcessing: null,
-    }
-  },
-  computed: {
-    helmRepos: function() {
-      return this.$store.getters.repos;
-    },
-    preferences: function() {
-      return this.$store.getters.preferences;
-    },
-  },
-  methods: {
-    onSave: function() {
-      this.$store.commit("savePreferences", this.preferences);
-    },
-    request: async function(opts) {
-      const o = Object.assign({
-        timeout: 10000,
-        headers: {},
-        resolveWithFullResponse: true,
-        json: true
-      }, globalRequestOpts(opts))
-
-      return await request(o)
-    },
-    repoCompare: function( a, b ) {
-      if ( a.name < b.name ){
-        return -1;
-      }
-      if ( a.name > b.name ){
-        return 1;
-      }
-      return 0;
-    },
-    addHubRepo: async function() {
-      if(!this.selectedHubRepo || this.selectedHubRepo === "") {
-        return
-      }
-      this.isHelmProcessing = true
-      const [name, url ] = this.selectedHubRepo.split("|")
-      await this.$store.dispatch('addHelmRepo', { name, url })
-      this.selectedHubRepo = ""
-      this.isHelmProcessing = false
-    },
-    removeRepo: async function(repo) {
-      await this.$store.dispatch('removeHelmRepo', repo)
-    },
-    loadHubRepositories: async function() {
-      const res = await this.request({ uri: "https://hub.helm.sh/assets/js/repos.json"}).catch((error) => { this.hubRepositories = [] })
-      this.hubRepositories = res.body.data.sort(this.repoCompare).map((repo) => {
-        return {
-          text: repo.name,
-          value: repo.name+"|"+repo.url
-        }
-      })
-    }
-  },
-  created() {
-    this.$store.dispatch('refreshHelmRepos')
-  },
-  mounted: async function() {
-    this.$store.commit("hideMenu");
-    this.loadHubRepositories()
-  },
-  destroyed: function() {
-    this.$store.commit("showMenu");
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-#app > .main-view > .content {
-  left: 70px;
-}
-.lens-preferences {
-  height: 100%;
-  overflow-y: scroll;
-  & input {
-    background-color: #252729 !important;
-    border: 0px !important;
-    color: #87909c !important;
-  }
-  .header {
-    padding-top: 15px;
-  }
-  .close {
-    text-shadow: none;
-  }
-  .list-group-item {
-    background-color: #252729 !important;
-    color: #87909c !important;
-  }
-  & i {
-    color: #87909c !important;
-  }
-}
-
-.global-settings {
-  padding-top: 0.75em;
-}
-</style>
diff --git a/src/renderer/components/+preferences/preferences.scss b/src/renderer/components/+preferences/preferences.scss
index 3f17d95e66..859315cc8a 100644
--- a/src/renderer/components/+preferences/preferences.scss
+++ b/src/renderer/components/+preferences/preferences.scss
@@ -1,9 +1,23 @@
 .Preferences {
-  --flex-gap: #{$padding};
-
   h2 {
     &:not(:first-child) {
       margin-top: $padding * 3;
     }
   }
+
+  .info-block {
+    --flex-gap: #{$padding};
+  }
+
+  .repos {
+    --flex-gap: #{$padding};
+
+    > .title {
+      font-style: italic;
+    }
+
+    .Badge {
+      margin: $padding / 2;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 6902099a69..be86011321 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -1,45 +1,121 @@
 import "./preferences.scss"
 import React, { Fragment } from "react";
 import { observer } from "mobx-react";
+import { action, computed, observable } from "mobx";
 import { t, Trans } from "@lingui/macro";
 import { _i18n } from "../../i18n";
 import { WizardLayout } from "../layout/wizard-layout";
 import { Icon } from "../icon";
 import { Select, SelectOption } from "../select";
-import { ThemeType, userStore } from "../../../common/user-store";
+import { userStore } from "../../../common/user-store";
+import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
 import { Input } from "../input";
 import { Checkbox } from "../checkbox";
-
-type ThemeSelectOption = SelectOption & { type: ThemeType }
+import { Notifications } from "../notifications";
+import { Badge } from "../badge";
+import { Spinner } from "../spinner";
 
 @observer
 export class Preferences extends React.Component {
-  themeOptions: ThemeSelectOption[] = [
-    { value: "kontena-dark", label: <Trans>Dark</Trans>, type: ThemeType.DARK },
-    { value: "kontena-light", label: <Trans>Light</Trans>, type: ThemeType.LIGHT },
+  @observable helmLoading = false;
+  @observable helmUpdating = false;
+  @observable helmRepos: HelmRepo[] = [];
+  @observable helmAddedRepos = observable.map<string, HelmRepo>();
+
+  @observable themeOptions: SelectOption<string>[] = [
+    { value: "kontena-dark", label: <Trans>Dark</Trans> },
+    { value: "kontena-light", label: <Trans>Light</Trans> },
   ]
 
-  downloadMirrorOptions: SelectOption[] = [
+  @observable downloadMirrorOptions: SelectOption<string>[] = [
     { value: "default", label: "Default (Google)" },
     { value: "china", label: "China (Azure)" },
   ]
 
-  onThemeChange = ({ value }: ThemeSelectOption) => {
+  @computed get helmOptions(): SelectOption<HelmRepo>[] {
+    return this.helmRepos.map(repo => ({
+      value: repo,
+      label: repo.name,
+    }))
+  }
+
+  async componentDidMount() {
+    await this.loadHelmRepos();
+  }
+
+  @action
+  async loadHelmRepos() {
+    this.helmLoading = true;
+    try {
+      if (!this.helmRepos.length) {
+        this.helmRepos = await repoManager.loadAvailableRepos(); // via https://helm.sh
+      }
+      const repos = await repoManager.repositories(); // via helm-cli
+      this.helmAddedRepos.clear();
+      repos.forEach(repo => this.helmAddedRepos.set(repo.name, repo));
+    } catch (err) {
+      Notifications.error(err);
+    }
+    this.helmLoading = false;
+  }
+
+  async addRepo(repo: HelmRepo) {
+    try {
+      await repoManager.addRepo(repo);
+      this.helmAddedRepos.set(repo.name, repo);
+    } catch (err) {
+      Notifications.error(<Trans>Adding helm branch <b>{repo.name}</b> has failed: {String(err)}</Trans>)
+    }
+  }
+
+  async removeRepo(repo: HelmRepo) {
+    try {
+      await repoManager.removeRepo(repo);
+      this.helmAddedRepos.delete(repo.name);
+    } catch (err) {
+      Notifications.error(
+        <Trans>Removing helm branch <b>{repo.name}</b> has failed: {String(err)}</Trans>
+      )
+    }
+  }
+
+  onThemeChange = ({ value }: SelectOption<string>) => {
     // themeStore.setTheme(value); // fixme: apply theme on the fly for current view
     userStore.preferences.colorTheme = value;
   }
 
+  onRepoSelect = async ({ value: repo }: SelectOption<HelmRepo>) => {
+    const isAdded = this.helmAddedRepos.has(repo.name);
+    if (isAdded) {
+      Notifications.ok(<Trans>Helm branch <b>{repo.name}</b> already in use</Trans>)
+      return;
+    }
+    this.helmUpdating = false;
+    await this.addRepo(repo);
+    this.helmUpdating = false;
+  }
+
+  formatHelmOptionLabel = ({ value: repo }: SelectOption<HelmRepo>) => {
+    const isAdded = this.helmAddedRepos.has(repo.name);
+    return (
+      <div className="flex gaps">
+        <span>{repo.name}</span>
+        {isAdded && <Icon small material="check" className="box right"/>}
+      </div>
+    )
+  }
+
   renderInfo() {
     return (
       <Fragment>
         <h2>
           <Trans>Preferences</Trans>
         </h2>
-        <div className="info-block flex gaps align-center">
+        <div className="info-block flex gaps align-flex-start">
           <Icon small material="info"/>
-          <small>
+          <p>
             <Trans>Lens Global Settings</Trans> (<Trans>applicable to all clusters</Trans>)
-          </small>
+          </p>
         </div>
       </Fragment>
     )
@@ -58,15 +134,41 @@ export class Preferences extends React.Component {
 
         <h2><Trans>Download Mirror</Trans></h2>
         <Select
-          placeholder={_i18n._(t`Download mirror for kubectl`)}
+          placeholder={<Trans>Download mirror for kubectl</Trans>}
           options={this.downloadMirrorOptions}
           value={preferences.downloadMirror}
           onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
         />
 
         <h2><Trans>Helm</Trans></h2>
-        <div className="helm">
-          // todo: added helm repos
+        <Select
+          placeholder={<Trans>Repositories</Trans>}
+          isLoading={this.helmLoading}
+          isDisabled={this.helmUpdating}
+          options={this.helmOptions}
+          onChange={this.onRepoSelect}
+          formatOptionLabel={this.formatHelmOptionLabel}
+          controlShouldRenderValue={false}
+        />
+        <div className="repos flex gaps align-center">
+          <div className="title">
+            <Trans>Added repos:</Trans>
+          </div>
+          <div className="repos-list">
+            {this.helmLoading && <Spinner/>}
+            {Array.from(this.helmAddedRepos).map(([name, repo]) => {
+              return (
+                <Badge key={name} className="added-repo flex gaps align-center">
+                  <span className="repo">{name}</span>
+                  <Icon
+                    material="remove_circle_outline"
+                    onClick={() => this.removeRepo(repo)}
+                    tooltip={<Trans>Remove</Trans>}
+                  />
+                </Badge>
+              )
+            })}
+          </div>
         </div>
 
         <h2><Trans>HTTP Proxy</Trans></h2>
diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx
index f443edf9ee..b51746a871 100644
--- a/src/renderer/components/badge/badge.tsx
+++ b/src/renderer/components/badge/badge.tsx
@@ -5,8 +5,8 @@ import { cssNames } from "../../utils/cssNames";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 
 interface Props extends React.HTMLAttributes<any>, TooltipDecoratorProps {
-  label: React.ReactNode;
   small?: boolean;
+  label?: React.ReactNode;
 }
 
 @withTooltip
diff --git a/src/renderer/components/layout/wizard-layout.scss b/src/renderer/components/layout/wizard-layout.scss
index 06d126bab2..e816fcf91a 100644
--- a/src/renderer/components/layout/wizard-layout.scss
+++ b/src/renderer/components/layout/wizard-layout.scss
@@ -7,9 +7,13 @@
   display: grid;
   grid-template-columns: 1fr 40%;
 
-  > .content-col {
+  > * {
+    @include hidden-scrollbar;
     --flex-gap: #{$spacing};
     padding: $spacing;
+  }
+
+  > .content-col {
     margin-right: $spacing;
     background-color: var(--clusters-menu-bgc);
     border-radius: $radius;
@@ -22,9 +26,6 @@
   }
 
   > .info-col {
-    @include hidden-scrollbar;
-    --flex-gap: #{$spacing};
-    padding: $spacing;
     border-left: 1px solid #353a3e;
   }
 
diff --git a/src/renderer/theme.store.ts b/src/renderer/theme.store.ts
index 42ecc84eae..8cddaf3874 100644
--- a/src/renderer/theme.store.ts
+++ b/src/renderer/theme.store.ts
@@ -1,126 +1,20 @@
 import { action, autorun, computed, observable, reaction } from "mobx";
 import { autobind, createStorage } from "./utils";
 import { Notifications } from "./components/notifications";
-
-interface ITheme {
-  name: string;
-  type: "dark" | "light";
-  author?: string;
-  colors?: {
-    [key: string]: string;
-    blue: string;
-    magenta: string;
-    golden: string;
-    halfGray: string;
-    primary: string;
-    textColorPrimary: string;
-    textColorSecondary: string;
-    textColorAccent: string;
-    borderColor: string;
-    borderFaintColor: string;
-    mainBackground: string;
-    contentColor: string;
-    layoutBackground: string;
-    layoutTabsBackground: string;
-    layoutTabsActiveColor: string;
-    layoutTabsLineColor: string;
-    sidebarLogoBackground: string;
-    sidebarActiveColor: string;
-    sidebarSubmenuActiveColor: string;
-    sidebarBackground: string;
-    buttonPrimaryBackground: string;
-    buttonDefaultBackground: string;
-    buttonAccentBackground: string;
-    buttonDisabledBackground: string;
-    tableBgcStripe: string;
-    tableBgcSelected: string;
-    tableHeaderBackground: string;
-    tableHeaderBorderWidth: string;
-    tableHeaderBorderColor: string;
-    tableHeaderColor: string;
-    tableSelectedRowColor: string;
-    helmLogoBackground: string;
-    helmImgBackground: string;
-    helmStableRepo: string;
-    helmIncubatorRepo: string;
-    helmDescriptionHr: string;
-    helmDescriptionBlockqouteColor: string;
-    helmDescriptionBlockqouteBorder: string;
-    helmDescriptionBlockquoteBackground: string;
-    helmDescriptionHeaders: string;
-    helmDescriptionH6: string;
-    helmDescriptionTdBorder: string;
-    helmDescriptionTrBackground: string;
-    helmDescriptionCodeBackground: string;
-    helmDescriptionPreBackground: string;
-    helmDescriptionPreColor: string;
-    colorSuccess: string;
-    colorOk: string;
-    colorInfo: string;
-    colorError: string;
-    colorSoftError: string;
-    colorWarning: string;
-    colorVague: string;
-    colorTerminated: string;
-    dockHeadBackground: string;
-    dockInfoBackground: string;
-    dockInfoBorderColor: string;
-    terminalBackground: string;
-    terminalForeground: string;
-    terminalCursor: string;
-    terminalCursorAccent: string;
-    terminalSelection: string;
-    terminalBlack: string;
-    terminalRed: string;
-    terminalGreen: string;
-    terminalYellow: string;
-    terminalBlue: string;
-    terminalMagenta: string;
-    terminalCyan: string;
-    terminalWhite: string;
-    terminalBrightBlack: string;
-    terminalBrightRed: string;
-    terminalBrightGreen: string;
-    terminalBrightYellow: string;
-    terminalBrightBlue: string;
-    terminalBrightMagenta: string;
-    terminalBrightCyan: string;
-    terminalBrightWhite: string;
-    dialogTextColor: string;
-    dialogBackground: string;
-    dialogHeaderBackground: string;
-    dialogFooterBackground: string;
-    drawerTogglerBackground: string;
-    drawerTitleText: string;
-    drawerSubtitleBackground: string;
-    drawerItemNameColor: string;
-    drawerItemValueColor: string;
-    boxShadow: string;
-    iconActiveColor: string;
-    iconActiveBackground: string;
-    filterAreaBackground: string;
-    chartLiveBarBackgound: string;
-    chartStripesColor: string;
-    chartCapacityColor: string;
-    pieChartDefaultColor: string;
-    selectOptionHoveredColor: string;
-    lineProgressBackground: string;
-    radioActiveBackground: string;
-  };
-}
+import { Theme, ThemeType } from "../common/user-store";
 
 @autobind()
 export class ThemeStore {
   protected style = document.createElement("style");
 
-  readonly defaultTheme: ITheme = {
+  readonly defaultTheme: Theme = {
     name: "kontena-dark",
-    type: "dark",
-    colors: {} as any,
+    type: ThemeType.DARK,
+    colors: {},
   };
 
   @observable activeThemeId = this.defaultTheme.name; // theme's filename without extension
-  @observable themes = observable.map<string, ITheme>([], { deep: false });
+  @observable themes = observable.map<string, Theme>([], { deep: false });
 
   @computed get activeTheme() {
     return this.themes.get(this.activeThemeId) || this.defaultTheme;
@@ -157,7 +51,7 @@ export class ThemeStore {
     })
   }
 
-  protected onChange = (theme: ITheme) => {
+  protected onChange = (theme: Theme) => {
     let cssText = "\n"
     Object.entries(theme.colors).forEach(([propName, color]) => {
       cssText += `--${propName}: ${color} !important;\n`
@@ -165,12 +59,12 @@ export class ThemeStore {
     this.style.textContent = `:root {${cssText}} `;
   }
 
-  async load(themeId: string, { showErrorNotification = true } = {}): Promise<ITheme> {
+  async load(themeId: string, { showErrorNotification = true } = {}): Promise<Theme> {
     if (this.themes.has(themeId)) {
       return this.themes.get(themeId);
     }
     try {
-      const theme: ITheme = require( // eslint-disable-line @typescript-eslint/no-var-requires
+      const theme: Theme = require( // eslint-disable-line @typescript-eslint/no-var-requires
         /* webpackMode: "lazy", webpackChunkName: "theme/[request]" */
         `./themes/${themeId}.json`
       );