From edd5d54e4996bf00c059a9d96fc7a6df7f5ce062 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 25 Aug 2022 16:18:58 +0300
Subject: [PATCH] Replace deprecated <FormSwitcher/> in metrics-cluster-feature
 extension (#6060)

* Use new <Switch/> inside deprecated material switcher

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

* Clean up material UI (except types) from FormSwitch

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

* Fix button size in Metrics Settings

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

* Remove material-ui references from

<Switcher/> & <FormSwitcher/>

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

* Change to newer <Switch/> component

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

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../src/metrics-settings.tsx                  | 87 +++++++++----------
 .../components/switch/form-switcher.tsx       | 33 ++-----
 src/renderer/components/switch/switcher.tsx   | 79 ++++-------------
 3 files changed, 65 insertions(+), 134 deletions(-)

diff --git a/extensions/metrics-cluster-feature/src/metrics-settings.tsx b/extensions/metrics-cluster-feature/src/metrics-settings.tsx
index 3f20a80df1..bfbeb3e10b 100644
--- a/extensions/metrics-cluster-feature/src/metrics-settings.tsx
+++ b/extensions/metrics-cluster-feature/src/metrics-settings.tsx
@@ -15,7 +15,7 @@ const {
     forCluster, StatefulSet, DaemonSet, Deployment,
   },
   Component: {
-    SubTitle, FormSwitch, Switcher, Button,
+    SubTitle, Switch, Button,
   },
 } = Renderer;
 
@@ -207,17 +207,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
         )}
         <section>
           <SubTitle title="Prometheus" />
-          <FormSwitch
-            control={(
-              <Switcher
-                disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
-                checked={!!this.featureStates.prometheus && this.props.cluster.status.phase == "connected"}
-                onChange={v => this.togglePrometheus(v.target.checked)}
-                name="prometheus"
-              />
-            )}
-            label="Enable bundled Prometheus metrics stack"
-          />
+          <Switch
+            disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
+            checked={!!this.featureStates.prometheus && this.props.cluster.status.phase == "connected"}
+            onChange={checked => this.togglePrometheus(checked)}
+            name="prometheus"
+          >
+            Enable bundled Prometheus metrics stack
+          </Switch>
           <small className="hint">
             Enable timeseries data visualization (Prometheus stack) for your cluster.
           </small>
@@ -225,17 +222,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
 
         <section>
           <SubTitle title="Kube State Metrics" />
-          <FormSwitch
-            control={(
-              <Switcher
-                disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
-                checked={!!this.featureStates.kubeStateMetrics && this.props.cluster.status.phase == "connected"}
-                onChange={v => this.toggleKubeStateMetrics(v.target.checked)}
-                name="node-exporter"
-              />
-            )}
-            label="Enable bundled kube-state-metrics stack"
-          />
+          <Switch
+            disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
+            checked={!!this.featureStates.kubeStateMetrics && this.props.cluster.status.phase == "connected"}
+            onChange={checked => this.toggleKubeStateMetrics(checked)}
+            name="kube-state-metrics"
+          >
+            Enable bundled kube-state-metrics stack
+          </Switch>
           <small className="hint">
             Enable Kubernetes API object metrics for your cluster.
             Enable this only if you don&apos;t have existing kube-state-metrics stack installed.
@@ -244,17 +238,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
 
         <section>
           <SubTitle title="Node Exporter" />
-          <FormSwitch
-            control={(
-              <Switcher
-                disabled={this.featureStates.nodeExporter === undefined || !this.isTogglable}
-                checked={!!this.featureStates.nodeExporter && this.props.cluster.status.phase == "connected"}
-                onChange={v => this.toggleNodeExporter(v.target.checked)}
-                name="node-exporter"
-              />
-            )}
-            label="Enable bundled node-exporter stack"
-          />
+          <Switch
+            disabled={this.featureStates.nodeExporter === undefined || !this.isTogglable}
+            checked={!!this.featureStates.nodeExporter && this.props.cluster.status.phase == "connected"}
+            onChange={checked => this.toggleNodeExporter(checked)}
+            name="node-exporter"
+          >
+            Enable bundled node-exporter stack
+          </Switch>
           <small className="hint">
             Enable node level metrics for your cluster.
             Enable this only if you don&apos;t have existing node-exporter stack installed.
@@ -262,20 +253,22 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
         </section>
 
         <section>
-          <Button
-            label={this.buttonLabel}
-            waiting={this.inProgress}
-            onClick={() => this.save()}
-            primary
-            disabled={!this.changed}
-            className="w-60 h-14"
-          />
+          <div>
+            <Button
+              primary
+              label={this.buttonLabel}
+              waiting={this.inProgress}
+              onClick={() => this.save()}
+              disabled={!this.changed}
+              style={{ width: "20ch", padding: "0.5rem" }}
+            />
 
-          {this.canUpgrade && (
-            <small className="hint">
-              An update is available for enabled metrics components.
-            </small>
-          )}
+            {this.canUpgrade && (
+              <small className="hint">
+                An update is available for enabled metrics components.
+              </small>
+            )}
+          </div>
         </section>
       </>
     );
diff --git a/src/renderer/components/switch/form-switcher.tsx b/src/renderer/components/switch/form-switcher.tsx
index 8f2a8a231c..d2a069a771 100644
--- a/src/renderer/components/switch/form-switcher.tsx
+++ b/src/renderer/components/switch/form-switcher.tsx
@@ -4,34 +4,19 @@
  */
 
 import React from "react";
-import type { FormControlLabelProps } from "@material-ui/core/FormControlLabel";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import { makeStyles } from "@material-ui/styles";
 
-const useStyles = makeStyles({
-  root: {
-    margin: 0,
-    "& .MuiTypography-root": {
-      fontSize: 14,
-      fontWeight: 500,
-      flex: 1,
-      color: "var(--textColorAccent)",
-    },
-  },
-});
+interface FormControlLabelProps {
+  control: React.ReactElement<any, any>;
+  label: React.ReactNode;
+}
 
 /**
  * @deprecated Use <Switch/> instead from "../switch.tsx".
  */
-export function FormSwitch(props: FormControlLabelProps) {
-  const classes = useStyles();
+export function FormSwitch(props: FormControlLabelProps & { children?: React.ReactNode }) {
+  const ClonedElement = React.cloneElement(props.control, {
+    children: <span>{props.label}</span>,
+  });
 
-  return (
-    <FormControlLabel
-      control={props.control}
-      labelPlacement="start"
-      label={props.label}
-      className={classes.root}
-    />
-  );
+  return ClonedElement;
 }
diff --git a/src/renderer/components/switch/switcher.tsx b/src/renderer/components/switch/switcher.tsx
index 21b2cddb22..e30e63ccf5 100644
--- a/src/renderer/components/switch/switcher.tsx
+++ b/src/renderer/components/switch/switcher.tsx
@@ -4,75 +4,28 @@
  */
 
 import React from "react";
-import type { Theme } from "@material-ui/core/styles";
-import { createStyles, withStyles } from "@material-ui/core/styles";
-import type { SwitchClassKey, SwitchProps } from "@material-ui/core/Switch";
-import Switch from "@material-ui/core/Switch";
+import { Switch } from "./switch";
 
-interface Styles extends Partial<Record<SwitchClassKey, string>> {
-  focusVisible?: string;
-}
-
-export interface SwitcherProps extends SwitchProps {
-  classes: Styles;
+export interface SwitcherProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+  checked?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  name?: string;
 }
 
 /**
  * @deprecated Use <Switch/> instead from "../switch.tsx".
  */
-export const Switcher = withStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: 40,
-      height: 24,
-      padding: 0,
-      margin: "0 0 0 8px",
-    },
-    switchBase: {
-      padding: 1,
-      paddingLeft: 4,
-      "&$checked": {
-        transform: "translateX(14px)",
-        color: "white",
-        "& + $track": {
-          backgroundColor: "#52d869",
-          opacity: 1,
-          border: "none",
-        },
-      },
-      "&$focusVisible $thumb": {
-        color: "#52d869",
-        border: "6px solid #fff",
-      },
-    },
-    thumb: {
-      width: 18,
-      height: 18,
-      marginTop: 2,
-      boxShadow: "none",
-    },
-    track: {
-      borderRadius: 26 / 2,
-      backgroundColor: "#72767b",
-      opacity: 1,
-      transition: theme.transitions.create(["background-color", "border"]),
-    },
-    checked: {},
-    focusVisible: {},
-  }),
-)(({ classes, ...props }: SwitcherProps) => {
+export function Switcher({ disabled, checked, onChange, name, children }: SwitcherProps) {
   return (
     <Switch
-      focusVisibleClassName={classes.focusVisible}
-      disableRipple
-      classes={{
-        root: classes.root,
-        switchBase: classes.switchBase,
-        thumb: classes.thumb,
-        track: classes.track,
-        checked: classes.checked,
-      }}
-      {...props}
-    />
+      disabled={disabled}
+      checked={checked}
+      name={name}
+      onChange={(checked, event) => onChange?.(event, checked)}
+    >
+      {children}
+    </Switch>
   );
-});
+}