Native switch component (#4610)

* Switch component initial draft

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

* Add onClick event

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

* onClick fine-tunings

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

* Fine-tuning styles

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

* Adding tests

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

* Fix light theme thumb color

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

* Using native switch in places

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

* Removing material ui switcher

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

* Revert "Removing material ui switcher"

This reverts commit 6b9e0a090c.

* Mark Switcher and FormSwitch as deprecated

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

* Cleaning up

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

* Using theme-light mixin

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

* Fix fetching values from onChange callback

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

* Add custon onChange event with checked prop

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

* Check for onChange() availability

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

* Fix show minimap label

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

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

@@ -27,7 +27,7 @@ import { ThemeStore } from "../../theme.store";
 import { UserStore } from "../../../common/user-store";
 import { Input } from "../input";
 import { isWindows } from "../../../common/vars";
-import { FormSwitch, Switcher } from "../switch";
+import { Switch } from "../switch";
 import moment from "moment-timezone";
 import { CONSTANTS, defaultExtensionRegistryUrl, ExtensionRegistryLocation } from "../../../common/user-store/preferences-helpers";
 import { action } from "mobx";
@@ -86,16 +86,12 @@ export const Application = observer(() => {
 
       <section id="terminalSelection">
         <SubTitle title="Terminal copy & paste" />
-        <FormSwitch
-          label="Copy on select and paste on right-click"
-          control={
-            <Switcher
-              checked={userStore.terminalCopyOnSelect}
-              onChange={v => userStore.terminalCopyOnSelect = v.target.checked}
-              name="terminalCopyOnSelect"
-            />
-          }
-        />
+        <Switch
+          checked={userStore.terminalCopyOnSelect}
+          onChange={() => userStore.terminalCopyOnSelect = !userStore.terminalCopyOnSelect}
+        >
+          Copy on select and paste on right-click
+        </Switch>
       </section>
 
       <hr/>
@@ -135,16 +131,9 @@ export const Application = observer(() => {
 
       <section id="other">
         <SubTitle title="Start-up"/>
-        <FormSwitch
-          control={
-            <Switcher
-              checked={userStore.openAtLogin}
-              onChange={v => userStore.openAtLogin = v.target.checked}
-              name="startup"
-            />
-          }
-          label="Automatically start Lens on login"
-        />
+        <Switch checked={userStore.openAtLogin} onChange={() => userStore.openAtLogin = !userStore.openAtLogin}>
+          Automatically start Lens on login
+        </Switch>
       </section>
 
       <hr />

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

@@ -21,7 +21,7 @@
 import { observer } from "mobx-react";
 import React from "react";
 import { UserStore } from "../../../common/user-store";
-import { FormSwitch, Switcher } from "../switch";
+import { Switch } from "../switch";
 import { Select } from "../select";
 import { SubTitle } from "../layout/sub-title";
 import { SubHeader } from "../layout/sub-header";
@@ -45,15 +45,12 @@ export const Editor = observer(() => {
       <section>
         <div className="flex gaps justify-space-between">
           <div className="flex gaps align-center">
-            <FormSwitch
-              label={<SubHeader compact>Show minimap</SubHeader>}
-              control={
-                <Switcher
-                  checked={editorConfiguration.minimap.enabled}
-                  onChange={(evt, checked) => editorConfiguration.minimap.enabled = checked}
-                />
-              }
-            />
+            <Switch
+              checked={editorConfiguration.minimap.enabled}
+              onChange={() => editorConfiguration.minimap.enabled = !editorConfiguration.minimap.enabled}
+            >
+              Show minimap
+            </Switch>
           </div>
           <div className="flex gaps align-center">
             <SubHeader compact>Position</SubHeader>

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

@@ -26,7 +26,7 @@ import { getDefaultKubectlDownloadPath, UserStore } from "../../../common/user-s
 import { observer } from "mobx-react";
 import { bundledKubectlPath } from "../../../main/kubectl";
 import { SelectOption, Select } from "../select";
-import { FormSwitch, Switcher } from "../switch";
+import { Switch } from "../switch";
 import { packageMirrors } from "../../../common/user-store/preferences-helpers";
 
 export const KubectlBinaries = observer(() => {
@@ -48,16 +48,12 @@ export const KubectlBinaries = observer(() => {
     <>
       <section>
         <SubTitle title="Kubectl binary download"/>
-        <FormSwitch
-          control={
-            <Switcher
-              checked={userStore.downloadKubectlBinaries}
-              onChange={v => userStore.downloadKubectlBinaries = v.target.checked}
-              name="kubectl-download"
-            />
-          }
-          label="Download kubectl binaries matching the Kubernetes cluster version"
-        />
+        <Switch
+          checked={userStore.downloadKubectlBinaries}
+          onChange={() => userStore.downloadKubectlBinaries = !userStore.downloadKubectlBinaries}
+        >
+          Download kubectl binaries matching the Kubernetes cluster version
+        </Switch>
       </section>
 
       <section>

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

@@ -24,10 +24,11 @@ import React from "react";
 import { UserStore } from "../../../common/user-store";
 import { Input } from "../input";
 import { SubTitle } from "../layout/sub-title";
-import { FormSwitch, Switcher } from "../switch";
+import { Switch } from "../switch";
 
 export const LensProxy = observer(() => {
   const [proxy, setProxy] = React.useState(UserStore.getInstance().httpsProxy || "");
+  const store = UserStore.getInstance();
 
   return (
     <section id="proxy">
@@ -50,16 +51,9 @@ export const LensProxy = observer(() => {
 
       <section className="small">
         <SubTitle title="Certificate Trust"/>
-        <FormSwitch
-          control={
-            <Switcher
-              checked={UserStore.getInstance().allowUntrustedCAs}
-              onChange={v => UserStore.getInstance().allowUntrustedCAs = v.target.checked}
-              name="startup"
-            />
-          }
-          label="Allow untrusted Certificate Authorities"
-        />
+        <Switch checked={store.allowUntrustedCAs} onChange={() => store.allowUntrustedCAs = !store.allowUntrustedCAs}>
+          Allow untrusted Certificate Authorities
+        </Switch>
         <small className="hint">
           This will make Lens to trust ANY certificate authority without any validations.{" "}
           Needed with some corporate proxies that do certificate re-writing.{" "}